longbridge avatar

Generate Component Story

This generates component stories for GPUI UI components following the patterns already established in the crates/story/src/stories directory. You point it at a component and it scaffolds out a complete story file with sections for basic usage, variants, interactive examples, and edge cases. It's pulling from existing examples like tabs_story.rs and group_box_story.rs, so the output should match the project's conventions without you having to remember the structure. Useful if you're building UI components in the longbridge/gpui-component ecosystem and want consistent documentation without the boilerplate. Saves you from copy-pasting story templates and missing coverage areas.

skills.sh installs
144
GitHub stars
12.5K
last updated
Aug 21, 2026

Install

$ npx -y skills add longbridge/gpui-component --skill generate-component-story --agent claude-code

Installs into .claude/skills of the current project.

Files

This generates component stories for GPUI UI components following the patterns already established in the crates/story/src/stories directory. You point it at a component and it scaffolds out a complete story file with sections for basic usage, variants, interactive examples, and edge cases. It's pulling from existing examples like tabs_story.rs and group_box_story.rs, so the output should match the project's conventions without you having to remember the structure. Useful if you're building UI components in the longbridge/gpui-component ecosystem and want consistent documentation without the boilerplate. Saves you from copy-pasting story templates and missing coverage areas.

Browse the repository on GitHub

Sponsors

Details

Repository
github.com/longbridge/gpui-component
Categories
Frontend Development, Documentation, Finance & Trading
First seen
Jun 3, 2026

More from longbridge/gpui-component

All 16
1harlan-zw avatarvue-router-skilldharlan-zw/vue-ecosystem-skillsvue router skilld132skills.sh installs
2erichowens avatarvaporwave-glassomorphic-ui-designererichowens/some_claude_skillsvaporwave glassomorphic ui designer131skills.sh installs
3absolutelyskilled avatarreact-nativeabsolutelyskilled/absolutelyskilledreact native130skills.sh installs
4seika139 avatarcreative-frontend-aestheticsseika139/dotfilesAI特有の「ありきたりなデザイン(AI slop)」を回避し、独創的で洗練されたUIを構築する。LP、ダッシュボード、アプリのフロントエンド実装時に適用。122skills.sh installs
5erichowens avatarreact-performance-optimizererichowens/some_claude_skillsreact performance optimizer118skills.sh installs
6agentworkforce avatarcreating-claude-hooksagentworkforce/relayThis is your reference for building executable hooks that tap into Claude Code's event system.0skills.sh installs