메뉴
Webデザイン実装の鉄則ガイド。CSS/レイアウト設計の原則を提供。 Trigger when: UI/UX実装時、CSS設計時、レイアウト実装時、レスポンシブ対応時、 アクセシビリティ確認時、"レイアウト", "CSS", "スタイル" への言及時。 /figma-to-code スキルと併用する場合に自動で参照される。
Codex 또는 Claude로 설치 이 Prompt를 복사해 Codex, Claude 또는 다른 어시스턴트에 붙여 넣으면 Skill 페이지를 검토하고 설치를 진행할 수 있습니다.
SOC 직업 분류 기준
| name | web-design-principles |
| description | Webデザイン実装の鉄則ガイド。CSS/レイアウト設計の原則を提供。 Trigger when: UI/UX実装時、CSS設計時、レイアウト実装時、レスポンシブ対応時、 アクセシビリティ確認時、"レイアウト", "CSS", "スタイル" への言及時。 /figma-to-code スキルと併用する場合に自動で参照される。 |
Webデザイン実装の鉄則ガイド。
- 親要素が子要素の配置・整列・間隔を管理
- 子要素は親要素の相対位置・相対サイズで設定
- 子要素が親要素の領域をはみ出すことはあり得ない（モーダル等一部例外）
- Flexbox/Grid で親が制御、子は内部コンテンツのみ担当
親の責務:
display, gap, align-items, justify-content）max-width, flex-basis）子の責務:
| 用途 | 単位 | 理由 |
|---|---|---|
| フォント | rem | ルート基準、スケーラブル |
| 幅・高さ | % | 親幅基準、レスポンシブ対応 |
| margin/padding | rem/% | 継承対応、スケーラブル |
| 固定値（px） | 最小限に | ボーダー、アイコンサイズ等のみ |
- 同じものは共通化すべき
- 1コンポーネント = 1機能（単一責任）
- 合成優先（継承より組み合わせ）
- デザイントークン（CSS Custom Properties）で一元管理
- Mobile-First アプローチ
- Breakpoint: sm(640px), md(768px), lg(1024px), xl(1280px)
- Container Queries 活用（親コンテナで制御）
- 色コントラスト: AA 4.5:1以上
- キーボード操作対応
- セマンティックHTML
- 相対フォント（rem）でユーザー設定尊重
.parent {
display: flex;
flex-direction: column; /* or row */
gap: 1rem;
align-items: center;
justify-content: space-between;
}
.parent {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1.5rem;
}
/* Mobile First */
.container { width: 100%; padding: 1rem; }
@media (min-width: 768px) {
.container { max-width: 48rem; }
}
@media (min-width: 1280px) {
.container { max-width: 80rem; }
}
Generate draw.io diagrams as .drawio files, optionally export to PNG/SVG/PDF with embedded XML
Figma MCP を使ってデザインを FE コードに変換するスキル。 Trigger when: Figma URL が共有された時、デザインからコンポーネント実装時、 UI 実装でデザイン参照が必要な時、"Figma", "デザイン", "UI実装" への言及時、 「このデザインを実装して」「Figma から」「デザイン通りに」と言われた時。 Always use with: /web-design-principles
プロジェクト全体の統括エージェント向けスキル。要件整理から技術選定・アーキテクチャ設計・タスク分解・委譲までをカバー。git worktreeを活用した並列開発オーケストレーション（featureブランチ管理、BE/FE統括への委譲、横断レビュー）も担う。プロジェクト全体を俯瞰し、適切なエージェント/スキルに委譲する。新規プロジェクト立ち上げ、技術選定、全体設計、タスク分解・委譲、並列開発時に使用。
Codex CLIワーカーエージェントを起動してタスクを実行する。 Claude CodeがオーケストレーターとしてCodexを呼び出すハイブリッド構成。 トリガー: 「Codexで実行」「Codexに任せて」「並列でCodex」「高速に処理」
CSS の包括的なベストプラクティスガイド（フレームワーク非依存）。パフォーマンス最適化、保守性、シンプルなコード、親子要素の相対値設計、モダン CSS 機能（Container Queries、:has()、ネイティブネスティング、Cascade Layers）をカバー。CSS 設計・実装・レビュー時に使用。Tailwind CSS 等のユーティリティフレームワーク使用時は tailwind-css スキルを参照。
Tailwind CSS (v4) のベストプラクティスガイド。CSS ファースト設定（@theme）、デザイントークン、コンポーネント抽出、レスポンシブ設計、ダークモード、Container Queries、パフォーマンス最適化、親子要素の相対値設計をカバー。Tailwind CSS での UI 実装・設計・レビュー時に使用。素の CSS ルールは css-styling スキルを参照。