5c9b4333da
- Add .shared/prompts/ with tool-neutral prompts - Add .opencode/config/project.md, rules/, skills/ from opencode-kit - Add .codex/config/project.md from codex-kit - Copy .shared/prompts/ to both .opencode/prompts/ and .codex/prompts/ - Add features/INDEX.md and features/README.md - Update README with unified structure The two original starter kits are now redundant.
59 lines
1.5 KiB
Markdown
59 lines
1.5 KiB
Markdown
---
|
|
name: frontend
|
|
description: Builds UI components with React, Tailwind CSS, and shadcn/ui
|
|
category: 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 |