Communitygithub.com

samhvw8/ui-design-system

TailwindCSS + Radix + shadcn/ui を使用したReact UIコンポーネントシステム。設計システムアーキテクチャ、アクセシブルなコンポーネント、レスポンシブレイアウト、テーマ、ダークモード、コンポーネント構成を実現します。

ui-design-system とは?

このスキルは、TailwindCSS、Radix UI、shadcn/ui を組み合わせたReact UIコンポーネントシステムの設計・構築・改善を専門とします。開発者は、設計システムアーキテクチャの設計、アクセシビリティ(ARIA)を備えたコンポーネントの実装、レスポンシブレイアウト、ダークモード対応、テーマ設定、コンポーネント構成などのタスクを効率的に実行できます。主な対象プラットフォームはReact/Next.jsで、shadcn/uiの実装やコンポーネントライブラリ構築時に特に有用です。このスキルは、CSS変数やデザイントークン、アトミックデザインの原則に基づき、バリアントやスロットを活用した柔軟なコンポーネント合成をサポートします。

対応~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/samhvw8/dot-claude/tree/main/skills/ui-design-system

お気に入りのAIに質問する

このエージェントスキルを事前に読み込んだ状態で新しいチャットを開きます。

ドキュメント

ui-design-system は何をしますか?

TailwindCSS + Radix + shadcn/ui を使用したReact UIコンポーネントシステム。スタック:TailwindCSS(スタイリング)、Radix UI(プリミティブ)、shadcn/ui(コンポーネント)、React/Next.js。機能:設計システムアーキテクチャ、アクセシブルなコンポーネント、レスポンシブレイアウト、テーマ設定、ダークモード、コンポーネント構成。アクション:UIコンポーネントのレビュー、設計、構築、改善、リファクタリング。キーワード:TailwindCSS、Radix UI、shadcn/ui、設計システム、コンポーネントライブラリ、アクセシビリティ、ARIA、レスポンシブ、ダークモード、テーマ設定、CSS変数、コンポーネントアーキテクチャ、アトミックデザイン、デザイントークン、バリアント、スロット、構成。使用する場面:コンポーネントライブラリの構築、shadcn/uiの実装、アクセシブルなUIの作成、設計システムのセットアップ、ダークモード/テーマ設定の追加、UIコンポーネントアーキテクチャのレビュー時。

関連スキル