Tailwind CSS

design-system skill を使って UI システムを生成・監査し、既存コードからトークンを抽出し、実運用のリポジトリでスタイルの一貫性をレビューできます。

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

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

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

ckm:design-system は、明確なトークンアーキテクチャから、三層トークン、コンポーネント仕様、CSS variables、Tailwind mappings、ブランドに一貫したスライド素材をまとめて生成・管理できます。

tailwind-design-system スキルを使って、Tailwind CSS v4 のデザインシステムを構築できます。トークン設計、テーマ設定、バリアント、アクセシビリティ、v3 から v4 への移行ガイダンスまでカバーしています。

figma を使って Figma MCP server からデザインの文脈、スクリーンショット、変数、アセットを取得し、Figma node を実装可能な UI 判断へ落とし込みます。Figma URL または node ID があり、デザインからコードへの作業、セットアップ、トラブルシューティングに適した正確な figma の使い方を知りたい場合に最適です。

frontend-devは、洗練された本番品質のWebページを作るためのフロントエンド開発スキルです。高品質なUI、シネマティックなモーション、AI生成メディア、訴求力のあるコピー、生成アートまでまとめて扱えます。ランディングページ、マーケティングサイト、商品ページ、ダッシュボードなど、デザイン・コンテンツ・実装の整合性が重要なフロントエンド制作に向いています。

frontend-ui-dark-ts は、TypeScript、Tailwind CSS、Framer Motion、再利用可能なデザイントークンを使って、ダークテーマの React UI を構築するのに役立ちます。ダッシュボード、管理画面、分析ビューなど、洗練されたダークな見た目と一貫したコンポーネント設計が求められる情報量の多い画面に適しています。

expo-tailwind-setup は、Expo で Tailwind CSS v4 を導入・設定するための実践ガイドです。react-native-css と NativeWind v5 を使い、iOS・Android・web 向けのセットアップ手順を具体的に案内します。

ui-webは、WCAG 2.1 AAのチェック、十分なコントラスト、見やすいコントロール、ダークモードに強いTailwindパターンを使って、Web UIコンポーネントの設計とスタイル調整を支援します。React系のフロントエンドで、実務的なUIデザイン指針が必要なときに使うことで、アクセシビリティを高め、迷いを減らせます。

redesign-existing-projects は、既存のWebサイトやアプリをプレミアム品質へ引き上げるための skill です。現在のデザインを監査し、ありがちなAIっぽいパターンを見つけ出し、機能を壊さずにハイエンドなデザイン実装を適用します。CSSフレームワークでもプレーンなCSSでも動作します。

baseline-ui は、間隔、タイポグラフィ、アクセシビリティ、モーションについて、意見のある基準に照らして Tailwind ベースの UI をレビューまたは生成するのに役立ちます。より安全なコンポーネント出力、より明確な UI デザイン判断、既存プリミティブからのズレを抑えたいときに、baseline-ui スキルを使ってください。React/Tailwind のワークフローや、実用的な baseline-ui ガイドの確認に特に向いています。

shadcn-ui スキルは、実運用のアプリに shadcn/ui コンポーネントを計画・導入・調整するのに役立ちます。Design Implementation、コンポーネントの発見、カスタマイズ、そしてフォーム、テーブル、認証フロー、レイアウトにまたがる実践的な shadcn-ui 活用のガイドとして使えます。

web-artifacts-builderは、React・Tailwind CSS・shadcn/uiのプロジェクトを初期化し、通常どおり開発したうえで、最終的に単一の`bundle.html`へまとめられるスキルです。状態管理やルーティング、リッチなUIを含む複雑なフロントエンド成果物向けで、単純な1ファイルのデモには不向きです。