web-design-guidelines

作成者： vercel

UIコードをWebインターフェースガイドラインに準拠しているかレビューします。「UIをレビューして」「アクセシビリティをチェックして」「デザインを監査して」「UXをレビューして」「サイトをチェックして」と依頼されたときに使用します。

npx skills add https://github.com/vercel/examples --skill web-design-guidelines

ZIPダウンロード GitHub

このスキルを試すスポンサー

Web Interface Guidelines

Review files for compliance with Web Interface Guidelines.

How It Works

Fetch the latest guidelines from the source URL below
Read the specified files (or prompt user for files/pattern)
Check against all rules in the fetched guidelines
Output findings in the terse file:line format

Guidelines Source

Fetch fresh guidelines before each review:

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

Use WebFetch to retrieve the latest rules. The fetched content contains all the rules and output format instructions.

Usage

When a user provides a file or pattern argument:

Fetch guidelines from the source URL above
Read the specified files
Apply all rules from the fetched guidelines
Output findings using the format specified in the guidelines

If no files specified, ask the user which files to review.

vercelのその他のスキル

ローカル開発およびテスト用のエミュレートされたVercel REST API。ユーザーがローカルでVercel APIエンドポイントとやり取りしたり、Vercel統合をテストしたりする必要がある場合に使用します。

Vercel Cron Jobsの設定とベストプラクティス。vercel.jsonでスケジュールタスクを追加、編集、デバッグする際に使用します。

json-renderのコード生成ユーティリティ。UI仕様からコードを生成する際、カスタムコードエクスポーターの構築、仕様の走査、プロパティのシリアライズなどに使用します。

next-best-practice

Next.jsのベストプラクティス - ファイル規約、RSC境界、データパターン、非同期API、メタデータ、エラーハンドリング、ルートハンドラ、画像/フォント最適化、…

benchmark-sandbox

Vercel Sandbox上でvercel-pluginの評価シナリオを実行し、ローカルのWezTermパネルの代わりに使用します。Claude Codeとプラグインがプリインストールされた一時的なマイクロVMをプロビジョニングします…

現実世界のユースケースを段階的な例を通じて教える技術ガイドを作成します。概念は読者が必要とするタイミングでのみ導入されます。

benchmark-testing

ベンチマークテストプロジェクトを作成し、起動して、現実的なシナリオ全体でvercel-pluginスキルインジェクションを実行します。隔離されたディレクトリを設定し、インストールし…

Vercel AI Gatewayの専門的なガイダンス。モデルルーティング、プロバイダーのフェイルオーバー、コスト追跡、または統一された方法で複数のAIプロバイダーを管理する際に使用します。