skills.rest
TheNordicOne
TheNordicOneCOMMUNITY
Explore all skills by this author →
GitHub

css-layout

Enforce logical CSS properties and correct Grid versus Flexbox usage for RTL-safe layouts.

9|Updated Jan 18, 2025
Search Tags:#css#i18n#flexbox#grid#scss#rtl#logical-properties
One-click install
npx skills add https://github.com/TheNordicOne/ngx-formbar --skill css-layout-thenordicone
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: css-layout
Source: https://github.com/TheNordicOne/ngx-formbar/tree/main/.claude/skills/css-layout
Command: npx skills add https://github.com/TheNordicOne/ngx-formbar --skill css-layout-thenordicone

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill prevents broken RTL/i18n layouts and inconsistent styling by enforcing a clear set of CSS layout rules that avoid physical-direction properties.

Core Features & Use Cases

  • Grid vs Flexbox guidance: Chooses the right layout system for single-axis vs two-axis alignment, with practical examples like form layouts and chip rows.
  • Mandatory logical properties: Forbids physical directional properties (like margin-left) and requires logical equivalents (like margin-inline-start) for RTL/i18n-safe styling.
  • Layout correctness safeguards: Disallows margin: auto pushing patterns and promotes proper parent-based placement (e.g., grid column strategies).
  • Axis-awareness: Clarifies block vs inline axes and how they behave across horizontal, vertical writing modes, and RTL.

Quick Start

Activate the css-layout Skill while editing your .scss or .css files to automatically enforce logical properties and correct Grid/Flexbox usage for RTL/i18n-safe layout.

Frequently Asked Questions about css-layout

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I make CSS layouts safe for RTL languages and internationalization?▼

Use logical CSS properties like `margin-inline-start` and `inset-inline` instead of physical directions like `margin-left` to ensure layouts adapt automatically to RTL and multilingual interfaces without breaking.

When should I use CSS Grid vs Flexbox for component layout?▼

Use CSS Grid for two-axis alignment requiring both row and column control, and Flexbox for single-axis alignment like chip rows or navigation bars, ensuring proper structural placement over hacky spacing tricks.

Why does using margin auto break my CSS layout in RTL interfaces?▼

Using `margin: auto` to push elements relies on physical directional logic and creates inconsistent spacing in RTL contexts. Use parent-based placement strategies like Grid columns or logical properties instead.

How do I convert physical CSS properties to logical properties in SCSS?▼

Replace physical properties like `margin-left` with logical equivalents such as `margin-inline-start`, and switch `width` to `inline-size` to maintain block and inline axis awareness across horizontal, vertical, and RTL writing modes.

What are logical CSS properties and how do they handle block and inline axes?▼

Logical CSS properties abstract layout directions into block and inline axes, allowing styles to function correctly across horizontal, vertical writing modes, and RTL languages without hardcoding physical directions like left or right.

Related Skills

Explore More Design & Creative Skills→
HafizFasihHafizFasih

multilingual-architect

Implement Urdu RTL i18n in Docusaurus with native configuration and CSS logical properties.

Community
Advanced
ancolemanancoleman
503

designing-layouts

Design responsive layouts with CSS Grid, Flexbox, and breakpoints.

Community
Advanced
shawn-sandyshawn-sandy

figma-design-tokens

Extract design tokens from Figma and generate CSS, SCSS, JSON, TypeScript, and DTCG files.

Community
Advanced
mkatoguimkatogui
3

i18n-and-rtl

Translate physical CSS to logical CSS for RTL and i18n support.

Community
Intermediate