Communitygithub.com

Awesome Omni Skill - Revisión de Interfaz Web

Revisa el código de la interfaz de usuario para verificar el cumplimiento de las pautas de interfaz web. Úsalo cuando te pidan 'revisar mi UI', 'verificar accesibilidad', 'auditar diseño', 'revisar UX' o 'revisar mi sitio contra buenas prácticas'.

¿Qué es Awesome Omni Skill - Revisión de Interfaz Web?

Este skill, 'Web Interface Guidelines', permite a agentes de IA (como Claude Code, Cursor o Codex) auditar archivos de interfaz de usuario en busca de cumplimiento con las pautas de interfaz web. El proceso comienza obteniendo las últimas reglas desde un repositorio oficial de Vercel Labs, luego lee los archivos especificados por el usuario o solicita un patrón de archivos, aplica todas las reglas de las pautas y finalmente genera un informe en el formato conciso `archivo:línea`. Es especialmente útil después de codificar una interfaz, como parte de un flujo de trabajo de diseño: Diseñar, Codificar, Auditar (con este skill) y Corregir. Los resultados se centran en accesibilidad, rendimiento y mejores prácticas, proporcionando una retroalimentación clara y accionable directamente sobre las líneas de código.

Compatible con✓Claude Code~Codex CLI~Cursor
npx skills add https://github.com/diegosouzapw/awesome-omni-skill/tree/HEAD/skills/development/web-design-guidelines-gensart-projs

Preguntar en tu IA favorita

Abre un nuevo chat con esta habilidad de agente ya precargada.

Documentación

Web Interface Guidelines (Pautas de Interfaz Web)

Revisa archivos para verificar el cumplimiento de las Pautas de Interfaz Web.

Cómo Funciona

  1. Obtén las últimas pautas desde la URL de origen a continuación
  2. Lee los archivos especificados (o solicita al usuario que proporcione archivos/patrón)
  3. Verifica contra todas las reglas de las pautas obtenidas
  4. Muestra los hallazgos en el formato conciso archivo:línea

Fuente de las Pautas

Obtén pautas actualizadas antes de cada revisión:

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

Usa WebFetch para recuperar las reglas más recientes. El contenido obtenido contiene todas las reglas y las instrucciones de formato de salida.

Uso

Cuando un usuario proporciona un argumento de archivo o patrón:

  1. Obtén las pautas desde la URL de origen anterior
  2. Lee los archivos especificados
  3. Aplica todas las reglas de las pautas obtenidas
  4. Muestra los hallazgos usando el formato especificado en las pautas

Si no se especifican archivos, pregunta al usuario qué archivos desea revisar.


Skills Relacionados

SkillCuándo Usarlo
frontend-designAntes de codificar - Aprende principios de diseño (color, tipografía, psicología UX)
web-design-guidelines (este)Después de codificar - Audita accesibilidad, rendimiento y mejores prácticas

Flujo de Trabajo de Diseño

1. DISEÑAR   → Leer principios de frontend-design
2. CODIFICAR → Implementar el diseño
3. AUDITAR   → Ejecutar revisión de web-design-guidelines ← TÚ ESTÁS AQUÍ
4. CORREGIR  → Abordar hallazgos de la auditoría

Individual skills in this repo

This repo contains 17 individual skills — each has its own dedicated page.

diegosouzapw/awesome-omni-skill

Build a GitHub portfolio that gets you hired — curate 3-5 polished projects, craft compelling READMEs, deploy live demos, tell a coherent story across your repos, and align everything to AI-native development roles. Use when preparing your GitHub for job searches, deciding what to pin, or auditing your public presence.

diegosouzapw/awesome-omni-skill

Skill for discovering and researching autonomous AI agents, tools, and ecosystems using the AgentFolio directory.

diegosouzapw/awesome-omni-skill

Factor modeling and portfolio construction (Markowitz, Black-Litterman, constraints, turnover).

diegosouzapw/awesome-omni-skill

Analyze the CustomGPT.ai Labs Innovation workbook and cost tracking data to surface portfolio-level insights, trends, and recommendations for where to focus Innovation efforts.

diegosouzapw/awesome-omni-skill

Optimize project portfolio selection under constraints using mathematical optimization

diegosouzapw/awesome-omni-skill

Rapidly build, prototype, and deploy full-stack software using AI "text-to-app" tools. Use this when you need to create a greenfield application, build a high-fidelity working prototype for user testing, or bypass traditional engineering bottlenecks for internal tools.

diegosouzapw/awesome-omni-skill

Expert in building portfolios that actually land jobs and clients - not just showing work, but creating memorable experiences. Covers developer portfolios, designer portfolios, creative portfolios,...

diegosouzapw/awesome-omni-skill

Minimalist, typography-focused portfolio design system inspired by neo-brutalist and Swiss design principles. Emphasizes bold typography, generous whitespace, monochromatic color schemes, and elegant simplicity for developer/designer portfolios.

diegosouzapw/awesome-omni-skill

Review UI code for Web Interface Guidelines compliance. Use when asked to "review my UI", "check accessibility", "audit design", "review UX", or "check my site against best practices".

diegosouzapw/awesome-omni-skill

High-converting landing pages. Copy + design + implementation. Triggers: landing page, conversion page.

diegosouzapw/awesome-omni-skill

Portfolio allocation and rebalancing optimizer. Manages asset allocation across stocks/cash/bonds, performs periodic rebalancing, and ensures diversification according to market regime and risk tolerance.

diegosouzapw/awesome-omni-skill

Detect and explain risk drift in lending portfolios over time using vintage analysis, migration matrices, and concentration metrics. Use when monitoring portfolio credit quality trends, preparing board risk reports, conducting stress testing, or when risk metrics deviate from appetite thresholds.

diegosouzapw/awesome-omni-skill

Review UI code for Web Interface Guidelines compliance. Use when asked to "review my UI", "check accessibility", "audit design", "review UX", or "check my site against best practices".

diegosouzapw/awesome-omni-skill

Index-based file discovery using ABOUTME headers. Use INSTEAD of grep or Explore agent when searching for files by purpose or feature. Faster and more accurate than scanning code. Invoke this skill when user asks "which files handle X", "where is Y implemented", or when you need to find files related to a feature or task.

diegosouzapw/awesome-omni-skill

Index-based file discovery using ABOUTME headers. Use INSTEAD of grep or Explore agent when searching for files by purpose or feature. Faster and more accurate than scanning code. Invoke this skill when user asks "which files handle X", "where is Y implemented", or when you need to find files related to a feature or task.

diegosouzapw/awesome-omni-skill

Automate Klipfolio tasks via Rube MCP (Composio). Always search tools first for current schemas.

diegosouzapw/service-website-generator

Orchestrates automated service-based website generation with local SEO optimization. Creates 200+ service+location pages using parallel agents, Unsplash images via Jina AI, NextJS with dynamic routing, and PostgreSQL database. Use when building service business websites (plumbers, electricians, pressure washing, HVAC, etc.) targeting multiple locations.

Skills relacionados