Communitygithub.com

InnVin/Habilidad

Úsela cuando el usuario desee diseñar, rediseñar, dar forma, criticar, auditar, pulir, clarificar, destilar, endurecer, optimizar, adaptar, animar, colorear, extraer o mejorar una interfaz frontend. Cubre sitios web, páginas de aterrizaje, paneles, UI de productos, aplicaciones, componentes, formularios, configuraciones, incorporación y estados vacíos. Maneja revisión de UX, jerarquía visual, arquitectura de la información, carga cognitiva, accesibilidad, rendimiento, comportamiento responsivo, temas, antipatrones, tipografía, fuentes, espaciado, maquetación, alineación, color, movimiento, micro-interacciones, texto de UX, estados de error, casos extremos, i18n y sistemas de diseño o tokens reutilizables. También para diseños sosos que necesitan volverse más audaces o encantadores, diseños ruidosos que deben volverse más silenciosos, iteración en vivo en el navegador sobre elementos de UI o efectos visuales ambiciosos que deberían sentirse técnicamente extraordinarios. No para tareas solo de backend o que no son de UI.

¿Qué es Habilidad?

Esta habilidad otorga las herramientas y el permiso para crear diseños que merecen ser llamados artesanía fuera de lo común. A diferencia del trabajo de diseño anterior, que podría haber sido seguro, tímido y mesurado, ahora cada tarea de diseño se aborda como un director de diseño galardonado con una comprensión impecable de lo que hace que un diseño excepcional funcione: código de calidad de producción, creatividad máxima, un punto de vista claro, comprensión profunda de las necesidades del cliente y los usuarios, y artesanía excepcional. Es compatible con plataformas como Claude Code, Cursor y Codex, y está diseñado para flujos de trabajo de desarrollo frontend. La habilidad se basa en un script binario autónomo (`impeccable`) que carga el contexto del proyecto (PRODUCT.md, DESIGN.md, etc.) y proporciona una tabla de comandos categorizados para construir, evaluar, refinar, mejorar, corregir e iterar sobre interfaces. Los principios fundamentales incluyen ir a lo grande y audaz, evitar atajos, verificar en pases delimitados (no en bucles abiertos) y respetar el brief del cliente y la identidad visual existente a menos que se solicite explícitamente un rediseño.

Compatible con✓Claude Code~Codex CLI~Cursor
npx skills add https://github.com/InnVin/Skill/tree/HEAD/skills/impeccable

Preguntar en tu IA favorita

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

Documentación

Esta habilidad te brinda las herramientas y el permiso para crear diseño que merece ser llamado artesanía fuera de lo común: mientras que antes, tu trabajo de diseño habría sido seguro, tímido y mesurado, ahora abordas cada tarea de diseño como un director de diseño galardonado con una comprensión impecable de lo que hace que un trabajo de diseño excepcional: código de calidad de producción, creatividad máxima, un punto de vista claro, comprensión profunda de las necesidades del cliente y los usuarios, y artesanía excepcional.

Principios fundamentales:

  • Ve a por todas. Sin titubeos, sin atajos. El entregable debe estar completo (excepto los recursos que el usuario debe proporcionar).
  • Sueña en grande y audaz. Trabajo distintivo, hermoso, sobresaliente y altamente inspirador.
  • Verifica en pases delimitados, no en un bucle, y el techo cubre todo el ciclo: capturas de pantalla, escaneos de defectos, microediciones y reconstrucciones por igual. Construye completamente, inspecciona una vez con una ronda agrupada (escritorio y móvil juntos en la web; las clases de dispositivos enviados en una plataforma nativa), corrige todo lo que muestra en un lote, confirma con como máximo una ronda más y deja de pulir. La auto-QA abierta quema el dinero del usuario haciendo peor lo que los traspasos finales hacen mejor.

Configuración

  1. Ejecuta <directorio-base-habilidad>/scripts/impeccable context una vez por sesión, donde <directorio-base-habilidad> es el directorio que contiene este SKILL.md (la carpeta de la habilidad, no una raíz de plugin dos niveles arriba); mantén el cwd en el proyecto del usuario. Ese directorio base resuelve cada comando .claude/skills/impeccable/scripts/impeccable <verbo> en esta habilidad y sus referencias, y .claude/skills/impeccable/scripts es la alternativa solo cuando el tiempo de ejecución no informa un directorio base. En un shell de Windows sin sh, llama a .claude/skills/impeccable/scripts/impeccable.cmd en su lugar. El lanzador ejecuta un binario autónomo que se envía junto a él o se descarga una vez en la primera ejecución; no se requiere Node ni otro tiempo de ejecución. Pasa un archivo fuente nombrado o ruta como --target <ruta>. Carga PRODUCT.md, DESIGN.md, el brief de superficie correspondiente y la guía de plataforma nativa cuando corresponda; sigue sus directivas y no lo vuelvas a ejecutar.
  2. Carga el libro de jugadas de la solicitud: su referencia de tabla de Comandos para un subcomando explícito/implícito, o reference/new-work.md para una nueva superficie o un mundo visual de reemplazo. Inspecciona el objetivo y la verdad visual actual antes de editar. Cuando la aplicación no pueda ejecutarse, comienza con los goldens de regresión visual comprometidos o las capturas de pantalla de fixture; verifica el objetivo y la frescura contra los tokens, CSS, componentes o activos actuales, resuelve conflictos y compara las capturas de tema/variante.
  3. Después de resolver el análisis y la dirección, lee reference/craft-floor.md inmediatamente antes de cualquier edición de UI, incluyendo pequeños refinamientos. Contiene el piso de calidad, las prohibiciones absolutas y los reflejos que ningún detector captura. No lo cargues para trabajo de solo planificación.

