# Frontend Only Lint

> Apply frontend code quality rules for React and TypeScript components. Auto-activates when editing component files.

- **Type:** Skill
- **Install:** `agentstack add skill-davila7-claude-with-skills-frontend-only-lint`
- **Verified:** Yes — security-reviewed for prompt injection and unsafe behavior
- **Seller:** [davila7](https://agentstack.voostack.com/s/davila7)
- **Installs:** 0
- **Category:** [Agent Skills](https://agentstack.voostack.com/c/agent-skills)
- **Latest version:** 0.1.0
- **License:** MIT
- **Upstream author:** [davila7](https://github.com/davila7)
- **Source:** https://github.com/davila7/claude-with-skills/tree/main/src/content/docs/02-intermediate/lesson-06-paths-and-shell/examples/frontend-only-lint
- **Website:** https://claude-with-skills.vercel.app

## Install

```sh
agentstack add skill-davila7-claude-with-skills-frontend-only-lint
```

Requires the [AgentStack CLI](https://agentstack.voostack.com/docs/cli). Works with Claude Code, Cursor, and any MCP-compatible agent.

## About

## 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.

2. 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`.

3. 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) {
   ```

4. 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.

5. 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](https://github.com/davila7)
- **Source:** [davila7/claude-with-skills](https://github.com/davila7/claude-with-skills)
- **License:** MIT
- **Homepage:** https://claude-with-skills.vercel.app

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

## Pricing

- **Free** — Free

## Security capabilities

Automated source analysis of v0.1.0 — what this tool can access:

- **Network access:** no
- **Filesystem access:** no
- **Shell / process execution:** no
- **Environment & secrets:** no
- **Dynamic code execution:** no

*"Yes" means the capability is present in the source — more access means more to trust, not that it is unsafe.*


## Versions

- **0.1.0** — security scan: passed — Imported from the upstream source.

## Links

- Listing page: https://agentstack.voostack.com/l/skill-davila7-claude-with-skills-frontend-only-lint
- Seller: https://agentstack.voostack.com/s/davila7
- Browse the marketplace: https://agentstack.voostack.com/browse

---
Listed on AgentStack — the marketplace for AI agent skills and MCP servers. Every listing is security-reviewed. Creators keep 70%.