Web開発向けの Agent Skills

CLI から Vercel プロジェクトをデプロイ、管理、検査、トラブルシューティングし、デプロイ、env vars、ドメイン、ログ、メトリクス、Core Web Vitals をカバーします。

提供元：vercel/vercel

• Release

SWA CLIを使用してAzure Static Web Appsを作成、構成、デプロイする。ローカルエミュレーション、staticwebapp.config.json、Functions API、GitHub Actions CI/CDを含む。

提供元：github/awesome-copilot

• Implementation
• Release

AWS Blocksを使ったフルスタックアプリケーション構築をガイドする。API、ストレージ、認証、リアルタイム、デプロイを網羅するInfrastructure-from-Codeフレームワーク。

提供元：aws/agent-toolkit-for-aws

• Design
• Implementation
• Release

Chrome DevTools MCPを用いた専門的なブラウザ自動化、デバッグ、パフォーマンス分析：ナビゲーション、スクリーンショット、ネットワーク検査、パフォーマンスプロファイリング。

提供元：github/awesome-copilot

AIエージェント向けのブラウザ自動化CLI：CDP経由でページのナビゲート、フォーム入力、クリック、スクリーンショット、データ抽出、ウェブアプリのテストを行います。

提供元：vercel-labs/agent-browser

• Testing

Web アプリをスマートフォン上でネイティブに感じさせます：CSS と meta タグで、粘着する hover、タップハイライト、100vh のバグ、入力ズーム、セーフエリア、タッチ操作を修正します。

提供元：emilkowalski/skills

高度なTypeScript型システム、カスタム型ガード、ユーティリティ型、ブランド型、エンドツーエンドの型安全性のためのtRPCを実装します。

提供元：jeffallan/claude-skills

• Design
• Implementation

妙搭（Spark/Miaoda）应用开发与托管：应用创建、本地全栈开发、云端生成迭代、创意设计（UI mockup / 可交互原型 / 线框图 / 落地页 / 仪表盘 / 幻灯片 deck / 视觉探索）、AI相关能力和飞书平台能力或者其他外部能力集成、日志/Trace/监控指标/PV/UV 查询、环境变量管理、应用协作者与协作权限设置、应用角色与成员管理、自动化触发器（定时/记录变更/Webhook/飞书审批）。当用户要开发/新建一个系统·工具·平台·应用，或要本地开发 / 云端开发 / 修改 / 部署 / 发布 / 上线 / 拿可分享链接，或用 HTML 做页面·网站·部署到妙搭，或要设计 / design / mockup / prototype / wireframe / 做 PPT / deck / 视觉探索，或提到妙搭/Spark/Miaoda（应用运行时域名形如 *.aiforce.cloud）、应用数据库、应用文件存储、开放 API Key、可见范围、应用协作者/开发权限、应用角色/角色成员、线上日志、接口请求量、错误量、延迟、访问量、环境变量、给妙搭应用配自动化任务/定时触发/审批通过后自动触发时使用。不负责普通云盘文件上传（lark-drive）、飞书文档编辑（lark-doc）、原生幻灯片创建（lark-slides）。

提供元：larksuite/cli

プロジェクトの品質基準を、カバレッジ、パフォーマンス、アクセシビリティのしきい値を記したCONSTRAINTS.md契約として確立し、弱められたチェックがないか差分を監視する。

提供元：addyosmani/agent-skills

ファイル所有権戦略、競合回避、インターフェース契約、マルチエージェント実装の統合パターンにより、並列の機能開発を調整する。

提供元：wshobson/agents

• Implementation

