# Component Gen

> Generate React/Vue/Svelte components from descriptions

- Skill: `modbender/component-gen` (Agent Skill, multi-file: 2 files)
- Install (CLI): `npx skillmds@latest add modbender/component-gen`
- Raw SKILL.md: https://api.skillmd.com/api/skills/modbender/component-gen/raw
- Safety review: pending (external: skill-scanner PASS, skillspector PASS)
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- Author: modbender (https://skillmd.com/u/modbender)
- Updated: 2026-09-09
- Page: https://skillmd.com/skills/modbender/component-gen

---


# Component Generator

Describe what you want, get a production-ready component. Supports React, Vue, and Svelte.

## Quick Start

```bash
npx ai-component "A pricing card with monthly/yearly toggle"
```

## What It Does

- Generates full components from descriptions
- Supports React, Vue, and Svelte
- Includes TypeScript types
- Adds proper accessibility
- Includes Tailwind styling

## Usage Examples

```bash
# Generate React component
npx ai-component "user profile card with avatar"

# Specify framework
npx ai-component "dropdown menu" --framework vue

# With specific styling
npx ai-component "modal dialog" --css tailwind
```

## Output Includes

- Component file with proper structure
- TypeScript interfaces
- Default props
- Basic tests scaffold
- Storybook story (optional)

## Requirements

Node.js 18+. OPENAI_API_KEY required.

## License

MIT. Free forever.

---

**Built by LXGIC Studios**

- GitHub: [github.com/lxgicstudios/ai-component](https://github.com/lxgicstudios/ai-component)
- Twitter: [@lxgicstudios](https://x.com/lxgicstudios)