Agent Skills by ALSEL
Anthropic Claudeソフトウェア開発⭐ リポ 0品質スコア 50/100

tailwind-patterns

Tailwind CSS v4の原則に基づき、CSS優先の設定アプローチ、コンテナクエリ、モダンなパターン、デザイントークンアーキテクチャを活用したスタイリングを支援します。Tailwind v4への移行や新規プロジェクトのセットアップ時に役立ちます。

description の原文を見る

Tailwind CSS v4 principles. CSS-first configuration, container queries, modern patterns, design token architecture.

SKILL.md 本文

Tailwind CSS パターン (v4 - 2025)

CSS ネイティブ設定を備えたモダンなユーティリティファースト CSS。

使用するべき時

Tailwind v4 の設定、CSS ファースト テーマとデザイントークンの使用、またはコンテナクエリとモダン Tailwind パターンの実装時にこのスキルを使用してください。

1. Tailwind v4 アーキテクチャ

v3 からの変更点

v3 (レガシー)v4 (現在)
tailwind.config.jsCSS ベースの @theme ディレクティブ
PostCSS プラグインOxide エンジン (10 倍高速)
JIT モードネイティブ、常時有効
プラグインシステムCSS ネイティブ機能
@apply ディレクティブ動作するが非推奨

v4 コアコンセプト

コンセプト説明
CSS ファーストJavaScript ではなく CSS での設定
Oxide エンジンRust ベースのコンパイラ、大幅に高速化
ネイティブネスティングPostCSS なしの CSS ネスティング
CSS 変数すべてのトークンが --* 変数として公開

2. CSS ベースの設定

テーマ定義

@theme {
  /* Colors - semantic names を使用 */
  --color-primary: oklch(0.7 0.15 250);
  --color-surface: oklch(0.98 0 0);
  --color-surface-dark: oklch(0.15 0 0);
  
  /* Spacing scale */
  --spacing-xs: 0.25rem;
  --spacing-sm: 0.5rem;
  --spacing-md: 1rem;
  --spacing-lg: 2rem;
  
  /* Typography */
  --font-sans: 'Inter', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', monospace;
}

拡張と上書きの使い分け

アクション使用する場合
拡張デフォルト値に加えて新しい値を追加
上書きデフォルトスケール全体を置き換え
セマンティックトークンプロジェクト固有の命名 (primary, surface)

3. コンテナクエリ (v4 ネイティブ)

ブレークポイント vs コンテナ

タイプ応答する対象
ブレークポイント (md:)ビューポート幅
コンテナ (@container)親要素の幅

コンテナクエリの使用法

パターンクラス
コンテナの定義親要素に @container
コンテナブレークポイント子要素に @sm:、@md:、@lg:
名前付きコンテナ特異性のため @container/card

使用する場合

シナリオ使用
ページレベルレイアウトビューポートブレークポイント
コンポーネントレベルのレスポンシブコンテナクエリ
再利用可能なコンポーネントコンテナクエリ (文脈独立)

4. レスポンシブデザイン

ブレークポイントシステム

プレフィックス最小幅ターゲット
(なし)0pxモバイルファーストベース
sm:640px大型電話 / 小型タブレット
md:768pxタブレット
lg:1024pxノートパソコン
xl:1280pxデスクトップ
2xl:1536px大型デスクトップ

モバイルファースト原則

  1. 最初にモバイルスタイルを記述 (プレフィックスなし)
  2. プレフィックス付きで大きな画面のオーバーライドを追加
  3. 例: w-full md:w-1/2 lg:w-1/3

5. ダークモード

設定戦略

メソッド動作使用する場合
class.dark クラスで切り替え手動テーマスイッチャー
mediaシステム設定に従うユーザーコントロールなし
selectorカスタムセレクタ (v4)複雑なテーミング

ダークモードパターン

要素ライトダーク
背景bg-whitedark:bg-zinc-900
テキストtext-zinc-900dark:text-zinc-100
ボーダーborder-zinc-200dark:border-zinc-700

6. モダンレイアウトパターン

Flexbox パターン

パターンクラス
センター (両軸)flex items-center justify-center
垂直スタックflex flex-col gap-4
水平列flex gap-4
スペース均等配置flex justify-between items-center
ラップグリッドflex flex-wrap gap-4

グリッドパターン

パターンクラス
オートフィット レスポンシブgrid grid-cols-[repeat(auto-fit,minmax(250px,1fr))]
非対称 (Bento)grid grid-cols-3 grid-rows-2 (スパン付き)
サイドバーレイアウトgrid grid-cols-[auto_1fr]

注: 対称的な 3 カラムグリッドより、非対称/Bento レイアウトを推奨します。

7. モダンカラーシステム

OKLCH vs RGB/HSL

フォーマット利点
OKLCH知覚的に均一、デザインに最適
HSL直感的な色相/彩度
RGBレガシー互換性

カラートークンアーキテクチャ

レイヤー例目的
プリミティブ--blue-500生色値
セマンティック--color-primary目的ベースの命名
コンポーネント--button-bgコンポーネント固有

8. タイポグラフィシステム

フォントスタックパターン

タイプ推奨
Sans'Inter', 'SF Pro', system-ui, sans-serif
Mono'JetBrains Mono', 'Fira Code', monospace
Display'Outfit', 'Poppins', sans-serif

タイプスケール

