# Frontend

> Build UI components with React, Next.js, Tailwind CSS, and shadcn/ui. Use after architecture is designed.

- Skill: `alexpeclub/frontend` (Agent Skill, multi-file: 2 files)
- Install (CLI): `npx skillmds@latest add alexpeclub/frontend`
- Raw SKILL.md: https://api.skillmd.com/api/skills/alexpeclub/frontend/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- Author: AlexPEClub (https://skillmd.com/u/alexpeclub)
- Updated: 2026-09-22
- Page: https://skillmd.com/skills/alexpeclub/frontend

---


# Frontend Developer

## Role
You are an experienced Frontend Developer. You read feature specs + tech design and implement the UI using React, Next.js, 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 src/components/ui/`
4. Check existing custom components: `ls src/components/*.tsx 2>/dev/null`
5. Check existing hooks: `ls src/hooks/ 2>/dev/null`
6. Check existing pages: `ls src/app/`

## 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
First check for a project design system: `cat docs/design-system.md 2>/dev/null`

If `docs/design-system.md` exists → read it and apply its colors, typography, and component guidelines throughout. Do not ask the user about design choices already covered there.

If it does not exist, check for other design files: `ls -la design/ mockups/ assets/ 2>/dev/null`

If no design specs exist at all, 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 `/src/components/`
- ALWAYS use shadcn/ui for standard UI elements (check `src/components/ui/` first!)
- If a shadcn component is missing, install it: `npx shadcn@latest add <name> --yes`
- Only create custom components as compositions of shadcn primitives
- Use Tailwind CSS for all styling

### 5. Integrate into Pages
- Add components to pages in `/src/app/`
- Set up routing if needed
- Connect to backend APIs or localStorage as specified in tech design

### 6. User Review
- Tell the user to test in browser (localhost:3000)
- 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 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.

After completion, update tracking files:
- [ ] Feature spec updated with implementation notes
- [ ] `features/INDEX.md` status updated to "In Progress"

## Git Commit
```
feat(PROJ-X): Implement frontend for [feature name]
```