Communitygithub.com

Anhvu1107/todas-las-habilidades-de-agente

Úsalo SIEMPRE al diseñar o revisar el diseño de sitios web, la estructura, los patrones de interacción, la accesibilidad o la presentación web orientada a producción.

¿Qué es todas-las-habilidades-de-agente?

Esta es una habilidad de agente AI diseñada para auditar interfaces web según las pautas más recientes de Vercel Labs. Su propósito es garantizar que el diseño de un sitio web cumpla con estándares de accesibilidad, rendimiento y mejores prácticas después de la fase de codificación. La habilidad funciona obteniendo primero las pautas actualizadas desde una URL de origen (un archivo de comandos de Vercel Labs), luego leyendo los archivos especificados por el usuario (o preguntando cuáles revisar) y aplicando todas las reglas de las pautas obtenidas. Los resultados se presentan en un formato conciso de `archivo:línea`, lo que facilita la identificación y corrección de problemas. Es especialmente útil para desarrolladores que utilizan agentes como Claude Code, Cursor o Codex, ya que automatiza la revisión de cumplimiento y se integra en un flujo de trabajo de diseño, codificación, auditoría y corrección. La habilidad también recomienda consultar primero los principios de diseño de frontend antes de codificar, y luego usar esta auditoría para detectar problemas restantes.

Compatible con✓Claude Code~Codex CLI~Cursor
npx skills add https://github.com/Anhvu1107/all-agent-skill/tree/HEAD/.agent/skills/web-design-guidelines

Preguntar en tu IA favorita

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

Documentación

Pautas de Interfaz Web

Regla de Lectura Selectiva

Comienza con:

  • references/senior-master-standard.md
  • references/usage-routing.md
  • references/quality-checklist.md

Luego carga solo los documentos, scripts, activos o ejemplos heredados que coincidan con la tarea real del usuario.

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

Cómo Funciona

  1. Obtén las pautas más recientes desde la URL de origen a continuación
  2. Lee los archivos especificados (o solicita al usuario los 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 nuevas 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 e instrucciones de formato de salida.

Uso

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

  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 utilizando el formato especificado en las pautas

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


Habilidades Relacionadas

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

Flujo de Trabajo de Diseño

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

Individual skills in this repo

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

Anhvu1107/all-agent-skill

ALWAYS use this when the request matches 007: Security audit, hardening, threat modeling (STRIDE/PASTA), Red/Blue Team, OWASP checks, code review, incident response, and infrastructure security for any project.

Anhvu1107/all-agent-skill

ALWAYS use this when the request matches Agentfolio: Skill for discovering and researching autonomous AI agents, tools, and ecosystems using the AgentFolio directory.

Anhvu1107/all-agent-skill

ALWAYS use this when the request matches Animejs Animation: Advanced JavaScript animation library skill for creating complex, high-performance web animations.

Anhvu1107/all-agent-skill

ALWAYS use this when the request matches Astropy: Astropy is the core Python package for astronomy, providing essential functionality for astronomical research and data analysis.

Anhvu1107/all-agent-skill

ALWAYS use this when the request matches Astro: Build content-focused websites with Astro — zero JS by default, islands architecture, multi-framework components, and Markdown/MDX support.

Anhvu1107/all-agent-skill

ALWAYS use this when the request matches Emotional ARC Designer: One sentence - what this skill does and when to invoke it

Anhvu1107/all-agent-skill

ALWAYS use this when the request matches Fixing Motion Performance: Audit and fix animation performance issues including layout thrashing, compositor properties, scroll-linked motion, and blur effects.

Anhvu1107/all-agent-skill

ALWAYS use this when the request matches I18n Localization: Internationalization and localization patterns.

Anhvu1107/all-agent-skill

ALWAYS use this when the request matches Interactive Portfolio: Expert in building portfolios that actually land jobs and clients - not just showing work, but creating memorable experiences.

Anhvu1107/all-agent-skill

ALWAYS use this when the request matches JQ: Expert jq usage for JSON querying, filtering, transformation, and pipeline integration.

Anhvu1107/all-agent-skill

ALWAYS use this when the request matches Landing Page Generator: Generates high-converting Next.js/React landing pages with Tailwind CSS.

Anhvu1107/all-agent-skill

ALWAYS use this when the request matches LEX: Centralized ''Truth Engine'' for cross-jurisdictional legal context (US, EU, CA) and contract scaffolding.

Anhvu1107/all-agent-skill

ALWAYS use this when the request matches Magic Animator: AI-powered animation tool for creating motion in logos, UI, icons, and social media assets.

Anhvu1107/all-agent-skill

ALWAYS use this when the request matches Makepad Animation: CRITICAL: Use for Makepad animation system.

Anhvu1107/all-agent-skill

ALWAYS use this when the request matches Nextjs APP Router Patterns: Comprehensive patterns for Next.js 14+ App Router architecture, Server Components, and modern full-stack React development.

Anhvu1107/all-agent-skill

ALWAYS use this when the user mentions Nextjs Best Practices, asks to build, debug, review, document, automate, test, configure, migrate, or make decisions in this domain, or the task clearly depends on Nextjs Best Practices; scope: Next.js App Router principles. Apply the bundled workflow, references, scripts, Senior Master standard, and Codex strict review gate before final output.

Anhvu1107/all-agent-skill

description: ALWAYS use this when the work is specifically about modern Next.js or React architecture, data flow, rendering strategy, routing, or performance-sensitive frontend behavior.

Anhvu1107/all-agent-skill

ALWAYS use this when the request matches Nextjs Supabase Auth: Expert integration of Supabase Auth with Next.js App Router

Anhvu1107/all-agent-skill

ALWAYS use this when the task involves reading, extracting, splitting, merging, rotating, creating, validating, OCR-ing, form-filling, or otherwise producing or modifying PDF files.

Anhvu1107/all-agent-skill

ALWAYS use this when the request matches React Nextjs Development: React and Next.js 14+ application development with App Router, Server Components, TypeScript, Tailwind CSS, and modern frontend patterns.

Skills relacionados