frontend-css
Tailwindで一貫性のある保守可能なCSSを記述
こちらからも入手できます: EIS-ITS
標準なしでCSSを記述すると、一貫性のないスタイリング、肥大化したスタイルシート、コードベース全体でのメンテナンスの課題につながります。このスキルは、AIアシスタントがTailwindユーティリティクラスを使用し、デザインシステムトークンに従い、すべてのコンポーネント間でスタイリングの一貫性を維持するようガイドします。
スキルZIPをダウンロード
Claudeでアップロード
設定 → 機能 → スキル → スキルをアップロードへ移動
オンにして利用開始
テストする
「frontend-css」を使用しています。 Tailwindを使用して、タイトル、説明、アクションボタンを含むカードコンポーネントをスタイリングしてください。
期待される結果:
- コンテナ: bg-white rounded-lg shadow-md p-6
- タイトル: text-xl font-semibold text-gray-900 mb-2
- 説明: text-gray-600 mb-4 leading-relaxed
- ボタン: bg-blue-600 text-white px-4 py-2 rounded hover:bg-blue-700 transition-colors
「frontend-css」を使用しています。 ナビゲーションコンポーネントにレスポンシブブレークポイントを追加してください。
期待される結果:
- モバイルファースト: モバイルではflex-col
- タブレット: タブレットレイアウト用のmd:flex-row
- デスクトップ: デスクトップ間隔用のlg:px-8
- ナビゲーション項目: ホバー状態とフォーカスリングを含む
「frontend-css」を使用しています。 Tailwindテーマでカスタムブランドカラーを設定してください。
期待される結果:
- プライマリ: #3B82F6 (blue-500)
- セカンダリ: #10B981 (emerald-500)
- アクセント: #F59E0B (amber-500)
- ダーク: #1F2937 (gray-800)
セキュリティ監査
安全Pure documentation skill containing only markdown guidance for AI code generation. No executable code, network calls, filesystem access, or external commands detected. All 46 static findings are false positives: GitHub URL in metadata flagged as 'Hardcoded URL', SHA-256 hash strings flagged as 'Weak cryptographic algorithm', Tailwind CSS @theme directive flagged as 'Ruby backtick execution', and documentation path references flagged as 'Path traversal'. This skill provides CSS coding standards and Tailwind methodology guidance only.
リスク要因
🌐 ネットワークアクセス (1)
📁 ファイルシステムへのアクセス (4)
⚙️ 外部コマンド (1)
品質スコア
作れるもの
Reactコンポーネントのスタイリング
.tsxまたは.jsxファイルでReactコンポーネントを構築または編集する際に、一貫したTailwindユーティリティクラスを適用します。
デザイントークンの実装
デザインシステムの一貫性を維持しながら、@themeディレクティブを使用してTailwindテーマを設定および拡張します。
CSSパフォーマンスの最適化
適切なツリーシェイキング、未使用スタイルのパージング、冗長なフレームワークオーバーライドの回避により、CSSバンドルサイズを最適化します。
これらのプロンプトを試す
このReactコンポーネントをTailwindユーティリティクラスでスタイリングしてください。色と間隔にはデザインシステムトークンを使用してください。
Tailwindのsm:、md:、lg:、xl:プレフィックスを使用して、このレイアウトにレスポンシブブレークポイントを追加してください。
@themeディレクティブを使用して、カスタムブランドカラーとタイポグラフィのためのTailwindテーマ拡張を設定してください。
このCSSをレビューして、Tailwind手法の違反を特定してください。カスタムCSSの代わりにユーティリティクラスを使用した改善案を提案してください。
ベストプラクティス
- 一貫性を維持しツリーシェイキングを可能にするため、可能な限りカスタムCSSよりもユーティリティクラスを使用する
- ハードコードされた値の代わりに、色、間隔、タイポグラフィのデザインシステムトークンを参照する
- 関連するユーティリティクラスを論理的にグループ化し、コンポーネント全体で一貫した順序を使用する
回避
- Tailwindユーティリティクラスで同じ結果が得られる場合にカスタムCSSを記述する
- デザイントークンカラーの代わりにbg-[#ff0000]のような任意の値を使用する
- 適切なユーティリティクラスを使用する代わりに!importantでフレームワークスタイルを上書きする