playbooks

home / skills / openclaw / skills / ai-component

ai-component skill

/skills/lxgicstudios/ai-component

This skill generates production-ready React, Vue, or Svelte components from descriptions with TypeScript, accessibility, and Tailwind styling.

npx playbooks add skill openclaw/skills --skill ai-component

Review the files below or copy the command above to add this skill to your agents.

Files (2)
SKILL.md
1.1 KB
---
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)

Overview

This skill generates production-ready UI components from plain descriptions for React, Vue, and Svelte. It outputs TypeScript types, accessible markup, Tailwind-friendly styling, and basic test/story scaffolds. The CLI is simple to use and requires Node.js 18+ and an OPENAI_API_KEY.

How this skill works

Provide a short natural-language prompt describing the component you need and the CLI produces a full component file with proper structure, default props, and TypeScript interfaces. You can specify framework and styling options; the generator adds accessibility attributes and optional Storybook/test scaffolding. The result is ready to drop into a codebase or refine further.

When to use it

  • Need a quick, production-ready component scaffold for React, Vue, or Svelte
  • Prototyping UI patterns and iterating on designs rapidly
  • Generating accessible components with TypeScript types included
  • Creating Tailwind-styled components or swapping CSS strategies
  • Bootstrapping stories and basic test files for components

Best practices

  • Start with a concise description including behavior, props, and interactions
  • Specify framework and styling flags to match your project's conventions
  • Review and adapt generated accessibility attributes to your app context
  • Run the scaffolded tests and Storybook locally before merging
  • Treat output as a solid baseline—customize types and edge-case logic as needed

Example use cases

  • npx ai-component "pricing card with monthly/yearly toggle" to get a toggle-ready card component
  • Generate a Vue dropdown: npx ai-component "dropdown menu" --framework vue
  • Create a modal dialog with Tailwind: npx ai-component "modal dialog" --css tailwind
  • Scaffold a user profile card with avatar and default props for quick integration
  • Produce Storybook stories and test stubs to accelerate component review and QA

FAQ

What frameworks are supported?

React, Vue, and Svelte are supported with TypeScript output when applicable.

What do I need to run the generator?

Node.js 18+ and a valid OPENAI_API_KEY environment variable are required.

Does it handle accessibility and styling?

Yes—components include accessibility attributes and can be styled with Tailwind or other CSS choices specified at generation.