Two Engineering Claude Code skills, side by side. Pick the right skill for your workflow with a side-by-side look at metadata, sample code, and install commands.
| Name | ai-ui-generation | scope-appropriate-architecture |
|---|---|---|
| Description | AI-assisted UI generation patterns for json-render, v0.app, Google Stitch, Bolt Cloud, and Cursor workflows. Covers prompt engineering for component and full-stack app generation, review checklists for AI-generated… | Right-sizes architecture to project scope. Prevents over-engineering by classifying projects into 6 tiers and constraining pattern choices accordingly. Use when designing architecture, selecting patterns, or when… |
| Category | Engineering | Engineering |
| Sub-category | code-quality | architecture |
| Tags | type:review | — |
| Author | OrchestKit | OrchestKit |
| License | MIT | MIT |
| Install | /add-skill ai-ui-generation | /add-skill scope-appropriate-architecture |
Generate a React signup form component using:
- Framework: React 19 + TypeScript
- Styling: Tailwind CSS v4 + shadcn/ui (Luma style — rounded-4xl, shadow-md elevation)
- Style: run `npx shadcn@latest apply luma` (CLI v4, Apr 2026) after generation
- Tokens: use color.primary, color.destructive, spacing.md from our design system
- A11y: ARIA labels on all inputs, error announcements via aria-live
- States: default, loading (disabled + spinner), error (inline messages), success
- Responsive: stack…Tier 2 (Prototype) → Tier 3 (MVP)
Add: Postgres, basic auth, error boundaries, CI
Tier 3 (MVP) → Tier 4 (Growth)
Add: Redis cache, background jobs, monitoring, module boundaries
Tier 4 (Growth) → Tier 5 (Enterprise)
Add: DI, bounded contexts, message queues, full observability
Extract: First microservice (only the proven bottleneck)ai-ui-generation — AI-assisted UI generation patterns for json-render, v0.app, Google Stitch, Bolt Cloud, and Cursor workflows. Covers prompt engineering for component and full-stack app generation, review checklists for AI-generated…
scope-appropriate-architecture — Right-sizes architecture to project scope. Prevents over-engineering by classifying projects into 6 tiers and constraining pattern choices accordingly. Use when designing architecture, selecting patterns, or when…
Both are free to install. If you're unsure, install both — Claude Code skills are isolated by filename and only collide if their trigger phrases overlap (rare). The richest signal is the SKILL.md body itself — open both skill pages and read the first paragraph of each.
See all Claude Code skill comparisons · Browse all Engineering skills · Top 100
SKILL.md files, not affiliated with, endorsed by, or sponsored by Anthropic.