longbridge / generate-component-story

Install for your project team

Run this command in your project directory to install the skill for your entire team:

mkdir -p .claude/skills/generate-component-story && curl -L -o skill.zip "https://fastmcp.me/Skills/Download/819" && unzip -o skill.zip -d .claude/skills/generate-component-story && rm skill.zip

New-Item -Path ".claude/skills/generate-component-story" -ItemType Directory -Force; Invoke-WebRequest -Uri "https://fastmcp.me/Skills/Download/819" -OutFile "skill.zip"; Expand-Archive -Path "skill.zip" -DestinationPath ".claude/skills/generate-component-story" -Force; Remove-Item "skill.zip"

Project Skills

This skill will be saved in .claude/skills/generate-component-story/ and checked into git. All team members will have access to it automatically.

Important: Please verify the skill by reviewing its instructions before using it.

Install skill for Codex

Run one of these commands to install the skill depending on your needs:

Project Local ($CWD/.codex/skills)

mkdir -p .codex/skills/generate-component-story && curl -L -o skill.zip "https://fastmcp.me/Skills/Download/819" && unzip -o skill.zip -d .codex/skills/generate-component-story && rm skill.zip

New-Item -Path ".codex/skills/generate-component-story" -ItemType Directory -Force; Invoke-WebRequest -Uri "https://fastmcp.me/Skills/Download/819" -OutFile "skill.zip"; Expand-Archive -Path "skill.zip" -DestinationPath ".codex/skills/generate-component-story" -Force; Remove-Item "skill.zip"

User Global (~/.codex/skills)

mkdir -p ~/.codex/skills/generate-component-story && curl -L -o skill.zip "https://fastmcp.me/Skills/Download/819" && unzip -o skill.zip -d ~/.codex/skills/generate-component-story && rm skill.zip

New-Item -Path "$HOME/.codex/skills/generate-component-story" -ItemType Directory -Force; Invoke-WebRequest -Uri "https://fastmcp.me/Skills/Download/819" -OutFile "skill.zip"; Expand-Archive -Path "skill.zip" -DestinationPath "$HOME/.codex/skills/generate-component-story" -Force; Remove-Item "skill.zip"

Scope	Location	Suggested Use
REPO	`$CWD/.codex/skills`	Project directory. Teams can check in skills most relevant to a working folder here.
REPO	`$CWD/../.codex/skills`	A folder above CWD. Organizations can check in skills relevant to a shared area.
REPO	`$REPO_ROOT/.codex/skills`	Top-most root folder. Relevant to everyone using the repository.
USER	`$CODEX_HOME/skills`	Personal folder (`~/.codex/skills`). Curate skills that apply to any repository.

Install skill for GitHub Copilot

Run one of these commands to install the skill depending on your needs:

Project (.github/skills)

mkdir -p .github/skills/generate-component-story && curl -L -o skill.zip "https://fastmcp.me/Skills/Download/819" && unzip -o skill.zip -d .github/skills/generate-component-story && rm skill.zip

New-Item -Path ".github/skills/generate-component-story" -ItemType Directory -Force; Invoke-WebRequest -Uri "https://fastmcp.me/Skills/Download/819" -OutFile "skill.zip"; Expand-Archive -Path "skill.zip" -DestinationPath ".github/skills/generate-component-story" -Force; Remove-Item "skill.zip"

Personal (~/.copilot/skills)

mkdir -p ~/.copilot/skills/generate-component-story && curl -L -o skill.zip "https://fastmcp.me/Skills/Download/819" && unzip -o skill.zip -d ~/.copilot/skills/generate-component-story && rm skill.zip

New-Item -Path "$HOME/.copilot/skills/generate-component-story" -ItemType Directory -Force; Invoke-WebRequest -Uri "https://fastmcp.me/Skills/Download/819" -OutFile "skill.zip"; Expand-Archive -Path "skill.zip" -DestinationPath "$HOME/.copilot/skills/generate-component-story" -Force; Remove-Item "skill.zip"

Scope	Location	Suggested Use
Project	`.github/skills/`	Repository-specific skills. Checked into git for the whole team.
Personal	`~/.copilot/skills/`	Personal skills available across all your projects.

Install skill for Google Antigravity

Run one of these commands to install the skill depending on your needs:

Workspace (.agent/skills)

mkdir -p .agent/skills/generate-component-story && curl -L -o skill.zip "https://fastmcp.me/Skills/Download/819" && unzip -o skill.zip -d .agent/skills/generate-component-story && rm skill.zip

New-Item -Path ".agent/skills/generate-component-story" -ItemType Directory -Force; Invoke-WebRequest -Uri "https://fastmcp.me/Skills/Download/819" -OutFile "skill.zip"; Expand-Archive -Path "skill.zip" -DestinationPath ".agent/skills/generate-component-story" -Force; Remove-Item "skill.zip"

Global (~/.gemini/antigravity/skills)

mkdir -p ~/.gemini/antigravity/skills/generate-component-story && curl -L -o skill.zip "https://fastmcp.me/Skills/Download/819" && unzip -o skill.zip -d ~/.gemini/antigravity/skills/generate-component-story && rm skill.zip

New-Item -Path "$HOME/.gemini/antigravity/skills/generate-component-story" -ItemType Directory -Force; Invoke-WebRequest -Uri "https://fastmcp.me/Skills/Download/819" -OutFile "skill.zip"; Expand-Archive -Path "skill.zip" -DestinationPath "$HOME/.gemini/antigravity/skills/generate-component-story" -Force; Remove-Item "skill.zip"

Scope	Location	Suggested Use
Workspace	`.agent/skills/`	Workspace-specific skills for project workflows and conventions.
Global	`~/.gemini/antigravity/skills/`	Personal skills available across all workspaces.

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

Writing Design

9 views

1 installs

Tools I Recommend

ClaudeKit

Sponsor

Production-ready AI subagents automate your development & marketing workflows. Build in hours, not weeks.

Source: https://github.com/longbridge/gpui-component/tree/main/.claude/skills/generate-component-story

Skill Content

---
name: generate-component-story
description: Create story examples for components. Use when writing stories, creating examples, or demonstrating component usage.
---

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

longbridge / generate-component-story

Install for your project team

Download skill

Enable skills in Claude

Upload to Claude

Install skill for Codex

Install skill for GitHub Copilot

Install skill for Google Antigravity

Tools I Recommend

ClaudeKit

Skill Content