Skills
エージェント向けにパッケージ化された専門スキルと手順を 96,770 件掲載。コマンド 1 行でインストールできます。
デザイン・UI
ブランドのビジュアルアイデンティティのブリーフを作成します。ロゴの方向性、カラーパレット、タイポグラフィ、画像スタイル、デザインシステムの基盤を扱います。ユーザーが「visual identity」「brand identity」「logo brief」「logo direction」「design brief」「brand design」「color palette for my brand」「typography for my brand」「visual language」「design system」「brand look and feel」「what should my brand look like」と言った場合、またはデザイナーやデザイン会社に依頼内容を伝える場合に使用します。ブランド戦略をビジュアルデザインの方向性に落とし込みたい場合にも使用します。
`21st` CLI（`@21st-dev/cli`）で21st.devカタログを検索し、インストールしてコードを取得します。React/shadcnコンポーネント、テーマ、テンプレートの検索、コンポーネントのコードやテーマのCSSの出力、アイテムのプロジェクトへのインストール、21st AIによる新しいコンポーネントの生成に対応します。ユーザーが「search/find a component/theme on 21st」「install our team's Button」「add @user/slug」「pull that component's code」「найди компонент на 21st」「поставь наш компонент」と言った場合や、shell/CIからカタログにアクセスするスクリプトを作成したい場合に使用します。プロジェクトに `components.json` がある場合は自動的に有効化し、UIを手書きする前に21stを検索します。
Tailwind CSS v4（2025-2026）を使ったモバイルファーストのレスポンシブデザインパターンです。次の場合に積極的に有効化します：(1) Tailwind のブレークポイント（sm:、md:、lg:、xl:、2xl:）を使ったモバイルファースト設計、(2) レスポンシブユーティリティの順序（デフォルトはモバイル、次にブレークポイント）、(3) レスポンシブタイポグラフィ（text-base sm:text-lg lg:text-xl）、(4) レスポンシブグリッドと flexbox、(5) ブレークポイントごとの表示／非表示（hidden md:block）、(6) max-* ブレークポイントによるデスクトップ以下向けの上書き、(7) コンポーネント単位のレスポンシブ対応に使うコンテナクエリ（@container）、(8) セーフエリアのインセットとノッチ対応、(9) 横向きと縦向き、(10) タッチとホバー（@media を使った hover:）。ブレークポイントのリファレンス、モバイルファーストのパターン、コンテナクエリの例、セーフエリアのレシピ、タッチ／ホバーへの対応を提供します。
ターミナルから`21st` CLI（`@21st-dev/cli`）経由で21st AIを使い、UIを生成・反復改善します。プロンプトからUIのラフを作成し、ブラウザーでバリエーションをプレビューし、自然言語の指示で任意のバリエーションをその場で編集して、最終コードをプロジェクトに取り込みます。新しいUIを構築／スケッチしたい場合（「料金ページをスケッチして」「21stでヒーローを生成して」「<X>セクションを作って」）、生成済みの案を反復改善したい場合（「3つ目のバリエーションを編集して」「その案にトグルを追加して」）、または案のコードを取得したい場合（「そのバリエーションのコードを取り込んで」「сгенери UI на 21st」「поправь третий вариант」「забери код того наброска」）に使用します。既存コンポーネントの検索／インストールには`21st-cli-use`スキル、自作コンポーネントの公開には`21st-registry`を使用してください。
Figma デザイン、製品要件定義書、その他のデザイン成果物から新しい Lightning Web Component を作成する場合に使用します。要件収集 → コード生成 → 最適化 → lint／フォーマット／コンパイル → テストの 5 段階ワークフローを調整し、SLDS、LDS、基本コンポーネント、最適化、テストの専門スキルを連携させます。Figma から新しい LWC を作る、PRD から LWC を作る、デザインやスクリーンショットから LWC を生成する、Aura コンポーネントを新規 LWC として移行する場合に使用します。既存の LWC のリファクタリング（experience-lwc-generate を使用）、Aura → LWC のインプレース移行（対象外）、単独の SLDS トークンやスタイル作業（design-systems-slds-apply を使用）、単独のデータレイヤー作業（experience-lds-best-practices-apply または experience-lds-data-requirements-generate を使用）では起動しないでください。
必須の前提手順——`generate_diagram` ツールを呼び出す前に、毎回このスキルを読み込んでください。先に読み込まずに `generate_diagram` を直接呼び出してはいけません。ユーザーがフローチャート、アーキテクチャ図、シーケンス図、ERD（エンティティ関係図）、状態図や状態マシン、ガントチャート、タイムラインなどの図の作成、生成、描画、レンダリング、スケッチ、構築を求めた場合に起動します。Mermaid 構文への言及や、FigJam でのシステムアーキテクチャ、決定木、依存関係グラフ、API 呼び出しフロー、認証ハンドシェイク、スキーマ、パイプラインの可視化を求めた場合も対象です。図の種類に応じたガイダンスを提供し、Mermaid の共通制約を設定するとともに、別の図の種類を使う場合やツール自体を使わない場合（マインドマップ、円グラフ、クラス図など）を案内します。
コンバージョン率の高いランディングページを構築するための包括的なシステムです。要件のヒアリング、ページ構成、レイアウト選択、コンバージョン向けコピーライティング、SEO に加え、タイポグラフィ、余白、角丸、背景、ヒーロー領域のレイアウト、アイコン、モーションに関する厳格なビジュアルルールを扱います。ユーザーがデザイン、コンバージョン、トークン、デザインシステムに言及していなくても、あらゆるランディングページ、マーケティングサイト、Web UI、ページセクション、コンポーネント、プロトタイプの構築、編集、スタイリング、レビュー、コピー作成に使用します。ページセクション、見出し、CTA、フォント、フォントサイズ、余白の値、角丸、背景色、アイコン、トランジションを選ぶ前に、必ず参照してください
コンバージョン、顧客維持、収益化を実現する SaaS およびスタートアップ製品の設計プレイブック。ランディングページと CRO、チェックアウトとフォーム、オンボーディング／アクティベーション、解約率の低減、価格設定の心理学、ダッシュボード、行動科学の手法、機能の取捨選択、ポジショニング／ICP、Go-to-Market、AI 時代の差別化を扱います。スタートアップや SaaS の製品設計、UX、コンバージョン、ランディングページ、チェックアウト、オンボーディング、トライアル、価格設定、顧客維持／解約、成長、ポジショニングについて助言する際に使用します。プロダクトデザイナー Richard（@richardrx）の知見をまとめたものです。ギャンブル、賭博、カジノ製品には使用しないでください。
React Native プロジェクトを NativeWind から Uniwind に移行します。ユーザーが NativeWind を Uniwind に置き換えたい、NativeWind からアップグレードしたい、Uniwind に切り替えたい場合や、NativeWind から Uniwind への移行に言及した場合に使用します。パッケージの削除、設定の移行、Tailwind 4 へのアップグレード、cssInterop の削除、テーマの変換、およびすべての破壊的変更に対応します。
AI アプリケーションが外部のツールやデータソースに統一的な方法で接続するためのオープンなプロトコルです。クライアントはモデルとの対話を担い、MCP サーバーはツール・リソース・プロンプトテンプレートを提供します。標準メッセージでやり取りするため、1 つのサーバーを複数のクライアントで再利用できます。