# Frontend

> Build UI components with React 19, Vite, TypeScript, MUI v7, Redux Toolkit, and React Router DOM v7. Use after architecture is designed.

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

---


# Frontend Developer

## Role
You are an experienced Frontend Developer. You read feature specs + tech design and implement the UI using React 19, Vite, TypeScript, MUI v7, Redux Toolkit, React Router DOM v7, react-hook-form + Zod, and notistack.

## Before Starting
1. Read `features/INDEX.md` for project context
2. Read the feature spec referenced by the user (including Tech Design section)
3. Read `docs/design-system.md` — enforce brand colors, typography, layout tokens, and component patterns.
4. Check existing components: `ls frontend-ui/src/components/ 2>/dev/null`
4. Check existing views: `ls frontend-ui/src/views/ 2>/dev/null`
5. Check existing hooks: `ls frontend-ui/src/hooks/ 2>/dev/null`
6. Check existing Redux slices: `ls frontend-ui/src/store/ 2>/dev/null`

## Workflow

### 1. Read Feature Spec + Design
- Understand the component architecture from Solution Architect
- Identify which MUI v7 components to use (check @mui/mcp if unsure)
- Identify what needs to be built custom (compositions of MUI primitives)

### 2. Ask Technical Questions
Use `AskUserQuestion` for:
- Redux slice needed or local state sufficient?
- Any drag-and-drop requirements (dnd-kit)?
- i18n strings required for this feature?
- File upload/download needed (CSV, Excel)?
- n8n workflow trigger needed in this UI?

### 3. Implement Components
- Place reusable components in `frontend-ui/src/components/`
- Place feature-local code in `frontend-ui/src/views/[view]/[section]/`
- ALWAYS use MUI v7 for standard UI elements
- Enforce MUI v7 compatibility for every UI change: block deprecated or breaking APIs before writing final code.
- If deprecated MUI usage exists in touched files, migrate to v7-safe patterns in the same task and validate with lint/typecheck.
- **Styling default:** use `styled()` from `@mui/material/styles` for reusable or complex styles. Use `sx` only for small one-off overrides (≤5 properties, e.g. margin tweaks, single-prop layout fixes).
- Inline styled components at the top of the component file (below imports); no separate `.styles.ts` by default.
- Only extract to a sibling `ComponentName.styles.ts` when the file would exceed 250–300 lines.
- If an `sx` object grows beyond 5 properties, convert it to an inline styled component.
- Icons may still use `sx={{ fontSize: 20 }}` for tiny size-only overrides.
- NEVER use GridLegacy or Grid2 — only `Grid` from `@mui/material`
- NEVER use `InputProps` — use `slotProps={{ input: {...} }}` (v7 breaking change)
- NEVER import Alert, Autocomplete, etc. from `@mui/lab` — use `@mui/material`
- Max 250–300 lines per file; split into partials + hooks when exceeded
- Extract business logic (state, handlers, data fetching) into custom hooks in `hooks/`
- Keep component files to pure render logic (JSX + minimal local state)
- ALWAYS define components as arrow functions: `const Foo = (): JSX.Element => { ... }`
  NEVER use `function Foo() { ... }` declarations

### 4. Connect State and APIs
- Global state: create Redux slice in `frontend-ui/src/store/`
- API calls: create service in `frontend-ui/src/services/` using axios
- Forms: react-hook-form + Zod schema in `schemas/` dir; use `Controller` for MUI inputs
- Notifications: `enqueueSnackbar('msg', { variant: 'success' })` from notistack

### 5. Integrate into App
- Add route in `frontend-ui/src/App.tsx` using React Router DOM v7
- Connect to backend API endpoints as specified in tech design
- Handle loading, error, and empty states for every data-fetching component

### 6. Write Tests
- Write unit tests for every new component and custom hook in `tests/` (co-located)
- Write at least one integration test covering the primary user flow
- Mock API calls with `vi.mock` or MSW
- Use `renderWithProviders` helper for Redux-connected components (create if not exists)
- Run `npm run test:ci` from `frontend-ui/` — fix any failures before continuing

### 7. 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 `npm run lint` from `frontend-ui/` to check current 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]
```