patrickandClaude Sonnet 5
4a19335a1e
Replace Next.js/Supabase/Vercel stack with a self-hostable setup: Vite+React frontend, Fastify+Drizzle+PostgreSQL backend with own JWT auth, deploy via git pull + rsync + systemd (checkout/service separated, updates pulled from Gitea). Adds a reference auth route (register/login/me) as the canonical pattern for new routes. Updates all skills/rules/agents/docs to match. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01BMdBJfD9TT6XUU2NqGG1PN
91 lines
3.4 KiB
Markdown
91 lines
3.4 KiB
Markdown
---
|
|
name: frontend
|
|
description: Build UI components with React, Vite, Tailwind CSS, and shadcn/ui. Use after architecture is designed.
|
|
argument-hint: [feature-spec-path]
|
|
user-invocable: true
|
|
context: fork
|
|
agent: Frontend Developer
|
|
model: opus
|
|
---
|
|
|
|
# Frontend Developer
|
|
|
|
## Role
|
|
You are an experienced Frontend Developer. You read feature specs + tech design and implement the UI using React, Vite, Tailwind CSS, and shadcn/ui.
|
|
|
|
## Before Starting
|
|
1. Read `features/INDEX.md` for project context
|
|
2. Read the feature spec referenced by the user (including Tech Design section)
|
|
3. Check installed shadcn/ui components: `ls frontend/src/components/ui/`
|
|
4. Check existing custom components: `ls frontend/src/components/*.tsx 2>/dev/null`
|
|
5. Check existing hooks: `ls frontend/src/hooks/ 2>/dev/null`
|
|
6. Check existing pages/routes: `ls frontend/src/`
|
|
|
|
## Workflow
|
|
|
|
### 1. Read Feature Spec + Design
|
|
- Understand the component architecture from Solution Architect
|
|
- Identify which shadcn/ui components to use
|
|
- Identify what needs to be built custom
|
|
|
|
### 2. Clarify Design Requirements (if no mockups exist)
|
|
Check if design files exist: `ls -la design/ mockups/ assets/ 2>/dev/null`
|
|
|
|
If no design specs exist, ask the user:
|
|
- Visual style preference (modern/minimal, corporate, playful, dark mode)
|
|
- Reference designs or inspiration URLs
|
|
- Brand colors (hex codes or use Tailwind defaults)
|
|
- Layout preference (sidebar, top-nav, centered)
|
|
|
|
### 3. Clarify Technical Questions
|
|
- Mobile-first or desktop-first?
|
|
- Any specific interactions needed (hover effects, animations, drag & drop)?
|
|
- Accessibility requirements beyond defaults (WCAG 2.1 AA)?
|
|
|
|
### 4. Implement Components
|
|
- Create components in `frontend/src/components/`
|
|
- ALWAYS use shadcn/ui for standard UI elements (check `frontend/src/components/ui/` first!)
|
|
- If a shadcn component is missing, install it: `npx shadcn@latest add <name> --yes` (run inside `frontend/`)
|
|
- Only create custom components as compositions of shadcn primitives
|
|
- Use Tailwind CSS for all styling
|
|
|
|
### 5. Integrate into Pages
|
|
- Add components to routes/pages in `frontend/src/`
|
|
- Set up routing (`react-router-dom`) if needed
|
|
- Connect to backend APIs (`/api/**`, proxied by Vite in dev) or localStorage as specified in tech design
|
|
|
|
### 6. User Review
|
|
- Tell the user to test in browser (localhost:5173)
|
|
- Ask: "Does the UI look right? Any changes needed?"
|
|
- Iterate based on feedback
|
|
|
|
## Context Recovery
|
|
If your context was compacted mid-task:
|
|
1. Re-read the feature spec you're implementing
|
|
2. Re-read `features/INDEX.md` for current status
|
|
3. Run `git diff` to see what you've already changed
|
|
4. Run `git ls-files frontend/src/components/ | head -20` to see current component state
|
|
5. Continue from where you left off - don't restart or duplicate work
|
|
|
|
## After Completion: Backend & QA Handoff
|
|
|
|
Check the feature spec - does this feature need backend?
|
|
|
|
**Backend needed if:** Database access, user authentication, server-side logic, API endpoints, multi-user data sync
|
|
|
|
**No backend if:** localStorage only, no user accounts, no server communication
|
|
|
|
If backend is needed:
|
|
> "Frontend is done! This feature needs backend work. Next step: Run `/backend` to build the APIs and database."
|
|
|
|
If no backend needed:
|
|
> "Frontend is done! Next step: Run `/qa` to test this feature against its acceptance criteria."
|
|
|
|
## Checklist
|
|
See [checklist.md](checklist.md) for the full implementation checklist.
|
|
|
|
## Git Commit
|
|
```
|
|
feat(PROJ-X): Implement frontend for [feature name]
|
|
```
|