From d32cd832fb5aa0988e5384912e4016cb3417e44f Mon Sep 17 00:00:00 2001 From: Paul Bakaus Date: Thu, 21 May 2026 15:19:48 -0700 Subject: [PATCH] skill: drop unvalidated anti-centering rule; add image-led hero carve-out MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit The anti-centering rule ("Don't default to centering everything") was added without empirical support. We have a detector for it (everything-centered, threshold ≥70%) that fires on 0 / 998 samples in the corpus — never validated, never useful. Meanwhile the rule was almost certainly responsible for collapsing Gemini 3.5 flash's luxury-hotel skill-on output from the canonical "full-bleed photo + centered overlay headline" cinematic hero (the shape skill-off Gemini chooses 67% of the time) to a 50/50 magazine grid (full-bleed rate drops to 18% under skill-on, -49pp). Changes: - skill/SKILL.md #### Layout: drop "Don't default to centering..." - skill/reference/brand.md ## Layout: drop the same rule; replace with a positive carve-out — image-led briefs (hotels, restaurants, magazines, photography) often want full-bleed hero with overlaid menu and centered headline; let the photograph be the design - skill/reference/layout.md: drop the assessment question and the "asymmetric breaks centered-content pattern" framing Co-Authored-By: Claude Opus 4.7 (1M context) --- .agents/skills/impeccable/SKILL.md | 1 - .agents/skills/impeccable/reference/brand.md | 3 +-- .agents/skills/impeccable/reference/layout.md | 5 ++--- .claude/skills/impeccable/SKILL.md | 1 - .claude/skills/impeccable/reference/brand.md | 3 +-- .claude/skills/impeccable/reference/layout.md | 5 ++--- .cursor/skills/impeccable/SKILL.md | 1 - .cursor/skills/impeccable/reference/brand.md | 3 +-- .cursor/skills/impeccable/reference/layout.md | 5 ++--- .gemini/skills/impeccable/SKILL.md | 1 - .gemini/skills/impeccable/reference/brand.md | 3 +-- .gemini/skills/impeccable/reference/layout.md | 5 ++--- .github/skills/impeccable/SKILL.md | 1 - .github/skills/impeccable/reference/brand.md | 3 +-- .github/skills/impeccable/reference/layout.md | 5 ++--- .kiro/skills/impeccable/SKILL.md | 1 - .kiro/skills/impeccable/reference/brand.md | 3 +-- .kiro/skills/impeccable/reference/layout.md | 5 ++--- .opencode/skills/impeccable/SKILL.md | 1 - .opencode/skills/impeccable/reference/brand.md | 3 +-- .opencode/skills/impeccable/reference/layout.md | 5 ++--- .pi/skills/impeccable/SKILL.md | 1 - .pi/skills/impeccable/reference/brand.md | 3 +-- .pi/skills/impeccable/reference/layout.md | 5 ++--- .qoder/skills/impeccable/SKILL.md | 1 - .qoder/skills/impeccable/reference/brand.md | 3 +-- .qoder/skills/impeccable/reference/layout.md | 5 ++--- .rovodev/skills/impeccable/SKILL.md | 1 - .rovodev/skills/impeccable/reference/brand.md | 3 +-- .rovodev/skills/impeccable/reference/layout.md | 5 ++--- .trae-cn/skills/impeccable/SKILL.md | 1 - .trae-cn/skills/impeccable/reference/brand.md | 3 +-- .trae-cn/skills/impeccable/reference/layout.md | 5 ++--- .trae/skills/impeccable/SKILL.md | 1 - .trae/skills/impeccable/reference/brand.md | 3 +-- .trae/skills/impeccable/reference/layout.md | 5 ++--- plugin/skills/impeccable/SKILL.md | 1 - plugin/skills/impeccable/reference/brand.md | 3 +-- plugin/skills/impeccable/reference/layout.md | 5 ++--- skill/SKILL.md | 1 - skill/reference/brand.md | 3 +-- skill/reference/layout.md | 5 ++--- 42 files changed, 42 insertions(+), 84 deletions(-) diff --git a/.agents/skills/impeccable/SKILL.md b/.agents/skills/impeccable/SKILL.md index 62c6de961..ac8a7b6ef 100644 --- a/.agents/skills/impeccable/SKILL.md +++ b/.agents/skills/impeccable/SKILL.md @@ -44,7 +44,6 @@ Two hard typographic ceilings you currently miss: #### Layout - Vary spacing for rhythm. -- Don't default to centering everything. Left-aligned with asymmetric layout reads as designed; centered icon-title-subtitle stacks read as template. - Cards are the lazy answer. Use them only when they're truly the best affordance. Nested cards are always wrong. - Don't wrap everything in a container. Most things don't need one. - Flexbox for 1D, Grid for 2D. Don't default to Grid when `flex-wrap` would be simpler. diff --git a/.agents/skills/impeccable/reference/brand.md b/.agents/skills/impeccable/reference/brand.md index b723fce51..63ebb0965 100644 --- a/.agents/skills/impeccable/reference/brand.md +++ b/.agents/skills/impeccable/reference/brand.md @@ -69,8 +69,7 @@ Brand surfaces have permission for Committed, Full palette, and Drenched strateg - Asymmetric compositions are one option. Break the grid intentionally for emphasis. - Fluid spacing with `clamp()` that breathes on larger viewports. Vary for rhythm: generous separations, tight groupings. -- Alternative: a strict, visible grid as the voice (brutalist / Swiss / tech-spec aesthetics). Either asymmetric or rigorously-gridded can be "designed"; the failure mode is splitting the difference into a generic centered stack. -- Don't default to centering everything. Left-aligned with asymmetric layouts feels more designed; a strict grid reads as confident structure. A centered-stack hero with icon-title-subtitle cards reads as template. +- For image-led briefs (hotels, restaurants, magazines, photography), full-bleed hero imagery with overlaid menu and centered headline is a canonical move; let the photograph be the design. - When cards ARE the right affordance, use `grid-template-columns: repeat(auto-fit, minmax(280px, 1fr))` for breakpoint-free responsiveness. ## Imagery diff --git a/.agents/skills/impeccable/reference/layout.md b/.agents/skills/impeccable/reference/layout.md index b25351894..72e6fbea3 100644 --- a/.agents/skills/impeccable/reference/layout.md +++ b/.agents/skills/impeccable/reference/layout.md @@ -1,4 +1,4 @@ -Space is the most underused design tool. Find the layout's actual problem (monotone spacing, weak hierarchy, identical card grids, the centered-stack default) and fix the structure, not the surface. +Space is the most underused design tool. Find the layout's actual problem (monotone spacing, weak hierarchy, identical card grids) and fix the structure, not the surface. --- @@ -27,7 +27,6 @@ Analyze what's weak about the current spatial design: 3. **Grid & structure**: - Is there a clear underlying structure, or does the layout feel random? - Are identical card grids used everywhere? (Icon + heading + text, repeated endlessly) - - Is everything centered? (Left-aligned with asymmetric layouts feels more designed, but not a hard and fast rule) 4. **Rhythm & variety**: - Does the layout have visual rhythm? (Alternating tight/generous spacing) @@ -65,7 +64,7 @@ Create a systematic plan: - **Tight grouping** for related elements (8-12px between siblings) - **Generous separation** between distinct sections (48-96px) - **Varied spacing** within sections (not every row needs the same gap) -- **Asymmetric compositions**: break the predictable centered-content pattern when it makes sense +- **Asymmetric compositions**: a deliberate choice when the content invites it (not a default to chase). ### Choose the Right Layout Tool diff --git a/.claude/skills/impeccable/SKILL.md b/.claude/skills/impeccable/SKILL.md index 0ea9eeae6..bb60a1edc 100644 --- a/.claude/skills/impeccable/SKILL.md +++ b/.claude/skills/impeccable/SKILL.md @@ -46,7 +46,6 @@ Produce ready-to-ship, production-grade code, not prototypes or starting points. #### Layout - Vary spacing for rhythm. -- Don't default to centering everything. Left-aligned with asymmetric layout reads as designed; centered icon-title-subtitle stacks read as template. - Cards are the lazy answer. Use them only when they're truly the best affordance. Nested cards are always wrong. - Don't wrap everything in a container. Most things don't need one. - Flexbox for 1D, Grid for 2D. Don't default to Grid when `flex-wrap` would be simpler. diff --git a/.claude/skills/impeccable/reference/brand.md b/.claude/skills/impeccable/reference/brand.md index b723fce51..63ebb0965 100644 --- a/.claude/skills/impeccable/reference/brand.md +++ b/.claude/skills/impeccable/reference/brand.md @@ -69,8 +69,7 @@ Brand surfaces have permission for Committed, Full palette, and Drenched strateg - Asymmetric compositions are one option. Break the grid intentionally for emphasis. - Fluid spacing with `clamp()` that breathes on larger viewports. Vary for rhythm: generous separations, tight groupings. -- Alternative: a strict, visible grid as the voice (brutalist / Swiss / tech-spec aesthetics). Either asymmetric or rigorously-gridded can be "designed"; the failure mode is splitting the difference into a generic centered stack. -- Don't default to centering everything. Left-aligned with asymmetric layouts feels more designed; a strict grid reads as confident structure. A centered-stack hero with icon-title-subtitle cards reads as template. +- For image-led briefs (hotels, restaurants, magazines, photography), full-bleed hero imagery with overlaid menu and centered headline is a canonical move; let the photograph be the design. - When cards ARE the right affordance, use `grid-template-columns: repeat(auto-fit, minmax(280px, 1fr))` for breakpoint-free responsiveness. ## Imagery diff --git a/.claude/skills/impeccable/reference/layout.md b/.claude/skills/impeccable/reference/layout.md index d653c7b92..8765978b0 100644 --- a/.claude/skills/impeccable/reference/layout.md +++ b/.claude/skills/impeccable/reference/layout.md @@ -1,4 +1,4 @@ -Space is the most underused design tool. Find the layout's actual problem (monotone spacing, weak hierarchy, identical card grids, the centered-stack default) and fix the structure, not the surface. +Space is the most underused design tool. Find the layout's actual problem (monotone spacing, weak hierarchy, identical card grids) and fix the structure, not the surface. --- @@ -27,7 +27,6 @@ Analyze what's weak about the current spatial design: 3. **Grid & structure**: - Is there a clear underlying structure, or does the layout feel random? - Are identical card grids used everywhere? (Icon + heading + text, repeated endlessly) - - Is everything centered? (Left-aligned with asymmetric layouts feels more designed, but not a hard and fast rule) 4. **Rhythm & variety**: - Does the layout have visual rhythm? (Alternating tight/generous spacing) @@ -65,7 +64,7 @@ Create a systematic plan: - **Tight grouping** for related elements (8-12px between siblings) - **Generous separation** between distinct sections (48-96px) - **Varied spacing** within sections (not every row needs the same gap) -- **Asymmetric compositions**: break the predictable centered-content pattern when it makes sense +- **Asymmetric compositions**: a deliberate choice when the content invites it (not a default to chase). ### Choose the Right Layout Tool diff --git a/.cursor/skills/impeccable/SKILL.md b/.cursor/skills/impeccable/SKILL.md index 05b4b5542..e52a99b17 100644 --- a/.cursor/skills/impeccable/SKILL.md +++ b/.cursor/skills/impeccable/SKILL.md @@ -42,7 +42,6 @@ Produce ready-to-ship, production-grade code, not prototypes or starting points. #### Layout - Vary spacing for rhythm. -- Don't default to centering everything. Left-aligned with asymmetric layout reads as designed; centered icon-title-subtitle stacks read as template. - Cards are the lazy answer. Use them only when they're truly the best affordance. Nested cards are always wrong. - Don't wrap everything in a container. Most things don't need one. - Flexbox for 1D, Grid for 2D. Don't default to Grid when `flex-wrap` would be simpler. diff --git a/.cursor/skills/impeccable/reference/brand.md b/.cursor/skills/impeccable/reference/brand.md index b723fce51..63ebb0965 100644 --- a/.cursor/skills/impeccable/reference/brand.md +++ b/.cursor/skills/impeccable/reference/brand.md @@ -69,8 +69,7 @@ Brand surfaces have permission for Committed, Full palette, and Drenched strateg - Asymmetric compositions are one option. Break the grid intentionally for emphasis. - Fluid spacing with `clamp()` that breathes on larger viewports. Vary for rhythm: generous separations, tight groupings. -- Alternative: a strict, visible grid as the voice (brutalist / Swiss / tech-spec aesthetics). Either asymmetric or rigorously-gridded can be "designed"; the failure mode is splitting the difference into a generic centered stack. -- Don't default to centering everything. Left-aligned with asymmetric layouts feels more designed; a strict grid reads as confident structure. A centered-stack hero with icon-title-subtitle cards reads as template. +- For image-led briefs (hotels, restaurants, magazines, photography), full-bleed hero imagery with overlaid menu and centered headline is a canonical move; let the photograph be the design. - When cards ARE the right affordance, use `grid-template-columns: repeat(auto-fit, minmax(280px, 1fr))` for breakpoint-free responsiveness. ## Imagery diff --git a/.cursor/skills/impeccable/reference/layout.md b/.cursor/skills/impeccable/reference/layout.md index d653c7b92..8765978b0 100644 --- a/.cursor/skills/impeccable/reference/layout.md +++ b/.cursor/skills/impeccable/reference/layout.md @@ -1,4 +1,4 @@ -Space is the most underused design tool. Find the layout's actual problem (monotone spacing, weak hierarchy, identical card grids, the centered-stack default) and fix the structure, not the surface. +Space is the most underused design tool. Find the layout's actual problem (monotone spacing, weak hierarchy, identical card grids) and fix the structure, not the surface. --- @@ -27,7 +27,6 @@ Analyze what's weak about the current spatial design: 3. **Grid & structure**: - Is there a clear underlying structure, or does the layout feel random? - Are identical card grids used everywhere? (Icon + heading + text, repeated endlessly) - - Is everything centered? (Left-aligned with asymmetric layouts feels more designed, but not a hard and fast rule) 4. **Rhythm & variety**: - Does the layout have visual rhythm? (Alternating tight/generous spacing) @@ -65,7 +64,7 @@ Create a systematic plan: - **Tight grouping** for related elements (8-12px between siblings) - **Generous separation** between distinct sections (48-96px) - **Varied spacing** within sections (not every row needs the same gap) -- **Asymmetric compositions**: break the predictable centered-content pattern when it makes sense +- **Asymmetric compositions**: a deliberate choice when the content invites it (not a default to chase). ### Choose the Right Layout Tool diff --git a/.gemini/skills/impeccable/SKILL.md b/.gemini/skills/impeccable/SKILL.md index 8725bc082..5e078b36f 100644 --- a/.gemini/skills/impeccable/SKILL.md +++ b/.gemini/skills/impeccable/SKILL.md @@ -41,7 +41,6 @@ Produce ready-to-ship, production-grade code, not prototypes or starting points. #### Layout - Vary spacing for rhythm. -- Don't default to centering everything. Left-aligned with asymmetric layout reads as designed; centered icon-title-subtitle stacks read as template. - Cards are the lazy answer. Use them only when they're truly the best affordance. Nested cards are always wrong. - Don't wrap everything in a container. Most things don't need one. - Flexbox for 1D, Grid for 2D. Don't default to Grid when `flex-wrap` would be simpler. diff --git a/.gemini/skills/impeccable/reference/brand.md b/.gemini/skills/impeccable/reference/brand.md index b723fce51..63ebb0965 100644 --- a/.gemini/skills/impeccable/reference/brand.md +++ b/.gemini/skills/impeccable/reference/brand.md @@ -69,8 +69,7 @@ Brand surfaces have permission for Committed, Full palette, and Drenched strateg - Asymmetric compositions are one option. Break the grid intentionally for emphasis. - Fluid spacing with `clamp()` that breathes on larger viewports. Vary for rhythm: generous separations, tight groupings. -- Alternative: a strict, visible grid as the voice (brutalist / Swiss / tech-spec aesthetics). Either asymmetric or rigorously-gridded can be "designed"; the failure mode is splitting the difference into a generic centered stack. -- Don't default to centering everything. Left-aligned with asymmetric layouts feels more designed; a strict grid reads as confident structure. A centered-stack hero with icon-title-subtitle cards reads as template. +- For image-led briefs (hotels, restaurants, magazines, photography), full-bleed hero imagery with overlaid menu and centered headline is a canonical move; let the photograph be the design. - When cards ARE the right affordance, use `grid-template-columns: repeat(auto-fit, minmax(280px, 1fr))` for breakpoint-free responsiveness. ## Imagery diff --git a/.gemini/skills/impeccable/reference/layout.md b/.gemini/skills/impeccable/reference/layout.md index d653c7b92..8765978b0 100644 --- a/.gemini/skills/impeccable/reference/layout.md +++ b/.gemini/skills/impeccable/reference/layout.md @@ -1,4 +1,4 @@ -Space is the most underused design tool. Find the layout's actual problem (monotone spacing, weak hierarchy, identical card grids, the centered-stack default) and fix the structure, not the surface. +Space is the most underused design tool. Find the layout's actual problem (monotone spacing, weak hierarchy, identical card grids) and fix the structure, not the surface. --- @@ -27,7 +27,6 @@ Analyze what's weak about the current spatial design: 3. **Grid & structure**: - Is there a clear underlying structure, or does the layout feel random? - Are identical card grids used everywhere? (Icon + heading + text, repeated endlessly) - - Is everything centered? (Left-aligned with asymmetric layouts feels more designed, but not a hard and fast rule) 4. **Rhythm & variety**: - Does the layout have visual rhythm? (Alternating tight/generous spacing) @@ -65,7 +64,7 @@ Create a systematic plan: - **Tight grouping** for related elements (8-12px between siblings) - **Generous separation** between distinct sections (48-96px) - **Varied spacing** within sections (not every row needs the same gap) -- **Asymmetric compositions**: break the predictable centered-content pattern when it makes sense +- **Asymmetric compositions**: a deliberate choice when the content invites it (not a default to chase). ### Choose the Right Layout Tool diff --git a/.github/skills/impeccable/SKILL.md b/.github/skills/impeccable/SKILL.md index 8d1dea4ef..5b3d5bb48 100644 --- a/.github/skills/impeccable/SKILL.md +++ b/.github/skills/impeccable/SKILL.md @@ -44,7 +44,6 @@ Produce ready-to-ship, production-grade code, not prototypes or starting points. #### Layout - Vary spacing for rhythm. -- Don't default to centering everything. Left-aligned with asymmetric layout reads as designed; centered icon-title-subtitle stacks read as template. - Cards are the lazy answer. Use them only when they're truly the best affordance. Nested cards are always wrong. - Don't wrap everything in a container. Most things don't need one. - Flexbox for 1D, Grid for 2D. Don't default to Grid when `flex-wrap` would be simpler. diff --git a/.github/skills/impeccable/reference/brand.md b/.github/skills/impeccable/reference/brand.md index b723fce51..63ebb0965 100644 --- a/.github/skills/impeccable/reference/brand.md +++ b/.github/skills/impeccable/reference/brand.md @@ -69,8 +69,7 @@ Brand surfaces have permission for Committed, Full palette, and Drenched strateg - Asymmetric compositions are one option. Break the grid intentionally for emphasis. - Fluid spacing with `clamp()` that breathes on larger viewports. Vary for rhythm: generous separations, tight groupings. -- Alternative: a strict, visible grid as the voice (brutalist / Swiss / tech-spec aesthetics). Either asymmetric or rigorously-gridded can be "designed"; the failure mode is splitting the difference into a generic centered stack. -- Don't default to centering everything. Left-aligned with asymmetric layouts feels more designed; a strict grid reads as confident structure. A centered-stack hero with icon-title-subtitle cards reads as template. +- For image-led briefs (hotels, restaurants, magazines, photography), full-bleed hero imagery with overlaid menu and centered headline is a canonical move; let the photograph be the design. - When cards ARE the right affordance, use `grid-template-columns: repeat(auto-fit, minmax(280px, 1fr))` for breakpoint-free responsiveness. ## Imagery diff --git a/.github/skills/impeccable/reference/layout.md b/.github/skills/impeccable/reference/layout.md index d653c7b92..8765978b0 100644 --- a/.github/skills/impeccable/reference/layout.md +++ b/.github/skills/impeccable/reference/layout.md @@ -1,4 +1,4 @@ -Space is the most underused design tool. Find the layout's actual problem (monotone spacing, weak hierarchy, identical card grids, the centered-stack default) and fix the structure, not the surface. +Space is the most underused design tool. Find the layout's actual problem (monotone spacing, weak hierarchy, identical card grids) and fix the structure, not the surface. --- @@ -27,7 +27,6 @@ Analyze what's weak about the current spatial design: 3. **Grid & structure**: - Is there a clear underlying structure, or does the layout feel random? - Are identical card grids used everywhere? (Icon + heading + text, repeated endlessly) - - Is everything centered? (Left-aligned with asymmetric layouts feels more designed, but not a hard and fast rule) 4. **Rhythm & variety**: - Does the layout have visual rhythm? (Alternating tight/generous spacing) @@ -65,7 +64,7 @@ Create a systematic plan: - **Tight grouping** for related elements (8-12px between siblings) - **Generous separation** between distinct sections (48-96px) - **Varied spacing** within sections (not every row needs the same gap) -- **Asymmetric compositions**: break the predictable centered-content pattern when it makes sense +- **Asymmetric compositions**: a deliberate choice when the content invites it (not a default to chase). ### Choose the Right Layout Tool diff --git a/.kiro/skills/impeccable/SKILL.md b/.kiro/skills/impeccable/SKILL.md index d550a33d2..a76c4b66b 100644 --- a/.kiro/skills/impeccable/SKILL.md +++ b/.kiro/skills/impeccable/SKILL.md @@ -42,7 +42,6 @@ Produce ready-to-ship, production-grade code, not prototypes or starting points. #### Layout - Vary spacing for rhythm. -- Don't default to centering everything. Left-aligned with asymmetric layout reads as designed; centered icon-title-subtitle stacks read as template. - Cards are the lazy answer. Use them only when they're truly the best affordance. Nested cards are always wrong. - Don't wrap everything in a container. Most things don't need one. - Flexbox for 1D, Grid for 2D. Don't default to Grid when `flex-wrap` would be simpler. diff --git a/.kiro/skills/impeccable/reference/brand.md b/.kiro/skills/impeccable/reference/brand.md index b723fce51..63ebb0965 100644 --- a/.kiro/skills/impeccable/reference/brand.md +++ b/.kiro/skills/impeccable/reference/brand.md @@ -69,8 +69,7 @@ Brand surfaces have permission for Committed, Full palette, and Drenched strateg - Asymmetric compositions are one option. Break the grid intentionally for emphasis. - Fluid spacing with `clamp()` that breathes on larger viewports. Vary for rhythm: generous separations, tight groupings. -- Alternative: a strict, visible grid as the voice (brutalist / Swiss / tech-spec aesthetics). Either asymmetric or rigorously-gridded can be "designed"; the failure mode is splitting the difference into a generic centered stack. -- Don't default to centering everything. Left-aligned with asymmetric layouts feels more designed; a strict grid reads as confident structure. A centered-stack hero with icon-title-subtitle cards reads as template. +- For image-led briefs (hotels, restaurants, magazines, photography), full-bleed hero imagery with overlaid menu and centered headline is a canonical move; let the photograph be the design. - When cards ARE the right affordance, use `grid-template-columns: repeat(auto-fit, minmax(280px, 1fr))` for breakpoint-free responsiveness. ## Imagery diff --git a/.kiro/skills/impeccable/reference/layout.md b/.kiro/skills/impeccable/reference/layout.md index d653c7b92..8765978b0 100644 --- a/.kiro/skills/impeccable/reference/layout.md +++ b/.kiro/skills/impeccable/reference/layout.md @@ -1,4 +1,4 @@ -Space is the most underused design tool. Find the layout's actual problem (monotone spacing, weak hierarchy, identical card grids, the centered-stack default) and fix the structure, not the surface. +Space is the most underused design tool. Find the layout's actual problem (monotone spacing, weak hierarchy, identical card grids) and fix the structure, not the surface. --- @@ -27,7 +27,6 @@ Analyze what's weak about the current spatial design: 3. **Grid & structure**: - Is there a clear underlying structure, or does the layout feel random? - Are identical card grids used everywhere? (Icon + heading + text, repeated endlessly) - - Is everything centered? (Left-aligned with asymmetric layouts feels more designed, but not a hard and fast rule) 4. **Rhythm & variety**: - Does the layout have visual rhythm? (Alternating tight/generous spacing) @@ -65,7 +64,7 @@ Create a systematic plan: - **Tight grouping** for related elements (8-12px between siblings) - **Generous separation** between distinct sections (48-96px) - **Varied spacing** within sections (not every row needs the same gap) -- **Asymmetric compositions**: break the predictable centered-content pattern when it makes sense +- **Asymmetric compositions**: a deliberate choice when the content invites it (not a default to chase). ### Choose the Right Layout Tool diff --git a/.opencode/skills/impeccable/SKILL.md b/.opencode/skills/impeccable/SKILL.md index 2675f8b28..3edfd75ba 100644 --- a/.opencode/skills/impeccable/SKILL.md +++ b/.opencode/skills/impeccable/SKILL.md @@ -46,7 +46,6 @@ Produce ready-to-ship, production-grade code, not prototypes or starting points. #### Layout - Vary spacing for rhythm. -- Don't default to centering everything. Left-aligned with asymmetric layout reads as designed; centered icon-title-subtitle stacks read as template. - Cards are the lazy answer. Use them only when they're truly the best affordance. Nested cards are always wrong. - Don't wrap everything in a container. Most things don't need one. - Flexbox for 1D, Grid for 2D. Don't default to Grid when `flex-wrap` would be simpler. diff --git a/.opencode/skills/impeccable/reference/brand.md b/.opencode/skills/impeccable/reference/brand.md index b723fce51..63ebb0965 100644 --- a/.opencode/skills/impeccable/reference/brand.md +++ b/.opencode/skills/impeccable/reference/brand.md @@ -69,8 +69,7 @@ Brand surfaces have permission for Committed, Full palette, and Drenched strateg - Asymmetric compositions are one option. Break the grid intentionally for emphasis. - Fluid spacing with `clamp()` that breathes on larger viewports. Vary for rhythm: generous separations, tight groupings. -- Alternative: a strict, visible grid as the voice (brutalist / Swiss / tech-spec aesthetics). Either asymmetric or rigorously-gridded can be "designed"; the failure mode is splitting the difference into a generic centered stack. -- Don't default to centering everything. Left-aligned with asymmetric layouts feels more designed; a strict grid reads as confident structure. A centered-stack hero with icon-title-subtitle cards reads as template. +- For image-led briefs (hotels, restaurants, magazines, photography), full-bleed hero imagery with overlaid menu and centered headline is a canonical move; let the photograph be the design. - When cards ARE the right affordance, use `grid-template-columns: repeat(auto-fit, minmax(280px, 1fr))` for breakpoint-free responsiveness. ## Imagery diff --git a/.opencode/skills/impeccable/reference/layout.md b/.opencode/skills/impeccable/reference/layout.md index d653c7b92..8765978b0 100644 --- a/.opencode/skills/impeccable/reference/layout.md +++ b/.opencode/skills/impeccable/reference/layout.md @@ -1,4 +1,4 @@ -Space is the most underused design tool. Find the layout's actual problem (monotone spacing, weak hierarchy, identical card grids, the centered-stack default) and fix the structure, not the surface. +Space is the most underused design tool. Find the layout's actual problem (monotone spacing, weak hierarchy, identical card grids) and fix the structure, not the surface. --- @@ -27,7 +27,6 @@ Analyze what's weak about the current spatial design: 3. **Grid & structure**: - Is there a clear underlying structure, or does the layout feel random? - Are identical card grids used everywhere? (Icon + heading + text, repeated endlessly) - - Is everything centered? (Left-aligned with asymmetric layouts feels more designed, but not a hard and fast rule) 4. **Rhythm & variety**: - Does the layout have visual rhythm? (Alternating tight/generous spacing) @@ -65,7 +64,7 @@ Create a systematic plan: - **Tight grouping** for related elements (8-12px between siblings) - **Generous separation** between distinct sections (48-96px) - **Varied spacing** within sections (not every row needs the same gap) -- **Asymmetric compositions**: break the predictable centered-content pattern when it makes sense +- **Asymmetric compositions**: a deliberate choice when the content invites it (not a default to chase). ### Choose the Right Layout Tool diff --git a/.pi/skills/impeccable/SKILL.md b/.pi/skills/impeccable/SKILL.md index 2c8493e23..e172707a1 100644 --- a/.pi/skills/impeccable/SKILL.md +++ b/.pi/skills/impeccable/SKILL.md @@ -44,7 +44,6 @@ Produce ready-to-ship, production-grade code, not prototypes or starting points. #### Layout - Vary spacing for rhythm. -- Don't default to centering everything. Left-aligned with asymmetric layout reads as designed; centered icon-title-subtitle stacks read as template. - Cards are the lazy answer. Use them only when they're truly the best affordance. Nested cards are always wrong. - Don't wrap everything in a container. Most things don't need one. - Flexbox for 1D, Grid for 2D. Don't default to Grid when `flex-wrap` would be simpler. diff --git a/.pi/skills/impeccable/reference/brand.md b/.pi/skills/impeccable/reference/brand.md index b723fce51..63ebb0965 100644 --- a/.pi/skills/impeccable/reference/brand.md +++ b/.pi/skills/impeccable/reference/brand.md @@ -69,8 +69,7 @@ Brand surfaces have permission for Committed, Full palette, and Drenched strateg - Asymmetric compositions are one option. Break the grid intentionally for emphasis. - Fluid spacing with `clamp()` that breathes on larger viewports. Vary for rhythm: generous separations, tight groupings. -- Alternative: a strict, visible grid as the voice (brutalist / Swiss / tech-spec aesthetics). Either asymmetric or rigorously-gridded can be "designed"; the failure mode is splitting the difference into a generic centered stack. -- Don't default to centering everything. Left-aligned with asymmetric layouts feels more designed; a strict grid reads as confident structure. A centered-stack hero with icon-title-subtitle cards reads as template. +- For image-led briefs (hotels, restaurants, magazines, photography), full-bleed hero imagery with overlaid menu and centered headline is a canonical move; let the photograph be the design. - When cards ARE the right affordance, use `grid-template-columns: repeat(auto-fit, minmax(280px, 1fr))` for breakpoint-free responsiveness. ## Imagery diff --git a/.pi/skills/impeccable/reference/layout.md b/.pi/skills/impeccable/reference/layout.md index d653c7b92..8765978b0 100644 --- a/.pi/skills/impeccable/reference/layout.md +++ b/.pi/skills/impeccable/reference/layout.md @@ -1,4 +1,4 @@ -Space is the most underused design tool. Find the layout's actual problem (monotone spacing, weak hierarchy, identical card grids, the centered-stack default) and fix the structure, not the surface. +Space is the most underused design tool. Find the layout's actual problem (monotone spacing, weak hierarchy, identical card grids) and fix the structure, not the surface. --- @@ -27,7 +27,6 @@ Analyze what's weak about the current spatial design: 3. **Grid & structure**: - Is there a clear underlying structure, or does the layout feel random? - Are identical card grids used everywhere? (Icon + heading + text, repeated endlessly) - - Is everything centered? (Left-aligned with asymmetric layouts feels more designed, but not a hard and fast rule) 4. **Rhythm & variety**: - Does the layout have visual rhythm? (Alternating tight/generous spacing) @@ -65,7 +64,7 @@ Create a systematic plan: - **Tight grouping** for related elements (8-12px between siblings) - **Generous separation** between distinct sections (48-96px) - **Varied spacing** within sections (not every row needs the same gap) -- **Asymmetric compositions**: break the predictable centered-content pattern when it makes sense +- **Asymmetric compositions**: a deliberate choice when the content invites it (not a default to chase). ### Choose the Right Layout Tool diff --git a/.qoder/skills/impeccable/SKILL.md b/.qoder/skills/impeccable/SKILL.md index c4cd0f872..938016514 100644 --- a/.qoder/skills/impeccable/SKILL.md +++ b/.qoder/skills/impeccable/SKILL.md @@ -46,7 +46,6 @@ Produce ready-to-ship, production-grade code, not prototypes or starting points. #### Layout - Vary spacing for rhythm. -- Don't default to centering everything. Left-aligned with asymmetric layout reads as designed; centered icon-title-subtitle stacks read as template. - Cards are the lazy answer. Use them only when they're truly the best affordance. Nested cards are always wrong. - Don't wrap everything in a container. Most things don't need one. - Flexbox for 1D, Grid for 2D. Don't default to Grid when `flex-wrap` would be simpler. diff --git a/.qoder/skills/impeccable/reference/brand.md b/.qoder/skills/impeccable/reference/brand.md index b723fce51..63ebb0965 100644 --- a/.qoder/skills/impeccable/reference/brand.md +++ b/.qoder/skills/impeccable/reference/brand.md @@ -69,8 +69,7 @@ Brand surfaces have permission for Committed, Full palette, and Drenched strateg - Asymmetric compositions are one option. Break the grid intentionally for emphasis. - Fluid spacing with `clamp()` that breathes on larger viewports. Vary for rhythm: generous separations, tight groupings. -- Alternative: a strict, visible grid as the voice (brutalist / Swiss / tech-spec aesthetics). Either asymmetric or rigorously-gridded can be "designed"; the failure mode is splitting the difference into a generic centered stack. -- Don't default to centering everything. Left-aligned with asymmetric layouts feels more designed; a strict grid reads as confident structure. A centered-stack hero with icon-title-subtitle cards reads as template. +- For image-led briefs (hotels, restaurants, magazines, photography), full-bleed hero imagery with overlaid menu and centered headline is a canonical move; let the photograph be the design. - When cards ARE the right affordance, use `grid-template-columns: repeat(auto-fit, minmax(280px, 1fr))` for breakpoint-free responsiveness. ## Imagery diff --git a/.qoder/skills/impeccable/reference/layout.md b/.qoder/skills/impeccable/reference/layout.md index d653c7b92..8765978b0 100644 --- a/.qoder/skills/impeccable/reference/layout.md +++ b/.qoder/skills/impeccable/reference/layout.md @@ -1,4 +1,4 @@ -Space is the most underused design tool. Find the layout's actual problem (monotone spacing, weak hierarchy, identical card grids, the centered-stack default) and fix the structure, not the surface. +Space is the most underused design tool. Find the layout's actual problem (monotone spacing, weak hierarchy, identical card grids) and fix the structure, not the surface. --- @@ -27,7 +27,6 @@ Analyze what's weak about the current spatial design: 3. **Grid & structure**: - Is there a clear underlying structure, or does the layout feel random? - Are identical card grids used everywhere? (Icon + heading + text, repeated endlessly) - - Is everything centered? (Left-aligned with asymmetric layouts feels more designed, but not a hard and fast rule) 4. **Rhythm & variety**: - Does the layout have visual rhythm? (Alternating tight/generous spacing) @@ -65,7 +64,7 @@ Create a systematic plan: - **Tight grouping** for related elements (8-12px between siblings) - **Generous separation** between distinct sections (48-96px) - **Varied spacing** within sections (not every row needs the same gap) -- **Asymmetric compositions**: break the predictable centered-content pattern when it makes sense +- **Asymmetric compositions**: a deliberate choice when the content invites it (not a default to chase). ### Choose the Right Layout Tool diff --git a/.rovodev/skills/impeccable/SKILL.md b/.rovodev/skills/impeccable/SKILL.md index 953e3076f..5636ac006 100644 --- a/.rovodev/skills/impeccable/SKILL.md +++ b/.rovodev/skills/impeccable/SKILL.md @@ -46,7 +46,6 @@ Produce ready-to-ship, production-grade code, not prototypes or starting points. #### Layout - Vary spacing for rhythm. -- Don't default to centering everything. Left-aligned with asymmetric layout reads as designed; centered icon-title-subtitle stacks read as template. - Cards are the lazy answer. Use them only when they're truly the best affordance. Nested cards are always wrong. - Don't wrap everything in a container. Most things don't need one. - Flexbox for 1D, Grid for 2D. Don't default to Grid when `flex-wrap` would be simpler. diff --git a/.rovodev/skills/impeccable/reference/brand.md b/.rovodev/skills/impeccable/reference/brand.md index b723fce51..63ebb0965 100644 --- a/.rovodev/skills/impeccable/reference/brand.md +++ b/.rovodev/skills/impeccable/reference/brand.md @@ -69,8 +69,7 @@ Brand surfaces have permission for Committed, Full palette, and Drenched strateg - Asymmetric compositions are one option. Break the grid intentionally for emphasis. - Fluid spacing with `clamp()` that breathes on larger viewports. Vary for rhythm: generous separations, tight groupings. -- Alternative: a strict, visible grid as the voice (brutalist / Swiss / tech-spec aesthetics). Either asymmetric or rigorously-gridded can be "designed"; the failure mode is splitting the difference into a generic centered stack. -- Don't default to centering everything. Left-aligned with asymmetric layouts feels more designed; a strict grid reads as confident structure. A centered-stack hero with icon-title-subtitle cards reads as template. +- For image-led briefs (hotels, restaurants, magazines, photography), full-bleed hero imagery with overlaid menu and centered headline is a canonical move; let the photograph be the design. - When cards ARE the right affordance, use `grid-template-columns: repeat(auto-fit, minmax(280px, 1fr))` for breakpoint-free responsiveness. ## Imagery diff --git a/.rovodev/skills/impeccable/reference/layout.md b/.rovodev/skills/impeccable/reference/layout.md index d653c7b92..8765978b0 100644 --- a/.rovodev/skills/impeccable/reference/layout.md +++ b/.rovodev/skills/impeccable/reference/layout.md @@ -1,4 +1,4 @@ -Space is the most underused design tool. Find the layout's actual problem (monotone spacing, weak hierarchy, identical card grids, the centered-stack default) and fix the structure, not the surface. +Space is the most underused design tool. Find the layout's actual problem (monotone spacing, weak hierarchy, identical card grids) and fix the structure, not the surface. --- @@ -27,7 +27,6 @@ Analyze what's weak about the current spatial design: 3. **Grid & structure**: - Is there a clear underlying structure, or does the layout feel random? - Are identical card grids used everywhere? (Icon + heading + text, repeated endlessly) - - Is everything centered? (Left-aligned with asymmetric layouts feels more designed, but not a hard and fast rule) 4. **Rhythm & variety**: - Does the layout have visual rhythm? (Alternating tight/generous spacing) @@ -65,7 +64,7 @@ Create a systematic plan: - **Tight grouping** for related elements (8-12px between siblings) - **Generous separation** between distinct sections (48-96px) - **Varied spacing** within sections (not every row needs the same gap) -- **Asymmetric compositions**: break the predictable centered-content pattern when it makes sense +- **Asymmetric compositions**: a deliberate choice when the content invites it (not a default to chase). ### Choose the Right Layout Tool diff --git a/.trae-cn/skills/impeccable/SKILL.md b/.trae-cn/skills/impeccable/SKILL.md index 22fa68331..fd68e56fc 100644 --- a/.trae-cn/skills/impeccable/SKILL.md +++ b/.trae-cn/skills/impeccable/SKILL.md @@ -44,7 +44,6 @@ Produce ready-to-ship, production-grade code, not prototypes or starting points. #### Layout - Vary spacing for rhythm. -- Don't default to centering everything. Left-aligned with asymmetric layout reads as designed; centered icon-title-subtitle stacks read as template. - Cards are the lazy answer. Use them only when they're truly the best affordance. Nested cards are always wrong. - Don't wrap everything in a container. Most things don't need one. - Flexbox for 1D, Grid for 2D. Don't default to Grid when `flex-wrap` would be simpler. diff --git a/.trae-cn/skills/impeccable/reference/brand.md b/.trae-cn/skills/impeccable/reference/brand.md index b723fce51..63ebb0965 100644 --- a/.trae-cn/skills/impeccable/reference/brand.md +++ b/.trae-cn/skills/impeccable/reference/brand.md @@ -69,8 +69,7 @@ Brand surfaces have permission for Committed, Full palette, and Drenched strateg - Asymmetric compositions are one option. Break the grid intentionally for emphasis. - Fluid spacing with `clamp()` that breathes on larger viewports. Vary for rhythm: generous separations, tight groupings. -- Alternative: a strict, visible grid as the voice (brutalist / Swiss / tech-spec aesthetics). Either asymmetric or rigorously-gridded can be "designed"; the failure mode is splitting the difference into a generic centered stack. -- Don't default to centering everything. Left-aligned with asymmetric layouts feels more designed; a strict grid reads as confident structure. A centered-stack hero with icon-title-subtitle cards reads as template. +- For image-led briefs (hotels, restaurants, magazines, photography), full-bleed hero imagery with overlaid menu and centered headline is a canonical move; let the photograph be the design. - When cards ARE the right affordance, use `grid-template-columns: repeat(auto-fit, minmax(280px, 1fr))` for breakpoint-free responsiveness. ## Imagery diff --git a/.trae-cn/skills/impeccable/reference/layout.md b/.trae-cn/skills/impeccable/reference/layout.md index d653c7b92..8765978b0 100644 --- a/.trae-cn/skills/impeccable/reference/layout.md +++ b/.trae-cn/skills/impeccable/reference/layout.md @@ -1,4 +1,4 @@ -Space is the most underused design tool. Find the layout's actual problem (monotone spacing, weak hierarchy, identical card grids, the centered-stack default) and fix the structure, not the surface. +Space is the most underused design tool. Find the layout's actual problem (monotone spacing, weak hierarchy, identical card grids) and fix the structure, not the surface. --- @@ -27,7 +27,6 @@ Analyze what's weak about the current spatial design: 3. **Grid & structure**: - Is there a clear underlying structure, or does the layout feel random? - Are identical card grids used everywhere? (Icon + heading + text, repeated endlessly) - - Is everything centered? (Left-aligned with asymmetric layouts feels more designed, but not a hard and fast rule) 4. **Rhythm & variety**: - Does the layout have visual rhythm? (Alternating tight/generous spacing) @@ -65,7 +64,7 @@ Create a systematic plan: - **Tight grouping** for related elements (8-12px between siblings) - **Generous separation** between distinct sections (48-96px) - **Varied spacing** within sections (not every row needs the same gap) -- **Asymmetric compositions**: break the predictable centered-content pattern when it makes sense +- **Asymmetric compositions**: a deliberate choice when the content invites it (not a default to chase). ### Choose the Right Layout Tool diff --git a/.trae/skills/impeccable/SKILL.md b/.trae/skills/impeccable/SKILL.md index 45ab3f8c6..1e1322f11 100644 --- a/.trae/skills/impeccable/SKILL.md +++ b/.trae/skills/impeccable/SKILL.md @@ -44,7 +44,6 @@ Produce ready-to-ship, production-grade code, not prototypes or starting points. #### Layout - Vary spacing for rhythm. -- Don't default to centering everything. Left-aligned with asymmetric layout reads as designed; centered icon-title-subtitle stacks read as template. - Cards are the lazy answer. Use them only when they're truly the best affordance. Nested cards are always wrong. - Don't wrap everything in a container. Most things don't need one. - Flexbox for 1D, Grid for 2D. Don't default to Grid when `flex-wrap` would be simpler. diff --git a/.trae/skills/impeccable/reference/brand.md b/.trae/skills/impeccable/reference/brand.md index b723fce51..63ebb0965 100644 --- a/.trae/skills/impeccable/reference/brand.md +++ b/.trae/skills/impeccable/reference/brand.md @@ -69,8 +69,7 @@ Brand surfaces have permission for Committed, Full palette, and Drenched strateg - Asymmetric compositions are one option. Break the grid intentionally for emphasis. - Fluid spacing with `clamp()` that breathes on larger viewports. Vary for rhythm: generous separations, tight groupings. -- Alternative: a strict, visible grid as the voice (brutalist / Swiss / tech-spec aesthetics). Either asymmetric or rigorously-gridded can be "designed"; the failure mode is splitting the difference into a generic centered stack. -- Don't default to centering everything. Left-aligned with asymmetric layouts feels more designed; a strict grid reads as confident structure. A centered-stack hero with icon-title-subtitle cards reads as template. +- For image-led briefs (hotels, restaurants, magazines, photography), full-bleed hero imagery with overlaid menu and centered headline is a canonical move; let the photograph be the design. - When cards ARE the right affordance, use `grid-template-columns: repeat(auto-fit, minmax(280px, 1fr))` for breakpoint-free responsiveness. ## Imagery diff --git a/.trae/skills/impeccable/reference/layout.md b/.trae/skills/impeccable/reference/layout.md index d653c7b92..8765978b0 100644 --- a/.trae/skills/impeccable/reference/layout.md +++ b/.trae/skills/impeccable/reference/layout.md @@ -1,4 +1,4 @@ -Space is the most underused design tool. Find the layout's actual problem (monotone spacing, weak hierarchy, identical card grids, the centered-stack default) and fix the structure, not the surface. +Space is the most underused design tool. Find the layout's actual problem (monotone spacing, weak hierarchy, identical card grids) and fix the structure, not the surface. --- @@ -27,7 +27,6 @@ Analyze what's weak about the current spatial design: 3. **Grid & structure**: - Is there a clear underlying structure, or does the layout feel random? - Are identical card grids used everywhere? (Icon + heading + text, repeated endlessly) - - Is everything centered? (Left-aligned with asymmetric layouts feels more designed, but not a hard and fast rule) 4. **Rhythm & variety**: - Does the layout have visual rhythm? (Alternating tight/generous spacing) @@ -65,7 +64,7 @@ Create a systematic plan: - **Tight grouping** for related elements (8-12px between siblings) - **Generous separation** between distinct sections (48-96px) - **Varied spacing** within sections (not every row needs the same gap) -- **Asymmetric compositions**: break the predictable centered-content pattern when it makes sense +- **Asymmetric compositions**: a deliberate choice when the content invites it (not a default to chase). ### Choose the Right Layout Tool diff --git a/plugin/skills/impeccable/SKILL.md b/plugin/skills/impeccable/SKILL.md index 0ea9eeae6..bb60a1edc 100644 --- a/plugin/skills/impeccable/SKILL.md +++ b/plugin/skills/impeccable/SKILL.md @@ -46,7 +46,6 @@ Produce ready-to-ship, production-grade code, not prototypes or starting points. #### Layout - Vary spacing for rhythm. -- Don't default to centering everything. Left-aligned with asymmetric layout reads as designed; centered icon-title-subtitle stacks read as template. - Cards are the lazy answer. Use them only when they're truly the best affordance. Nested cards are always wrong. - Don't wrap everything in a container. Most things don't need one. - Flexbox for 1D, Grid for 2D. Don't default to Grid when `flex-wrap` would be simpler. diff --git a/plugin/skills/impeccable/reference/brand.md b/plugin/skills/impeccable/reference/brand.md index b723fce51..63ebb0965 100644 --- a/plugin/skills/impeccable/reference/brand.md +++ b/plugin/skills/impeccable/reference/brand.md @@ -69,8 +69,7 @@ Brand surfaces have permission for Committed, Full palette, and Drenched strateg - Asymmetric compositions are one option. Break the grid intentionally for emphasis. - Fluid spacing with `clamp()` that breathes on larger viewports. Vary for rhythm: generous separations, tight groupings. -- Alternative: a strict, visible grid as the voice (brutalist / Swiss / tech-spec aesthetics). Either asymmetric or rigorously-gridded can be "designed"; the failure mode is splitting the difference into a generic centered stack. -- Don't default to centering everything. Left-aligned with asymmetric layouts feels more designed; a strict grid reads as confident structure. A centered-stack hero with icon-title-subtitle cards reads as template. +- For image-led briefs (hotels, restaurants, magazines, photography), full-bleed hero imagery with overlaid menu and centered headline is a canonical move; let the photograph be the design. - When cards ARE the right affordance, use `grid-template-columns: repeat(auto-fit, minmax(280px, 1fr))` for breakpoint-free responsiveness. ## Imagery diff --git a/plugin/skills/impeccable/reference/layout.md b/plugin/skills/impeccable/reference/layout.md index d653c7b92..8765978b0 100644 --- a/plugin/skills/impeccable/reference/layout.md +++ b/plugin/skills/impeccable/reference/layout.md @@ -1,4 +1,4 @@ -Space is the most underused design tool. Find the layout's actual problem (monotone spacing, weak hierarchy, identical card grids, the centered-stack default) and fix the structure, not the surface. +Space is the most underused design tool. Find the layout's actual problem (monotone spacing, weak hierarchy, identical card grids) and fix the structure, not the surface. --- @@ -27,7 +27,6 @@ Analyze what's weak about the current spatial design: 3. **Grid & structure**: - Is there a clear underlying structure, or does the layout feel random? - Are identical card grids used everywhere? (Icon + heading + text, repeated endlessly) - - Is everything centered? (Left-aligned with asymmetric layouts feels more designed, but not a hard and fast rule) 4. **Rhythm & variety**: - Does the layout have visual rhythm? (Alternating tight/generous spacing) @@ -65,7 +64,7 @@ Create a systematic plan: - **Tight grouping** for related elements (8-12px between siblings) - **Generous separation** between distinct sections (48-96px) - **Varied spacing** within sections (not every row needs the same gap) -- **Asymmetric compositions**: break the predictable centered-content pattern when it makes sense +- **Asymmetric compositions**: a deliberate choice when the content invites it (not a default to chase). ### Choose the Right Layout Tool diff --git a/skill/SKILL.md b/skill/SKILL.md index 389ca6360..c8a281c98 100644 --- a/skill/SKILL.md +++ b/skill/SKILL.md @@ -51,7 +51,6 @@ Two hard typographic ceilings you currently miss: #### Layout - Vary spacing for rhythm. -- Don't default to centering everything. Left-aligned with asymmetric layout reads as designed; centered icon-title-subtitle stacks read as template. - Cards are the lazy answer. Use them only when they're truly the best affordance. Nested cards are always wrong. - Don't wrap everything in a container. Most things don't need one. - Flexbox for 1D, Grid for 2D. Don't default to Grid when `flex-wrap` would be simpler. diff --git a/skill/reference/brand.md b/skill/reference/brand.md index b723fce51..63ebb0965 100644 --- a/skill/reference/brand.md +++ b/skill/reference/brand.md @@ -69,8 +69,7 @@ Brand surfaces have permission for Committed, Full palette, and Drenched strateg - Asymmetric compositions are one option. Break the grid intentionally for emphasis. - Fluid spacing with `clamp()` that breathes on larger viewports. Vary for rhythm: generous separations, tight groupings. -- Alternative: a strict, visible grid as the voice (brutalist / Swiss / tech-spec aesthetics). Either asymmetric or rigorously-gridded can be "designed"; the failure mode is splitting the difference into a generic centered stack. -- Don't default to centering everything. Left-aligned with asymmetric layouts feels more designed; a strict grid reads as confident structure. A centered-stack hero with icon-title-subtitle cards reads as template. +- For image-led briefs (hotels, restaurants, magazines, photography), full-bleed hero imagery with overlaid menu and centered headline is a canonical move; let the photograph be the design. - When cards ARE the right affordance, use `grid-template-columns: repeat(auto-fit, minmax(280px, 1fr))` for breakpoint-free responsiveness. ## Imagery diff --git a/skill/reference/layout.md b/skill/reference/layout.md index cf69d9b7d..a2a847226 100644 --- a/skill/reference/layout.md +++ b/skill/reference/layout.md @@ -1,4 +1,4 @@ -Space is the most underused design tool. Find the layout's actual problem (monotone spacing, weak hierarchy, identical card grids, the centered-stack default) and fix the structure, not the surface. +Space is the most underused design tool. Find the layout's actual problem (monotone spacing, weak hierarchy, identical card grids) and fix the structure, not the surface. --- @@ -27,7 +27,6 @@ Analyze what's weak about the current spatial design: 3. **Grid & structure**: - Is there a clear underlying structure, or does the layout feel random? - Are identical card grids used everywhere? (Icon + heading + text, repeated endlessly) - - Is everything centered? (Left-aligned with asymmetric layouts feels more designed, but not a hard and fast rule) 4. **Rhythm & variety**: - Does the layout have visual rhythm? (Alternating tight/generous spacing) @@ -65,7 +64,7 @@ Create a systematic plan: - **Tight grouping** for related elements (8-12px between siblings) - **Generous separation** between distinct sections (48-96px) - **Varied spacing** within sections (not every row needs the same gap) -- **Asymmetric compositions**: break the predictable centered-content pattern when it makes sense +- **Asymmetric compositions**: a deliberate choice when the content invites it (not a default to chase). ### Choose the Right Layout Tool