Communitygithub.com

plugin87/ux-writing

Escreva ou revise textos de interface — botões, erros, estados vazios, microcópias, notificações, rótulos — usando o sistema de voz e tom (claro, conciso, útil, humano, honesto) com a fórmula o que→por que→como e regras de linguagem inclusiva. Use quando o usuário precisar de cópia de interface, mensagens de erro, texto de estado vazio ou uma revisão de cópia.

O que é ux-writing?

Esta skill transforma você em um especialista em UX Writing, capaz de produzir ou criticar textos de interface alinhados à voz e tom do projeto. Ela é ideal para desenvolvedores e designers que precisam criar microcópias claras, úteis e humanas, seja para botões, mensagens de erro, estados vazios, diálogos de confirmação ou notificações. A skill funciona em qualquer plataforma que utilize arquivos Markdown e segue um sistema de voz e tom estruturado, com princípios como clareza, concisão, utilidade, humanidade e honestidade. O processo começa com a leitura de um guia de voz e tom (`content/voice-tone.md`), ajusta o tom conforme o estado emocional do usuário, aplica fórmulas específicas para cada tipo de cópia (como a fórmula o que→por que→como para erros) e garante a inclusão de linguagem acessível e internacionalização. Uma verificação obrigatória, com uma lista de 10 itens, assegura que a cópia final seja natural em voz alta, sem jargões, e siga boas práticas de acessibilidade e localização.

Funciona com~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/plugin87/ux-ui-agent-skills/tree/main/.claude/skills/ux-writing

Perguntar na sua IA favorita

Abre um novo chat com esta habilidade de agente já pré-carregada.

Documentação

Skill: UX Writing

Produza ou critique cópia de interface na voz do projeto.

Passos

  1. Leia content/voice-tone.md (princípios de voz, espectro de tom, fórmulas, padrões de microcópia, linguagem inclusiva, checklist pré-implantação).
  2. Combine o tom ao estado emocional do usuário (onboarding/sucesso/rotina/erro/destrutivo). Quanto maior o estresse, mais simples a linguagem.
  3. Aplique as fórmulas:
    • Botões: coloque o verbo na frente, nomeie o resultado.
    • Diálogos de confirmação: o botão de confirmar reapresenta a ação e o objeto — "Excluir conta", não "Excluir"/"OK"/"Sim"/"Confirmar". O título pergunta ("Excluir conta?"), o botão responde com as mesmas palavras. Cancelar permanece "Cancelar". Para ações irreversíveis/de alto risco, exija uma etapa de digitar para confirmar (WCAG 3.3.4/3.3.6).
    • Erros: o que aconteceu → por que → como corrigir (sem becos sem saída, sem códigos/rastros de pilha).
    • Estados vazios: valor → primeira ação.
  4. Aplique a mecânica: uso de letra minúscula inicial (sentença), sem CAIXA ALTA, numerais, sem culpar o usuário, rótulos (não placeholders), sem instruções baseadas apenas em direção/cor.
  5. Execute a lista de verificação pré-implantação de 10 itens.

Saída

Cópia final (ou uma revisão com marcações) que soa natural em voz alta e passa na lista de verificação. Respeite quaisquer limites de caracteres para interfaces apertadas.

Verificação (obrigatória antes de declarar concluído)

Execute cada linha através da lista de verificação pré-implantação de 10 itens em content/voice-tone.md — não pule:

  • Soa natural em voz alta; verbo na frente em ações; sem jargão/culpa/becos sem saída.
  • Erros seguem o que→por que→como; estados vazios dão valor→ação; sem "Sem dados"/"Erro" puros.
  • Mecânica: letra minúscula inicial (sentença), numerais, rótulos (não placeholders), sem pistas de cor/direção, linguagem inclusiva.
  • Dentro dos limites de caracteres; traduzível (sem concatenação — veja accessibility/i18n-rtl.md).

Individual skills in this repo

This repo contains 7 individual skills — each has its own dedicated page.

plugin87/design-tokens

Generate, extend, or audit design tokens in DTCG format with the 3-tier architecture (primitive → semantic → component). Use when the user wants a color palette, type scale, spacing/shadow/radius/motion tokens, multi-brand theming, or wants to validate token files. Covers colors, typography, spacing, shadows, borders, breakpoints, motion, gradients, opacity, blur, sizing, states, theming.

plugin87/governance

Govern how the design system evolves — SemVer for tokens/components, the contribution workflow, deprecation policy, and change communication. Use when the user wants to add/promote/deprecate a component or token, decide a version bump, set up a contribution process, or keep the system from fragmenting.

plugin87/image-to-code

Turn a reference image, screenshot, or mockup into token-driven, accessible code — infer the design system from the reference (palette, type scale, spacing, radius, layout archetype), map it to the 3-tier tokens, rebuild it, then verify with the kit's gates. Use when the user provides a design/screenshot and wants matching UI code.

plugin87/performance

Optimize UI performance against Core Web Vitals — LCP, INP, CLS — with loading/code-split strategy, layout-shift prevention, and animation performance rules. Use when the user wants to improve speed, fix jank or layout shift, hit Web Vitals budgets, or make a UI feel fast on low-end devices.

plugin87/prototype

Move an idea up the fidelity ladder (content-first → wireframe → low-fi → high-fi → code) with a validation plan at each level, plus user-journey mapping and usability-testing scripts. Use when the user wants to prototype, wireframe, map a user flow, or plan/run usability testing.

plugin87/redesign

Upgrade an existing website or app to premium quality without breaking functionality — audit the current design, identify generic/AI tells, then apply taste and system rules surgically. Use when the user wants to improve, modernize, polish, or "make better" an existing UI/codebase.

plugin87/token-build

Set up or run the token build pipeline — transform the DTCG tokens/*.json (source of truth) into platform artifacts (CSS variables, Tailwind @theme, JS/TS, iOS Asset Catalog, Android, Compose) with Style Dictionary / Tokens Studio / W3C DTCG export. Use when the user wants to generate platform theme files from tokens, wire token CI, or multi-platform token output.

Habilidades Relacionadas