ローカライズされた読書ガイド
frontend-ui-dark-ts目的、用途、および情報源
Tailwind CSSとカスタムテーマ、グラスモーフィズム効果、Framer Motionアニメーションを使用して、ダークテーマのReactアプリケーションを構築しましょう。洗練されたダークな美学を備えたダッシュボード、管理パネル、データ豊富なインターフェースを作成する際に活用できます。
ソースを取得しました:
- 出典リポジトリ
- microsoft/skills
- SKILL.md
.github/plugins/azure-sdk-typescript/skills/frontend-ui-dark-ts/SKILL.md- リポジトリの Star
- 3,157
- リポジトリの最終更新
- 2026-10-31
- 能力分類
- クラウドサービス
- 最終収集時刻
ライセンス: MIT
ワークフローの抜粋は、Codezによる実行可能な指示ではなく、あくまでも参考資料です。このページを作成するために、サードパーティ製のスキルは実行されていません。
以下の目的とワークフローに関する記述は、上流工程に関する資料であり、読みやすいように整理・翻訳されています。これらは、別途ラベル付けされたCodez編集分析とは区別されます。
このスキルが何をするか
Tailwind CSSとカスタムテーマ、グラスモーフィズム効果、Framer Motionアニメーションを使用して、ダークテーマのReactアプリケーションを構築しましょう。洗練されたダークな美学を備えたダッシュボード、管理パネル、データ豊富なインターフェースを作成する際に活用できます。
上流ワークフローの仕組み
フロントエンドUIダークテーマ(TypeScript)
Tailwind CSSとFramer Motionを使用した、モダンなダークテーマのReact UIシステム。ダッシュボード、管理パネル、データ量の多いアプリケーション向けに設計されており、ガラスモーフィズム効果と洗練されたアニメーションが特徴です。
上流への航路 · L10 ↗npm create vite@latest my-app -- --template react-ts
cd my-app
npm install framer-motion clsx react-router-dom
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p要件とセットアップ
このファイルから要件定義の短い記述が選択されませんでした。これは、スキルに依存関係がないという意味ではありません。リポジトリの設定手順と参照ファイルを確認してください。
制限事項と品質チェック
このファイルからは、個別の制限に関する記述は選択されていません。これは、このスキルがあらゆる入力や環境において安全であることを意味するものではありません。ソースコード全体を確認し、ご自身で結果を検証してください。
まずは安全なトライアルから始めましょう
- サポートされているホストとリポジトリのインストール手順を確認してください。スキルディレクトリと、それに関連付けられているスクリプト、アセット、ドキュメントはまとめて保管してください。SKILL.md単独では依存関係を省略できる場合があります。
- エージェントに実際の入力、希望する出力、および受け入れ基準を指定してください。呼び出し構文と利用可能なツールはホストによって異なります。このサイトは、汎用的なインストールコマンドを前提としていません。
- 使い捨てプロジェクトまたはコピーで、元のワークフローを試してみてください。ファイル、リモートサービス、または課金対象リソースを変更する操作は、許可する前に必ず確認してください。
- 出力結果をソースの品質チェックおよび独自の要件と照らし合わせて検証してください。トリガーが成功したことやリポジトリのスター数が多いことだけでは、正しい結果とは言えません。
詳細は出典元をご覧ください。
関連スキル
翻訳と範囲
この読書ガイドは、ピン留めされた上流からの抜粋を選りすぐっていますSKILL.md翻訳は補助的なものです。完全なマニュアルではなく、互換性テスト済みであることを保証するものでもありません。ご使用前に原文および参照ファイルをお読みください。
この紹介文は、下記に固定表示されているバージョンに関するものです。現在のリポジトリのアクティビティと収集時間は別途表示されます。
- ピン留めされたソース
- 原文を読む ↗
- ソースを取得しました
- ソースコミット
00d66a64919edca5bca2c673373444e36a4b5461- ソースSHA-256
ae89e5f7592c2ec2c279bac49b85c0eac2c269eb6331a45a33eea185a46e172b