front-component-generator

GUIDANCE SKILL — INSTRUCTIONS ONLY Frontend component generation follows a convention-first approach: inspect the existing project's tech stack, align with its conventions, and produce a complete, type-safe component with styles, types, and tests — all from a natural language description. This skill provides patterns, conventions, and constraints. It contains no executable code — apply the guidance to your context, adapting specifics as needed per C2-B.

CRITICAL: Guidance Principles

The instructions below define the REQUIRED APPROACH — you MUST follow the prescribed patterns, conventions, and constraints.

Mandatory adherence:

• Follow all stated conventions and naming patterns
• Respect all constraints and boundaries
• Apply the recommended patterns to your implementation
• Do NOT deviate from prescribed architectural decisions
• Never install new dependencies unless explicitly requested by the user and truly necessary
• Never overwrite an existing file without warning the user first
• Always present the file list and component API overview, then wait for user confirmation before creating any files
• Every component MUST handle loading, empty, and error states where applicable
• Every component MUST include necessary accessibility attributes (e.g., aria-label, role)

Correct Application Pattern

1. Read and absorb all guidance sections below
2. Map the prescribed patterns to your current context
3. Implement following the stated conventions — adapt specifics to fit, but preserve the intent
4. Validate against the C3 checklist at the end

Argument Details

Arg	Type	Required	Default	Description
description	string	Yes	—	Natural language description of the desired component
framework	string	No	react	Target framework; valid values: react or vue

Design Patterns & Conventions

Architectural Pattern

Convention-first generation pipeline: every component MUST be produced by first inspecting the host project's existing tech stack and conventions, then aligning all generated code to those conventions. The pipeline proceeds as: Inspect → Analyze → Design API → Present → Confirm → Generate. This ensures generated components integrate seamlessly rather than introducing foreign patterns.