# Web Design Guidelines

> Revisa código de UI para verificar el cumplimiento de las Web Interface Guidelines de Vercel.

Fuente: https://skillsagentes.com/skills/andrelandgraf/fullstackrecipes/web-design-guidelines
Markdown: https://skillsagentes.com/skills/andrelandgraf/fullstackrecipes/web-design-guidelines.md

Repositorio: https://github.com/andrelandgraf/fullstackrecipes
Autor: andrelandgraf
Licencia: no declarada
Actualizado: hace 3 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 andrelandgraf/fullstackrecipes --skill web-design-guidelines --agent claude-code
# Cursor
npx -y skills add andrelandgraf/fullstackrecipes --skill web-design-guidelines --agent cursor
# Codex
npx -y skills add andrelandgraf/fullstackrecipes --skill web-design-guidelines --agent codex
# Gemini CLI
npx -y skills add andrelandgraf/fullstackrecipes --skill web-design-guidelines --agent gemini
# Windsurf
npx -y skills add andrelandgraf/fullstackrecipes --skill web-design-guidelines --agent windsurf
# Cline
npx -y skills add andrelandgraf/fullstackrecipes --skill web-design-guidelines --agent cline
```

## Qué hace

- Descarga la última versión de las Web Interface Guidelines desde una URL de GitHub
- Lee los archivos o patrón de archivos indicados
- Verifica el código UI contra todas las reglas obtenidas
- Reporta los hallazgos en formato terso file:line

## Cuándo usarla

- Al pedir 'review my UI'
- Al pedir 'check accessibility'
- Al pedir 'audit design' o 'review UX'
- Al pedir 'check my site against best practices'

## Qué la activa

- "Revisa mi UI contra las guías de Vercel"
- "Audita el diseño de este componente"
- "Comprueba la accesibilidad de mi sitio"
- "Revisa mi UX según buenas prácticas"

## Antes de instalar

- Requiere acceso a WebFetch para descargar las guías 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/andrelandgraf/fullstackrecipes/blob/main/templates/fullstackrecipe/.agents/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: [andrelandgraf](https://skillsagentes.com/creators/andrelandgraf.md) — 0 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

- [Authoring Recipes](https://skillsagentes.com/skills/andrelandgraf/fullstackrecipes/authoring-recipes.md): Guías para escribir contenido de fullstackrecipes: setup recipes, skills expuestas, cookbooks, templates y utilidades instalables del registro, pensadas para mantenedores del proyecto, no para consumidores del stack.
- [Use Fullstackrecipes](https://skillsagentes.com/skills/andrelandgraf/fullstackrecipes/use-fullstackrecipes.md): Descubre y sigue las recetas de fullstackrecipes (guías de setup, skills, cookbooks) obteniendo su Markdown; la meta-skill para encontrar y aplicar recetas correctamente.
- [Authentication Best Practices](https://skillsagentes.com/skills/andrelandgraf/fullstackrecipes/authentication-best-practices.md): Lee sesiones en cliente y servidor, protege rutas y ejecuta sign in/up/out con Better Auth. Úsalo al restringir páginas/APIs por autenticación o al conectar flujos de auth.
- [Better Auth Components](https://skillsagentes.com/skills/andrelandgraf/fullstackrecipes/better-auth-components.md): Añade componentes de UI y páginas para flujos de autenticación: inicio de sesión, registro, recuperación de contraseña, restablecimiento de contraseña y verificación de email.
- [Analytics Best Practices](https://skillsagentes.com/skills/andrelandgraf/fullstackrecipes/analytics-best-practices.md): Rastrea eventos personalizados y conversiones con Vercel Web Analytics mediante track(). Úsalo al instrumentar acciones de usuario, conversiones o envíos de formularios.

---

Skills Agentes · [Índice de páginas en markdown](https://skillsagentes.com/sitemap.md) · [Inicio](https://skillsagentes.com/index.md)