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.

跳到安装

来源信息

仓库
criptogus/Samba-Builder
最近来源活动
2026年9月9日 14:19
检测到的 SKILL.md 语言
葡萄牙语
星标
1
分支
1

安装方式

默认使用会先检查来源的 Prompt;你也可以切换为直接命令,或下载本地副本。

检查来源文件

决定是否安装前,请先阅读 SKILL.md,以及 SkillsMP 当前展示的配套文件。

正在显示 SKILL.md

SKILL.md
来源说明 · 只读预览
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.
在 GitHub 查看