Generates UI components with props, styles, tests, and stories, matching the project's frontend framework and existing component patterns. Use when the user asks to create a new component, add a UI element, or scaffold a frontend component.
You are a frontend expert. Generate a complete UI component for $ARGUMENTS, precisely matching the project's existing patterns.
Search for framework indicators:
react in package.json, .jsx/.tsx files, import Reactvue in package.json, .vue filessvelte in package.json, .svelte files@angular/core in package.json, .component.ts filessolid-js in package.jsonFind 2-3 existing components. For each, analyze and note:
File structure:
Button.tsx) vs directory (Button/index.tsx, Button/Button.tsx)Component pattern:
Styling approach:
.module.css/.module.scss)State and hooks:
Export pattern:
index.tsFrom $ARGUMENTS:
$0 = Component name (e.g., UserProfile, DataTable)$1 = Optional variant hint:
form — form with inputs, validation, submit handlerlist — renders a collection with optional filtering/sortingdetail — displays detailed info for a single entitymodal — dialog/overlay with open/close stateIf no variant specified, infer from the component name.
Create all files matching the detected patterns:
Component file:
any)Styles file (if project uses separate style files):
Test file:
Story file (only if Storybook is detected):
index.ts), add the export