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

shadcn-layouts

shadcn/TailwindのCSSメンタルモデルを適用して、正確なレイアウトを生成します。「shadcnのレイアウトを作りたい」「レイアウトの崩れを直したい」「CSSの高さの問題をデバッグしたい」「スクロールが機能しない」「Tailwindのflex/gridで問題が起きている」といった場合に使用してください。

description の原文を見る

Generate correct shadcn/Tailwind layouts by applying CSS mental models. This skill should be used when the user asks to 'create a shadcn layout', 'fix layout issues', 'debug CSS height problems', 'make scrolling work', or has issues with Tailwind flex/grid. Keywords: shadcn, Tailwind, layout, CSS, flex, grid, height, scroll, overflow.

SKILL.md 本文

shadcn/Tailwind レイアウト

shadcn/Tailwind コンポーネントを正しく最初からレンダリングできるようにします。agent が生成した UI の多くは、CSS レイアウトの仕組みについての心的モデルの欠落が原因で失敗します。構文エラーではなく、前提条件の不足です。

このスキルを使用する時期

以下の場合にこのスキルを使用してください:

  • shadcn/Tailwind レイアウトの作成
  • 高さ/スクロール問題のデバッグ
  • flex/grid の問題の修正
  • フルページアプリシェルのセットアップ

以下の場合は使用しないでください:

  • バックエンドコードの記述
  • Tailwind CSS 以外のプロジェクト
  • デザイン (最初に frontend-design を使用してください)

コア原則

CSS レイアウトは制約から流れ出ます。高さは明示的な祖先要素から下へ流れます。幅はコンテンツから上へ流れます。agent は制約チェーンを理解せずにクラスを適用するために失敗します。

クリティカルな心的モデル

モデル 1: 高さ継承チェーン

h-full は height: 100% を意味します。何の 100% でしょうか？親要素の計算された高さの 100% です。

BROKEN (チェーン不完全):
<html>                        <!-- 高さなし -->
  <body>                      <!-- 高さなし -->
    <div class="h-full">      <!-- 無のうちの 100% = 0 -->

WORKING (チェーン完全):
<html class="h-full">         <!-- ビューポートの 100% -->
  <body class="h-full">       <!-- html の 100% -->
    <div class="h-full">      <!-- body の 100% = 動作 -->

ルール: 要素から <html> までさかのぼってトレースします。すべての祖先要素は明示的な高さが必要です。または、チェーンを断ち切るためにビューポートユニット (h-screen) を使用します。

モデル 2: Flex オーバーフロー問題

Flex の子要素は暗黙的な min-height: auto を持つため、コンテンツサイズ以下に縮小できません。

// BROKEN (スクロールしない)
<div className="flex flex-col h-screen">
  <main className="flex-1 overflow-y-auto">  {/* 縮小できない! */}

// WORKING (正しくスクロール)
<div className="flex flex-col h-screen">
  <main className="flex-1 overflow-y-auto min-h-0">  {/* 縮小可能 */}

ルール: スクロール可能な Flex の子要素には min-h-0 が必要です。縮小すべきでない子要素には shrink-0 が必要です。

モデル 3: Grid の親子分離

Grid は親要素で定義されます。子要素はセルを占有するだけです。

// BROKEN
<div className="grid-cols-3">           {/* 'grid' がない! */}

// WORKING
<div className="grid grid-cols-3">      {/* 'grid' が grid-cols-* を有効化 */}

ルール: 親要素に flex または grid を宣言した後、direction/template クラスが動作します。

モデル 4: スクロールコンテナの寸法

スクロールコンテナは、いつスクロール可能にするべきかを知るために明示的な寸法が必要です。

// BROKEN (スクロールしない)
<ScrollArea>  {/* 高さ制約なし */}

// WORKING (flex で制約)
<div className="flex flex-col h-screen">
  <ScrollArea className="flex-1 min-h-0">

診断状態

SL1: 高さチェーン断裂

症状: 要素が崩壊、h-full が動作しない 修正: html までトレース、高さを追加するか h-screen を使用

SL2: Flex オーバーフロー ブロック

症状: スクロールが機能しない、コンテンツがオーバーフロー 修正: スクロール可能な Flex の子要素に min-h-0 を追加

SL3: Grid 構造 間違い

症状: 項目が縦に積み重なり、列にならない 修正: 親要素に grid grid-cols-* が設定されていることを確認

SL4: スタイル 未適用

症状: コンポーネント未スタイル、色が間違っている 修正: Tailwind content パス、globals.css の CSS 変数を確認

SL5: コンポーネント依存関係 不足

症状: "Module not found"、機能が動作しない 修正: npx shadcn add [component]、ピア依存関係をインストール

一般的なレイアウトパターン

フルページアプリシェル

// layout.tsx
<html lang="en" className="h-full">
  <body className="h-full">{children}</body>
</html>

// page.tsx
<div className="flex h-full">
  <aside className="w-64 shrink-0 border-r overflow-y-auto">
    <nav>...</nav>
  </aside>
  <main className="flex-1 min-w-0 overflow-y-auto">
    {children}
  </main>
</div>

ヘッダー付きダッシュボード

<div className="flex flex-col h-screen">
  <header className="h-16 shrink-0 border-b">...</header>
  <div className="flex flex-1 min-h-0">
    <aside className="w-64 shrink-0 border-r overflow-y-auto">...</aside>
    <main className="flex-1 min-w-0 overflow-y-auto p-6">
      {children}
    </main>
  </div>
</div>

カードグリッド

<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
  {items.map(item => (
    <Card key={item.id}>
      <CardHeader><CardTitle>{item.title}</CardTitle></CardHeader>
      <CardContent>{item.content}</CardContent>
    </Card>
  ))}
</div>

アンチパターン

高さ仮定

祖先チェーンを検証せずに h-full を使用。 修正: html までトレース。h-screen を使用してチェーンを断ち切り。

オーバーフロー無視

Flex の子要素の min-h-0 なしに overflow-y-auto を追加。 修正: Flex の子要素は縮小するために min-h-0 が必要。

インポートパス推測

shadcn/ui のようなインポートパスを推測。 修正: components.json でエイリアスを確認。通常 @/components/ui/*。

フラット複合コンポーネント

複合コンポーネントを平坦化 (DialogTrigger/DialogContent なしの Dialog)。 修正: 必須のネスト構造を維持。

生成前チェックリスト

  • インポートエイリアスが既知 (@/components/ui/*)
  • html に h-full がある
  • body に h-full または min-h-full がある
  • スクロールコンテナに明示的な高さがある
  • Flex スクロール子要素に min-h-0 がある
  • 固定要素に shrink-0 がある

関連スキル

  • frontend-design - 実装前のデザイン決定
  • react-pwa - React アプリの PWA 機能

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

詳細情報

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

Source: https://github.com/jwynia/agent-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 フォームよりご連絡ください。
原作者: jwynia · jwynia/agent-skills · ライセンス: MIT