---
name: sundial-org-component-gen
description: "Generate React/Vue/Svelte components from descriptions"
metadata:
  decimalai-skill-id: "273ada0b-d7ff-4b40-850f-3c557568d6e1"
  decimalai-version-id: "40c437a5-96e1-49a5-baa9-9303138655c2"
  decimalai-version: "1"
  decimalai-body-sha256: "a2b86d7d7a6f681866af7b2b0f3065e4b9ac4d074c467620f81fd77f42999a38"
  decimalai-name: "sundial-org/component-gen"
  decimalai-format: "1"
  decimalai-invocation: "model"
  decimalai-category: "frontend"
  decimalai-source: "https://app.decimal.ai/s/sundial-org-component-gen@1/SKILL.md"
---
# 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)