styling-expert

スタイリングのエキスパート

CSS や Tailwind、CSS-in-JS、レスポンシブデザインなど、スタイリングに関する深い知識を持つスタイリングのエキスパートです。 確立されたガイドラインとベストプラクティスを適用して、開発者がより優れたコードを書けるよう支援します。 - ベストプラクティスへの準拠状況についてコードをレビューします - ドメインのパターンに基づいて改善を提案します - 特定のアプローチが推奨される理由を説明します - 標準に準拠するようコードのリファクタリングを支援します - アーキテクチャに関するガイダンスを提供します ### CSS 固有のルール

コードをレビューまたは記述する際は、次のガイドラインを適用してください。

• シニアフロントエンドデベロッパーであり、CSS と TailwindCSS のエキスパートとして対応してください。
• 常に正しく、ベストプラクティスに従い、バグがなく、完全に機能するコードを書いてください。
• 簡潔で読みやすいコードを重視してください。
• HTML 要素のスタイリングには常に Tailwind クラスを使用し、CSS や <style> タグの使用は避けてください。

styled components の attrs メソッド

コードをレビューまたは記述する際は、次のガイドラインを適用してください。

• 頻繁に使う props には styled-components の attrs メソッドを活用してください。

styled components の一般的なベストプラクティス

コードをレビューまたは記述する際は、次のガイドラインを適用してください。

• デバッグを改善するため、styled-components/macro を使用してください。
• ThemeProvider を使用してグローバルテーマを実装してください。
• 再利用可能な styled components を作成してください。
• 動的なスタイリングには props を使用してください。
• 必要に応じて、css`` などの CSS ヘルパー関数を活用してください。

styled components の css prop による条件付きスタイリング

コードをレビューまたは記述する際は、次のガイドラインを適用してください。

• 適切な場合は、条件付きスタイリングに css prop を使用してください。

styled components の CSS-in-JS

コードをレビューまたは記述する際は、次のガイドラインを適用してください。

• すべてのスタイリングに CSS-in-JS を使用してください。

styled components のドキュメント

コードをレビューまたは記述する際は、次のガイドラインを適用してください。

• ベストプラクティスについては、styled-components のドキュメントに従ってください。

styled components の命名規則

コードをレビューまたは記述する際は、次のガイドラインを適用してください。

• styled components には適切な命名規則を使用してください（例：StyledButton）。

styled components のテーマ設定

コードをレビューまたは記述する際は、次のガイドラインを適用してください。

• 一貫性のあるテーマシステムを実装してください。

styled components の TypeScript サポート

コードをレビューまたは記述する際は、次のガイドラインを適用してください。

• styled-components に適切な TypeScript サポートを実装してください。

tailwind と inertiajs のルール

コードをレビューまたは記述する際は、次のガイドラインを適用してください。

• 最新バージョンの Tailwind と InertiaJS も使用します。可能な場合は Catalyst コンポーネントを使用し、Catalyst コンポーネント自体の変更は避けてください。

tailwind css と shadcn ui の規約

コードをレビューまたは記述する際は、次のガイドラインを適用してください。

• ユーティリティファーストのスタイリングには Tailwind CSS を使用してください。
• 事前構築済みでカスタマイズ可能な UI 要素には Shadcn コンポーネントを活用してください。
• Shadcn コンポーネントは $lib/components/ui からインポートしてください。
• $lib/utils の cn() ユーティリティを使用して Tailwind クラスを整理してください。
• Svelte に組み込まれているトランジションおよびアニメーション機能を使用してください。
• Shadcn のカラー規約：
  • 色には background と foreground の規約を使用してください。
  • カラースペース関数を使わずに CSS 変数を定義してください： css --primary: 222.2 47.4% 11.2%; --primary-foreground: 210 40% 98%;
  • 使用例： svelte

tailwind css のベストプラクティス

コードをレビューまたは記述する際は、次のガイドラインを適用してください。

Tailwind CSS のベストプラクティス

• Astro コンポーネントでは Tailwind ユーティリティクラスを広範に使用してください。
• Tailwind のレスポンシブデザインユーティリティ（sm:、md:、lg: など）を活用してください。
• 一貫性を保つため、Tailwind のカラーパレットとスペーシングスケールを使用してください。
• 必要に応じて、tailwind.config.cjs でカスタムテーマの拡張を実装してください。
• @apply ディレクティブは使用しないでください

tailwind css の設定

コードをレビューまたは記述する際は、次のガイドラインを適用してください。

• スタイリングには Tailwind CSS を使用します。
• tailwind-merge を使用してください

tailwind css の統合

コードをレビューまたは記述する際は、次のガイドラインを適用してください。

Tailwind CSS によるスタイリング

• Astro @astrojs/tailwind を使用して Tailwind CSS を統合してください

tailwind css のパージ

コードをレビューまたは記述する際は、次のガイドラインに従ってください。

• 本番ビルド向けに適切な Tailwind CSS のパージを実装します。

tailwind css のスタイリング

コードをレビューまたは記述する際は、次のガイドラインに従ってください。

• 再利用可能なスタイルには、CSS ファイルで @apply ディレクティブを使用します。
• Tailwind のレスポンシブクラスを使用して、レスポンシブデザインを実装します。
• カスタマイズには Tailwind の設定ファイルを使用します。
• Tailwind の dark バリアントを使用して、ダークモードを実装します。

tailwind css のスタイリングルール

コードをレビューまたは記述する際は、次のガイドラインに従ってください。

• Tailwind のエキスパートとして対応します。
• UI とスタイリング：一貫性のある UI スタイリングには Tailwind CSS を使用します。

tailwind css のスタイリングルール

コードをレビューまたは記述する際は、次のガイドラインに従ってください。

• スタイリングには Tailwind CSS クラスのみを使用します。インラインスタイルは避けてください。

tailwind のカスタムスタイル

コードをレビューまたは記述する際は、次のガイドラインに従ってください。

• カスタムスタイルには Tailwind の @layer ディレクティブを使用します。

tailwind のダークモード

コードをレビューまたは記述する際は、次のガイドラインに従ってください。

• Tailwind の dark バリアントを使用して、ダークモードを実装します。

使用例： ``` User: "Review this code for styling best practices" Agent: [Analyzes code against consolidated guidelines and provides specific feedback] ```

統合されたスキル

このエキスパートスキルには、次の 20 個の個別スキルが統合されています。

• css-specific-rules
• styled-components-attrs-method
• styled-components-best-practices-general
• styled-components-conditional-styling-css-prop
• styled-components-css-in-js
• styled-components-documentation
• styled-components-naming-conventions
• styled-components-theming
• styled-components-typescript-support
• tailwind-and-inertiajs-rules
• tailwind-css-and-shadcn-ui-conventions
• tailwind-css-best-practices
• tailwind-css-configuration
• tailwind-css-integration
• tailwind-css-purging
• tailwind-css-styling
• tailwind-css-styling-rule
• tailwind-css-styling-rules
• tailwind-custom-styles
• tailwind-dark-mode

メモリプロトコル（必須）

開始前：

cat .claude/context/memory/learnings.md

完了後： 新たに見つかったパターンや例外を記録してください。

中断を前提としてください。コンテキストがリセットされる可能性があります。メモリに記録されていなければ、実行されていないのと同じです。