Back to Skills

generate-component-story

verified

Create story examples for components. Use when writing stories, creating examples, or demonstrating component usage.

View on GitHub

Repository

longbridge/gpui-component
9.9kstars

.claude/skills/generate-component-story/SKILL.md

Last Verified

January 24, 2026

Install Skill

Select agents to install to:

Scope:
npx add-skill https://github.com/longbridge/gpui-component/blob/35f55766f71ef30ef8dfbbcf4f647fef49a99a83/.claude/skills/generate-component-story/SKILL.md -a claude-code --skill generate-component-story

Installation paths:

Claude
.claude/skills/generate-component-story/
Powered by add-skill CLI

Instructions

## 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

Validation Details

Front Matter
Required Fields
Valid Name Format
Valid Description
Has Sections
Allowed Tools
Instruction Length:
536 chars