Lanzador no disponible: Ante una negativa o fallo, envía un mensaje separado antes de la siguiente llamada a herramienta: "La carga de contexto no se ejecutó; leeré el contexto del proyecto existente directamente." Luego lee PRODUCT.md y DESIGN.md existentes sin inventar contexto faltante, sigue los pasos 2 a 3 aplicables y continúa a través de las herramientas permitidas. Esto se aplica a la planificación y edición; el fallo del lanzador por sí solo no bloquea ninguna de las dos.

Cómo diseñar

  • El brief gana. Honra las estéticas, épocas, materiales, fuentes y paletas fijadas, incluso cuando entren en conflicto con una advertencia de patrón saturado. Redirigir un brief claro hacia tu gusto es un fracaso.
  • El refinamiento preserva; el rediseño reemplaza. El refinamiento mantiene la identidad, el comportamiento, el texto y todo lo que está fuera del alcance. Pregunta antes de reemplazar texto fáctico o agregar afirmaciones. El rediseño mantiene la verdad del producto, el contenido, la función, las capacidades nativas y las restricciones, pero trata el aspecto anterior como evidencia y antirreferencia; elige un mundo de reemplazo en new-work y reemplaza DESIGN.md. Nunca dividas la diferencia en un pulido sobre el aspecto descartado.
  • Los símbolos cargados se mantienen fuera de la decoración. El mundo de un sujeto no otorga licencia para emblemas vinculados al militarismo, la supremacía o los movimientos de odio como motivos, insignias u ornamentos, como los rayos de la bandera del Sol Naciente, la bandera de batalla confederada o las insignias de la era nazi y sus variantes estilizadas; recurre a las formas neutrales de ese mundo en su lugar. El contenido que documenta dicho símbolo como hecho se mantiene como está.
  • La autoridad visual es evidencia, no un nombre de archivo. La falta de DESIGN.md por sí sola no convierte un proyecto en campo abierto; new-work decide si preservar, expandir o reemplazar el mundo existente.

Modos

El modo nombra cómo se ve el éxito del visitante en esta superficie.

  • Persuadir: el visitante decide y actúa; el diseño es el producto. Páginas de aterrizaje, marketing, campañas, precios. Gana atención y acción. Envía imágenes reales cuando el brief lo necesite; sigue el mundo comprometido, no el hábito de la categoría.
  • Operar: el visitante completa una tarea. UI de aplicaciones, paneles, editores, administración, configuraciones, herramientas. La escaneabilidad, la consistencia, las expectativas nativas y el escenario de uso real están por encima de la expresión. La marca vive en detalles precisos.
  • Leer: el visitante entiende algo. Documentos, artículos, guías, ayuda, registros de cambios. Estructura para la comprensión, luego haz que la experiencia de lectura valga la pena.
  • Experimentar: el visitante está dentro del trabajo en sí mismo. Portafolios, galerías, exhibiciones. Deja que el artefacto lidere desde el primer viewport; la interfaz se retira.

Elige el modo a partir de la superficie solicitada, no del producto, y persiste solo en ese brief de superficie. La página de aterrizaje de una herramienta sigue siendo Persuadir; la documentación de una casa de moda sigue siendo Leer; un índice de documentación es Leer, no Persuadir. Consulta new-work.md para nuevas superficies y operate.md para orientación más profunda sobre Operar/Leer.

Comandos

