--- name: component-creator description: React\/TypeScript component development with shadcn\/ui. Use for building reusable UI components. --- # Component Creator Skill Expert in creating React\/TypeScript components with shadcn\/ui. ## Component Pattern ```typescript \/\/ components\/ui\/metric-card.tsx import { Card, CardHeader, CardTitle, CardContent } from '@\/components\/ui\/card'; interface MetricCardProps { title: string; value: string | number; change?: number; icon?: React.ReactNode; } export function MetricCard({ title, value, change, icon }: MetricCardProps) { return ( {title}<\/CardTitle> {icon} <\/CardHeader>

{value}<\/div> {change !== undefined && (

{change > 0 ? '+' : ''}{change}% from last month <\/p> )} <\/CardContent> <\/Card> ); } ``` ## Form Component Pattern ```typescript 'use client'; import { useForm } from 'react-hook-form'; import { zodResolver } from '@hookform\/resolvers\/zod'; import { z } from 'zod'; import { Button } from '@\/components\/ui\/button'; import { Input } from '@\/components\/ui\/input'; const schema = z.object({ name: z.string().min(1), email: z.string().email(), }); type FormData = z.infer; export function UserForm() { const form = useForm({ resolver: zodResolver(schema), }); async function onSubmit(data: FormData) { await fetch('\/api\/users', { method: 'POST', body: JSON.stringify(data), }); } return (