Use this skill when the user describes a component in natural language, says "create a component with...", "I need a card that has...", "build a form with fields for...", "generate component from description", or provides detailed component requirements in plain English. Enables non-technical stakeholders to generate production-ready components through natural language descriptions.
/plugin marketplace add flight505/storybook-assistant-plugin/plugin install flight505-storybook-assistant@flight505/storybook-assistant-pluginThis skill inherits all available tools. When active, it can use any tool Claude has access to.
Generate complete, production-ready components from natural language descriptions. Simply describe what you want in plain English, and get fully-typed TypeScript components with props, variants, stories, and tests.
Example:
"Create a user profile card with an avatar on the left, name and title stacked vertically in the middle, and a follow button on the right. Include an online status indicator and verified badge."
→ Generates complete UserProfileCard component with all requested features, TypeScript interfaces, 8+ story variants, and accessibility baked in.
AI extracts structured requirements:
Creates complete implementation:
Comprehensive Storybook coverage:
User Input:
"I need a notification card with an icon, title, message, timestamp, and dismiss button. Support success, warning, error types with different colors. Auto-dismiss after 5 seconds but allow pinning."
AI Analysis:
{
"name": "NotificationCard",
"elements": ["Icon", "Title", "Message", "Timestamp", "DismissButton"],
"variants": ["Success", "Warning", "Error"],
"props": {
"type": "success | warning | error",
"title": "string",
"message": "string",
"timestamp": "Date",
"onDismiss": "() => void",
"pinned": "boolean",
"autoDismiss": "boolean"
},
"behavior": {
"autoDismiss": { "delay": 5000, "conditional": "!pinned" }
},
"accessibility": {
"role": "alert",
"ariaLive": "polite"
}
}
Generated Output:
// NotificationCard.tsx
import { useEffect, useState } from 'react';
import { X, CheckCircle, AlertTriangle, XCircle } from 'lucide-react';
interface NotificationCardProps {
type: 'success' | 'warning' | 'error';
title: string;
message: string;
timestamp: Date;
onDismiss: () => void;
pinned?: boolean;
autoDismiss?: boolean;
}
const icons = {
success: CheckCircle,
warning: AlertTriangle,
error: XCircle,
};
const colors = {
success: 'bg-green-50 border-green-200 text-green-900',
warning: 'bg-yellow-50 border-yellow-200 text-yellow-900',
error: 'bg-red-50 border-red-200 text-red-900',
};
export function NotificationCard({
type,
title,
message,
timestamp,
onDismiss,
pinned = false,
autoDismiss = true,
}: NotificationCardProps) {
const [isVisible, setIsVisible] = useState(true);
const Icon = icons[type];
useEffect(() => {
if (autoDismiss && !pinned) {
const timer = setTimeout(() => {
setIsVisible(false);
onDismiss();
}, 5000);
return () => clearTimeout(timer);
}
}, [autoDismiss, pinned, onDismiss]);
if (!isVisible) return null;
return (
<div
className={`flex items-start gap-3 p-4 border rounded-lg ${colors[type]}`}
role="alert"
aria-live="polite"
>
<Icon className="w-5 h-5 mt-0.5" aria-hidden="true" />
<div className="flex-1">
<h3 className="font-semibold">{title}</h3>
<p className="text-sm mt-1">{message}</p>
<time className="text-xs opacity-75 mt-2 block">
{timestamp.toLocaleTimeString()}
</time>
</div>
<button
onClick={onDismiss}
className="p-1 hover:bg-black/5 rounded"
aria-label="Dismiss notification"
>
<X className="w-4 h-4" />
</button>
</div>
);
}
// NotificationCard.stories.tsx
import type { Meta, StoryObj } from '@storybook/react';
import { fn } from '@storybook/test';
import { NotificationCard } from './NotificationCard';
const meta: Meta<typeof NotificationCard> = {
title: 'Components/NotificationCard',
component: NotificationCard,
args: {
onDismiss: fn(),
timestamp: new Date(),
},
};
export default meta;
type Story = StoryObj<typeof NotificationCard>;
export const Success: Story = {
args: {
type: 'success',
title: 'Payment successful',
message: 'Your payment of $99.00 has been processed.',
},
};
export const Warning: Story = {
args: {
type: 'warning',
title: 'Storage almost full',
message: 'You are using 90% of your storage quota.',
},
};
export const Error: Story = {
args: {
type: 'error',
title: 'Connection failed',
message: 'Unable to connect to server. Please try again.',
},
};
export const Pinned: Story = {
args: {
...Success.args,
pinned: true,
},
};
export const NoAutoDismiss: Story = {
args: {
...Success.args,
autoDismiss: false,
},
};
User Input:
"Create a data table component with sortable columns, row selection, pagination, and a search bar. Include actions menu for each row."
Generated: Complete DataTable component with:
AI infers standard patterns:
Every generated component includes:
The component-generator-agent handles complex generation:
See: agents/component-generator.md
❌ "Create a card component"
✅ "Create a product card with image, title, price, rating stars, and add to cart button"
❌ "Create a user card with avatar and name"
✅ "Create a user card with avatar on the left, name and bio stacked on the right"
❌ "Create a button"
✅ "Create a button with loading state, disabled state, and success state after click"
❌ "Create a modal"
✅ "Create a modal that opens on button click, has a close X button, closes on ESC key, and closes on backdrop click"
Pre-built patterns for common requests:
See: skills/natural-language-generation/examples/common-patterns.md
What Works:
What Needs Manual Work:
For complex requirements, NL generation provides 80% scaffold + manual refinement.
Natural language → Production code in seconds:
Result: 10x faster prototyping, accessible to non-developers.