Codex nativo
OK
👍 0 · Votar
frontend-ui-engineering
Skill de frontend con calidad de ingeniería de Addy Osmani: interfaces accesibles y adaptables con estados de carga, vacíos y de error, tokens semánticos y una tabla de valores por defecto con “estética de IA” que conviene evitar. Solo instrucciones, sin scripts.
- Origen
- addyosmani/agent-skills
- Ruta
skills/frontend-ui-engineering· SKILL.md- Commit fijado
aeac41d4d0- Licencia
- MIT
Cada prompt muestra una matriz 2×2 fija: Codex nativo, Codex + skill, Claude Code nativo, Claude Code + skill. Haz clic en una captura para ver la página completa. Instalar y usar ↓
Puntos fuertes
Lo que la propia documentación del skill dice que hace bien, con un enlace a donde lo dice. Son afirmaciones, no resultados: compáralas con las páginas de abajo.
- Construye interfaces de usuario de calidad de producción, accesibles y adaptables fuente
- Una interfaz que parece hecha por un ingeniero con sensibilidad de diseño en una empresa puntera, no generada por una IA fuente
- Accesibilidad WCAG 2.1 AA, con navegación por teclado y gestión del foco fuente
- Estados vacíos, de error y de carga con sentido fuente
- Evita la “estética de IA” (degradados morados, todo redondeado, heros genéricos, sombras pesadas) fuente
Alcance de la prueba: Landing page de SaaS, Panel de datos, Blog y portafolio personal, Estados de componentes de formulario y respuesta. Los prompts que no están en esta lista aparecen como “Fuera de alcance”, no como pendientes.
Decidido a partir del texto del skill antes de las ejecuciones del segundo lote; form-states se añadió para mostrar su accesibilidad y su manejo de estados.
Landing page de SaaS
landing-saas
Panel de datos
dashboard
Blog y portafolio personal
blog-portfolio
Estados de componentes de formulario y respuesta Demostración
form-states
Instalar y usar
Instalación a nivel de proyecto: copia la carpeta del skill (la que contiene SKILL.md) en tu proyecto, en el commit fijado. Las ejecuciones de la galería lo instalaron de la misma forma.
Claude Code
Instalar
Copia la carpeta en <project>/.claude/skills/frontend-ui-engineering/.
git clone https://github.com/addyosmani/agent-skills.git /tmp/frontend-ui-engineering-src
git -C /tmp/frontend-ui-engineering-src checkout aeac41d4d005999432bb7312f7ff06383a91d59d
mkdir -p .claude/skills
cp -R /tmp/frontend-ui-engineering-src/skills/frontend-ui-engineering .claude/skills/frontend-ui-engineeringUsar
# interactivo
/frontend-ui-engineering <tu tarea>
# o termina cualquier solicitud con
Use the frontend-ui-engineering skill.
# no interactivo, como en las ejecuciones de la galería
claude -p '<tu tarea> Use the frontend-ui-engineering skill.'Para tenerlo disponible en todos los proyectos, coloca la carpeta en ~/.claude/skills/frontend-ui-engineering/. Claude Code también puede cargar el skill por sí solo cuando una solicitud coincide con la descripción del skill.
Codex
Instalar
Copia la carpeta en <project>/.agents/skills/frontend-ui-engineering/.
git clone https://github.com/addyosmani/agent-skills.git /tmp/frontend-ui-engineering-src
git -C /tmp/frontend-ui-engineering-src checkout aeac41d4d005999432bb7312f7ff06383a91d59d
mkdir -p .agents/skills
cp -R /tmp/frontend-ui-engineering-src/skills/frontend-ui-engineering .agents/skills/frontend-ui-engineeringUsar
# interactivo: menciónalo o elígelo en /skills
$frontend-ui-engineering <tu tarea>
# no interactivo, como en las ejecuciones de la galería
codex exec -s workspace-write '<tu tarea> Use the $frontend-ui-engineering skill.'Para tenerlo disponible en todos los proyectos, coloca la carpeta en ~/.agents/skills/frontend-ui-engineering/. Codex también puede elegir el skill por sí solo, según su descripción.
Notas
- The "See Also" link (../../references/accessibility-checklist.md) points outside the skill folder and is not copied.
- Part of a 25-skill repo; install only this folder, not the plugin.
- Its main strengths (accessibility, loading/empty/error states) are not visible in screenshots of the three standard prompts; see the form-states showcase prompt and each cell's a11y scan.
Metadatos: skills/frontend-ui-engineering/meta.yaml · Copyright (c) 2025 Addy Osmani