フロントエンド スキル

実証済みのデザイン原則に基づいて美学的に美しいインターフェースを作成します。UI/UXの構築、インスピレーションサイトからのデザイン分析、AIマルチモーダルを使用したデザイン画像の生成、視覚的階層と色彩理論の実装、マイクロインタラクションの追加、またはデザインドキュメントの作成を行う際に使用します。chrome-devtoolsとAIマルチモーダルを使用してインスピレーションのスクリーンショットをキャプチャして分析するワークフロー、美観基準が満たされるまでの反復的なデザイン画像生成、BEAUTIFUL（美学的原則）、RIGHT（機能性/アクセシビリティ）、SATISFYING（マイクロインタラクション）、PEAK（ストーリーテリング）の段階をカバーする包括的なデザインシステムガイダンスが含まれます。chrome-devtools、AIマルチモーダル、メディア処理、UIスタイリング、Webフレームワークのスキルと統合されています。

公開されているagents.mdの規則に従ってAGENTS.mdファイルを生成および維持します。AIエージェントのワークフローのドキュメント作成、オンボーディングガイド、またはプロジェクト間でのエージェントの相互作用パターンの標準化を行う場合に使用します。

OpenAPI、Swagger、GraphQLのスキーマがバックエンドの実装と一致することを検証します。破壊的な変更を検出し、TypeScriptクライアントを生成し、APIドキュメントが同期された状態を維持します。API仕様ファイル（.yaml、.json、.graphql）で作業する場合、APIの変更をレビューする場合、フロントエンドの型を生成する場合、またはエンドポイントの実装を検証する場合に使用します。

Better Auth（フレームワークに依存しないTypeScript認証フレームワーク）を使用して認証と承認を実装します。機能には、確認付きのメール/パスワード認証、OAuthプロバイダー（Google、GitHub、Discordなど）、2要素認証（TOTP、SMS）、パスキー/WebAuthnのサポート、セッション管理、ロールベースのアクセス制御（RBAC）、レート制限、データベースアダプターが含まれます。アプリケーションに認証を追加する場合、OAuthフローを実装する場合、2FA/MFAを設定する場合、ユーザーセッションを管理する場合、承認規則を構成する場合、またはWebアプリケーションの安全な認証システムを構築する場合に使用します。

任意のプロジェクトタイプのCLAUDE.mdファイルを、ベストプラクティス、モジュラーアーキテクチャのサポート、テックスタックのカスタマイズを使用して分析、生成、強化します。新しいプロジェクトの設定、既存のCLAUDE.mdファイルの改善、AI支援開発基準の確立の際に使用します。

d3.jsを使用したインタラクティブなデータ可視化の作成。このスキルは、カスタムチャート、グラフ、ネットワーク図、地理空間可視化、または視覚要素、トランジション、インタラクションに対する細粒度の制御が必要な複雑なSVGベースのデータ可視化を作成する場合に使用します。標準的なチャートライブラリを超えたオーダーメイドの可視化に、React、Vue、Svelte、バニラJavaScript、またはその他の環境で使用してください。

最近のClaude Codeチャット履歴を分析してコーディングパターン、開発上のギャップ、改善点を特定し、HackerNewsから関連する学習リソースを整理し、SlackのDMに自動的に個人向け成長レポートを送信します。

React Nativeアプリのファイルベースルーティング用Expo Routerのエキスパート。ナビゲーション、レイアウト、動的ルート、ディープリンク、TypeScript統合をカバー。ユーザーがExpo Router、ファイルベースルーティング、ナビゲーション、appディレクトリ、またはExpoのルーティングに言及した場合に呼び出します。

高いデザインクオリティを持つ独特のプロダクションレベルのフロントエンドインターフェースを作成します。ユーザーがウェブコンポーネント、ページ、またはアプリケーションの構築を要求した場合にこのスキルを使用します。汎用的なAIの美観を避けた創造的で洗練されたコードを生成します。

React/TypeScriptアプリケーションのフロントエンド開発ガイドライン。Suspense、レイジーローディング、useSuspenseQuery、機能別ディレクトリによるファイル構成、MUI v7スタイリング、TanStack Router、パフォーマンス最適化、TypeScriptのベストプラクティスなどの現代的なパターン。コンポーネント、ページ、機能の作成、データ取得、スタイリング、ルーティング、またはフロントエンドコードの作業を行う際に使用します。

インタラクティブなHTMLプレゼンテーションを6つのタブ（Overview、Requirements、Architecture/C4、Tech Spec、Roadmap、Guides）で構築する。presentation/README.mdハブを作成する。ln-110-documents-pipelineの下で動作する。

エピックの要件が変更された場合にストーリーを再計画します。理想的な状態と現状を比較し、操作（KEEP/UPDATE/OBSOLETE/CREATE）を分類し、Linearで実行します。

テキストと表の抽出、新しいPDFの作成、ドキュメントの結合・分割、フォームの処理を行う総合的なPDF操作ツールキット。ClaudeがPDFフォームに記入する必要がある場合、またはプログラムでPDFドキュメントを大規模に処理、生成、分析する必要がある場合。

