generate-component-story — how to use generate-component-story how to use generate-component-story, generate-component-story setup guide, what is generate-component-story, generate-component-story alternative, generate-component-story vs storybook, generate-component-story install, create component stories with section!, comprehensive component story coverage

v1.0.0
GitHub

About this Skill

Perfect for Frontend Agents needing comprehensive component documentation and demonstration capabilities. generate-component-story is a skill that enables developers to create detailed stories for components, including basic usage examples, different variants, and states.

Features

Follows existing patterns found in crates/story/src/stories
Organizes stories with section! calls for each major part
Includes comprehensive coverage of all options, variants, and usage examples
Supports creation of basic usage examples and different variants
Enables interactive storytelling with comprehensive coverage

# Core Topics

zerx-lab zerx-lab
[0]
[0]
Updated: 3/8/2026

Quality Score

Top 5%
38
Excellent
Based on code quality & docs
Installation
SYS Universal Install (Auto-Detect)
Cursor IDE Windsurf IDE VS Code IDE
> npx killer-skills add zerx-lab/zTerm/generate-component-story

Agent Capability Analysis

The generate-component-story MCP Server by zerx-lab is an open-source Categories.community integration for Claude and other AI agents, enabling seamless task automation and capability expansion. Optimized for how to use generate-component-story, generate-component-story setup guide, what is generate-component-story.

Ideal Agent Persona

Perfect for Frontend Agents needing comprehensive component documentation and demonstration capabilities.

Core Value

Empowers agents to generate detailed component stories using existing patterns and sections, providing comprehensive coverage of all options, variants, and usage examples, while utilizing `section!` calls and following styles from `crates/story/src/stories`.

Capabilities Granted for generate-component-story MCP Server

Automating component documentation with basic usage examples and different variants
Generating interactive stories for component demonstration
Creating comprehensive coverage of component options and states

! Prerequisites & Limits

  • Requires access to `crates/story/src/stories` for pattern reference
  • Limited to component story generation, not general-purpose documentation
Project
SKILL.md
541 B
.cursorrules
1.2 KB
package.json
240 B
Ready
UTF-8

# Tags

[No tags]
SKILL.md
Readonly

Instructions

When creating component stories:

  1. Follow existing patterns: Base stories on the styles found in crates/story/src/stories (examples: tabs_story.rs, group_box_story.rs, etc.)
  2. Use sections: Organize the story with section! calls for each major part
  3. Comprehensive coverage: Include all options, variants, and usage examples of the component

Examples

A typical story structure includes:

  • Basic usage examples
  • Different variants and states
  • Interactive examples
  • Edge cases and error states

Related Skills

Looking for an alternative to generate-component-story or building a Categories.community AI Agent? Explore these related open-source MCP Servers.

View All

widget-generator

Logo of f
f

widget-generator is an open-source AI agent skill for creating widget plugins that are injected into prompt feeds on prompts.chat. It supports two rendering modes: standard prompt widgets using default PromptCard styling and custom render widgets built as full React components.

149.6k
0
Design

chat-sdk

Logo of lobehub
lobehub

chat-sdk is a unified TypeScript SDK for building chat bots across multiple platforms, providing a single interface for deploying bot logic.

73.0k
0
Communication

zustand

Logo of lobehub
lobehub

The ultimate space for work and life — to find, build, and collaborate with agent teammates that grow with you. We are taking agent harness to the next level — enabling multi-agent collaboration, effortless agent team design, and introducing agents as the unit of work interaction.

72.8k
0
Communication

data-fetching

Logo of lobehub
lobehub

The ultimate space for work and life — to find, build, and collaborate with agent teammates that grow with you. We are taking agent harness to the next level — enabling multi-agent collaboration, effortless agent team design, and introducing agents as the unit of work interaction.

72.8k
0
Communication