.claude/skills/tailwind-css-patterns/SKILL.md

概要

Tailwind CSSを活用した効率的で保守性の高いスタイリングパターンの専門知識。 Class Variance Authority (CVA)、Tailwind Merge、レスポンシブデザイン、 ダークモード対応の実装パターンを提供します。

詳細な手順や背景は resources/Level1_basics.md と resources/Level2_intermediate.md を参照してください。

ワークフロー

Phase 1: 目的と前提の整理

目的: タスクの目的と前提条件を明確にする

アクション:

1. resources/Level1_basics.md と resources/Level2_intermediate.md を確認
2. 必要な resources/scripts/templates を特定

Phase 2: スキル適用

目的: スキルの指針に従って具体的な作業を進める

アクション:

1. 関連リソースやテンプレートを参照しながら作業を実施
2. 重要な判断点をメモとして残す

Phase 3: 検証と記録

目的: 成果物の検証と実行記録の保存

アクション:

1. scripts/validate-skill.mjs でスキル構造を確認
2. 成果物が目的に合致するか確認
3. scripts/log_usage.mjs を実行して記録を残す

ベストプラクティス

すべきこと

• resources/Level1_basics.md を参照し、適用範囲を明確にする
• resources/Level2_intermediate.md を参照し、実務手順を整理する

避けるべきこと

• アンチパターンや注意点を確認せずに進めることを避ける

コマンドリファレンス

リソース読み取り

cat .claude/skills/tailwind-css-patterns/resources/Level1_basics.md
cat .claude/skills/tailwind-css-patterns/resources/Level2_intermediate.md
cat .claude/skills/tailwind-css-patterns/resources/Level3_advanced.md
cat .claude/skills/tailwind-css-patterns/resources/Level4_expert.md
cat .claude/skills/tailwind-css-patterns/resources/cva-guide.md
cat .claude/skills/tailwind-css-patterns/resources/dark-mode-guide.md
cat .claude/skills/tailwind-css-patterns/resources/legacy-skill.md
cat .claude/skills/tailwind-css-patterns/resources/responsive-patterns.md

スクリプト実行

node .claude/skills/tailwind-css-patterns/scripts/analyze-tailwind.mjs --help
node .claude/skills/tailwind-css-patterns/scripts/log_usage.mjs --help
node .claude/skills/tailwind-css-patterns/scripts/validate-skill.mjs --help

テンプレート参照

cat .claude/skills/tailwind-css-patterns/templates/component-variants-template.tsx
cat .claude/skills/tailwind-css-patterns/templates/tailwind-config-template.js

変更履歴