How to actually
create a skill.

---
name: react-component-standards
description: React component standards for frontend UI files. Use when
  creating or editing React components, presentational patterns, or
  anything under src/components.
globs: src/components/**/*.tsx, src/components/**/*.ts
alwaysApply: false
---

# React Component Guidelines

When writing or reviewing React components, enforce:

1. **Component type**: functional components only — no class components
2. **Props**: define a typed 'interface' at the top of the file
3. **Exports**: named exports only; never default-export components
4. **Styling**: Tailwind utility classes; avoid inline 'style={}' objects
5. **Server state**: use TanStack Query; never 'useEffect' + 'fetch'

## Example

❌ Bad:  'export default function card(props: any) { ... }'
✅ Good: 'export function Card({ title, onSelect }: CardProps) { ... }'

@component-template.tsx

---
name: review-react-hooks
description: When reviewing or writing React custom hooks — functions
  prefixed with 'use', files under src/hooks, or any code that calls
  useState, useEffect, useMemo, or useCallback.
---

# React Hooks Review

When reviewing React hooks, check for:

1. **Naming**: custom hooks must start with 'use' (e.g. 'useAuth', 'useCart')
2. **Rules of Hooks**: never call hooks inside loops, conditions, or nested functions
3. **Dependencies**: every value referenced inside 'useEffect'/'useMemo'/'useCallback' must appear in the deps array
4. **Cleanup**: any subscription, timer, or abort controller must return a cleanup function
5. **Return shape**: return a stable object or tuple — not a new reference on every render

## Example

❌ Bad:  'useEffect(() => { fetchUser(id) }, [])'  // missing dep
✅ Good: 'useEffect(() => { const c = new AbortController(); fetchUser(id, c.signal); return () => c.abort(); }, [id])'

---
name: a11y-audit
description: Audits React components for WCAG 2.1 AA accessibility issues —
  semantic HTML, ARIA attributes, keyboard navigation, and color contrast.
  Use when the user asks for an accessibility review or types @a11y-audit.
---

# Accessibility Audit for React

When auditing a React component, verify:

1. **Semantic HTML**: use '<button>', '<nav>', '<main>' — never '<div onClick>' for interactive controls
2. **Keyboard support**: all interactive elements must be reachable by 'Tab' and activatable with 'Enter'/'Space'
3. **ARIA labels**: icon-only buttons need 'aria-label'; form fields need a '<label>' or 'aria-labelledby'
4. **Focus management**: visible focus outline; modals trap focus and return it on close
5. **Images**: every '<img>' has a meaningful 'alt' or 'alt=""' for decorative images

## Example

❌ Bad:  '<div onClick={close}>×</div>'
✅ Good: '<button type="button" aria-label="Close dialog" onClick={close}>×</button>'