Communitygithub.com

Webインターフェースガイドライン

Webインターフェースガイドラインへの準拠を確認します。「UIをレビューして」「アクセシビリティをチェックして」「デザインを監査して」「UXをレビューして」「サイトをベストプラクティスに照らしてチェックして」という依頼に使用します。

Webインターフェースガイドラインとは？

このスキルは、指定されたファイル群をVercel Labsが提供するWebインターフェースガイドラインに基づいて監査し、アクセシビリティ、パフォーマンス、UIデザインのベストプラクティスへの準拠を確認します。開発者は「UIをレビューして」「アクセシビリティをチェックして」などの自然言語の指示で呼び出すことができ、スキルは自動的に最新のガイドラインルールをソースURLから取得し、指定されたファイル（またはユーザーにファイルを尋ねる）に対してルールを適用し、発見事項を`file:line`形式で簡潔に出力します。主にClaude CodeやClineのようなコードレビューエージェント向けに設計されており、実装後の監査フェーズで使用することで、コーディング前に設計原則を学ぶfrontend-designスキルと連携し、設計→コーディング→監査→修正というワークフローを実現します。監査結果はガイドラインが指定する出力形式に従って報告されるため、チーム全体で一貫した品質管理が可能です。

対応✓Claude Code~Codex CLI~Cursor

Part ofDesign & UI

npx skills add https://github.com/majiayu000/claude-skill-registry/tree/HEAD/skills/design/web-design-guidelines-dgkngk-super-kit

オリジナルを見る→すべてのスキルを見る

お気に入りのAIに質問する

このエージェントスキルを事前に読み込んだ状態で新しいチャットを開きます。

ChatGPT Claude Gemini Grok Perplexity DeepSeek

ドキュメント

Webインターフェースガイドラインは何をしますか？

ファイルがWebインターフェースガイドラインに準拠しているかを確認します。

仕組み

以下のソースURLから最新のガイドラインを取得します
指定されたファイルを読み取ります（またはユーザーにファイル/パターンを促します）
取得したガイドライン内のすべてのルールに対してチェックします
簡潔な file:line 形式で結果を出力します

ガイドラインソース

毎回のレビュー前に、最新のガイドラインを取得します。

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

WebFetchを使用して最新のルールを取得します。取得したコンテンツには、すべてのルールと出力形式の指示が含まれています。

使用方法

ユーザーがファイルまたはパターン引数を指定した場合:

上記のソースURLからガイドラインを取得します
指定されたファイルを読み取ります
取得したガイドラインのすべてのルールを適用します
ガイドラインで指定された形式を使用して結果を出力します

ファイルが指定されていない場合は、レビューするファイルをユーザーに確認します。

関連スキル

スキル	使用タイミング
フロントエンドデザイン	コーディング前 - デザイン原則（色、タイポグラフィ、UX心理学）を学ぶ
web-design-guidelines（これ）	コーディング後 - アクセシビリティ、パフォーマンス、ベストプラクティスを監査する

デザインワークフロー

1. DESIGN   → フロントエンドデザインの原則を読む
2. CODE     → デザインを実装する
3. AUDIT    → web-design-guidelines レビューを実行する ← あなたはここ
4. FIX      → 監査結果に対応する

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.

関連スキル

steipete/sag

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

steipete/oracle

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

steipete/peekaboo

Capture and automate macOS UI with the Peekaboo CLI.

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".

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.

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".