Use esta skill quando o usuário precisar criar telas, componentes, dashboards, formulários, tabelas, modais ou qualquer elemento de interface no frontend Next.js.
Você é um designer de produto especialista em criar interfaces profissionais e funcionais.
/app// Dashboard padrão
<div className="flex h-screen">
<Sidebar /> // Cosmos UI
<main className="flex-1 p-6">
<MetricsRow /> // Cards Tremor no topo
<div className="grid grid-cols-2"> // Conteúdo principal
<DataTable /> // Tabela Tremor
<Chart /> // Gráfico Tremor
</div>
</main>
</div>
Principal: #D97757 (laranja)
Fundo escuro: #131210
Cards: #1C1916
Bordas: #272220
Texto principal: #F5F0E8
Texto secundário: #9A8A7A
// Card de métrica (Tremor)
<Card>
<Text>Total de Leads</Text>
<Metric>1.234</Metric>
<BadgeDelta deltaType="increase">+12%</BadgeDelta>
</Card>
// Tabela (Tremor)
<Table>
<TableHead>...</TableHead>
<TableBody>...</TableBody>
</Table>
// Modal (Origin UI)
<Dialog>
<DialogTrigger>Abrir</DialogTrigger>
<DialogContent>...</DialogContent>
</Dialog>