Taste Skill — Casos de uso, Instalar & Demo ao vivo

Por que usar

Principais recursos

Regras de tipografia: escala, contraste, hierarquia
Aplicação de sistema de espaçamento (sem paddings deslocados por 1px)
Disciplina de paleta de cores (acento único, neutros semânticos)
Crítica de composição (peso visual, espaço em branco)
Explica o porquê: justifica cada correção em vez de só dizer 'faça assim'
Funciona com Tailwind, CSS vanilla, SwiftUI, Compose

Demo ao vivo

Como fica na prática

pronto

Instalar

Escolha seu cliente

~/Library/Application Support/Claude/claude_desktop_config.json · Windows: %APPDATA%\Claude\claude_desktop_config.json

{
  "mcpServers": {
    "taste-skill-leon": {
      "command": "git",
      "args": [
        "clone",
        "https://github.com/Leonxlnx/taste-skill",
        "~/.claude/skills/taste"
      ],
      "_inferred": true
    }
  }
}

Abra Claude Desktop → Settings → Developer → Edit Config. Reinicie após salvar.

~/.cursor/mcp.json · .cursor/mcp.json

{
  "mcpServers": {
    "taste-skill-leon": {
      "command": "git",
      "args": [
        "clone",
        "https://github.com/Leonxlnx/taste-skill",
        "~/.claude/skills/taste"
      ],
      "_inferred": true
    }
  }
}

Cursor usa o mesmo esquema mcpServers que o Claude Desktop. Config de projeto vence a global.

VS Code → Cline → MCP Servers → Edit

{
  "mcpServers": {
    "taste-skill-leon": {
      "command": "git",
      "args": [
        "clone",
        "https://github.com/Leonxlnx/taste-skill",
        "~/.claude/skills/taste"
      ],
      "_inferred": true
    }
  }
}

Clique no ícone MCP Servers na barra lateral do Cline, depois "Edit Configuration".

~/.codeium/windsurf/mcp_config.json

{
  "mcpServers": {
    "taste-skill-leon": {
      "command": "git",
      "args": [
        "clone",
        "https://github.com/Leonxlnx/taste-skill",
        "~/.claude/skills/taste"
      ],
      "_inferred": true
    }
  }
}

Mesmo formato do Claude Desktop. Reinicie o Windsurf para aplicar.

~/.continue/config.json

{
  "mcpServers": [
    {
      "name": "taste-skill-leon",
      "command": "git",
      "args": [
        "clone",
        "https://github.com/Leonxlnx/taste-skill",
        "~/.claude/skills/taste"
      ]
    }
  ]
}

O Continue usa um array de objetos de servidor em vez de um map.

~/.config/zed/settings.json

{
  "context_servers": {
    "taste-skill-leon": {
      "command": {
        "path": "git",
        "args": [
          "clone",
          "https://github.com/Leonxlnx/taste-skill",
          "~/.claude/skills/taste"
        ]
      }
    }
  }
}

Adicione em context_servers. Zed recarrega automaticamente ao salvar.

claude mcp add taste-skill-leon -- git clone https://github.com/Leonxlnx/taste-skill ~/.claude/skills/taste

Uma linha só. Verifique com claude mcp list. Remova com claude mcp remove.

Casos de uso

Usos do mundo real: Taste Skill

Revisar uma landing page gerada pelo Claude pelo filtro de gosto

👤 Qualquer dev que entrega uma página de marketing construída pelo Claude ⏱ ~30 min intermediate

Quando usar: O output inicial parece aceitável, mas sem personalidade.

Pré-requisitos

Skill instalada — git clone https://github.com/Leonxlnx/taste-skill ~/.claude/skills/taste

Fluxo

Criticar

Use a taste-skill em /pages/landing.tsx. Liste cada violação de gosto com severidade e a regra que ela quebrou.✓ Copiado

→ 10 a 20 violações, cada uma com tag
Corrigir tier-1

Aplique apenas as correções de severidade alta. Não altere o texto — apenas o visual/estrutural.✓ Copiado