クラスサイズ用途
text-xs0.75remラベル、キャプション
text-sm0.875remセカンダリテキスト
text-base1rem本文
text-lg1.125remリードテキスト
text-xl+1.25rem+見出し

9. アニメーション & トランジション

ビルトインアニメーション

クラスエフェクト
animate-spin連続回転
animate-ping注目パルス
animate-pulse微細な不透明度パルス
animate-bounceバウンスエフェクト

トランジションパターン

パターンクラス
すべてのプロパティtransition-all duration-200
特定transition-colors duration-150
イージング付きease-out または ease-in-out
ホバーエフェクトhover:scale-105 transition-transform

10. コンポーネント抽出

抽出するべき時

シグナルアクション
同じクラス組み合わせが 3 回以上コンポーネント抽出
複雑な状態バリアントコンポーネント抽出
デザインシステム要素抽出 + ドキュメント化

抽出メソッド

メソッド使用する場合
React/Vue コンポーネント動的、JavaScript 必要
CSS の @apply静的、JavaScript 不要
デザイントークン再利用可能な値

11. アンチパターン

避けることやること
あちこちで arbitrary values を使用デザインシステムスケールを使用
!important特異性を正しく修正
インライン style=ユーティリティを使用
長いクラスリストの重複コンポーネント抽出
v3 設定を v4 と混在CSS ファースト に完全に移行
@apply を多用コンポーネントを優先

12. パフォーマンス原則

原則実装
未使用を削除v4 で自動
ダイナミズムを避けるテンプレート文字列クラスなし
Oxide を使用v4 で デフォルト、10 倍高速
ビルドをキャッシュCI/CD キャッシング

覚えておいて: Tailwind v4 は CSS ファースト。CSS 変数、コンテナクエリ、ネイティブ機能を活用してください。設定ファイルはオプショナルになりました。

制限事項

  • このスキルは上記で説明されているスコープに明確に一致する場合にのみ使用してください。
  • 出力を環境固有の検証、テスト、または専門家のレビューの代替として扱わないでください。
  • 必要な入力、権限、安全上の境界、または成功基準が不足している場合は、一度停止して説明を求めてください。

ライセンス: MIT(寛容ライセンスのため全文を引用しています) · 原本リポジトリ

詳細情報

作者
sickn33
リポジトリ
sickn33/antigravity-awesome-skills
ライセンス
MIT
最終更新
不明
GitHubで原本を見る →フィードバックを送る

Source: https://github.com/sickn33/antigravity-awesome-skills / ライセンス: MIT

関連スキル

汎用ソフトウェア開発⭐ リポ 39,967

doubt-driven-development

重要な判断はすべて、本番環境への展開前に新しい視点から対抗的レビューを実施します。速度より正確性が重要な場合、不慣れなコードを扱う場合、本番環境・セキュリティに関わるロジック・取り消し不可の操作など影響度が高い場合、または後でバグを修正するよりも今検証する方が効率的な場合に活用してください。

by addyosmani
汎用ソフトウェア開発⭐ リポ 1,175

apprun-skills

TypeScriptを使用したAppRunアプリケーションのMVU設計に関する総合的なガイダンスが得られます。コンポーネントパターン、イベントハンドリング、状態管理（非同期ジェネレータを含む）、パラメータと保護機能を備えたルーティング・ナビゲーション、vistestを使用したテストに対応しています。AppRunコンポーネントの設計・レビュー、ルートの配線、状態フローの管理、AppRunテストの作成時に活用してください。

by yysun
OpenAIソフトウェア開発⭐ リポ 797

desloppify

コードベースのヘルスチェックと技術負債の追跡ツールです。コード品質、技術負債、デッドコード、大規模ファイル、ゴッドクラス、重複関数、コードスメル、命名規則の問題、インポートサイクル、結合度の問題についてユーザーが質問した場合に使用してください。また、ヘルススコアの確認、次の改善項目の提案、クリーンアップ計画の作成をリクエストされた際にも対応します。29言語に対応しています。

by Git-on-my-level
汎用ソフトウェア開発⭐ リポ 39,967

debugging-and-error-recovery

テストが失敗したり、ビルドが壊れたり、動作が期待と異なったり、予期しないエラーが発生したりした場合に、体系的な根本原因デバッグをガイドします。推測ではなく、根本原因を見つけて修正するための体系的なアプローチが必要な場合に使用してください。

by addyosmani
汎用ソフトウェア開発⭐ リポ 39,967

test-driven-development

テスト駆動開発により実装を進めます。ロジックの実装、バグの修正、動作の変更など、あらゆる場面で活用できます。コードが正常に動作することを証明する必要がある場合、バグ報告を受けた場合、既存機能を修正する予定がある場合に使用してください。

by addyosmani
汎用ソフトウェア開発⭐ リポ 39,967

incremental-implementation

変更を段階的に実施します。複数のファイルに影響する機能や変更を実装する場合に使用してください。大量のコードを一度に書こうとしている場合や、タスクが一度では完結できないほど大きい場合に活用します。

by addyosmani
本サイトは GitHub 上で公開されているオープンソースの SKILL.md ファイルをクロール・インデックス化したものです。 各スキルの著作権は原作者に帰属します。掲載に問題がある場合は info@alsel.co.jp または /takedown フォームよりご連絡ください。
原作者: sickn33 · sickn33/antigravity-awesome-skills · ライセンス: MIT