開発環境とテスト環境の計画（個別サンドボックス対共有テストモードサンドボックス）、API選択（Checkout Sessions対PaymentIntents）、Connectプラットフォームのセットアップ（Accounts v2、コントローラープロパティ）、請求/サブスクリプション、税と登録（Stripe Tax、automatic_tax、製品税コード）、Treasury金融アカウント、統合オプション（Checkout、Payment Element）、非推奨のStripe APIからの移行、セキュリティのベストプラクティス（APIキー管理、APIキー権限、webhooks、OAuth）にわたるStripe統合の意思決定を導く。Stripe統合の計画、構築、変更、テスト、レビューのいずれの場面でも使用する。開発環境の選択、支払いの受け付け、マーケットプレイスの構築、Stripeの統合、支払い処理、サブスクリプションの設定、売上税・VAT・GSTの徴収、コネクテッドアカウントの作成、安全なキー処理の実装を含む。

提供元：stripe/ai

gh-axi CLI を通じて GitHub を操作する: issue、プルリクエスト、ディスカッション、スタック PR、ワークフロー実行、リリース、Projects。

提供元：kunchenguid/gh-axi

Sleek APIを通じてモバイルアプリUI画面を設計。平易な言葉の説明からプロジェクトとレンダリング済み画面を作成し、HTML、React Native、SwiftUIで実装します。

提供元：designed-by-ai/skills

前提条件（自己申告）: API key · Paid account

.NET Web開発の最新の公式ガイダンスを使用して、ASP.NET Core Webアプリケーションを構築、レビュー、リファクタリング、または設計する。Blazor Web Apps、Razor Pages、MVC、Minimal APIs、コントローラーベースのWeb APIs、SignalR、gRPC、ミドルウェア、依存性注入、構成、認証、認可、テスト、パフォーマンス、デプロイ、またはASP.NET Coreのアップグレードに取り組む場合に使用。

提供元：openai/skills

• Implementation

Vue.jsのタスクには必ず使用すること。Composition APIと`<script setup>`、TypeScriptを標準アプローチとして強く推奨。Vue 3、SSR、Volar、vue-tscをカバー。Vue、.vueファイル、Vue Router、Pinia、Vueを使うViteの作業では必ず読み込むこと。プロジェクトが明示的にOptions APIを必要としない限り、常にComposition APIを使う。

提供元：vuejs-ai/skills

• Design

あらゆる層にセキュリティを組み込んだ統合フロントエンドとバックエンドのコンポーネントを実装し、セキュリティ重視のフルスタックWebアプリケーションを構築。データベースからUIまでのスタック全体をカバーし、全層で認証、入力検証、出力エンコーディング、パラメータ化クエリを徹底。使用…

提供元：jeffallan/claude-skills

• Requirements
• Design
• Implementation

新規UI構築時や既存UI再形成時に、際立った意図的なビジュアルデザインを導く。美的方向性、タイポグラフィ、テンプレート然としない選択を支援。

提供元：anthropics/skills

• Implementation

Figmaデザインを1:1の視覚的忠実度で本番投入可能なアプリケーションコードに変換します。FigmaファイルからUIコードを実装する場合、ユーザーが「デザインを実装」「コードを生成」「コンポーネントを実装」と言及した場合、Figma URLを提供した場合、またはFigma仕様に一致するコンポーネントの構築を求めた場合に使用します。`use_figma`によるFigmaキャンバスへの書き込みには`figma-use`を使用します。

提供元：openai/skills

• Implementation

前提条件（自己申告）: Node.js

> 高いデザイン品質とデザインシステム準拠を備えた、際立つプロダクショングレードのフロントエンドインターフェースをレビューし作成する。3つの柱で評価する：摩擦のないインサイトからアクションへの流れ、品質あるクラフト、信頼できる構築。USE FOR: PRレビュー、デザインレビュー、アクセシビリティ監査、デザインシステム準拠チェック、クリエイティブなフロントエンドデザイン、UIコードレビュー、コンポーネントレビュー、レスポンシブデザインチェック、テーマテスト、記憶に残るUIの作成。DO NOT USE FOR: バックエンドAPIレビュー、データベーススキーマレビュー、インフラまたはDevOps作業、UIを伴わない純粋なビジネスロジック、フロントエンド以外のコード。

提供元：microsoft/skills

• Requirements
• Implementation

