🎨 デザインCC / Codex 両対応難易度: 中級

UIスタイリング ui-styling

美しいUIを手軽に実装！

出典リポの★

98,156

最終更新

1ヶ月前

作者

nextlevelbuilder

これは何？

これはReactベースのフレームワークで使えるUIスタイリングスキルです。shadcn/uiというアクセシブルなコンポーネントライブラリと、Tailwind CSSというユーティリティファーストなCSSフレームワークを組み合わせて使います。初心者でもコピペで使えるコンポーネントが豊富で、プロ級のUIを簡単に作れますよ。

これでできること

アクセシブルなダイアログやフォームを簡単に追加できる
Tailwind CSSで自由にスタイリングできる
ダークモードやテーマカスタマイズが可能
レスポンシブなレイアウトを簡単に構築できる

こんな時に便利

ダッシュボードや管理画面を作りたい時

アクセシブルなフォームが必要な時

一貫したデザインシステムを構築したい時

モバイル対応のUIを作りたい時

使い方

まずはCLIでshadcn/uiを初期化します。必要なコンポーネントを追加コマンドでインストールし、Reactコンポーネントとしてインポートして使います。Tailwindのユーティリティクラスでスタイルを調整できるので、CSSを書かずにデザインできますよ。

使用例（こう頼んでみよう）

「ボタンコンポーネントを追加して」「カードレイアウトのダッシュボードを作りたい」「ダークモードを実装する方法を教えて」

必要なもの

Node.js
Reactの基本知識

導入方法

いちばん簡単（AIに頼む）

次のスキルを入れて: https://github.com/nextlevelbuilder/ui-ux-pro-max-skill/tree/main/.claude/skills/ui-styling

手動で置く

Claude Code → ~/.claude/skills/ui-styling/

Codex → ~/.agents/skills/ui-styling/

使いこなしのコツ

まずは基本的なコンポーネントから試してみましょう
Tailwindのクラス名はスペース区切りで複数指定できます
コンポーネントのvariantプロパティで見た目を切り替えられます

GitHubで見る