Clarify that the engine layout already wraps yield in .l-ui-page

thomasgallagher · thomasgallagher · commit db336248e4e6 · 2026-06-07T09:18:49.000+01:00
Document that views must not add their own .l-ui-page wrapper, which
would nest two containers. Note applies to both SKILL.md and the CSS
reference.
diff --git a/.claude/skills/layered-ui-rails/SKILL.md b/.claude/skills/layered-ui-rails/SKILL.md
@@ -39,6 +39,8 @@ Then render the engine layout from your application layout. Place all `content_f
 
 The engine layout provides a fixed header (63px), optional sidebar navigation (256px wide), optional resizable panel (320px default), and a main content area. Dark mode is built in with a toggle and localStorage persistence.
 
+**Your view's `yield` content is already wrapped in `.l-ui-page`** by the engine layout (which applies the responsive padding and `--with-navigation` margin). Do not add your own `.l-ui-page` wrapper around your view content - it duplicates the container and nests two `.l-ui-page` elements. Start your view with its actual content (headings, sections, components) directly.
+
 ### Content blocks
 
 Populate layout regions with `content_for` (always above the render call):
diff --git a/.claude/skills/layered-ui-rails/references/CSS.md b/.claude/skills/layered-ui-rails/references/CSS.md
@@ -36,6 +36,8 @@ Applied to `<body>` via the `:l_ui_body_class` yield to toggle layout-level beha
 .l-ui-page__width-constrained    Max-width container element
 ```
 
+`.l-ui-page` (and `--with-navigation`) is applied by the engine layout around your view's `yield` - you do not add it yourself. Wrapping your view content in another `.l-ui-page` nests two containers. The `__vertically-centered` and `__width-constrained` elements are used *inside* views (e.g. the Devise auth pages) for centred, width-limited content.
+
 ## Buttons
 
 Always combine the `l-ui-button` base class with a colour modifier (e.g. `l-ui-button l-ui-button--primary`):
