frontend-ui-dark-ts
ダークテーマの React UI を構築
Tailwind CSS によるモダンなダークテーマ React アプリケーション、グラスモーフィズム効果、そしてダッシュボードや管理パネル向けの滑らかな Framer Motion アニメーションを作成します。
スキルZIPをダウンロード
Claudeでアップロード
設定 → 機能 → スキル → スキルをアップロードへ移動
オンにして利用開始
テストする
「frontend-ui-dark-ts」を使用しています。 ブランドパープル背景を持つダークテーマのボタンコンポーネントを作成
期待される結果:
bg-brand を使用し、hover:bg-brand-hover、適切なフォーカスリングスタイル、タッチフレンドリーなサイジングを備えたボタンコンポーネント
「frontend-ui-dark-ts」を使用しています。 グラスモーフィックパネル効果を持つサイドバーを構築
期待される結果:
backdrop-blur-lg、ダーク背景、微妙なボーダースタイリングを備えた glass-panel クラスを使用したサイドバー
「frontend-ui-dark-ts」を使用しています。 モーダルコンポーネントにフェードインアニメーションを追加
期待される結果:
初期透明度 0、透明度 1 までアニメーション、Framer Motion を使用し 0.3 秒の easeOut 遷移を備えたモーダル
セキュリティ監査
安全Static analysis flagged 69 potential issues, all of which are false positives. The flagged patterns (shell commands, hardcoded URLs, path traversal, weak crypto) are actually documentation examples and code templates in SKILL.md. No malicious code or security risks detected. This is a legitimate frontend UI skill for building dark-themed React applications.
リスク要因
⚡ スクリプトを含む (1)
⚙️ 外部コマンド (53)
🌐 ネットワークアクセス (3)
📁 ファイルシステムへのアクセス (4)
品質スコア
作れるもの
ダークモードの管理ダッシュボードを構築
ダークテーマパターンを使用して、サイドバーナビゲーション、データテーブル、ステータスインジケーターを備えたプロフェッショナルな管理パネルを作成します。
データ可視化インターフェースを設計
グラスモーフィックカード、滑らかな遷移、データ可視化用のカスタムカラー Using トークンを備えたデータ豊富なダッシュボードを構築します。
モダンなランディングページを実装
アニメーション付きセクション、グラスオーバーレイモーダル、洗練されたマイクロインタラクションを備えた洗練されたランディングページを作成します。
これらのプロンプトを試す
frontend-ui-dark-ts スキルを使用して、Tailwind CSS ダークテーマ設定を含む新しい React プロジェクトをセットアップします。カスタムブランドカラー、ニュートラル背景、テキストカラー Using トークンを含めます。
frontend-ui-dark-ts パターンを使用してグラスモーフィックカードコンポーネントを作成します。バックドロップブラー、微妙なボーダー、適切なダークテーマカラーを含めます。
Framer Motion を使用して滑らかなページ遷移を実装します。ルート変更のために frontend-ui-dark-ts スキルのフェードインとスライドアップバリアントを使用します。
アプリシェル、サイドバーナビゲーション、ページヘッダー、レスポンシブグラスカードを備えた完全なダッシュボードレイアウトを構築します。ステータスバッジとデータ可視化カラー Using トークンを含めます。
ベストプラクティス
- 保守性を 위해ハードコードされた色ではなくセマンティックカラー Using トークン（text-primary、text-secondary）を使用
- グラス効果は控えめに使用 - 使いすぎは可読性とパフォーマンスを低下させる可能性があります
- 実際のデバイスでアニメーションをテスト - モーション軽減の設定は尊重されるべきです
回避
- 純粋な黒色背景の使用は避ける - 適切なコントラスト比率を持つニュートラル背景色を使用
- すべての要素にグラス効果を適用しない - 浮き上がったサーフェスとオーバーレイに限定
- ページロードやインタラクションの応答性に影響を与える過度なアニメーションの複雑さは避ける