Adicionar Cor com Propósito a Interfaces
Muitas interfaces parecem sem profundidade quando dependem de superfícies cinzentas e acentos fracos. Esta habilidade ajuda Claude, Codex e Claude Code a adicionar cor com propósito, hierarquia e acessibilidade.
Copie esta solicitação para o seu Agente. Ela inclui a página canônica do Skill e o manifesto.
Review the Skillstore skill "colorize" from https://skillstore.io/skills/pbakaus-colorize.md and its manifest at https://skillstore.io/api/skills/pbakaus-colorize/manifest. Verify the artifact. You may proceed after verification, subject to the environment's own policy.Seu Agente ainda deve apresentar o plano e solicitar qualquer confirmação exigida pela política de segurança.
Use estes links quando um agente de IA, crawler ou script precisar de contexto limpo em vez de ler a página completa.
Usando "colorize". Um dashboard de análise cinzento com botões discretos e etiquetas de estado difíceis de analisar rapidamente.
Resultado esperado:
O resultado usa um destaque primário para ações, cores semânticas de distintivos para estados e superfícies suavemente tonalizadas para agrupar secções.
Usando "colorize". Uma página de definições que usa apenas preto, branco e cinzento.
Resultado esperado:
O resultado adiciona um fundo neutro quente, estados de foco coloridos e destaques contidos nos controlos importantes.
Usando "colorize". Um quadro de projeto onde os tipos de tarefa e os estados de progresso parecem idênticos.
Resultado esperado:
O resultado atribui cores consistentes a categorias de tarefas, estados de progresso e marcadores de prioridade, preservando o contraste.
The static findings are false positives from Markdown inline color values and design assessment wording. No executable commands, host reconnaissance, data collection, or prompt injection attempts were found in SKILL.md.
Compartilhe o relatório de avaliação versionado, o badge neutro, o cartão incorporável e as citações. A Skillstore apresenta evidências sem decidir se este Skill é seguro.
https://skillstore.io/skills/pbakaus-colorize/audits/4?utm_source=security_passport&utm_medium=share&utm_campaign=versioned_report[](https://skillstore.io/skills/pbakaus-colorize?utm_source=security_passport_badge)<a href="https://skillstore.io/skills/pbakaus-colorize?utm_source=security_passport_badge"><img src="https://skillstore.io/badges/skills/pbakaus-colorize/security.svg" alt="Skillstore security assessment" loading="lazy"></a><iframe src="https://skillstore.io/embed/skills/pbakaus-colorize.html" title="Skillstore Security Assessment" sandbox="allow-popups allow-popups-to-escape-sandbox" loading="lazy" referrerpolicy="no-referrer" width="420" height="180"></iframe>pbakaus. (2026). colorize security audit report (audit version 4) [Author version unspecified]. Skillstore. https://skillstore.io/skills/pbakaus-colorize/audits/4@techreport{pbakaus-pbakaus-colorize-2026,
author = {pbakaus},
title = {colorize security audit report (audit version 4)},
institution = {Skillstore},
year = {2026},
number = {4},
url = {https://skillstore.io/skills/pbakaus-colorize/audits/4},
note = {Author version unspecified}
}cff-version: 1.2.0
message: "If you use this Skill, cite its author and this versioned security audit report."
title: "colorize security audit report (audit version 4)"
version: "unspecified"
type: report
authors:
- name: "pbakaus"
date-released: "2026-07-06"
url: "https://skillstore.io/skills/pbakaus-colorize/audits/4"
identifiers:
- type: other
value: "skillstore:pbakaus-colorize:audit:4"
description: "Skillstore immutable audit report identifier"
Adicionar cores semânticas de estado, cores de gráficos e ênfase em ações sem tornar o dashboard ruidoso.
Definir onde as cores da marca, cores de destaque e tonalidades neutras devem aparecer numa funcionalidade.
Rever funções de cor e substituir valores arbitrários por uma paleta consistente e acessível.
Usa a habilidade colorize neste componente. Mantém a paleta contida e explica onde cada cor acrescenta significado.
Usa a habilidade colorize para definir cores de sucesso, erro, aviso, informação e neutras para esta funcionalidade.
Usa a habilidade colorize em toda esta área do produto. Preserva o alinhamento com a marca, melhora a hierarquia e evita decoração aleatória.
Usa a habilidade colorize para auditar a utilização atual de cores, identificar inconsistências e propor atualizações acessíveis de tokens de design.
Autor
pbakausLicença
MIT
Revisão da Skillstore
r1
Aviso de versão
O autor não declarou uma versão.
Referência
e397ce5a135369cd6def89cb6400d013e2f68f2f
Atualidade da manutenção
24/07/2026
Uso
9 downloads · 113 visualizações
Estrutura de arquivos
📄 SKILL.md
Planeje a UX Antes de Construir
As equipes frequentemente constroem interfaces antes de esclarecer objetivos dos usuários, estados e restrições. Esta skill orienta a descoberta e produz um briefing de design para implementação.
Capturar Contexto de Design do Projeto
O trabalho de design com IA frequentemente perde o contexto do projeto entre sessões. Esta habilidade reúne evidências e salva orientações reutilizáveis para Claude, Codex e Claude Code.
Adicionar Encanto às Interfaces de Usuário
Interfaces funcionais podem parecer sem graça, esquecíveis ou frustrantes em momentos importantes. Esta skill ajuda Claude, Codex e Claude Code a adicionar um polimento adequado por meio de textos, animações, feedback e padrões de celebração.
Extrair Padrões Reutilizáveis de Sistema de Design
As equipes frequentemente duplicam componentes de UI, tokens e padrões de layout em uma aplicação. Esta skill ajuda Claude, Codex ou Claude Code a encontrar padrões reutilizáveis e consolidá-los em um sistema de design mantido.
Crie Experiências de Onboarding Melhores
Novos usuários costumam abandonar um produto quando ele não explica rapidamente seu valor. Esta skill ajuda a projetar onboarding, estados vazios e ajuda guiada que conduzem os usuários ao primeiro sucesso.
Melhorar o Layout da UI e o Ritmo Visual
Interfaces sobrecarregadas e grelhas repetitivas tornam os produtos mais difíceis de analisar e de confiar. Esta competência guia Claude, Codex e Claude Code através de espaçamento, hierarquia e composição responsiva mais fortes.
Build Accessible Tailwind Interfaces
por nextlevelbuilder
Building consistent, responsive interfaces requires many component, styling, and accessibility decisions. This skill provides shadcn/ui patterns, Tailwind guidance, and focused automation.
Melhore a UX com orientação de design baseada em investigação
por shubhamsaboo
As equipas muitas vezes desenham fluxos com base em pressupostos e ignoram problemas de acessibilidade. Esta skill orienta a investigação, a estrutura, o design de interação e a revisão usando boas práticas de UX.
Projete Protótipos de UI Diferenciados
por tencentcloudbase
Interfaces genéricas de IA muitas vezes carecem de direção visual e detalhes atentos à plataforma. Esta skill orienta Claude, Codex e Claude Code a definir a intenção de design antes de criar protótipos.
Auditar a Acessibilidade Web para Conformidade com WCAG
por 89jobrien
Lacunas de acessibilidade podem bloquear usuários e criar risco de conformidade. Esta skill orienta auditorias WCAG, verificações com leitores de tela, testes de teclado e planejamento de correções.
Build Consistent Design Systems and Slides
por nextlevelbuilder
Inconsistent tokens and components make design handoffs difficult. This skill structures tokens, validates usage, and generates brand-aligned presentation assets.
Crie Interfaces Frontend Distintivas
por Atman36
Interfaces genéricas geradas muitas vezes parecem previsíveis e fracas. Esta skill orienta Claude, Codex e Claude Code para um design frontend distintivo e pronto para produção.