→ Diff aplicado; site não parece mais 'genérico'
Iterar

Execute a crítica novamente no resultado. Pare quando restar apenas críticas de tier-3.✓ Copiado

→ Converge em 2 passagens

Resultado: Uma página que parece elaborada, não gerada.

Armadilhas

Skill força um estilo que conflita com a marca — Passe --brand /design/brand.md para que ela respeite as diretrizes

Combine com: filesystem

Auditar um único componente para problemas de gosto

👤 Devs que mexem no design system ⏱ ~15 min beginner

Quando usar: Antes de incluir um novo componente no sistema.

Fluxo

Criticar

Execute a taste-skill em /components/Card.tsx. Há problemas de gosto no nível do componente?✓ Copiado

→ Problemas com linhas citadas
Verificar variantes

Compare os estados hover, focus e disabled para coerência visual.✓ Copiado

→ Desvio detectado, se houver

Resultado: Componente lançado com menos tickets 'por que isso parece estranho'.

Armadilhas

Crítica ignora escolhas de design intencionais (ex.: estilo brutalista) — Passe --style brutalist ou similar para relaxar algumas regras

Usar a taste-skill para definir uma baseline para um novo design system

👤 Equipes iniciando um novo produto ⏱ ~60 min intermediate

Quando usar: Você está escolhendo uma escala de tokens, fonte e paleta e quer um padrão sensato.

Fluxo

Gerar baseline

Gere um conjunto de tokens alinhado ao gosto — tipo, espaçamento, cor — para um dashboard SaaS.✓ Copiado

→ tokens.json com justificativa por escolha
Testar sob pressão

Gere páginas de exemplo (login, dashboard, configurações) usando a baseline. Critique seu próprio output.✓ Copiado

→ Páginas + autocrítica com possíveis refinamentos

Resultado: Um ponto de partida defensável que você não precisou negociar com stakeholders.

Armadilhas

Baseline gerada é 'segura demais' — Forneça inputs de marca (humor, referências) para que o output não seja insípido

Combine com: design-extract-mcp

Combinações

Combine com outros MCPs para 10× de alavancagem

taste-skill-leon + design-extract-mcp

Extrair tokens de um site de referência e executar a taste-skill para refinar

Extraia tokens de https://linear.app e execute crítica de gosto em uma página que os utilize.✓ Copiado

taste-skill-leon + filesystem

Persistir críticas como registros de revisão de design

Salve cada crítica em /design/reviews/$(date +%F)-<page>.md.✓ Copiado

Ferramentas

O que este MCP expõe

Ferramenta	Entradas	Quando chamar
critique	path_or_url, brand?	Revisão pré-lançamento
fix	path, severity_threshold	Após crítica, para tier-1/2
baseline	context: {product, audience}	Iniciar um design system do zero

Custo e limites

O que custa rodar

Cota de API: N/A
Tokens por chamada: Moderado — crítica de página completa é de 5 a 10 mil tokens
Monetário: Gratuito
Dica: Criticar no nível de componente é mais barato que página completa; itere assim

Segurança

Permissões, segredos, alcance

Escopos mínimos: filesystem-read filesystem-write

Armazenamento de credenciais: Nenhum

Saída de dados: Local

Solução de problemas

Erros comuns e correções

Crítica não retorna violações em UI obviamente genérica

Skill pode estar no modo 'permissivo' — passe --strict

Correção quebra o layout

Execute com --diff-preview primeiro e aplique seletivamente

Conflita com diretrizes de marca

Passe markdown da marca via --brand para que a skill respeite as exceções

Alternativas

Taste Skill vs. outros

Alternativa	Quando usar	Troca
stevembarclay/pencilplaybook	Você quer gosto em design de UI enraizado no produto Pencil	Específico para o Pencil; a taste-skill é geral
Apenas um prompt brand.md	Você lança apenas um produto	Não captura os padrões genéricos de IA contra os quais esta skill foi moldada

Mais

Recursos

📖 Leia o README oficial no GitHub

🐙 Ver issues abertas

🔍 Ver todos os 400+ servidores MCP e Skills