Skills
エージェント向けにパッケージ化された専門スキルと手順を 96,770 件掲載。コマンド 1 行でインストールできます。
デザイン・UI
画像（またはスクリーンショット、モックアップ、Figma URL、公開中のウェブサイトなどの画像参照一式）を、相互に対応する 2 つのデザインシステム成果物に変換します。コーディングエージェント向けの `docs/design.md`（YAML トークンと説明文を含み、Google のオープンな [design.md](https://github.com/google-labs-code/design.md) 形式に準拠）と、人が読むための `docs/design.html`（すべてのトークンとコンポーネントをライブ表示する、自己完結型のトークン駆動スタイルガイド）です。画像を読み取り、的を絞った確認質問を行い、デザイントークン（色、タイポグラフィ、間隔、角丸、コンポーネント）を導き出して両ファイルを作成します。完全に単独で動作し、他のドキュメントやスキルは不要です。創業者が「create a design system」「design from image」「translate image to design」「create design.md」「image to design system」「extract design tokens」と言った場合、または他に明確な意図を示さず画像を共有した場合に使用します。
ユーザーとの会話、製品の背景、デザイン言語に基づいて、洗練されたレスポンシブな自己完結型 HTML モックアップやインタラクティブなプロトタイプを作成する、直接呼び出し専用のスペシャリストです。ユーザーが html-prototype を明示的に呼び出した場合、または汎用 html スキルがモックアップやプロトタイプの依頼をここにルーティングした場合に使用してください。一般的な依頼から独立して起動しないでください。モックアップは独立したスキルではなく、このスキル内の非インタラクティブな高忠実度モードとして扱ってください。
UI/UXデザインのインテリジェンス。50種類のスタイル、21種類の配色、50種類のフォントペア、20種類のチャート、9種類の技術スタック（React、Next.js、Vue、Svelte、SwiftUI、React Native、Flutter、Tailwind、shadcn/ui）を提供します。操作：計画、構築、作成、デザイン、実装、レビュー、修正、改善、最適化、強化、リファクタリング、UI/UXコードのチェック。プロジェクト：ウェブサイト、ランディングページ、ダッシュボード、管理パネル、EC、SaaS、ポートフォリオ、ブログ、モバイルアプリ、.html、.tsx、.vue、.svelte。要素：ボタン、モーダル、ナビゲーションバー、サイドバー、カード、テーブル、フォーム、チャート。スタイル：グラスモーフィズム、クレイモーフィズム、ミニマリズム、ブルータリズム、ニューモーフィズム、ベントーグリッド、ダークモード、レスポンシブ、スキューモーフィズム、フラットデザイン。トピック：カラーパレット、アクセシビリティ、アニメーション、レイアウト、タイポグラフィ、フォントペア、余白、ホバー、シャドウ、グラデーション。統合：コンポーネント検索とサンプル表示に shadcn/ui MCP を使用
`21st` CLI（`@21st-dev/cli`）を使い、ターミナルから自分の作品を21st.devに公開・管理します。Reactコンポーネントをチームライブラリに公開する、CSSテーマやテンプレートの項目を公開する、公開済み項目を編集／公開停止／削除する、既存のコンポーネント制作物を一覧表示して再度開く、公開プロフィールページ（bento board）を確認／置き換えることができます。ユーザーが「publish/share/upload this to 21st」「залей в наш регистр」「опубликуй компонент/тему/темплейт」「share with team」「make this reusable」「unpublish/edit/delete my component」「change its visibility」「find/open my old component or draft」「найди/открой мой старый компонент или драфт」「add this to my 21st profile/bento」「update my profile page」「обнови мой профиль на 21st」「добавь блок в бенто」「add controls/knobs to my demo」「сделай демо с контролами」と言った場合に起動します。既存項目の検索とインストールには`21st-cli-use`を、プロジェクトのデザイントークンをテーマに変換するには`21st-design-sync`を使用してください。
ビジュアルデザイン前に情報階層、コンテンツ、ナビゲーション、タスクフロー、レスポンシブ構造を検証する、低忠実度で自己完結型の HTML ワイヤーフレームを専門に扱います。ユーザーが html-wireframe を明示的に呼び出した場合、または汎用 html skill がワイヤーフレームの依頼をここに振り分けた場合に使用します。一般的な依頼から単独で起動しないでください。完成度の高いモックアップや本番に近いインタラクションには使用せず、html-prototype を使用してください。
ユーザーが Apple Custom Product Pages（CPP）の設計、デプロイ、測定を希望する場合に使用します。特定の URL（通常は広告キャンペーンやソーシャル投稿）から訪れたユーザーに、異なるスクリーンショット、プレビュー動画、プロモーションテキストを表示する代替 App Store 商品ページです。「Custom Product Page」「CPP」「alternate product page」「App Store URL variant」「ASA CPP」「campaign-specific landing page」「product page per audience」「App Store Connect CPP」「ppoUrl」「?cpp=」パラメーター、「異なる広告オーディエンスに異なるスクリーンショットを表示」への言及がある場合に使用します。デフォルトページの App Store A/B テストについては ab-test-store-listing を参照してください。CPP に誘導する有料広告キャンペーンについては apple-search-ads または ua-campaign を参照してください。
Codex 用のエリート Web サイト画像からコード変換スキル。視覚的に重要な Web タスクでは、まず設計画像を生成し、深く分析してから、ウェブサイトを実装してできるだけ正確に一致させる必要があります。Codex では、小さく圧縮されたボードの代わりに大型で読みやすいセクション固有の画像を優先し、古い画像をトリミングする代わりにセクションまたは詳細ビュー用に新しいスタンドアロン画像を生成し、怠け者の生成不足を避け、カード内カード内カード UI を避け、ヒーローをきれいで広々とした読みやすく、小さいラップトップで表示されるようにする必要があります。
現在のプロジェクトのデザイン（shadcn / Tailwind CSS の変数とカラートークン）を確認し、`21st publish-theme` を使って共有可能なテーマとして 21st.dev コミュニティに公開します。ユーザーが「テーマを公開して」「デザインを 21st のテーマとして共有して」「デザインを 21st に同期して」「globals.css をテーマにして」「залей наш дизайн темой」「опубликуй тему」と言った場合に使用します。これは design-sync の 21st 版で、プロジェクトのデザイントークンを読み取り、公開テーマライブラリに同期します。
テンプレート駆動のデータ可視化、PPT プレゼンテーション、全ページレポート生成のためのスキルです。Lupi、Basics、Glance、Maps、Interactive gallery の実際の実装に厳密に基づく HTML チャートの生成、Presentation Mode による HTML/PDF プレゼンテーションの作成、レポートテンプレートによる全ページ HTML レポートの生成に対応します。基本は Mono とし、データの意味に応じて組み込みのカラープリセットを自動選択できます。また、ユーザー指定のカスタムパレットにも対応します。地図は明示的に要求された場合のみ使用し、同じ成果物内で配色を混在させないでください。
一冊の本 → 明確な「ファインダー」のイメージ → 2050年の図書館貸出カード（PNG）。ファインダーとは、著者がどの視点から何の問題を捉え、どんな情景を見たかを示すもの。カードには実際の表紙、著者の肖像、書誌情報を掲載。ファインダーブロックでは、ファインマン式の解説でイメージを平易かつ正確に説明。図解ブロックではAI画像生成でその情景を描き、继刚を固定の主人公にする（墨絵の参考画像から生成し、本人と分かる姿）。図解スタイル：吉田誠治風の絵本テイスト（異世界の日常空間、暖かな斜光、癒やされる繊細さ）。淡色の光学ガラス製カード、表紙から動的に抽出するアクセントカラー、縦横比は自動調整。本を閉じてもこの情景を覚えていれば、読んだ甲斐がある。ユーザーが「取景框卡」、「图书馆卡」、「library card」、「书卡」、「铸书卡」、「一本书一句话一张卡」、「/ljg-library」と言った場合、または本の名前を挙げて一枚のコレクションカードにまとめたい場合に使用。拆书结构分析には使わない（ljg-bookを使用）。纯文字金句には使わない（ljg-card -bを使用）。信息图には使わない（ljg-card -iを使用）。视觉笔记には使わない（ljg-card -vを使用）。
ブラウザー自動化を使って、さまざまなビューポート幅でウェブサイトのレスポンシブ対応をテストします。単一セッションの幅をブレークポイントごとに変更して各幅のスクリーンショットを撮影し、レイアウトの変化（列の変更、ナビゲーションの切り替え、オーバーフロー）を検出します。レイアウトが崩れる位置を正確に示す比較レポートを生成します。「responsiveness check」「check responsive」「breakpoint test」「viewport test」「responsive sweep」「check breakpoints」「test at mobile」で起動します。
Chakra UIプロジェクトをv2からv3に移行します。パッケージの変更、codemod、Providerの設定、カラーモード、プロパティ名の変更、複合コンポーネント、テーマ、レシピ、Next.jsの更新を扱います。ユーザーがChakra UIのバージョンをアップグレードする場合、アップグレード後の破壊的変更に遭遇した場合、旧v2パターン（ColorModeScript、useColorModeValue、styleConfig、extendTheme、isDisabled、colorScheme、@chakra-ui/icons、framer-motion依存関係）を変換する場合、複合コンポーネントのパターンを修正する場合、またはChakra UI v2とv3の違いを尋ねる場合に使用します。「移行」や「アップグレード」と明示されていなくても対象です。
ランディングページ、ダッシュボード、Web アプリ、ポートフォリオ、ツールなど、あらゆるビジュアル出力のための UI/UX 品質ゲート兼構築ガイドです。主要な入口は引き続き ui-design です。統合モデル：ui-design のメイントランク + taste-skill のオーバーレイ。- ui-design はエンジニアリング品質（トラックの選定、コンポーネントライブラリ戦略、アクセシビリティ、レスポンシブ対応、テーマ設定、パフォーマンス、プレビューの提供）を担当します。- taste-skill は ui-design のワークフロー内でスタイルを決定する際に呼び出されます（Brief Inference、Design Dials、Anti-slop の厳格なルール）。ビジュアル HTML/CSS/JS を生成するプロジェクトでは、必ず project-builder と併用してください。
ロゴの使用、色、タイポグラフィー、トーン、メッセージング、適用ルールを網羅した包括的なブランド基準文書を作成します。ユーザーが「ブランドガイドライン」「ブランド基準」「ブランドブック」「スタイルガイド」「ブランドガイド」「ブランドマニュアル」「ブランドルール」「ブランド文書」「ブランドツールキット」「デザイナーやコピーライターのオンボーディング」「チーム用の文書が必要」「チーム間のブランド一貫性」と述べる場合や、すべてのブランド上の決定を再利用可能な参考文書にまとめたい場合に使用します。
ユーザーがブランド構築を依頼した場合、または以下の例に当てはまるタスクで使用します。アイデア、既存のウェブサイト、参考ブランドの一覧、商品写真、「X をリブランドしたい」といったあらゆる入力から、実用的なブランドアイデンティティを構築します。founder-kit ユーザーには、素早いクイックブランドの手順を既定とし、希望に応じて 14～16 ページの完全版ガイドラインを提案します。Shopify、商品掲載、ソーシャル投稿を含む完全なコマース立ち上げは必要とせず、ブランドアイデンティティを求める場合に使用します。起動フレーズ：「ブランドを作って」「ブランドアイデンティティをデザインして」「[X] のブランドガイドライン」「ブランドブックが欲しい」「ゼロからブランドを作成」「[アイデア] のブランド」「[X] と [Y] のような雰囲気のブランドが欲しい」「[対象] をリブランド」「[対象] のビジュアルアイデンティティ」「build-a-brand」。
AI アプリケーションが外部のツールやデータソースに統一的な方法で接続するためのオープンなプロトコルです。クライアントはモデルとの対話を担い、MCP サーバーはツール・リソース・プロンプトテンプレートを提供します。標準メッセージでやり取りするため、1 つのサーバーを複数のクライアントで再利用できます。