OpenSkillIndex← back to search
claude-codeopenclaw

Awesome-openclaw-skills component-gen

Generate React/Vue/Svelte components from descriptions

install
source · Clone the upstream repo
git clone https://github.com/sundial-org/awesome-openclaw-skills
Claude Code · Install into ~/.claude/skills/
T=$(mktemp -d) && git clone --depth=1 https://github.com/sundial-org/awesome-openclaw-skills "$T" && mkdir -p ~/.claude/skills && cp -r "$T/skills/component-gen" ~/.claude/skills/sundial-org-awesome-openclaw-skills-component-gen && rm -rf "$T"
OpenClaw · Install into ~/.openclaw/skills/
T=$(mktemp -d) && git clone --depth=1 https://github.com/sundial-org/awesome-openclaw-skills "$T" && mkdir -p ~/.openclaw/skills && cp -r "$T/skills/component-gen" ~/.openclaw/skills/sundial-org-awesome-openclaw-skills-component-gen && rm -rf "$T"
manifest: skills/component-gen/SKILL.md
source content

Component Generator

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

Quick Start

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

# 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