Use CSS logical properties for i18n and RTL support
SkillDev toolslogical-properties is a skill for AI agents that reviews stylesheets, component styles, and responsive behavior for CSS logical properties. It checks that layouts adapt correctly for internationalization and right-to-left language support, and verifies rendered layout across breakpoints and interaction states before proposing a fix.
Available today. Use it from your connected AI after setup.
No other account needed.
Have an AI agent that can load agent skills.
Then ask your AI: use the Use CSS logical properties for i18n and RTL support skill
What your AI can do with it
- Review stylesheets for use of CSS logical properties
- Check component styles for i18n and RTL support
- Inspect responsive behavior related to logical properties
- Verify rendered layout across breakpoints
- Check layout across interaction states before proposing a fix
Getting started
- Have an AI agent that can load agent skills.
- Add the logical-properties skill to the agent's available skills.
- Ask the agent to review a stylesheet or component styles for CSS logical property usage.
- Provide the relevant breakpoints and interaction states so the agent can check rendered layout before proposing fixes.
What this skill tells your AI
The instructions your AI receives, as published by thedaviddias/front-end-checklist in skills/logical-properties/SKILL.md and read by ahel’s review.
Physical CSS properties (margin-left, padding-right) are hardcoded to screen directions. In right-to-left languages (Arabic, Hebrew, Persian), what should be margin-left becomes margin-right. Without logical properties, supporting RTL requires maintaining duplicate stylesheets or complex overrides with [dir=rtl] selectors. Logical properties handle this automatically.
Quick Reference
- Logical properties adapt to writing direction — margin-inline-start is left in LTR, right in RTL
- Replace left/right margin and padding with inline-start/inline-end equivalents
- Replace top/bottom with block-start/block-end equivalents
- Logical properties also work correctly for vertical writing modes
Check
Find all uses of margin-left, margin-right, padding-left, padding-right, border-left, border-right, left, right (as positioning) that should be converted to logical equivalents.
Fix
Convert physical direction properties to their CSS logical property equivalents for RTL and internationalization support.
Explain
Explain CSS logical properties, the difference between physical and logical directions, and how they enable RTL language support.
Code Review
Review stylesheets, component styles, and responsive states related to Use CSS logical properties for i18n and RTL support. Flag exact selectors, declarations, or breakpoints that violate the rule in the rendered UI.
For full implementation details, code examples, and framework-specific guidance,
see references/rule.md.
Rule page: https://frontendchecklist.io/en/rules/css/logical-properties
Signals
- GitHub stars
- 74k
- Forks
- 7k
- Last commit
- Aug 2026
Questions
- When should this skill be used?
- Use it when reviewing stylesheets, component styles, and responsive behavior related to using CSS logical properties for i18n and RTL support.
- What does the skill check before proposing a fix?
- It checks the rendered layout across breakpoints and interaction states before proposing a fix.
- Why use CSS logical properties?
- Logical properties let layouts adapt for internationalization and right-to-left languages, so designs work correctly in RTL contexts.
Advanced
- Item type
- skill
- Key
logical-properties- Source
- github.com/thedaviddias/front-end-checklist