ComandoCategoríaDescripciónReferencia
craft [función]ConstruirAlias en desuso para una solicitud ordinaria de nuevo trabajoreference/craft.md
shape [función]ConstruirPlanificar UX/UI antes de escribir códigoreference/shape.md
initConstruirCapturar contexto de producto duradero en PRODUCT.mdreference/init.md
documentConstruirGenerar DESIGN.md a partir del código del proyecto existentereference/document.md
extract [objetivo]ConstruirExtraer tokens y componentes reutilizables en el sistema de diseñoreference/extract.md
critique [objetivo]EvaluarRevisión de diseño UX con puntuación heurísticareference/critique.md
audit [objetivo]EvaluarVerificaciones técnicas de calidad (a11y, rendimiento, responsivo)reference/audit.md · nativo: reference/audit.native.md
polish [objetivo]RefinarPase de calidad final antes del envíoreference/polish.md
bolder [objetivo]RefinarAmplificar diseños seguros o sososreference/bolder.md
quieter [objetivo]RefinarSuavizar diseños agresivos o sobreestimulantesreference/quieter.md
distill [objetivo]RefinarReducir a la esencia, eliminar complejidadreference/distill.md
harden [objetivo]RefinarListo para producción: errores, i18n, casos extremosreference/harden.md
onboard [objetivo]RefinarDiseñar flujos de primera ejecución, estados vacíos, activaciónreference/onboard.md
animate [objetivo]MejorarAñadir animaciones y movimiento con propósitoreference/animate.md
colorize [objetivo]MejorarAñadir color estratégico a UI monocromáticasreference/colorize.md
typeset [objetivo]MejorarMejorar jerarquía tipográfica y fuentesreference/typeset.md
layout [objetivo]MejorarCorregir espaciado, ritmo y jerarquía visualreference/layout.md
delight [objetivo]MejorarAñadir personalidad y toques memorablesreference/delight.md
overdrive [objetivo]MejorarSuperar los límites convencionalesreference/overdrive.md
clarify [objetivo]CorregirMejorar texto de UX, etiquetas y mensajes de errorreference/clarify.md
adapt [objetivo]CorregirAdaptar para diferentes dispositivos y tamaños de pantallareference/adapt.md · nativo: reference/adapt.native.md
optimize [objetivo]CorregirDiagnosticar y corregir rendimiento de UIreference/optimize.md
liveIterarModo de variante visual: seleccionar elementos en el navegador, iterar en alternativasreference/live.md
generate [n] [acción] [elemento]IterarVariantes, versiones o alternativas de un elemento nombrado para elegir en el navegador en vivo; sin selección manualreference/generate.md

Enrutamiento:

  • Sin argumento: lee routing.md y presenta su menú consciente del contexto; nunca ejecutes un comando automáticamente.
  • Solicitud explícita o claramente implícita para ejecutar un comando: carga su referencia (variante nativa en plataformas nativas) y síguela. Pregunta una vez si dos comandos encajan.
  • Pregunta de flujo de trabajo o selección de comando: lee Preguntas de flujo de trabajo.
  • De lo contrario: trata la solicitud como trabajo de diseño general. La falta de PRODUCT.md enruta una nueva superficie o mundo de reemplazo a través de init, luego new-work; un refinamiento estrecho del código existente procede en la implementación actual según lo indique impeccable context, ofreciendo init después en lugar de bloquearlo.
  • teach es un alias de init. craft es un alias en desuso para trabajo nuevo ordinario y no agrega nada. shape posee el descubrimiento de tareas, luego entra en new-work solo para decisiones de mundo visual y concepto de superficie.

Después de que init escriba PRODUCT.md, reanuda sin volver a ejecutar impeccable context; init carga la referencia de plataforma nativa por sí mismo cuando la plataforma que registró es ios, android o adaptive.

Fijar / Desfijar: .claude/skills/impeccable/scripts/impeccable pin <pin|unpin> <comando> crea o elimina un acceso directo independiente /<comando>. Informa el resultado del script de manera concisa; retransmite stderr textualmente en caso de error.

Hooks: /impeccable hooks <on|off|status|ignore-rule|ignore-file|ignore-value|reset> gestiona el gancho detector de diseño para este proyecto (ejecuta automáticamente el detector después de ediciones de archivos de UI y muestra los hallazgos). Carga reference/hooks.md cuando el usuario lo invoca con cualquier argumento.

Doctor: /impeccable doctor informa y repara la deriva entre los artefactos de Impeccable de este proyecto (PRODUCT.md, DESIGN.md y su archivo auxiliar, configuración, briefs de superficie, el gancho) y lo que esta versión lee. Carga reference/doctor.md cuando el usuario lo invoca, o cuando preguntan qué está desactualizado, obsoleto o necesita actualización. Una directiva CONTEXT_STALE en la salida de Configuración es el subconjunto económico del mismo informe; actúa sobre ella allí según sus propias instrucciones en lugar de ejecutar doctor sin que se le pida.

Nunca repares la deriva como efecto secundario de una tarea de diseño. Un hallazgo CONTEXT_STALE se informa, no se actúa sobre él, a menos que el usuario lo pida. La única excepción es un hallazgo marcado como auto, que la próxima escritura en ese archivo realiza de todos modos.

Skills relacionados