Communitygithub.com

marnixGeerkens/rocketlauncher-claude-code

Tailwind CSS v4 の原則に従ったスキルです。CSSファーストな設定、コンテナクエリ、モダンパターン、デザイントークン設計を提供します。

rocketlauncher-claude-code とは？

このスキルは、Tailwind CSS v4（2025年版）のベストプラクティスとアーキテクチャを包括的に解説します。v3からの主な変更点として、`tailwind.config.js` を使わずCSSの`@theme`ディレクティブで設定を行う「CSSファースト」アプローチへの移行、Rust製のOxideエンジンによる10倍の高速化、CSSネイティブのネスト構文のサポートなどが挙げられます。また、ビューポート幅に依存しないコンテナクエリを用いたコンポーネントレベルでのレスポンシブ設計、OKLCH色空間を活用した知覚的に均一なカラーシステム、`@container`や`grid-cols-[repeat(auto-fit,minmax(...))]`といったモダンレイアウトパターンについて詳しく説明しています。さらに、ダークモードの設定戦略（class/media/selector）、アニメーションとトランジションのパターン、@apply や !important の過剰使用を避けるアンチパターンも網羅しており、実践的なプロジェクトで即座に活用できる知識を提供します。

対応✓Claude Code~Codex CLI~Cursor
Part ofDesign & UI
npx skills add https://github.com/marnixGeerkens/rocketlauncher-claude-code/tree/HEAD/components/skills/creative-design/tailwind-patterns
オリジナルを見る→すべてのスキルを見る

お気に入りのAIに質問する

このエージェントスキルを事前に読み込んだ状態で新しいチャットを開きます。

OpenAIChatGPTClaudeClaudeGeminiGeminiGrokGrokPerplexityPerplexityDeepSeekDeepSeek

ドキュメント

Tailwind CSS パターン（v4 - 2025）

CSSネイティブ設定によるモダンなユーティリティファーストCSS。

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 {
  /* 色 - セマンティックな名前を使用 */
  --color-primary: oklch(0.7 0.15 250);
  --color-surface: oklch(0.98 0 0);
  --color-surface-dark: oklch(0.15 0 0);
  
  /* スペーシングスケール */
  --spacing-xs: 0.25rem;
  --spacing-sm: 0.5rem;
  --spacing-md: 1rem;
  --spacing-lg: 2rem;
  
  /* タイポグラフィ */
  --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. タイポグラフィシステム

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

種類推奨
サンセリフ'Inter', 'SF Pro', system-ui, sans-serif
等幅'JetBrains Mono', 'Fira Code', monospace
ディスプレイ'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. アンチパターン

してはいけないこと代わりにすること
あらゆる場所で任意の値を使うデザインシステムのスケールを使う
!important を使う詳細度を正しく修正する
インライン style= を使うユーティリティを使う
長いクラスリストの重複コンポーネントとして抽出する
v3の設定とv4を混在させる完全にCSSファーストへ移行する
過度に @apply を使うコンポーネントを優先する

12. パフォーマンスの原則

原則実装
未使用CSSの削除v4では自動
動的生成を避けるテンプレート文字列クラスは使わない
Oxide を使うv4 のデフォルト、10倍高速
ビルドキャッシュCI/CD でのキャッシュ設定

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

Individual skills in this repo

This repo contains 13 individual skills — each has its own dedicated page.

marnixGeerkens/rocketlauncher-claude-code

When the user wants to optimize, improve, or increase conversions on any marketing page — including homepage, landing pages, pricing pages, feature pages, or blog posts. Also use when the user says "CRO," "conversion rate optimization," "this page isn't converting," "improve conversions," or "why isn't this page working." For signup/registration flows, see signup-flow-cro. For post-signup activation, see onboarding-cro. For forms outside of signup, see form-cro. For popups/modals, see popup-cro.

marnixGeerkens/rocketlauncher-claude-code

Balance visual design with ATS compatibility for creative roles. Use when the user is in design, art, writing, marketing creative, or any visual/creative field and needs a resume that looks distinctive but still parses.

marnixGeerkens/rocketlauncher-claude-code

Transform resume bullets into detailed portfolio case studies with context, action, and outcome. Use when the user mentions portfolio, case study, project write-up, or expanding a resume bullet into a longer narrative.

marnixGeerkens/rocketlauncher-claude-code

Expert in building portfolios that actually land jobs and clients - not just showing work, but creating memorable experiences. Covers developer portfolios, designer portfolios, creative portfolios, and portfolios that convert visitors into opportunities. Use when: portfolio, personal website, showcase work, developer portfolio, designer portfolio.

marnixGeerkens/rocketlauncher-claude-code

Frontend development patterns for React, Next.js, state management, performance optimization, and UI best practices.

marnixGeerkens/rocketlauncher-claude-code

Frontend development guidelines for React/TypeScript applications. Modern patterns including Suspense, lazy loading, useSuspenseQuery, file organization with features directory, MUI v7 styling, TanStack Router, performance optimization, and TypeScript best practices. Use when creating components, pages, features, fetching data, styling, routing, or working with frontend code.

marnixGeerkens/rocketlauncher-claude-code

Next.js App Router principles. Server Components, data fetching, routing patterns.

marnixGeerkens/rocketlauncher-claude-code

Expert integration of Supabase Auth with Next.js App Router Use when: supabase auth next, authentication next.js, login supabase, auth middleware, protected route.

marnixGeerkens/rocketlauncher-claude-code

Comprehensive frontend development skill for building modern, performant web applications using ReactJS, NextJS, TypeScript, Tailwind CSS. Includes component scaffolding, performance optimization, bundle analysis, and UI best practices. Use when developing frontend features, optimizing performance, implementing UI/UX designs, managing state, or reviewing frontend code.

marnixGeerkens/rocketlauncher-claude-code

Create API handoff documentation for frontend developers. Use when backend work is complete and needs to be documented for frontend integration, or user says 'create handoff', 'document API', 'frontend handoff', or 'API documentation'.

marnixGeerkens/rocketlauncher-claude-code

Document frontend data needs for backend developers. Use when frontend needs to communicate API requirements to backend, or user says 'backend requirements', 'what data do I need', 'API requirements', or is describing data needs for a UI.

marnixGeerkens/rocketlauncher-claude-code

Comprehensive Python library for astronomy and astrophysics. This skill should be used when working with astronomical data including celestial coordinates, physical units, FITS files, cosmological calculations, time systems, tables, world coordinate systems (WCS), and astronomical data analysis. Use when tasks involve coordinate transformations, unit conversions, FITS file manipulation, cosmological distance calculations, time scale conversions, or astronomical data processing.

marnixGeerkens/rocketlauncher-claude-code

Comprehensive patterns for Next.js 14+ App Router architecture, Server Components, and modern full-stack React development.

関連スキル

steipete/sag

ElevenLabs text-to-speech with mac-style say UX.

community

steipete/oracle

Oracle CLI second-model review/debug/refactor/design with selected files, dry-run token checks, API or browser engine.

community

steipete/peekaboo

Capture and automate macOS UI with the Peekaboo CLI.

community

mattpocock/design-an-interface

Generate multiple radically different interface designs for a module using parallel sub-agents. Use when user wants to design an API, explore interface options, compare module shapes, or mentions "design it twice".

community

mattpocock/prototype

Build a throwaway prototype to flesh out a design — a runnable terminal app for state/business-logic questions, or several radically different UI variations toggleable from one route.

community

mattpocock/grill-me

Interview the user relentlessly about a plan or design until reaching shared understanding, resolving each branch of the decision tree. Use when user wants to stress-test a plan, get grilled on their design, or mentions "grill me".

community