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.

Aller à l'installation

Informations de source

Dépôt
criptogus/Samba-Builder
Dernière activité de la source
9 septembre 2026 à 14:19
Langue détectée de SKILL.md
portugais
Étoiles
1
Forks
0

Options d'installation

Le prompt qui vérifie d'abord la source est sélectionné par défaut. Vous pouvez passer à une commande directe ou télécharger une copie locale.

Vérifiez les fichiers source

Lisez SKILL.md et les fichiers associés affichés par SkillsMP avant de décider de l'installer.

Affichage de SKILL.md

SKILL.md
Instructions source · Aperçu en lecture seule
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.
Voir sur GitHub