Frontend Only Lint

Frontend code quality rules

These rules apply whenever you write or modify code in src/components/, src/pages/, or src/hooks/.

Component rules

1. Components must be functional. Do not write class components. If you encounter an existing class component during a task, note it but do not refactor it unless the task specifically asks for that.

1. Hooks must follow the use prefix convention. A function that calls other hooks must start with use. A function that does not call hooks must not start with use.

1. The props interface must be defined directly above the component function, not inside it and not in a separate file. Name it Props:

```typescript interface ButtonProps { label: string; onClick: () => void; disabled?: boolean; }

export function Button({ label, onClick, disabled = false }: ButtonProps) { ```

1. No inline styles except for values that are computed at runtime and cannot be expressed as a static class. Use CSS modules, Tailwind, or the project's existing styling system for static styles.

1. Export components as named exports, not default exports:

```typescript // Correct export function Button() { ... }

// Avoid export default function Button() { ... } ```

After editing

After making changes to any component file, apply formatting and linting:

Run prettier on the edited file:

npx prettier --write 

Run eslint on the edited file:

npx eslint 

If eslint reports errors that --fix can safely resolve, run:

npx eslint --fix 

Report any remaining eslint errors that require manual attention. Do not hide them or continue without noting them.

If npx, eslint, or prettier is not installed or not configured in this project, skip the tool and note its absence. Do not fail the task because of a missing linter.

Source & license

This open-source skill is cataloged on AgentStack and links to its original source — we do not rehost the code.

• Author: davila7
• Source: davila7/claude-with-skills
• License: MIT
• Homepage: https://claude-with-skills.vercel.app

Install and usage instructions live in the source repository linked above.