Frontend development
Skill martian56/claude-engineer/plugins/claude-engineer/skills/frontend-development
Claude Code marketplace and home of claude-engineer: an opinionated, design-system-first, plan-gated autonomous engineer for full greenfield React/Next and FastAPI projects.
npx -y skills add martian56/claude-engineer --skill frontend-developmentAssembled from the repository path, not quoted from the project. Check it against their README if it does not work.
One thing to look at
- 2 stars2 stars. Stars are a popularity signal and not a quality one, but at this level it is likely that nobody has read this closely except its author, and you would be relying on your own review.
What its author says it does
Copied from the file, not written here
Use when building or structuring a React/Next.js + TypeScript + Tailwind frontend, choosing libraries, or wiring design tokens. Provides the opinionated blessed-library stack and the React-vs-Next decision, all on-token to DESIGN.md and accessible to WCAG AA.
SKILL.md
2.6 KB, as published. Nobody here has run it
Frontend Development
Announce at start: "I'm using claude-engineer:frontend-development to build the frontend on the blessed stack."
React vs Next.js (default decision)
- Next.js (App Router) for marketing/content sites and content+app hybrids (SEO, RSC, server data).
- Vite SPA (React) for dashboards/SaaS behind auth and design-system/library work (no SEO need).
- Rule of thumb: anonymous crawler needs real content, or you need a server data layer → Next.js; everything behind a login and API-bound → Vite SPA.
Blessed libraries (June 2026 defaults - full table + versions in references/frontend-stack.md)
| Need | Default |
|---|---|
| UI primitives | shadcn/ui (own the code) over Radix/Base UI |
| Styling | Tailwind CSS v4 (@theme) + cva + tailwind-merge + clsx |
| Server/data state | TanStack Query (or Next server components/actions) |
| Client state | Zustand |
| Forms + validation | react-hook-form + Zod |
| Routing (non-Next) | React Router (TanStack Router if TS-first) |
| Tables | TanStack Table |
| Charts | Recharts (via shadcn charts) |
| Animation | motion (ex-Framer Motion) |
| Icons | lucide-react (+ custom typed SVG icons) |
| Toasts / cmd palette / DnD / upload | Sonner / cmdk / dnd-kit / react-dropzone + presigned uploads |
Non-negotiables
- On-token only - consume DESIGN.md tokens via Tailwind
@theme/CSS vars; no hardcoded values (claude-engineer:design-system). - TypeScript strict - full strict flags (see reference); no
anyescapes. - WCAG AA by construction - semantic HTML, keyboard nav, focus management, ARIA, reduced-motion. This is a hard gate (
claude-engineer:testing-and-quality). - Tested - Vitest + React Testing Library for components; Playwright for E2E flows.
- Monorepo placement - apps in
apps/, shared UI/config inpackages/(claude-engineer:monorepo-and-tooling).
Full detail: read references/frontend-stack.md (project structure, exact versions, tsconfig strict flags, ESLint flat config, token wiring, a11y checklist) on demand.
Red flags - STOP
- Reaching for a library outside the blessed list without a reason recorded in
docs/conventions.md. - Inline styles / magic numbers instead of tokens.
- Building an interactive component that isn't keyboard-operable.