# Storybook Gen

> Generate Storybook stories from React components. Use when documenting components.

- Skill: `lxgic-studios/storybook-gen` (Agent Skill, multi-file: 6 files)
- Install (CLI): `npx skillmds@latest add lxgic-studios/storybook-gen`
- Raw SKILL.md: https://api.skillmd.com/api/skills/lxgic-studios/storybook-gen/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- Author: LXGIC-Studios (https://skillmd.com/u/lxgic-studios)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/lxgic-studios/storybook-gen

---


# Storybook Generator

Writing stories for every component is tedious. Point this at a component and get proper Storybook stories.

**One command. Zero config. Just works.**

## Quick Start

```bash
npx ai-storybook ./src/components/Button.tsx
```

## What It Does

- Reads your React components
- Generates Storybook stories
- Includes different variants and states
- Handles props and controls

## Usage Examples

```bash
# Generate for component
npx ai-storybook ./src/components/Button.tsx

# Modal component
npx ai-storybook ./src/components/Modal.tsx
```

## Best Practices

- **Cover all variants** - default, hover, disabled, etc.
- **Show edge cases** - long text, empty state
- **Use controls** - let people play with props
- **Add documentation** - explain when to use what

## When to Use This

- Building component library
- Documenting existing components
- Creating design system
- Learning Storybook patterns

## Part of the LXGIC Dev Toolkit

This is one of 110+ free developer tools built by LXGIC Studios. No paywalls, no sign-ups, no API keys on free tiers. Just tools that work.

**Find more:**
- GitHub: https://github.com/LXGIC-Studios
- Twitter: https://x.com/lxgicstudios
- Substack: https://lxgicstudios.substack.com
- Website: https://lxgic.dev

## Requirements

No install needed. Just run with npx. Node.js 18+ recommended. Needs OPENAI_API_KEY environment variable.

```bash
npx ai-storybook --help
```

## How It Works

Parses your React component to understand props and types. Then generates Storybook stories with proper args, controls, and variant coverage.

## License

MIT. Free forever. Use it however you want.