Vue.jsのテストに使用。Vitest、Vue Test Utils、コンポーネントテスト、モック、テストパターン、E2EテストのためのPlaywrightを網羅。

提供元：vuejs-ai/skills

Web Interface Guidelines への準拠について UI コードをレビューします。「review my UI」「check accessibility」「audit design」「review UX」「check my site against best practices」と依頼されたときに使用します。

提供元：vercel-labs/agent-skills

Playwrightを使ってローカルWebアプリケーションを操作・テストするためのツールキット。フロントエンド機能の検証、UI動作のデバッグ、ブラウザのスクリーンショット取得、ブラウザログの表示をサポートします。

提供元：anthropics/skills

• Implementation

Tailwind CSS v4、デザイントークン、コンポーネントライブラリ、レスポンシブパターンでスケーラブルなデザインシステムを構築。コンポーネントライブラリの作成、デザインシステムの実装、UIパターンの標準化に使用。

提供元：wshobson/agents

CloudBase（腾讯云開発、云開発、TCB、微信云開発）プロジェクトを開発、設計、構築、デプロイ、デバッグ、移行、トラブルシューティングするときにこの skill を使用します — Web、微信小程序、小程序、uni-app、モバイル（iOS、Android、Flutter、React Native）。UI（ページ、界面、フォーム、dashboard、prototype、原型）、認証（ログイン、登録、OAuth、publishable key）などをカバーします。…

提供元：tencentcloudbase/cloudbase-skills

• Requirements
• Implementation
• Release

前提条件（自己申告）: Credentials

Midsceneを用いたビジョン駆動のブラウザ自動化。スクリーンショットから動作し、DOMやアクセシビリティラベルは不要。ヘッドレスのPuppeteerで実行され、ユーザーのマウスやキーボードを奪わない。既存のChromeに接続するCDPモードとBridgeモードもサポートする。ユーザーが…のときにこのスキルを使用する。

提供元：web-infra-dev/midscene-skills

• Implementation
• Testing

antfuスタイルのデザイン規約を拡張。UnoCSSファーストで、ツールや開発者ツールUI向けのライト/ダーク両対応のクラスベースのセマンティックトークンに加え、ランディングページやプロダクト画面向けのデザイン読解、アンチスロップ、マイクロインタラクションの磨き込み。UnoCSSでインターフェースを構築またはリファクタリングする際に使用。

提供元：antfu/skills

安定したAPIとインターフェース設計をガイド。API、モジュール境界、あらゆる公開インターフェースを設計するときに使用。RESTまたはGraphQLエンドポイントの作成、モジュール間の型コントラクトの定義、フロントエンドとバックエンドの境界の確立に使用。

提供元：addyosmani/agent-skills

• Implementation

機能実装やバグ修正を行う際、実装コードを書く前に使用します。

提供元：obra/superpowers

• Requirements
• Implementation

Azure Playwright Workspaces（旧Microsoft Playwright Testing）を使ってPlaywrightテストを大規模に実行する。クラウドホスト型ブラウザでブラウザテストをスケールする場合、CI/CDパイプラインと統合する場合、テスト結果をAzureポータルに公開する場合に使用。

提供元：microsoft/skills

• Requirements
• Release

ユーザーのコードベース向けにカスタムデザインシステムルールを生成します。ユーザーが「create design system rules」「generate rules for my project」「set up design rules」「customize design system guidelines」と言った場合や、Figma-to-codeワークフロー向けのプロジェクト固有の規約を確立したい場合に使用します。Figma MCPサーバー接続が必要です。

提供元：openai/skills

• Design

前提条件（自己申告）: MCP server

アプリケーションのページ、ビュー、または複数セクションのレイアウトをFigmaへ変換するタスクでは、figma-useと併用してこのスキルを使用します。トリガー例:「Figmaに書き出して」「コードからFigmaで作成して」「ページをFigmaにプッシュして」「このアプリ/ページをFigmaで構築して」「画面を作成して」「Figmaでランディングページを構築して」「コードに合わせてFigma画面を更新して」。ユーザーがコードや説明からFigmaで完全なページ、画面、ビューを構築または更新したいときは常に、このワークフロースキルが推奨されます。search_design_systemでデザインシステムのコンポーネント、変数、スタイルを発見し、それらをインポートし、ハードコードされた値ではなくデザインシステムのトークンを使ってセクションごとに画面を段階的に組み立てます。

