Generate React/Vue/Svelte components from descriptions
Scanned 2/12/2026
Skills Directorynpx -y skills add sundial-org/awesome-openclaw-skills --skill component-gen --agent claude-codeInstalls into .claude/skills of the current project.
Are you the author of Component Gen?
Add the live security badge to your README — it updates automatically with every re-scan.
[](https://www.skillsdirectory.com/skills/sundial-org-component-gen)More formats (shields.io, HTML) on the badges page. Keep it an A: scan every change in CI with Pro.
---
name: component-gen
description: Generate React/Vue/Svelte components from descriptions
---
# 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)
Is this your skill, or is something wrong with this listing? Request removal or report an issue. Author removals are honored within 72 hours.
No comments yet. Be the first to comment!
