Communitygithub.com

plugin87/ux-writing

Redacta o revisa textos de interfaz — botones, errores, estados vacíos, microcopy, notificaciones, etiquetas — utilizando el sistema de voz y tono (claro, conciso, útil, humano, honesto) con la fórmula qué→por qué→cómo y las reglas de lenguaje inclusivo. Úsalo cuando necesites textos de interfaz, mensajes de error, estados vacíos o una revisión de textos.

¿Qué es ux-writing?

Esta skill permite a un agente de IA (como Claude Code, Cursor o Codex) actuar como un redactor de UX profesional. Su función principal es generar o criticar el texto de la interfaz de usuario (UI copy) siguiendo un sistema de voz y tono predefinido en el archivo `content/voice-tone.md`. Esto abarca desde microcopy (texto breve) y botones hasta mensajes de error, diálogos de confirmación y estados vacíos. La skill aplica fórmulas específicas: los botones deben comenzar con un verbo y nombrar el resultado, los diálogos de confirmación requieren que el botón de confirmación repita la acción y el objeto (ej. "Eliminar cuenta"), y los errores siguen la estructura qué→por qué→cómo solucionarlo. También impone reglas mecánicas (uso de mayúscula inicial, números, sin culpar al usuario) y una lista de verificación previa al lanzamiento de 10 puntos para garantizar la calidad, legibilidad y accesibilidad (incluyendo internacionalización y soporte RTL). Es útil para desarrolladores que buscan mejorar la UX de su producto manteniendo una voz coherente.

Compatible con~Claude Code~Codex CLI~Cursor
Part ofDesign & UI
npx skills add https://github.com/plugin87/ux-ui-agent-skills/tree/main/.claude/skills/ux-writing
Ver original→Ver todas las habilidades

Preguntar en tu IA favorita

Abre un nuevo chat con esta habilidad de agente ya precargada.

OpenAIChatGPTClaudeClaudeGeminiGeminiGrokGrokPerplexityPerplexityDeepSeekDeepSeek

Documentación

Skill: Redacción UX

Produce o critica textos de interfaz con la voz del proyecto.

Pasos

  1. Lee content/voice-tone.md (principios de voz, espectro de tono, fórmulas, patrones de microcopy, lenguaje inclusivo, lista de verificación previa al lanzamiento).
  2. Ajusta el tono al estado emocional del usuario (onboarding/éxito/rutina/error/destructivo). Cuanto mayor sea el estrés, más sencillo debe ser el lenguaje.
  3. Aplica las fórmulas:
    • Botones: antepone el verbo, nombra el resultado.
    • Diálogos de confirmación: el botón de confirmación repite la acción y el objeto — "Eliminar cuenta", no "Eliminar"/"OK"/"Sí"/"Confirmar". El título pregunta ("¿Eliminar cuenta?"), el botón responde con las mismas palabras. Cancelar se queda como "Cancelar". Para acciones irreversibles/de alto riesgo, requieres un paso de escribir para confirmar (WCAG 3.3.4/3.3.6).
    • Errores: qué pasó → por qué → cómo solucionarlo (sin callejones sin salida, sin códigos/trazas de pila).
    • Estados vacíos: valor → primera acción.
  4. Aplica las reglas mecánicas: mayúscula inicial de oración, sin TODO MAYÚSCULAS, números, sin culpar al usuario, etiquetas (no placeholders), sin instrucciones direccionales o solo con color.
  5. Ejecuta la lista de verificación previa al lanzamiento de 10 puntos.

Resultado

Texto final (o una revisión en rojo) que se lee de forma natural en voz alta y que supera la lista de verificación. Respeta cualquier límite de caracteres para interfaces ajustadas.

Verificación (obligatoria antes de declarar terminado)

Evalúa cada línea con la lista de verificación previa al lanzamiento de 10 puntos en content/voice-tone.md — no la omitas:

  • Se lee de forma natural en voz alta; verbo antepuesto en acciones; sin jerga/culpas/callejones sin salida.
  • Los errores siguen qué→por qué→cómo; los estados vacíos dan valor→acción; nada de simples "Sin datos"/"Error".
  • Mecánica: mayúscula inicial de oración, números, etiquetas (no placeholders), sin indicaciones solo de color/dirección, lenguaje inclusivo.
  • Dentro de los límites de caracteres; traducible (sin concatenación — consulta 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.

Skills relacionados

steipete/sag

ElevenLabs text-to-speech with mac-style say UX.

community

steipete/oracle

Oracle CLI second-model review/debug/refactor/design with selected files, dry-run token checks, API or browser engine.

community

steipete/peekaboo

Capture and automate macOS UI with the Peekaboo CLI.

community

mattpocock/design-an-interface

Generate multiple radically different interface designs for a module using parallel sub-agents. Use when user wants to design an API, explore interface options, compare module shapes, or mentions "design it twice".

community

mattpocock/prototype

Build a throwaway prototype to flesh out a design — a runnable terminal app for state/business-logic questions, or several radically different UI variations toggleable from one route.

community

mattpocock/grill-me

Interview the user relentlessly about a plan or design until reaching shared understanding, resolving each branch of the decision tree. Use when user wants to stress-test a plan, get grilled on their design, or mentions "grill me".

community