Communitygithub.com

Infrasity-Labs/dev-gtm-claude-skills

Revisa código de UI para cumplimiento con Pautas de Interfaz Web. Úsalo cuando te pidan 'revisar mi UI', 'verificar accesibilidad', 'auditar diseño', 'revisar UX' o 'verificar mi sitio contra mejores prácticas'.

¿Qué es dev-gtm-claude-skills?

Esta skill permite que agentes de IA como Claude Code, Cursor o Codex auditen archivos de interfaz de usuario contra las Pautas de Interfaz Web actualizadas. Funciona obteniendo las reglas más recientes desde un repositorio de Vercel Labs, leyendo los archivos especificados y aplicando todas las reglas de forma automática. Es útil para desarrolladores que buscan garantizar que su UI cumpla con estándares de accesibilidad, UX y mejores prácticas sin depender de revisiones manuales. La skill soporta la revisión de cualquier patrón de archivos y ofrece remediación detallada al integrarse con `ui-ux-pro-max`, que proporciona guías avanzadas por categoría como accesibilidad, formularios, animaciones, navegación y rendimiento. Su salida es en formato `archivo:línea` para facilitar la localización rápida de problemas.

Compatible con✓Claude Code~Codex CLI~Cursor
Part ofDesign & UI
npx skills add https://github.com/Infrasity-Labs/dev-gtm-claude-skills/tree/HEAD/.claude/skills/web-design-guidelines
Ver original→Ver todas las habilidades

Preguntar en tu IA favorita

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

OpenAIChatGPTClaudeClaudeGeminiGeminiGrokGrokPerplexityPerplexityDeepSeekDeepSeek

Documentación

Pautas de Interfaz Web

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

Cómo Funciona

  1. Obtén las pautas más recientes desde la URL de origen indicada abajo
  2. Lee los archivos especificados (o pide 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 frescas 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 proporcione un argumento de archivo o patrón:

  1. Obtén las pautas desde la URL de origen indicada arriba
  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 revisar.

Remediar Hallazgos

Después de identificar problemas, usa ui-ux-pro-max para obtener guías de remediación más profundas por categoría:

# Hallazgos de accesibilidad
python3 skills/ui-ux-pro-max/scripts/search.py "accesibilidad contraste aria teclado" --dominio ux

# Hallazgos de UX en formularios
python3 skills/ui-ux-pro-max/scripts/search.py "formularios validación retroalimentación de error" --dominio ux

# Hallazgos de animación/movimiento
python3 skills/ui-ux-pro-max/scripts/search.py "animación movimiento-reducido sincronización" --dominio ux

# Hallazgos de navegación
python3 skills/ui-ux-pro-max/scripts/search.py "navegación miga de pan comportamiento de retroceso" --dominio ux

# Hallazgos de rendimiento/diseño
python3 skills/ui-ux-pro-max/scripts/search.py "cambio de diseño carga perezosa rendimiento" --dominio ux

Asigna los hallazgos de la auditoría a la palabra clave de dominio más cercana de las anteriores. La Referencia Rápida de ui-ux-pro-max (secciones 1–9) cubre cada categoría que el verificador de pautas revela.

Skills Relacionadas

  • ui-ux-pro-max: Guías más profundas de UX y reglas de remediación para cada categoría de hallazgo
  • frontend-design: Dirección de diseño y planificación antes de escribir código
  • ui-styling: Implementación de componentes — shadcn/ui y Tailwind — donde las correcciones requieren cambios a nivel de componente

Individual skills in this repo

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

Infrasity-Labs/dev-gtm-claude-skills

Translate existing blog posts into one or more target languages with SEO-optimized localization. Produces native-quality translations that preserve markdown structure, frontmatter, schema JSON-LD, image and chart embeds, and citation capsules. Localizes keywords, meta tags, numbers, dates, currencies, and quote styles per locale. Flags machine-translation artifacts for review. Run BEFORE blog-localize: this handles language conversion; localize handles cultural adaptation after translation completes. Use when user says "translate blog", "blog translate", "uebersetzen", "traduire", "traducir", "translate post", "blog auf Deutsch", "blog en espanol".

Infrasity-Labs/dev-gtm-claude-skills

Balance visual design with ATS compatibility for creative roles

Infrasity-Labs/dev-gtm-claude-skills

Apply Fitts's Law to size and position interactive targets for fast, accurate interaction.

Infrasity-Labs/dev-gtm-claude-skills

When the user wants to plan a product launch, feature announcement, or release strategy. Also use when the user mentions 'launch,' 'Product Hunt,' 'feature release,' 'announcement,' 'go-to-market,' 'beta launch,' 'early access,' 'waitlist,' 'product update,' 'how do I launch this,' 'launch checklist,' 'GTM plan,' or 'we're about to ship.' Use this whenever someone is preparing to release something publicly. For ongoing marketing after launch, see marketing-ideas.

Infrasity-Labs/dev-gtm-claude-skills

Design interfaces that adapt gracefully to multiple languages, writing directions, and cultural contexts.

Infrasity-Labs/dev-gtm-claude-skills

Create platform-specific social media posts for LinkedIn, Facebook, Instagram, and Reddit. Handles character limits, hashtag strategies, hook placement, and image specs per platform. Works from scratch, from existing content (blog, newsletter, announcement), or as a multi-platform campaign. Produces copy-paste-ready posts. Triggers: 'social media post', 'linkedin post', 'facebook post', 'instagram caption', 'reddit post', 'social posts', 'post to social', 'repurpose for social', 'social media campaign'.

Infrasity-Labs/dev-gtm-claude-skills

Transform resume bullets into detailed portfolio case studies

Infrasity-Labs/dev-gtm-claude-skills

Guidance for distinctive, intentional visual design when building new UI or reshaping an existing one. Helps with aesthetic direction, typography, and making choices that don't read as templated defaults.

Infrasity-Labs/dev-gtm-claude-skills

Audits any landing or service page across 48 checks in 10 categories for LLM/AI discoverability, GEO readiness, content clarity, schema markup, internal linking, freshness signals, and technical crawlability. Produces an overall score out of 100, a per-category score out of 100, pass/warn/fail/ manual counts, and a prioritised fix list — all rendered as a standalone HTML report saved to disk. Use when a user provides a URL and asks to audit it, score it, check its GEO readiness, test its AI discoverability, run a landing page audit, or evaluate it for LLM citation potential. Also trigger on phrases like "audit this page", "score this URL", "check GEO for", "is this page AI-ready", "run a GEO audit", "LLM page check", "how would AI read this page", or "landing page score".

Skills relacionados

steipete/sag

ElevenLabs text-to-speech with mac-style say UX.

community

steipete/oracle

Oracle CLI second-model review/debug/refactor/design with selected files, dry-run token checks, API or browser engine.

community

steipete/peekaboo

Capture and automate macOS UI with the Peekaboo CLI.

community

mattpocock/design-an-interface

Generate multiple radically different interface designs for a module using parallel sub-agents. Use when user wants to design an API, explore interface options, compare module shapes, or mentions "design it twice".

community

mattpocock/prototype

Build a throwaway prototype to flesh out a design — a runnable terminal app for state/business-logic questions, or several radically different UI variations toggleable from one route.

community

mattpocock/grill-me

Interview the user relentlessly about a plan or design until reaching shared understanding, resolving each branch of the decision tree. Use when user wants to stress-test a plan, get grilled on their design, or mentions "grill me".

community