# Web Design Guidelines > Revisa código de UI según las Web Interface Guidelines. Úsalo al pedir 'review my UI', 'check accessibility', 'audit design', 'review UX' o 'check my site against best practices'. Fuente: https://skillsagentes.com/skills/vercel-labs/agent-skills/web-design-guidelines Markdown: https://skillsagentes.com/skills/vercel-labs/agent-skills/web-design-guidelines.md Repositorio: https://github.com/vercel-labs/agent-skills Autor: vercel-labs Licencia: no declarada Actualizado: hace 8 meses Coste de contexto: 46 tok instalada, 308 tok al activarse, 308 tok con todos los archivos del bundle Bundle: 1 archivo, 1 KB Permisos que pide: ninguno declarado ## Instalación Un skill son archivos markdown: los mismos archivos valen para cualquier agente y lo único que cambia es el directorio de destino, es decir la bandera `--agent`. Añade `-g` para instalarlo en todos los proyectos de la máquina. ```bash # Claude Code npx -y skills add vercel-labs/agent-skills --skill web-design-guidelines --agent claude-code # Cursor npx -y skills add vercel-labs/agent-skills --skill web-design-guidelines --agent cursor # Codex npx -y skills add vercel-labs/agent-skills --skill web-design-guidelines --agent codex # Gemini CLI npx -y skills add vercel-labs/agent-skills --skill web-design-guidelines --agent gemini # Windsurf npx -y skills add vercel-labs/agent-skills --skill web-design-guidelines --agent windsurf # Cline npx -y skills add vercel-labs/agent-skills --skill web-design-guidelines --agent cline ``` ## Qué hace - Obtiene las Web Interface Guidelines más recientes desde una URL remota antes de cada revisión - Lee los archivos indicados o el patrón proporcionado por el usuario - Comprueba el código frente a todas las reglas obtenidas - Muestra los hallazgos en formato conciso file:line ## Cuándo usarla - El usuario pide 'review my UI' - El usuario pide 'check accessibility' - El usuario pide 'audit design' o 'review UX' - El usuario pide 'check my site against best practices' ## Qué la activa - "Revisa mi UI según las guías de interfaz web" - "Comprueba la accesibilidad de este componente" - "Audita el diseño de esta página" - "Revisa mi UX y dime qué falta" ## Antes de instalar - Requiere WebFetch para obtener las guías actualizadas desde la URL fuente antes de cada revisión. - makes network requests ## Archivos - SKILL.md — 1 KB ## SKILL.md No se reproduce aquí. Léelo en https://github.com/vercel-labs/agent-skills/blob/main/skills/web-design-guidelines/SKILL.md ## Dónde encaja - Categoría: [Diseño y UI](https://skillsagentes.com/categorias/diseno-ui.md) — Sistemas de diseño, trabajo con componentes y acabado visual. - Creador: [vercel-labs](https://skillsagentes.com/creators/vercel-labs.md) — 20 skills en el directorio - [Todas las skills](https://skillsagentes.com/skills.md) - [Ranking de instalaciones](https://skillsagentes.com/ranking.md) ## Otras skills del mismo repositorio - [Vercel React View Transitions](https://skillsagentes.com/skills/vercel-labs/agent-skills/vercel-react-view-transitions.md): Guía para implementar animaciones nativas y fluidas con la View Transition API de React (, addTransitionType y pseudo-elementos CSS de view transition), sin librerías de animación de terceros. - [Vercel Optimize](https://skillsagentes.com/skills/vercel-labs/agent-skills/vercel-optimize.md): Para optimizar coste y rendimiento en proyectos Vercel desplegados (Next.js, SvelteKit, Nuxt, Astro limitado): recopila métricas, uso y config, investiga solo candidatos respaldados por métricas y produce recomendaciones verificadas. - [Writing Guidelines](https://skillsagentes.com/skills/vercel-labs/agent-skills/writing-guidelines.md): Revisa documentos o prosa para verificar el cumplimiento de las Writing Guidelines; úsalo al pedir "review my docs", "check writing style" o "audit prose". - [Vercel Cli With Tokens](https://skillsagentes.com/skills/vercel-labs/agent-skills/vercel-cli-with-tokens.md): Despliega y gestiona proyectos en Vercel usando autenticación por token. Útil para usar Vercel CLI con access tokens en vez de login interactivo, p. ej. "deploy to vercel", "set up vercel". - [Vercel React Best Practices](https://skillsagentes.com/skills/vercel-labs/agent-skills/vercel-react-best-practices.md): Guía de optimización de rendimiento para React y Next.js de Vercel Engineering, con 70 reglas en 8 categorías priorizadas por impacto para refactorizar y generar código. ## Skills relacionadas - [Algorithmic Art](https://skillsagentes.com/skills/anthropics/skills/algorithmic-art.md): Crea arte algorítmico con p5.js, aleatoriedad con semilla y exploración interactiva de parámetros. Úsalo cuando pidan arte por código, arte generativo, flow fields o sistemas de partículas. - [Brand Guidelines](https://skillsagentes.com/skills/anthropics/skills/brand-guidelines.md): Aplica los colores y la tipografía oficiales de la marca Anthropic a cualquier artefacto que pueda beneficiarse de su look-and-feel. Úsalo cuando apliquen colores de marca o estándares de diseño. - [Canvas Design](https://skillsagentes.com/skills/anthropics/skills/canvas-design.md): Crea arte visual en documentos .png y .pdf partiendo de una filosofía de diseño. Úsalo cuando pidan un póster, una pieza de arte, un diseño u otra pieza estática. - [Frontend Design](https://skillsagentes.com/skills/anthropics/skills/frontend-design.md): Guía para un diseño visual distintivo e intencional al crear o rediseñar una UI: ayuda con dirección estética, tipografía y decisiones que no parezcan defaults templados. - [Slack Gif Creator](https://skillsagentes.com/skills/anthropics/skills/slack-gif-creator.md): Conocimiento y utilidades para crear GIFs animados optimizados para Slack: restricciones, herramientas de validación y conceptos de animación. Úsalo cuando pidan un GIF animado para Slack. --- Skills Agentes · [Índice de páginas en markdown](https://skillsagentes.com/sitemap.md) · [Inicio](https://skillsagentes.com/index.md)