Specsfy Specialist Ui Design

Published by promovaweb in specsfy

No known issues252 installs

What this skill does

Projetar e revisar interfaces visuais de sistemas, dashboards e aplicações com hierarquia, layout, tokens, componentes, densidade, estados e responsividade. Use para telas, dashboards, design systems, layouts, tabelas, formulários e navegação; combine com UX e acessibilidade quando houver fluxo ou interação.

Add Specsfy Specialist Ui Design to your agent

Review the source and files first. When you are ready, copy the prompt instruction or use the CLI command supported by your environment.

Install with a prompt

Paste this into a compatible coding agent:

add this skill "specsfy-specialist-ui-design" from https://github.com/promovaweb/specsfy

Install with the CLI

Run this command in a controlled environment after reviewing the repository:

npx skills add https://github.com/promovaweb/specsfy --skill specsfy-specialist-ui-design

Skill instructions

Design de interface

Fluxo

  1. Identificar usuário, tarefa principal, frequência, dispositivo e densidade.
  2. Inventariar conteúdo, ações, riscos e estados antes do layout.
  3. Escolher shell, navegação e grid coerentes com a arquitetura da informação.
  4. Definir hierarquia por agrupamento, contraste, escala e espaço.
  5. Aplicar tokens e componentes existentes antes de criar variantes.
  6. Desenhar estados e casos extremos em todos os breakpoints.
  7. Validar legibilidade, consistência, acessibilidade e implementação.

Padrões

  • Dashboard responde perguntas; não é coleção de cards decorativos.
  • Colocar visão geral antes do detalhe e ação junto do objeto afetado.
  • Usar tabela para comparação densa, lista para leitura e cards para entidades distintas.
  • Preservar posição, filtros e contexto ao navegar entre lista e detalhe.
  • Exibir unidade, período, origem, atualização e vazio nos dados.
  • Manter ação destrutiva distinta, explicada e reversível quando possível.
  • Definir tokens semânticos e uma escala limitada de spacing/tipografia.

Validação

  • Cenários nominal, loading, empty, partial, error, offline e permission denied.
  • Conteúdo real curto/longo, números extremos e internacionalização.
  • Viewports, zoom, contraste, teclado e reduced motion.
  • Comparação com componentes e tokens já publicados.

Leia references/standards.md para padrões de telas, dashboards, layouts e sistemas de design.

Files included

  • SKILL.md
  • agents/openai.yaml
  • references/standards.md

More skills

Specsfy Specialist Ui Design: Install, Source and Security | FunnelSlayer