Communitygithub.com

Diretrizes de Interface Web

Revise o código da UI quanto à conformidade com as Diretrizes de Interface Web. Use quando solicitado a "rever minha UI", "verificar acessibilidade", "auditar design", "revisar UX" ou "verificar meu site quanto às melhores práticas".

O que é Diretrizes de Interface Web?

Esta skill permite auditar automaticamente o código da interface do usuário (UI) contra as diretrizes mais recentes de interface web. Ela busca as regras atualizadas de uma fonte oficial (repositório Vercel Labs), lê os arquivos especificados (ou solicita ao usuário), aplica todas as regras e reporta os resultados em um formato conciso `arquivo:linha`. É ideal para desenvolvedores que desejam verificar acessibilidade, desempenho e aderência a melhores práticas após a implementação do design. Funciona em qualquer plataforma que suporte habilidades de agente de IA (como Claude Code, Cursor, Codex, etc.) e que tenha acesso à web e leitura de arquivos.

Funciona com✓Claude Code~Codex CLI~Cursor
npx skills add https://github.com/majiayu000/claude-skill-registry/tree/HEAD/skills/design/web-design-guidelines-congdon1207-agents-md

Perguntar na sua IA favorita

Abre um novo chat com esta habilidade de agente já pré-carregada.

Documentação

O que Diretrizes de Interface Web faz?

Revise arquivos quanto à conformidade com as Diretrizes de Interface Web.

Como Funciona

  1. Busque as diretrizes mais recentes a partir da URL de origem abaixo
  2. Leia os arquivos especificados (ou solicite ao usuário os arquivos/padrão)
  3. Verifique todas as regras nas diretrizes obtidas
  4. Gere os resultados no formato conciso arquivo:linha

Fonte das Diretrizes

Busque diretrizes atualizadas antes de cada revisão:

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

Use WebFetch para recuperar as regras mais recentes. O conteúdo obtido contém todas as regras e instruções de formato de saída.

Uso

Quando um usuário fornecer um argumento de arquivo ou padrão:

  1. Busque as diretrizes da URL de origem acima
  2. Leia os arquivos especificados
  3. Aplique todas as regras das diretrizes obtidas
  4. Gere os resultados usando o formato especificado nas diretrizes

Se nenhum arquivo for especificado, pergunte ao usuário quais arquivos revisar.


Habilidades Relacionadas

HabilidadeQuando Usar
frontend-designAntes de codificar - Aprenda princípios de design (cor, tipografia, psicologia UX)
web-design-guidelines (esta)Após codificar - Audite acessibilidade, desempenho e melhores práticas

Fluxo de Trabalho de Design

1. DESIGN   → Leia princípios de frontend-design
2. CODE     → Implemente o design
3. AUDIT    → Execute revisão web-design-guidelines ← VOCÊ ESTÁ AQUI
4. FIX      → Resolva os resultados da auditoria

Individual skills in this repo

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

majiayu000/claude-skill-registry

Builds, edit or validate Agent Skill through conversational discovery. Use when the user requests to "Create an Agent", "Optimize an Agent" or "Edit an Agent".

majiayu000/claude-skill-registry

Edit existing BMAD agents while maintaining compliance

majiayu000/claude-skill-registry

Edit existing BMAD agents while maintaining compliance

majiayu000/claude-skill-registry

Edit existing BMAD modules while maintaining coherence

majiayu000/claude-skill-registry

Edit existing BMAD modules while maintaining coherence

majiayu000/claude-skill-registry

Analyzes current state and user query to answer BMad questions or recommend the next workflow or agent. Use when user says what should I do next, what do I do now, or asks a question about BMad

majiayu000/claude-skill-registry

Build AI agents with Google ADK Python (Agent Development Kit). Use for multi-agent systems, workflow agents (sequential/parallel/loop), Vertex AI deployment, tool integration, human-in-the-loop.

majiayu000/claude-skill-registry

Build AI agents with Google ADK Python (Agent Development Kit). Use for multi-agent systems, workflow agents (sequential/parallel/loop), Vertex AI deployment, tool integration, human-in-the-loop.

majiayu000/claude-skill-registry

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.

majiayu000/claude-skill-registry

Create a hilarious and ultra-realistic video of an anthropomorphic animal acting like a human vlogger in a real-world setting.

majiayu000/claude-skill-registry

Speech-to-text transcription and translation via OpenAI Audio API -- models, response formats, timestamps, prompting, streaming, chunking, and diarization

majiayu000/claude-skill-registry

BlockRun works with Claude Code and Google Antigravity.

majiayu000/claude-skill-registry

This skill should be used when the user asks about libraries, frameworks, API references, or needs code examples. Activates for setup questions, code generation involving libraries, or mentions of specific frameworks like React, Vue, Next.js, Prisma, Supabase, etc.

majiayu000/claude-skill-registry

小省导购员数字人带货版即梦视频提示词生成系统,基于四大智能体协同(提示词生成师、质量管控师、知识库运维师、跨环节适配师),按照"主体+运动+场景+(镜头语言+光影+氛围)"公式输出中英文双版提示词,适配5s短视频。确保人物一致性、视觉连贯性、情绪连贯性,支持知识库智能复用和跨工具适配(Suno音乐、AI绘画),为数字人带货视频提供高质量提示词生成服务。

majiayu000/claude-skill-registry

Upload and manage files using Google Gemini File API via scripts/. Use for uploading images, audio, video, PDFs, and other files for use with Gemini models. Supports file upload, status checking, and file management. Triggers on "upload file", "file API", "upload image", "upload PDF", "upload video", "file management".

majiayu000/claude-skill-registry

CRITICAL: Use for MolyKit AI chat toolkit. Triggers on: BotClient, OpenAI, SSE streaming, AI chat, molykit, PlatformSend, spawn(), ThreadToken, cross-platform async, Chat widget, Messages, PromptInput, Avatar, LLM

majiayu000/claude-skill-registry

AI and machine learning workflow covering LLM application development, RAG implementation, agent architecture, ML pipelines, and AI-powered features.

majiayu000/claude-skill-registry

Analyze images/audio/video with Gemini API (better vision than Claude). Generate images (Imagen 4), videos (Veo 3). Use for vision analysis, transcription, OCR, design extraction, multimodal AI.

majiayu000/claude-skill-registry

Analyze images/audio/video with Gemini API (better vision than Claude). Generate images (Imagen 4), videos (Veo 3). Use for vision analysis, transcription, OCR, design extraction, multimodal AI.

majiayu000/claude-skill-registry

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

Habilidades Relacionadas