Can I customize where the components are created?

Yes, you can specify folders such as 01-global, 02-layouts, 03-components, or 04-templates to maintain a clean atomic design structure.

Does it support conditional styling?

Yes, it implements components using the clsx library for clean, conditional CSS Module class composition based on props and variants.

Does this skill require DDEV to function?

No, the skill automatically detects your environment. It will use ddev commands if available, otherwise it defaults to standard npm run commands.

What happens if I don't have the Figma MCP server configured?

The skill will detect the missing configuration and ask you whether to proceed with manual styling descriptions or stop to configure the server first.

Next.js Component Architect

Name: Next.js Component Architect
Author: forumone

byforumone

0•

设计工具

Generates standardized, production-ready Next.js UI components with integrated Storybook support, CSS Modules, and Figma design synchronization.

This skill streamlines the frontend development workflow by automating the creation of consistent UI components within Next.js projects. It handles the complete scaffolding process—including TypeScript interfaces, CSS Modules, and Storybook stories—using either DDEV or standard NPM environments. By following strict project conventions for styling and prop management, and offering optional Figma MCP integration to translate designs directly into code, it ensures that new components are high-quality, type-safe, and perfectly aligned with design specifications.

主要功能

01Intelligent Figma-to-code translation via Figma MCP server integration

020 GitHub stars

03Structured component organization across Global, Layout, and Template directories

04Environment-aware execution supporting both DDEV and standard NPM workflows

05Automated scaffolding of React components, CSS Modules, and Storybook stories

06Built-in quality enforcement with automated ESLint, Stylelint, and TypeScript checks

使用场景

01Standardizing component creation across a team to ensure adherence to CSS and Storybook best practices

02Translating Figma design specs into functional React components with precise styling variables

03Rapidly building out a design system with consistent file structures and coding patterns

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add forumone/f1-genai-starter create-component-nextjs

For use in Claude.ai and ChatGPT

Download Skill