# Web Design Guidelines

> Revisa código de interfaz según las Web Interface Guidelines de Vercel: descarga las reglas más recientes y compara el código frente a ellas. Úsalo para revisar UI, accesibilidad, diseño o UX.

Fuente: https://skillsagentes.com/skills/bytedance/deer-flow/web-design-guidelines
Markdown: https://skillsagentes.com/skills/bytedance/deer-flow/web-design-guidelines.md

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

## Qué hace

- Descarga las Web Interface Guidelines más recientes desde el repositorio de vercel-labs antes de cada revisión.
- Lee los archivos indicados por el usuario y los compara contra todas las reglas obtenidas.
- Reporta los hallazgos en formato conciso archivo:línea.

## Cuándo usarla

- Al pedir 'revisa mi UI', 'comprueba la accesibilidad', 'audita el diseño' o 'revisa mi sitio contra buenas prácticas'.

## Qué la activa

- "Revisa mi UI contra las Web Interface Guidelines"
- "Comprueba la accesibilidad de este componente"
- "Audita el diseño de esta página"

## Antes de instalar

- Necesita acceso a internet para obtener las guidelines desde raw.githubusercontent.com antes de cada revisión.
- makes network requests

## Archivos

- SKILL.md — 1 KB

## SKILL.md

Reproducido tal cual desde bytedance/deer-flow bajo MIT. Esta sección es el documento original y está en inglés.

# Web Interface Guidelines

Review files for compliance with Web Interface Guidelines.

## How It Works

1. Fetch the latest guidelines from the source URL below
2. Read the specified files (or prompt user for files/pattern)
3. Check against all rules in the fetched guidelines
4. Output findings in the terse `file:line` format

## Guidelines Source

Fetch fresh guidelines before each review:

```
https://raw.githubusercontent.com/vercel-labs/web-interface-guidelines/main/command.md
```

Use WebFetch to retrieve the latest rules. The fetched content contains all the rules and output format instructions.

## Usage

When a user provides a file or pattern argument:
1. Fetch guidelines from the source URL above
2. Read the specified files
3. Apply all rules from the fetched guidelines
4. Output findings using the format specified in the guidelines

If no files specified, ask the user which files to review.

## 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: [bytedance](https://skillsagentes.com/creators/bytedance.md) — 27 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

- [Engineer System Change](https://skillsagentes.com/skills/bytedance/deer-flow/engineer-system-change.md): Evalúa y ejecuta cambios de sistema no triviales desde primeros principios: RFCs, features, refactors, migraciones o nuevas APIs, exigiendo consumidores concretos, la solución mínima suficiente y evidencia proporcional al riesgo.
- [Skill Reviewer](https://skillsagentes.com/skills/bytedance/deer-flow/skill-reviewer.md): Revisa paquetes de skills de DeerFlow: preparación para publicar, triggers, límites de seguridad, recursos y evidencia. Úsala cuando pidan auditar, calificar o validar para producción una skill.
- [Smoke Test](https://skillsagentes.com/skills/bytedance/deer-flow/smoke-test.md): Skill de smoke test de extremo a extremo para DeerFlow: actualiza el código, despliega en local o Docker, verifica disponibilidad de servicios, hace health check y genera el reporte final.
- [Skill Creator](https://skillsagentes.com/skills/bytedance/deer-flow/skill-creator.md): Crea skills nuevas, modifica y mejora skills existentes, y mide su rendimiento. Úsala para crear una skill, editarla, correr evals, hacer benchmark con análisis de varianza, u optimizar su descripción.
- [Deerflow Maintainer Orchestrator](https://skillsagentes.com/skills/bytedance/deer-flow/deerflow-maintainer-orchestrator.md): Manejo de issues y PRs de GitHub solo por comentarios para mantenedores de DeerFlow: resuelve alcance con gh, analiza, publica o redacta comentarios de issues y revisiones de PR, y compara PRs en competencia.

---

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