React

repo-scan は、ファイルを分類し、埋め込みのサードパーティライブラリを検出し、何が中核で、何が重複で、何が不要な負荷かを判断しやすくする、クロススタック対応のソース監査スキルです。repo-scan を Code Review に使う場面、レガシー移行、リファクタリング計画に役立ちます。インストール方法と使用ガイドは、このスキル内の repo-scan の案内を参照してください。

remotion-video-creation は、React での動画制作に特化した Remotion 向けスキルです。アニメーション、素材、音声、キャプション、チャート、コンポジション、トランジションまで、29 のルールでレンダリングミスを減らすのに役立ちます。Video Editing のワークフロー、テンプレート型の解説動画、SNS 用の短尺クリップ、データ駆動のモーショングラフィックスに最適です。

frontend-patterns は、React と Next.js のフロントエンド開発に役立つ実践的な skill です。コンポーネント、状態管理、フォーム、ルーティング、アクセシビリティ、パフォーマンスについて、保守しやすいパターンを選ぶ助けになります。一般論のベストプラクティスではなく、実装方針やパターン選定を明確に確認したいときに、frontend-patterns ガイドを活用してください。

click-path-audit スキルは、UIハンドラーを状態変化ごとに追跡し、リファクタ後やコードレビュー時に起きやすい順序バグ、共有状態の競合、最終状態の不整合を見つけるのに役立ちます。

shadcnスキルを使うと、プロジェクトの状況を確認し、適切なCLIコマンドを実行し、コンポーネントを導入しながら、base と radix の使い分け、フォーム、テーマ設定、registry まで、ドキュメントに沿ってUIを組み立てられます。

frontend-designは、曖昧なUIアイデアから、汎用的でないスタイリングと明確な美的指針を備えた、個性的なプロダクション品質のフロントエンド実装を生成するのに役立つスキルです。

fullstack-developer skill は、React、Next.js、Node.js、API、データベース、認証、デプロイまでをまたぐ、モダンな JavaScript / TypeScript のWebアプリ開発向け再利用可能プロンプトパッケージです。複数レイヤーにまたがる設計・実装の検討に向いており、スクリプトやテンプレートを配布する形式ではなく、1つの `SKILL.md` で対象範囲と進め方を定義するタイプです。

prototype skill は、本実装に進む前に、ひとつの具体的な疑問に答えるための使い捨てコードを作るのに役立ちます。ロジック、状態遷移、データ構造、UI の方向性を、リポジトリの規約に沿った実行可能なプロトタイプで検証したいときに使います。完成版の機能ではなく、すばやいプロトタイプの指針が必要な場面に最適です。

ui-ux-pro-maxはAIによるUI/UXデザイン支援スキルです。レイアウト、スタイル、カラースキーム、タイポグラフィ、UXルールなどを体系的にガイドし、Webやモバイル開発に最適。React、Next.js、Vue、Svelte、Tailwind、shadcn/ui、SwiftUI、React Native、Flutter、HTML/CSSに対応し、設計・レビュー・改善に役立つデザイン知見を提供します。

ckm:ui-stylingはshadcn/ui、Tailwind CSS、キャンバスベースのビジュアル設計を活用し、アクセシブルで本番対応のUIを構築できます。Reactプロジェクトで構造化レイアウトやダークモード、デザインシステムを必要とする場合に最適。UI設計やテーマ設定、プロトタイピングを効率化する実践的なガイドを提供します。

design-system-patternsは、デザインシステムやコンポーネントライブラリ向けに、トークン設計、テーマアーキテクチャ、再利用しやすいコンポーネントAPIパターンを通じて、拡張しやすいUI基盤づくりを支援するスキルです。

interaction-designスキルは、目的のあるUIモーション、マイクロインタラクション、画面遷移、ローディング状態、フィードバックパターンを設計・実装するための実践的なガイダンスを提供します。React寄りの参考情報と使いどころがまとまっており、チームでの検討や実装判断に役立ちます。

web-component-designは、React・Vue・Svelteで再利用可能なUIコンポーネントを設計したいチーム向けのスキルです。デザインシステムで役立つ堅実なAPIパターン、アクセシビリティの指針、スタイリング選定時のトレードオフを整理した参考情報を提供します。

react-state-managementは、Redux Toolkit、Zustand、Jotai、React Query、SWR、RTK QueryなどのReact向け状態管理ツールを、扱う状態の種類、アプリの規模、移行要件に応じて選定・活用するための実践的なスキルです。

nextjs-app-router-patterns は、Next.js 14+ の App Router アーキテクチャ設計を支援するスキルです。Server Components、streaming、caching、route handlers、Server Actions を含むフルスタック開発や、Pages Router からの移行計画に役立ちます。

react-native-architectureは、ルーティング、状態の責務分離、ネイティブモジュール、オフラインファースト設計、Expoとbareの選定ポイントを含め、実運用向けのReact Native / Expoアプリ設計を検討する際に役立ちます。

react-modernization は、React 16/17 アプリを 18+ へ移行するためのマイグレーション特化スキルです。クラスコンポーネントの hooks 化、root API の更新、codemod を踏まえた段階的リファクタリング計画まで、移行作業を進めやすい形でガイドします。

vercel-react-native-skills は、パフォーマンス重視のフロントエンド開発に役立つ React Native / Expo 向けスキルです。リスト描画、アニメーション、ナビゲーション、UI パターン、状態管理、ネイティブモジュールのセットアップ改善に活用できます。モバイルアプリのボトルネックを、迷いを減らしながら解消するための実践的なルール、導入ガイド、運用パターンが含まれています。

vercel-composition-patternsは、Frontend Development向けのReactコンポジション技能で、boolean propsの乱立を、compound components、明示的なvariants、stateのリフト、React 19対応の安全なAPIへと置き換えるのに役立ちます。コンポーネント設計の見直し、再利用しやすいUI APIの改善、スケーラブルなfrontendコードに最適なコンポジションパターンの選定に活用できます。

vercel-react-best-practices は、Vercel Engineering が提供するスキルで、AI エージェントが React と Next.js のパフォーマンスを最適化できるよう、waterfalls・bundle size・rendering などの優先度付きルールでガイドします。

overdriveは、意欲的なUIデザインに向けたGitHub skillです。文脈の把握、提案先行の進め方、そして優れたインタラクション品質を重視しています。映画的なトランジション、レスポンシブなインターフェース、高い訴求力を持つプロダクト体験を実現したいときに、overdriveを導入して活用できます。

optimize skill は、読み込み速度、描画、アニメーション、画像、バンドルサイズにまたがる UI パフォーマンス問題を診断し、改善するための skill です。遅い、もたつく、カクつく Web 体験を扱うときに、測定を起点にした体系的な optimize ガイドが必要ならこれを使ってください。

source-driven-development スキルは、フレームワーク固有のコーディングを公式ドキュメントに基づいて進めるためのもので、実装前にパターンを確認できます。React、Vue、Next.js、Svelte、Angular などのスタックで、正確性、出典の明確さ、バージョン差に左右される判断が重要な場合に最適です。

performance-optimization スキルは、まず計測し、真のボトルネックを特定して修正し、結果を検証するためのガイドです。性能要件があるとき、回帰を疑うとき、または Core Web Vitals、読み込み時間、操作時の遅延を改善したいときに使います。