frontend-ui-dark-ts について
frontend-ui-dark-ts は、Tailwind CSS と Framer Motion を使ったダークテーマの React UI 構築スキルです。ダッシュボードや管理パネル、データ量の多いアプリを対象に、色の役割やグラスモーフィズムの指針を示します。
主な機能
- 01ダークテーマのReact UI指針
- 02Tailwind CSSの色の役割
- 03Framer Motionアニメーション
- 04グラスモーフィズムのスタイル
- 05ダッシュボードと管理画面向け
活用シーン
- 01ダークテーマのダッシュボード設計
- 02管理パネルの画面構築
- 03データ量の多いアプリ画面のスタイリング
インストール
コマンドをコピーしてターミナルで実行します。
$
npx skills add https:/インストール後、Claude Code で/frontend-ui-dark-tsを入力して読み込まれたか確認します。
同梱ファイルreferences/detailed-guide.md
詳細
フロントエンド UI ダークテーマ (TypeScript)
Tailwind CSS と Framer Motion を使用した、モダンなダークテーマの React UI システムです。グラスモーフィズム効果とセンスの良いアニメーションを備え、ダッシュボード、管理パネル、データリッチなアプリケーション向けに設計されています。
詳細ガイド
このスキルを実行する前に、詳細ガイドをお読みください。完全な手順と参考資料が記載されています。安全性、前提条件、検証要件は必須のものとして扱ってください。集中的な作業の場合は関連するセクションを読み込み、エンドツーエンドの作業の場合はガイド全体をお読みください。
カラーの使用
| 用途 | カラー | クラス |
|---|---|---|
| プライマリアクション | ブランドパープル | bg-brand text-white |
| プライマリホバー | ブランドホバー | hover:bg-brand-hover |
| ページ背景 | ニュートラル bg1 | bg-neutral-bg1 |
| カード背景 | ニュートラル bg2 | bg-neutral-bg2 |
| 浮き上がったサーフェス | ニュートラル bg3 | bg-neutral-bg3 |
| 入力背景 | ニュートラル bg2 | bg-neutral-bg2 |
| 入力フォーカス | ニュートラル bg3 | focus:bg-neutral-bg3 |
| ボーダー既定 | ボーダー既定 | border-border |
| ボーダー控えめ | ボーダー控えめ | border-border-subtle |
| 成功 | ステータス成功 | text-status-success |
| 警告 | ステータス警告 | text-status-warning |
| エラー | ステータスエラー | text-status-error |
使用する場面
このスキルは、概要に記載されたワークフローまたはアクションを実行する場合に適用できます。
制限事項
- タスクが上記の範囲に明確に一致する場合にのみ、このスキルを使用してください。
- 出力を、環境固有の検証、テスト、または専門家によるレビューの代替として扱わないでください。
- 必要な入力、権限、安全境界、または成功基準が欠けている場合は、停止して確認を求めてください。
コメント
Markdown 対応