Guided component creation with proper patterns
Guides creation of UI components with structured prompts and code generation.
/plugin marketplace add https://www.claudepluginhub.com/api/plugins/wshobson-ui-design-plugins-ui-design-2/marketplace.json/plugin install wshobson-ui-design-plugins-ui-design-2@cpd-wshobson-ui-design-plugins-ui-design-2[component-name]Guided workflow for creating new UI components following established patterns and best practices.
Check if .ui-design/ directory exists:
.ui-design/ directory.ui-design/components/ subdirectory for component trackingDetect project configuration:
src/components/ or similar.ui-design/design-system.json if existsLoad project context:
conductor/tech-stack.mdIf no framework detected:
I couldn't detect a UI framework. What are you using?
1. React
2. Vue 3
3. Svelte
4. Angular
5. Vanilla JavaScript/HTML
6. Other (specify)
Enter number:
CRITICAL RULES:
What should this component be called?
Guidelines:
- Use PascalCase (e.g., UserCard, DataTable)
- Be descriptive but concise
- Avoid generic names like "Component" or "Widget"
Enter component name:
What is this component's primary purpose?
1. Display content (cards, lists, text blocks)
2. Collect input (forms, selects, toggles)
3. Navigation (menus, tabs, breadcrumbs)
4. Feedback (alerts, toasts, modals)
5. Layout (containers, grids, sections)
6. Data visualization (charts, graphs, indicators)
7. Other (describe)
Enter number or description:
What is the component's complexity level?
1. Simple - Single responsibility, minimal props, no internal state
2. Compound - Multiple parts, some internal state, few props
3. Complex - Multiple subcomponents, state management, many props
4. Composite - Orchestrates other components, significant logic
Enter number:
What props/inputs should this component accept?
For each prop, provide:
- Name (camelCase)
- Type (string, number, boolean, function, object, array)
- Required or optional
- Default value (if optional)
Example format:
title: string, required
variant: "primary" | "secondary", optional, default: "primary"
onClick: function, optional
Enter props (one per line, empty line when done):
Does this component need internal state?
1. Stateless - Pure presentational, all data via props
2. Local state - Simple internal state (open/closed, hover, etc.)
3. Controlled - State managed by parent, component reports changes
4. Uncontrolled - Manages own state, exposes refs for parent access
5. Hybrid - Supports both controlled and uncontrolled modes
Enter number:
How should child content be handled?
1. No children - Self-contained component
2. Simple children - Accepts children prop for content
3. Named slots - Multiple content areas (header, body, footer)
4. Compound components - Exports subcomponents (e.g., Card.Header, Card.Body)
5. Render props - Accepts render function for flexibility
Enter number:
What accessibility features are needed?
1. Basic - Semantic HTML, aria-labels where needed
2. Keyboard navigation - Full keyboard support, focus management
3. Screen reader optimized - Live regions, announcements
4. Full WCAG AA - All applicable success criteria
Enter number:
How should this component be styled?
Detected: {detected_approach}
1. Use detected approach ({detected_approach})
2. CSS Modules
3. Tailwind CSS
4. Styled Components / Emotion
5. Plain CSS/SCSS
6. Other (specify)
Enter number:
Create .ui-design/components/{component_name}.json:
{
"name": "{ComponentName}",
"created_at": "ISO_TIMESTAMP",
"purpose": "{purpose}",
"complexity": "{level}",
"props": [
{
"name": "{prop_name}",
"type": "{type}",
"required": true,
"default": null,
"description": "{description}"
}
],
"state_pattern": "{pattern}",
"composition": "{pattern}",
"accessibility_level": "{level}",
"styling": "{approach}",
"files_created": [],
"status": "in_progress"
}
Based on detected patterns or ask user:
Where should this component be created?
Detected component directories:
1. src/components/{ComponentName}/
2. app/components/{ComponentName}/
3. components/{ComponentName}/
4. Other (specify path)
Enter number or path:
Create structure:
{component_path}/
├── index.ts # Barrel export
├── {ComponentName}.tsx # Main component
├── {ComponentName}.test.tsx # Tests (if testing detected)
├── {ComponentName}.styles.{ext} # Styles (based on approach)
└── types.ts # TypeScript types (if TS project)
Generate component based on gathered specifications.
For React/TypeScript example:
// {ComponentName}.tsx
import { forwardRef } from 'react';
import type { {ComponentName}Props } from './types';
import styles from './{ComponentName}.styles.module.css';
/**
* {ComponentName}
*
* {Purpose description}
*/
export const {ComponentName} = forwardRef<HTML{Element}Element, {ComponentName}Props>(
({ prop1, prop2 = 'default', children, ...props }, ref) => {
return (
<div
ref={ref}
className={styles.root}
{...props}
>
{children}
</div>
);
}
);
{ComponentName}.displayName = '{ComponentName}';
// types.ts
import type { HTMLAttributes, ReactNode } from 'react';
export interface {ComponentName}Props extends HTMLAttributes<HTMLDivElement> {
/** {prop1 description} */
prop1: string;
/** {prop2 description} */
prop2?: 'primary' | 'secondary';
/** Component children */
children?: ReactNode;
}
Based on styling approach:
CSS Modules:
/* {ComponentName}.styles.module.css */
.root {
/* Base styles */
}
.variant-primary {
/* Primary variant */
}
.variant-secondary {
/* Secondary variant */
}
Tailwind:
// Inline in component
className={cn(
'base-classes',
variant === 'primary' && 'primary-classes',
className
)}
// {ComponentName}.test.tsx
import { render, screen } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import { {ComponentName} } from './{ComponentName}';
describe('{ComponentName}', () => {
it('renders without crashing', () => {
render(<{ComponentName} prop1="test" />);
expect(screen.getByRole('...')).toBeInTheDocument();
});
it('applies variant styles correctly', () => {
// Variant tests
});
it('handles user interaction', async () => {
const user = userEvent.setup();
// Interaction tests
});
it('meets accessibility requirements', () => {
// A11y tests
});
});
// index.ts
export { {ComponentName} } from './{ComponentName}';
export type { {ComponentName}Props } from './types';
After generating files:
I've created the {ComponentName} component:
Files created:
- {path}/index.ts
- {path}/{ComponentName}.tsx
- {path}/{ComponentName}.test.tsx
- {path}/{ComponentName}.styles.module.css
- {path}/types.ts
Would you like to:
1. Review the generated code
2. Make modifications
3. Add more props or features
4. Generate Storybook stories
5. Done, keep as-is
Enter number:
What would you like to modify?
1. Add a new prop
2. Change styling approach
3. Add a variant
4. Modify component structure
5. Add accessibility features
6. Other (describe)
Enter number:
If Storybook detected or user requests:
// {ComponentName}.stories.tsx
import type { Meta, StoryObj } from '@storybook/react';
import { {ComponentName} } from './{ComponentName}';
const meta: Meta<typeof {ComponentName}> = {
title: 'Components/{ComponentName}',
component: {ComponentName},
tags: ['autodocs'],
argTypes: {
variant: {
control: 'select',
options: ['primary', 'secondary'],
},
},
};
export default meta;
type Story = StoryObj<typeof {ComponentName}>;
export const Default: Story = {
args: {
prop1: 'Example',
},
};
export const Primary: Story = {
args: {
...Default.args,
variant: 'primary',
},
};
export const Secondary: Story = {
args: {
...Default.args,
variant: 'secondary',
},
};
Update .ui-design/components/{component_name}.json:
{
"status": "complete",
"files_created": [
"{path}/index.ts",
"{path}/{ComponentName}.tsx",
"{path}/{ComponentName}.test.tsx",
"{path}/{ComponentName}.styles.module.css",
"{path}/types.ts"
],
"completed_at": "ISO_TIMESTAMP"
}
Display summary:
Component Created Successfully!
Component: {ComponentName}
Location: {path}/
Files: {count} files created
Quick reference:
Import: import { {ComponentName} } from '{import_path}';
Usage: <{ComponentName} prop1="value" />
Next steps:
1. Run /ui-design:design-review {path} to validate
2. Run /ui-design:accessibility-audit {path} for a11y check
3. Add to your page/layout
Need to create another component? Run /ui-design:create-component