Stats
Actions
Tags
From viver-de-ia
Use para gerar interfaces e artefatos da marca Viver de IA — mentoria + comunidade + Leaders AI Conference (PT-BR). Inclui design tokens (paleta RESTRITA navy-dominant + cinza secundário + coral só pra destrutivo · sem gold/amarelo em nenhum nível), assinatura liquid glass, 107 rotas/patterns canônicos, library React publicável `@viverdeia/design-system` v0.6.0 (**47 componentes** em src/lib + **sistema de email de produção à prova de bala** em emails/ · react-email), API docs Radix-style por componente, theming system 3-camadas (ThemeProvider + useTheme + createThemeOverride), Cmd+K real indexado com keywords PT-BR/EN, starter `bunx create-viverdeia-app`, brand book completo, email/social/paid ads/landing/commercial/editorial/event coverage + 4 advanced patterns (2FA setup, pricing comparison, error pages, billing checkout). Use sempre que produzir landing, dashboard, app, plataforma de aluno, deck, mock, e-mail, post social, ou qualquer artefato visual da marca.
How this skill is triggered — by the user, by Claude, or both
Slash command
/viver-de-ia:viver-de-ia-designThe summary Claude sees in its skill listing — used to decide when to auto-load this skill
Reference site canônico: `viver-de-ia-ds` · **107 rotas · 47 componentes · 46 API docs · dark mode + WCAG AA completos** · `bun dev` → http://localhost:5173
Reference site canônico: viver-de-ia-ds · 107 rotas · 47 componentes · 46 API docs · dark mode + WCAG AA completos · bun dev → http://localhost:5173
Repo público: https://github.com/rafaelmilagre7/viver-de-ia-ds · site vivo: https://viver-de-ia-ds.vercel.app
Starter: bunx create-viverdeia-app meu-app (scaffold Vite + React + TS pré-configurado com ThemeProvider)
Dark mode + acessibilidade (estado atual): dark mode completo · 100% WCAG AA de contraste nos 2 temas · 0 violação séria. Em código, use SEMPRE tokens semânticos que adaptam claro↔escuro (var(--via-text-primary|body|muted|soft), var(--via-surface), var(--via-border-soft)) — nunca hardcode navy/branco em texto/superfície. Link em texto corrido = sublinhado. De-ênfase por cor, não opacity. E-mail trava tudo em claro.
#FFFFFF — 85% do canvas#F7F8FA (gray-50) — surfaces alt#1E3A5F (blue) — gradient stops#0A1F3B — única cor de marca · 80% peso visual#000000 — tipografia editorial peso máximoSemânticos parcimoniosos:
#B85C5C — só destrutivo real (cancel, churn, error)#1F8A5B — só presence online · navy-adjacentBANIDO em qualquer nível: gold, dourado, amber, amarelo, mostarda, ocre, roxo "IA", cyan, magenta, neon, gradient quente.
.via-pill {
padding: 4px 11px;
border-radius: 999px;
font-size: 11px;
font-weight: 500;
letter-spacing: -0.004em;
white-space: nowrap;
/* NO uppercase · NO bolinha decorativa · NO peso 700 */
}
-0.005em a -0.018em · headings -0.022em a -0.04emNão use Sparkles, ✨, "AI sparkle". Substituir contextualmente: Compass · Award · Crown · Layers · MessageCircle · Rocket.
bun add @viverdeia/design-system lucide-react
import '@viverdeia/design-system/styles.css';
import { ThemeProvider, Button, Pill, Card, DataTable, useToasts } from '@viverdeia/design-system';
// Em React, sempre envelopar com ThemeProvider
<ThemeProvider defaultMode="system">
<App />
</ThemeProvider>
47 componentes core (9 categorias):
Theming exportado: ThemeProvider, useTheme, applyTheme, createThemeOverride.
API docs: cada componente tem /api/{nome} no reference site com anatomy + props + examples + a11y.
/api/{nome} por componente · Radix-style-0.004em · nowrap · sem dot · sem caps lock)<DataTable> da library/via · entrada geral · descreve o que vai construir e ela direciona/via-email · email · 5 templates de PRODUÇÃO (react-email · à prova de bala) + 13 editoriais/via-social · social media · qualquer dos 6 canais/via-landing · landing page · variants + elementos reutilizáveis/via-brand · brand book · logo usage · voice por contexto/via-deck · pitch deck · slides Google Slides canônicos/via-paid · Meta Ads + Google Display/via-check · auditoria editorial · verifica se peça segue padrãoEmails de verdade que não quebram no inbox (Gmail, Outlook, Apple Mail). Vivem em emails/ (react-email), renderizam pra public/emails/*.html via bun run build:emails, e aparecem ao vivo em /patterns/email (iframe do HTML real). Distinto da galeria editorial de 13 mockups — estes são os enviáveis.
13 templates de produção: welcome · enrollment (confirmação de turma) · billing (fatura · coral só em atraso) · nps · digest (resumo semanal) · event-invite · recap (pós-evento) · drip (nurture) · lancamento · oferta · churn (sumiço) · winback (recuperação) · urgent-ops (alerta de sistema). Voz por contexto (caloroso, factual, observacional, curioso…), sem dark pattern.
Regras invioláveis de email (≠ web):
<102KB. Zero flex/grid/backdrop-filter (clientes descartam).background-color) — degradê puro some no Outlook.background-image: gradient precisa de um background-color sólido de fallback na mesma regra → Outlook mostra sólido, Apple Mail/Gmail mostram o brilho.color-scheme: light only). Preheader sempre.Como enviar (Resend):
import { render } from '@react-email/render';
import WelcomeEmail from 'emails/welcome';
const html = await render(<WelcomeEmail firstName="Marina" turma="Operadores · T08" daysToStart={14} platformUrl="https://app.viverdeia.ai" />);
await resend.emails.send({ from: 'Viver de IA <[email protected]>', to, subject: 'tua vaga tá confirmada · bora começar?', html });
Provides UI/UX resources: 50+ styles, color palettes, font pairings, guidelines, charts for web/mobile across React, Next.js, Vue, Svelte, Tailwind, React Native, Flutter. Aids planning, building, reviewing interfaces.
Fetches up-to-date documentation from Context7 for libraries and frameworks like React, Next.js, Prisma. Use for setup questions, API references, and code examples.
npx claudepluginhub rafaelmilagre7/viver-de-ia-ds --plugin viver-de-ia