halflength-ampleness75

Component Gen — Development skill for Claude Code

Development community

Generate React or Vue components with prop types, styling, accessibility, and tests.

How to install Component Gen

Installs to ~/.claude/skills/halflength-ampleness75-claude-code-recipes-component-gen/SKILL.md

Terminal

mkdir -p ~/.claude/skills/halflength-ampleness75-claude-code-recipes-component-gen && curl -fsSL https://raw.githubusercontent.com/halflength-ampleness75/claude-code-recipes/HEAD/commands/component-gen.md -o ~/.claude/skills/halflength-ampleness75-claude-code-recipes-component-gen/SKILL.md

Restart Claude Code, or start a new session, for it to be picked up.

What Component Gen does

model: sonnet description: Generate React or Vue components with prop types, styling, accessibility, and tests

Generate a production-quality UI component from the description provided in `$ARGUMENTS`.

Step 1 — Parse the Request

Extract from `$ARGUMENTS`:

Component name (e.g., "DataTable", "Modal", "SearchBar")
Feature requirements (what the component should do)
Framework preference (React or Vue — detect from project if not stated)
Variants or states (e.g.,

Alternatives in Development

Web Artifacts Builder — Build complex claude.ai HTML artifacts using React, Tailwind CSS, and shadcn/ui 94.1k ★
Value Prop Statements — Generate value prop statements for marketing, sales, and onboarding 7.8k ★
Stitch React Components — Stitch to React components conversion 2.6k ★