Add flow-relative layout rule

skills/modern-css/SKILL.md

@@ -1,8 +1,8 @@
 ---
 name: modern-css
-description: Helps with authoring and reviewing modern CSS for robust, responsive, and accessible UIs — cascade layers, @scope, :has(), nesting, container queries, fluid typography with clamp(), oklch() colors, light-dark() and color-scheme, and prefers-reduced-motion. Use this skill when the user asks things like "style this component", "make this responsive", "add dark mode", "scope these styles", "fluid type scale", or any CSS authoring, refactoring, or review task — even when they don't explicitly say "CSS".
+description: Helps with authoring and reviewing modern CSS for robust, responsive, and accessible UIs — cascade layers, @scope, :has(), nesting, container queries, fluid typography with clamp(), oklch() colors, light-dark() and color-scheme, logical properties, and prefers-reduced-motion. Use this skill when the user asks things like "style this component", "make this responsive", "add dark mode", "scope these styles", "fluid type scale", or any CSS authoring, refactoring, or review task — even when they don't explicitly say "CSS".
 metadata:
-  tags: css, modern-css, baseline, progressive-enhancement, accessibility, responsive-design, container-queries, cascade-layers, oklch
+  tags: css, modern-css, baseline, progressive-enhancement, accessibility, responsive-design, container-queries, cascade-layers, oklch, logical-properties
 ---
 
 # Modern CSS
@@ -225,6 +225,30 @@ button {
 
 ### Layout
 
+#### Flow-relative layout (`*-inline-*`, `*-block-*`, `cqi`/`vi`, `start`/`end`)
+
+- **Rule**: Use flow-relative properties (e.g. `padding-block-start`, `inset-inline`, `inline-size`), units (e.g. `cqi`, `cqb`, `vi`), and keywords (e.g. `text-align: start`) for layout.
+- **Constraint**: Avoid physical equivalents (e.g. `padding-top`, `width`, `cqw`, `vw`, `text-align: left`).
+- **Rationale**: Flexbox and grid already use inline/block axes; flow-relative layout keeps the rest of the box model consistent with them, and adapts automatically when writing mode or text direction changes.
+- **References**: [Logical properties and values on MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Logical_properties_and_values).
+- **Example**:
+
+```css
+/* avoid */
+.card {
+  padding-top: 1rem;
+  font-size: 20vw;
+  text-align: left;
+}
+
+/* prefer */
+.card {
+  padding-block-start: 1rem;
+  font-size: 20vi;
+  text-align: start;
+}
+```
+
 #### Container queries and units (`@container`, `cqi` etc.)
 
 - **Rule**: Use container queries and units (e.g. `cqi`, `cqb`) for responsive layouts.

src/components/what/what.astro

@@ -4,7 +4,7 @@ import Signpost from "../signpost/signpost.astro";
 
 <section class="what">
   <h2>What are the rules</h2>
-  <p>11 rules. 5 areas. Each with a constraint, rationale and code example.</p>
+  <p>12 rules. 5 areas. Each with a constraint, rationale and code example.</p>
   <ul>
     <li>
       <h3><a href="/skill#architecture">Architecture</a></h3>
@@ -34,9 +34,10 @@ import Signpost from "../signpost/signpost.astro";
     <li>
       <h3><a href="/skill#layout">Layout</a></h3>
       <p>
-        Container queries and units, intrinsic sizing with <code
-          >fit-content</code
-        > and <code>max-content</code>
+        Flow-relative properties, units and keywords, container queries and
+        units, and intrinsic sizing with <code>fit-content</code> and <code
+          >max-content</code
+        >
       </p>
     </li>
     <li>