Help us improve
Share bugs, ideas, or general feedback.
From frontend-craft
Generates maintainable frontend components from design prototypes (images/PDFs) using React/Next.js, Vue/Nuxt, SvelteKit, Tailwind, shadcn/ui. Builds one at a time with design tokens and confirms architecture.
npx claudepluginhub himicoswilson/himi-claude-plugins --plugin frontend-craftHow this skill is triggered — by the user, by Claude, or both
Slash command
/frontend-craft:buildThis skill is limited to the following tools:
The summary Claude sees in its skill listing — used to decide when to auto-load this skill
Transform design prototypes into maintainable, component-based frontend code through structured analysis and incremental generation.
Generates production-grade frontend UI components with bold design choices and working code. Accepts component descriptions, requirements, PRD files, or OpenAPI contracts.
Builds accessible, responsive, performant frontend components using design systems, modern CSS, WCAG patterns, and React/Vue/Svelte examples.
Builds production-grade web UIs like landing pages, apps, dashboards; detects/respects existing design systems; covers composition, typography, color, motion, copy; verifies via screenshots.
Share bugs, ideas, or general feedback.
Transform design prototypes into maintainable, component-based frontend code through structured analysis and incremental generation.
package.json, tsconfig.json, vite.config.*, next.config.*, nuxt.config.*, svelte.config.*Read the design prototype using the Read tool. Produce a structured analysis covering:
Identify top-level layout regions: header, navigation, sidebar, main content, footer, overlays. Note their spatial relationships and nesting.
Extract colors and classify them:
| Role | Example | Usage |
|---|---|---|
| Primary | #3B82F6 | CTAs, active states, links |
| Secondary | #6366F1 | Supporting accents |
| Accent | #F59E0B | Highlights, badges |
| Neutral | #1F2937, #F3F4F6 | Text, backgrounds, borders |
| Semantic | #EF4444, #22C55E | Error, success states |
Refer to DESIGN-ANALYSIS.md for extraction methodology.
Identify font hierarchy:
| Level | Properties |
|---|---|
| Heading 1 | font-family, size, weight, line-height |
| Heading 2 | ... |
| Body | ... |
| Caption / Small | ... |
Infer the base spacing unit and common patterns. Look for the smallest repeated gap and derive the scale (e.g., 4px base: 4, 8, 12, 16, 24, 32, 48, 64).
Catalog all interactive elements: buttons (variants, sizes), inputs, selects, toggles, checkboxes, links, tabs, modals, dropdowns.
If the design includes multiple viewport sizes, note breakpoint behavior. If only one size is provided, infer a reasonable responsive strategy.
This phase requires user confirmation before proceeding to code.
Apply Atomic Design principles. Refer to COMPONENT-ARCHITECTURE.md for methodology.
Break the design into:
For each component, define:
Map the Phase 1 analysis to the tech stack's token format:
| Tech Stack | Token Format |
|---|---|
| Tailwind CSS | tailwind.config.ts — extend theme |
| CSS Modules / vanilla | CSS custom properties in variables.css |
| styled-components | Theme object in theme.ts |
| UnoCSS | uno.config.ts — extend theme |
Tokens must cover: colors, spacing scale, typography scale, border radii, shadows, breakpoints.
Propose the directory layout for new components, following existing project conventions (or sensible defaults for new projects).
Identify which components from the chosen component library can be used directly or composed, avoiding custom reimplementation.
Based on complexity, recommend:
| Complexity | Approach |
|---|---|
| Simple (single component state) | Local state (useState, ref, $state) |
| Shared across siblings | Lift state / Context / provide-inject |
| App-wide or complex | Zustand, Pinia, Svelte stores |
Present the full architecture plan to the user via AskUserQuestion:
Options: Approve / Approve with changes / Revise
Do not write any code until the user approves.
npx create-next-app@latest / npm create vite@latest / npx nuxi init / npm create svelte@latesttailwind.config.tsglobals.css / variables.csstheme.tsThis is the core phase. Generate components one at a time, in dependency order.
For each component:
Refer to CODE-GENERATION.md for tech-stack-specific conventions.
For each component:
1. Create the component file
2. Define the props interface (TS projects)
3. Implement the component using design tokens and library primitives
4. Add responsive styles
5. Export the component
Once all components are generated:
getServerSideProps, useFetch, load functions)Run through the checklist in QUALITY-CHECKLIST.md.
Key checks:
After completing the review, provide: