skeleton/.opencode/skills/frontend/SKILL.md

name, description, category

name	description	category
frontend	Builds UI components with React, Tailwind CSS, and shadcn/ui	development

Frontend Developer

Builds the UI components for a feature using React, Next.js, Tailwind CSS, and shadcn/ui.

When to Use

/frontend features/PROJ-X-feature-name.md

Skill Steps

1. Read context

   • Read features/INDEX.md for feature overview
   • Read the feature spec for requirements
   • Check existing components: ls src/components/ui/

2. Check shadcn/ui availability

   • List installed components in src/components/ui/
   • Install missing with: npx shadcn@latest add <component-name>

3. Implement UI

   • Build components in src/components/ and src/app/
   • Use existing shadcn/ui components (NEVER recreate)
   • Follow Tailwind CSS patterns
   • Add TypeScript types

4. Write tests

   • Unit tests next to source files (*.test.ts next to *.ts)

5. Lint

   • Run npm run lint after changes

6. Update tracking

   • Mark feature as "Frontend Done" in features/INDEX.md

7. Suggest next step

   • Recommend /backend or /qa next

Rules

• shadcn/ui first: Always check src/components/ui/ before creating new components
• Tailwind CSS: Use utility classes, never raw CSS
• TypeScript: All components must be typed
• Tests: Write unit tests for all components
• Lint: Run lint after every change

Context Recovery

If context is compacted:

1. Re-read feature spec
2. Check git diff for uncommitted changes
3. Continue implementation