Plaid 銀行 API 統合（Link、Auth、Transactions、Identity、および webhook 処理を含む）の専門的なガイダンス。ユーザーが Plaid、銀行接続、金融データ、ACH、または銀行 API に言及した場合に呼び出します。

プレゼンテーションの作成、編集、および分析。Claude がプレゼンテーション (.pptx ファイル) を使用する必要がある場合: (1) 新しいプレゼンテーションの作成、(2) 内容の修正または編集、(3) レイアウトの操作、(4) コメントまたはスピーカーノートの追加、またはその他のプレゼンテーションタスク

高度な7つの質問フローにより、あらゆる役割、業界、タスクに対する本番環境で使用可能なメガプロンプトを生成する世界クラスのプロンプトパワーハウス。15の専門領域（テクニカル、ビジネス、クリエイティブ、法務、ファイナンス、HR、デザイン、カスタマー、エグゼクティブ、マニュファクチャリング、R&D、規制、特殊テクニカル、研究、クリエイティブメディア）にわたる69の総合プリセット、複数の出力形式（XML/Claude/ChatGPT/Gemini）、品質検証ゲート、OpenAI/Anthropic/Googleの文脈別ベストプラクティスを搭載。コアモードとアドバンスドモードの両方をサポートし、テストシナリオとプロンプトのバリエーションを提供。

Repomixを使用して、エンティレートなコードリポジトリを単一のAIフレンドリーなファイルにパッケージ化します。機能には、カスタマイズ可能なインクルード/エクスクルードパターンでコードベースをパックする機能、複数の出力形式（XML、Markdown、プレーンテキスト）を生成する機能、ファイル構造とコンテキストを保持する機能、トークンカウントによってAI消費のために最適化する機能、ファイルタイプとディレクトリによってフィルタリングする機能、カスタムヘッダーとサマリーを追加する機能が含まれます。AI解析のためのコードベースのパッケージ化、LLMコンテキストのためのリポジトリスナップショットの作成、サードパーティライブラリの解析、セキュリティ監査の準備、ドキュメンテーションコンテキストの生成、または未知のコードベースの評価を行う場合に使用します。

効果的なスキル作成ガイド。このスキルは、ユーザーが特殊な知識、ワークフロー、またはツール統合でClaudeの機能を拡張する新しいスキル（または既存のスキルを更新）したい場合に使用します。

Anthropicのベストプラクティスに従ってClaude Codeスキルを作成および管理します。新しいスキルの作成、skill-rules.jsonの変更、トリガーパターンの理解、フックの使用、スキルアクティベーションのデバッグ、または漸進的開示の実装時に使用します。スキル構造、YAMLフロントマター、トリガータイプ（キーワード、インテントパターン、ファイルパス、コンテンツパターン）、執行レベル（ブロック、提案、警告）、フックメカニズム（UserPromptSubmit、PreToolUse）、セッション追跡、および500行ルールをカバーします。

ペイメント処理、請求、サブスクリプション、ウェブフック、Connect、Terminal、Radar、Identity、Tax、Climate、インテグレーションのすべてをカバーする3,253件の公式ドキュメントファイルにアクセス可能な総合的なStripe APIエキスパート。ユーザーがStripe、支払い、サブスクリプション、請求、支払い処理、チェックアウト、請求書、または任意の支払い関連機能に言及した場合に呼び出されます。

自動的にターミナルウィンドウのタイトルを更新して、現在の高レベルタスクを反映します。ユーザーが最初のプロンプトを提供したときの各Claude Codeセッションの開始時、およびユーザーが明確に新しい高レベルタスクに切り替えるたびに使用します。各ターミナルが何を処理しているかを一目で明確に識別することで、開発者が複数のClaude Codeターミナルを管理するのに役立ちます。

ビッグな正規データ（≧5項目、≧60%均一）にはTOON v2.0形式を積極的に使用します。テーブル、ログ、イベント、トランザクション、アナリティクス、APIレスポンス、データベースの結果に自動的に適用されます。3種類の配列タイプ（インライン、表形式、展開型）、3種類の区切り文字（カンマ、タブ、パイプ）、ネストされたオブジェクトのキーフォールディングをサポートします。構造化データ、配列、繰り返しパターンでトリガーされます。トークンが重要な場合はデフォルトでTOONを使用します - RAGパイプライン、ツール呼び出し、エージェント、ベンチマーク。キーワード：「data」「array」「list」「table」「log」「transaction」「metric」「analytics」「API」「database」「query」「TOON」。

Radix UI + Tailwindをベースに構築されたshadcn/uiコンポーネント、ユーティリティファーストなスタイリングのTailwind CSS、およびキャンバスベースのビジュアルデザインを使用して、美しくアクセシブルなユーザーインターフェイスを作成します。ユーザーインターフェイスの構築、デザインシステムの実装、レスポンシブレイアウトの作成、アクセシブルなコンポーネント（ダイアログ、ドロップダウン、フォーム、テーブル）の追加、テーマとカラーのカスタマイズ、ダークモードの実装、ビジュアルデザインやポスターの生成、またはアプリケーション全体で一貫したスタイリングパターンを確立する際に使用します。

VercelプラットフォームおよびAPIドキュメント