Skip to main content

skill-samba-ds

Aplicar tokens confirmados e padrões de UI Samba aos projetos de clientes para 10x melhor UX e UI.

Jump to install

Source facts

Repository
criptogus/Samba-Builder
Last source activity
September 9, 2026 at 14:19
Detected SKILL.md language
Portuguese
Stars
1
Forks
0

Install options

The review-first prompt is selected by default. You can switch to a direct command or download a local copy.

Review the source files

Read SKILL.md and any companion files shown by SkillsMP before deciding whether to install.

Showing SKILL.md

SKILL.md
Source instructions · Read-only preview
name
skill-samba-ds
version
2.0.0
description
Aplicar tokens confirmados e padrões de UI Samba aos projetos de clientes para 10x melhor UX e UI.
# Design System Samba Use o brand kit confirmado no contexto da Fábrica para criar uma experiência de usuário (UX) e interface (UI) 10x superiores ao mercado (ex: Lovable/Replit). A estética deve ser premium, moderna e extremamente polida. Não substitua cores ou tipografia silenciosamente. Antes de propor componente, examine a biblioteca local; reutilize e aprimore Button, Input, Table, Dialog, Toast, EmptyState, PageHeader e DataFilter existentes. Se não existir, proponha um wrapper consistente, bonito e acessível. - **Tokens Semânticos & Estética**: primary, background, foreground, radius, font; espaço em múltiplos de 8px. Use sombras suaves (soft shadows), bordas refinadas e contrastes elegantes. Evite designs genéricos. - **Motion & Micro-interações**: Adicione motion intencional para explicar a interface (animações de entrada, transições de estado, feedback tátil visual). Deve ser breve, fluido e respeitar `prefers-reduced-motion`. - **Layout & Responsividade**: Layout começa no mobile (mobile-first); ações tocáveis com pelo menos 44px. A interface deve ser impecável e fluida em qualquer tamanho de tela (desktop, tablet, mobile). - **Tratamento de Estados (10x UX)**: Todo fluxo DEVE ter estado vazio (ilustrado/engajador), loading (skeletons ou spinners elegantes), erro (mensagens amigáveis e claras com ações de recuperação) e sucesso (feedback positivo não obstrutivo). Implemente Optimistic UI quando possível para percepção de velocidade. - **Acessibilidade Inegociável**: Contraste de texto normal >=4.5:1, texto grande >=3:1; foco visível e elegante; nomes acessíveis (aria-labels); navegação completa por teclado. Target WCAG 2.1 AA. - Não trate um preset como auditoria visual concluída. Teste screenshots em desktop e mobile e relate o que verificou. - Texto padrão PT-BR; copy deve ser claro, conciso e respeitar o tom e domínio do cliente. No modo Design, proponha alterações de tokens e composição sem escrever arquivos, focando na excelência visual. No Build, use os tokens confirmados, implemente a UI de alta qualidade e crie testes para fluxos Must. Não alegue importação de Figma ou análise de logo sem ter usado ferramenta capaz de fazê-la.
View on GitHub