From create-component
Creates a new UI component with scaffolding and customization. Use when user wants to add a new component with specific props, types, styling requirements, or Figma reference.
npx claudepluginhub forumone/f1-genai-starter --plugin create-componentThis skill uses the workspace's default tool permissions.
This skill guides you through creating a new UI component with proper scaffolding and customization based on user requirements.
Guides Next.js Cache Components and Partial Prerendering (PPR) with cacheComponents enabled. Implements 'use cache', cacheLife(), cacheTag(), revalidateTag(), static/dynamic optimization, and cache debugging.
Guides building MCP servers enabling LLMs to interact with external services via tools. Covers best practices, TypeScript/Node (MCP SDK), Python (FastMCP).
Generates original PNG/PDF visual art via design philosophy manifestos for posters, graphics, and static designs on user request.
This skill guides you through creating a new UI component with proper scaffolding and customization based on user requirements.
The user should provide:
03-components)Determine if ddev is running:
ddev describe 2>/dev/null
ddev frontend componentnpm run componentRun the appropriate command based on Step 1, using non-interactive mode with command-line arguments.
# With ddev
ddev frontend component -- --name <ComponentName> --folder <folder> [options]
# Without ddev
npm run component -- --name <ComponentName> --folder <folder> [options]
--name <name> - Component name (will be converted to PascalCase)--folder <folder> - Component location, one of:
01-global - Base styles, typography, icons02-layouts - Layout components03-components - Reusable UI components (default choice)04-templates - Page-level templates--title <title> - Human-readable title for Storybook (defaults to Capital Case of name)--subfolder <name> - Subfolder within the component location (will be converted to PascalCase)--no-story - Skip Storybook story generation# Basic component in 03-components
npm run component -- --name Card --folder 03-components
# Component with custom title
npm run component -- --name Card --folder 03-components --title "Product Card"
# Component in a subfolder
npm run component -- --name Button --folder 03-components --subfolder Forms
# Component without Storybook story
npm run component -- --name ApiHelper --folder 06-utility --no-story
# With ddev
ddev frontend component -- --name Card --folder 03-components --subfolder Cards
After scaffolding completes, modify the generated files to match user requirements.
The generated component has a basic props interface:
interface ComponentNameProps extends GessoComponent {}
Modify it to include the user-specified props. Read agent_docs/component_conventions.md
and follow all patterns specified in that file.
Replace the placeholder <div> with appropriate markup based on:
Use clsx for conditional class composition:
import clsx from 'clsx';
<div className={clsx(
styles.wrapper,
variant && styles[`wrapper--${variant}`],
modifierClasses
)}>
Read agent_docs/css_conventions.md and follow all CSS guidelines in that file.
Read agent_docs/storybook.md and follow all guidelines in that file.
If the user provides a Figma link:
First, check if the Figma MCP server is configured and available. You can verify this by checking if Figma-related MCP tools are accessible.
source/00-config/vars/You must ask the user before proceeding. Present these options:
Skip Figma reference - Continue creating the component without the Figma design. The user can provide styling details manually or update the component later.
Stop and configure Figma MCP - Pause the component creation. The user should configure the Figma MCP server first, then re-run the skill.
Do NOT proceed without the user's explicit choice. Example prompt:
"I don't have access to Figma (the Figma MCP server is not configured). How would you like to proceed?
- Skip Figma - I'll create the component without the design reference. You can describe the styling or we can update it later.
- Stop here - Configure the Figma MCP server first, then re-run
/create-componentto create with the design reference."
Run quality checks:
npm run lint # ESLint + Stylelint
npm run tsc # TypeScript check
npm run prettier # Formatting check
Or with ddev:
ddev frontend lint
ddev frontend tsc
ddev frontend prettier
Fix any errors before completing.
After completion, the component should have:
source/[location]/ComponentName/
├── ComponentName.tsx # React component with props
├── component-name.module.css # Styled CSS module
├── ComponentName.stories.tsx # Storybook stories (if requested)
└── componentNameArgs.ts # Story mock data (if requested)
User request: "Create a Card component with title (string), description (string, optional), imageUrl (string, optional), and variant (default, featured). The featured variant should have a highlighted border."
03-components.wrapper, .wrapper--featured, .title, .description, .image