skills.rest
wfukatsu
wfukatsuCOMMUNITY
Explore all skills by this author →
GitHub

generate-frontend

Convert UI mockups into a React frontend with Atomic Design and react-router.

12|1|Updated Mar 23, 2026
Search Tags:#React#frontend development#Atomic Design#react-router#UI to code
One-click install
npx skills add https://github.com/wfukatsu/nexus-architect --skill generate-frontend
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: generate-frontend
Source: https://github.com/wfukatsu/nexus-architect/tree/main/skills/product/generate-frontend
Command: npx skills add https://github.com/wfukatsu/nexus-architect --skill generate-frontend

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) and references (resource) components.

What problem does it solve?

This skill automates the conversion of UI mockups into a fully functional React frontend, providing a complete and reusable codebase ready for deployment.

Core Features & Use Cases

  • Atomic Design Integration: Converts UI mockups using Atomic Design principles to create a maintainable and scalable component library.
  • React and Storybook Support: Generates TypeScript React components with CSS Modules for styling and includes stories for each component.
  • Automated Routing: Utilizes react-router for navigation based on UI mockup paths, ensuring a seamless user experience.
  • Design System Flexibility: Allows overriding the active design system with a custom name, providing flexibility in theming and styling.
  • Language Support: Outputs documentation and comments in both Japanese and English.

Quick Start

Generate a React frontend from your UI mocks by running: /product:generate-frontend --design-system=MyDesignSystem

Frequently Asked Questions about generate-frontend

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I convert UI mockups into a React frontend?▼

To convert UI mockups into a React frontend, provide navigable mockups, feature lists, and design system files. The skill processes these inputs to generate functional TypeScript React components structured with Atomic Design principles and automated routing.

What is Atomic Design and how does it apply to React component generation?▼

Atomic Design structures UIs into reusable building blocks like atoms and molecules. This skill applies Atomic Design to generate a maintainable and scalable React component library directly from your navigable UI mockups.

Do I need to provide a design system file to generate React components from mockups?▼

Yes, providing design system files is required for accurate styling and theming during React component generation. You can also override the active design system with a custom name to apply flexible theming to the output components.

How does automated routing work when converting UI mockups to React?▼

Automated routing uses react-router to establish navigation paths based on your UI mockup structure. This ensures the generated React frontend delivers a seamless user experience matching the original mockup navigation flow.

Can I generate React components with CSS Modules and Storybook stories from mockups?▼

Yes, this skill generates TypeScript React components styled with CSS Modules and includes Storybook stories for each component. This provides an isolated development environment to verify UI elements converted from your mockups.

Does this UI to code conversion handle both fillable and non-fillable forms?▼

Yes, the UI to code conversion handles both fillable and non-fillable forms. It processes your UI mockups to accurately translate all interactive and static form elements into functional React components.

Related Skills

Explore More Software Engineering Skills→
daffy0208daffy0208
34

Figma Developer

Convert Figma designs into React components and design tokens.

Community
Intermediate
ajelinekajelinek

react

Align React TypeScript components with repository conventions for CSS Modules and typed props.

Community
Advanced
iButtersiButters
3

storybook

Create CSF 3.0 Storybook stories for React components with MDX documentation.

Community
Advanced
Yukine5377Yukine5377

ba-frontend-code-gen

Generate React/TypeScript/Tailwind frontend code from Brand Guideline and System Design.

Community
Advanced