提供元：openai/skills

• Implementation

Notionの仕様を実装計画、タスク、進捗トラッキングに変換。PRD/機能仕様を実装し、それらからNotionの計画＋タスクを作成するときに使用。

提供元：openai/skills

• Requirements

PenpotファイルからDESIGN.mdデザインドキュメントファイルを抽出する：design-md形式のポータブルなMarkdown仕様（色・タイポグラフィ・角丸・スペーシング・コンポーネントのトークンマップを含むYAMLフロントマター＋Overview、Colors、Typography、Layout、Shapes、Components、Do's & Don'ts、Iteration Guide、Known Gapsの散文セクション）。ファイルの実際のトークン、ライブラリアセット、サンプリングしたコンポーネントスタイルに基づき、決して創作しない。キャンバスは読み取り専用で、ローカルのMarkdownファイルを1つ書き出す。トリガー：'generate DESIGN.md'、'create a design.md'、'document the design system as markdown'、'export design guidelines'、'extract design documentation'、'design system spec file'、'make a style guide file from this design'。

提供元：penpot/penpot-ai-kit

Penpotデザインを実装コード（ソースコンポーネントまたはStorybookストーリー）と照合してレビューし、構造化されたDRIFTレポートを出力します。エンジニアがビルドがデザインと一致するか確認する必要があるときに使用します。選択範囲からHTML/CSSを抽出し、そのトークン/構造/状態をコードコンポーネントにマッピングし、差分を取り、各側に欠けているものを重大度と調整案とともに列挙します。コードソースが提供されない場合は、デザインシステムトークンのチェックに優雅にフォールバックします。トリガー: 'design to code review'、'does my code match the design'、'design code parity'、'compare Penpot to my component'、'check this against Storybook'、'extract HTML/CSS from this selection'、'find design drift'、'design implementation diff'。

提供元：penpot/penpot-ai-kit

TeamsとCopilot向けのMicrosoft 365アプリとエージェントを構築、テスト、デプロイする。プロジェクト作成、ローカルテスト、クラウドデプロイ、トラブルシューティング、SlackからTeamsへの移行のサブスキルを含む。USE FOR: Teams agent、bot、tab、message extension、Declarative Agents、Custom Engine Agents、ローカルテスト、Agents Playground、Azureリソースのプロビジョニング、リモートデプロイ、SlackからTeamsへの移行、クロスプラットフォームのbot開発、Block KitからAdaptive Cardsへの変換。DO NOT USE FOR: 一般的なWeb開発、bot以外/Teams以外のプロジェクト。

提供元：microsoft/skills

• Release

実装が完了し、すべてのテストが通り、作業をどう統合するかを決める必要があるときに使う。

提供元：obra/superpowers

あらゆる実装判断を公式ドキュメントに基づかせる。実装前にアプローチを公式ドキュメントで検証したいとき、または古いパターンを排除した権威ある出典付きコードが欲しいときに使用。正確性が重要なあらゆるフレームワークやライブラリでの構築に使用。

提供元：addyosmani/agent-skills

• Requirements
• Implementation

前提条件（自己申告）: Python

コーディング前に仕様を作成します。新規プロジェクト、機能、または重要な変更を開始する際に仕様がまだ存在しないときに使用します。目的とスコープを定めたPRDや要件ドキュメントを起草するとき、または要件が不明確・曖昧・漠然としたアイデアのみのときに使用します。単一の要件が独立してテスト可能な複数の機能にまたがり、仕様化の前にモジュールのケイパビリティマップへ分解する必要があるときに使用します。

提供元：addyosmani/agent-skills

• Requirements
• Implementation