SkillProof tested Claude skills

Aesthetic

Framework estructurado BEAUTIFUL/RIGHT/SATISFYING/PEAK para diseño de UI con reglas concretas de timing y contraste

Por mrgoonie · mrgoonie/claudekit-skills

Probado · Funciona ★ 8.8/10

Aesthetic — Framework estructurado BEAUTIFUL/RIGHT/SATISFYING/PEAK para diseño de UI con reglas concretas de timing y contraste

Qué hace

Guía el trabajo de diseño UI/UX con un framework de cuatro etapas (estética, funcionalidad, microinteracciones, storytelling) respaldado por archivos de referencia con números concretos: ratios de contraste WCAG, timing de animación de 150-300ms, curvas ease-out/ease-in. Se activa al construir interfaces, analizar inspiración de diseño o añadir microinteracciones; los flujos de captura de inspiración y generación de imágenes dependen de skills complementarias (chrome-devtools, ai-multimodal) presentes en el mismo repositorio.

Informe de la prueba

Pedimos dos veces consejo sobre jerarquía de tarjetas de precios y estados hover: el baseline dio viñetas genéricas ("buen contraste", "más espacio"); la skill citó cifras exactas: elevación ease-out de 200ms, contraste WCAG 4,5:1, máximo de 2-3 tipografías.

Probado el: 2026-07-10 · Claude Code 2.x (agent harness)

Instalación

git clone https://github.com/mrgoonie/claudekit-skills
cd claudekit-skills
mkdir -p ~/.claude/skills
cp -r .claude/skills/aesthetic ~/.claude/skills/aesthetic

Comandos y prompts de ejemplo

  • /aestheticFramework estructurado BEAUTIFUL/RIGHT/SATISFYING/PEAK para diseño de UI con reglas concretas de timing y contraste

Los skills se activan con peticiones en lenguaje natural, sin comandos que memorizar. Tras instalarlo, prompts como estos lo activan (en inglés):

  • Review this UI's contrast ratios against WCAG guidelines
  • Add micro-interactions with proper easing and timing
  • Make this interface feel more polished and satisfying

Informe completo →