Two Content Claude Code skills, side by side. Pick the right skill for your workflow with a side-by-side look at metadata, sample code, and install commands.
| Name | design-stylecards | storybook-mcp-integration |
|---|---|---|
| Description | Declarative catalog of named aesthetic recipes — exact shadow stacks, glass surfaces, gradient treatments, and type scales as copy-paste values with Use-When and Avoid rules. Use when the user asks for polished… | Storybook MCP server integration for component-aware AI development. Covers 6 tools across 3 toolsets (dev, docs, testing): component discovery via list-all-documentation/get-documentation, story previews via… |
| Category | Content | Content |
| Sub-category | content-misc | storytelling |
| Tags | lang:python | ai:mcp type:review type:integration |
| Author | OrchestKit | OrchestKit |
| License | MIT | MIT |
| Install | /add-skill design-stylecards | /add-skill storybook-mcp-integration |
/ork:design-stylecards list # Catalog index
/ork:design-stylecards elevation/md # Show one recipe
/ork:design-stylecards apply glass/dark to src/components/Panel.tsx# Storybook 10.3+ with Vite builder (no webpack)
npx storybook@latest upgrade
# Install the addon (current: @storybook/[email protected], Apr 2026)
npx storybook add @storybook/addon-mcp
# Enable docs toolset (required for component discovery)
# In .storybook/main.ts:
# componentsManifest: true
# NOTE: the old `experimentalComponentsManifest` flag was renamed in
# Storybook 10.3; it is now `componentsManifest` and default-on. Any
# code still passing the `experimental` prefix will warn-then-ig…design-stylecards — Declarative catalog of named aesthetic recipes — exact shadow stacks, glass surfaces, gradient treatments, and type scales as copy-paste values with Use-When and Avoid rules. Use when the user asks for polished…
storybook-mcp-integration — Storybook MCP server integration for component-aware AI development. Covers 6 tools across 3 toolsets (dev, docs, testing): component discovery via list-all-documentation/get-documentation, story previews via…
Both are free to install. If you're unsure, install both — Claude Code skills are isolated by filename and only collide if their trigger phrases overlap (rare). The richest signal is the SKILL.md body itself — open both skill pages and read the first paragraph of each.
See all Claude Code skill comparisons · Browse all Content skills · Top 100
SKILL.md files, not affiliated with, endorsed by, or sponsored by Anthropic.