CSS Expert Skill: Modern Flexbox, Grid and Container Queries

What is the css-expert skill?

Its first principle fits on one line: flexbox for one dimensional layouts, CSS Grid for two dimensional ones. The rest of this short SKILL.md expands that stance into a rulebook for responsive, accessible and maintainable styles.

The skill is one of the 60 bundled skills in OpenFang, an open source agent operating system written in Rust. The folder contains only SKILL.md, so there are no scripts or reference files to load.

The five principles

• Flexbox for rows or columns, Grid for rows and columns together.
• Custom properties for themes, spacing scales and any repeated value.
• Mobile first design with min-width media queries.
• Logical properties such as inline-start and block-end over left and bottom.
• Cascade layers with @layer instead of !important.

Techniques it names

• grid-template-areas for named regions, and auto-fit or auto-fill with minmax() for grids that need no media queries.
• Design tokens as custom properties on :root, such as --color-primary and --space-md.
• @container queries so a component responds to its parent, not the viewport.
• @keyframes animation built on transform and opacity.
• Transitions of 150 to 300ms on hover and focus-visible states.
• The :has() selector, plus :is() and :where() for controlled specificity.

Four patterns and four pitfalls

The patterns are a Holy Grail grid, fluid type with clamp(), aspect-ratio boxes and a dark mode toggle built from token swaps. The pitfalls warn against fixed pixel containers, arbitrary z-index stacking, unchecked vendor prefixes and deep preprocessor nesting.

Who the css-expert skill is for

Best for

• Plain CSS or preprocessor projects where the agent keeps reaching for pixel widths and !important.
• Responsive work. For a fuller treatment, see wshobson-responsive-design and owl-responsive-design.
• Teams that want token driven theming, which pairs well with dark-mode-design.

Not for

• Tailwind first projects. See tailwind-design-system for utility class conventions.
• Deep layout theory. The file is a compact summary and shows no worked code.

Use it with UiChemy

UiChemy Composer is an AI visual editor that writes real HTML, CSS and JS inside Elementor or Gutenberg. Use the skill to sharpen the layout rules your agent follows, then build the page in Figma or UiChemy Composer. Click Get Started on uichemy.com. For grid detail, see layout-grid.

How to install CSS Expert Skill: Modern Flexbox, Grid and Container Queries

curl -fsSL https://openfang.sh/install | sh

1. Install OpenFang

   Run the command above, the install line from the repository README. The README crate list shows openfang-skills with 60 bundled skills, and css-expert sits in that bundled folder. A PowerShell line is given for Windows.

2. Initialize and start

   Run openfang init and then openfang start. The README says a dashboard comes up on port 4200.

3. Or copy the folder

   To use the skill elsewhere, clone the repository and copy crates/openfang-skills/bundled/css-expert into the place your agent loads skills from. The README names no agent folder for that route.

4. Ask a CSS question

   Give the agent a layout task, such as a responsive card grid or a token based dark mode, and name the css-expert skill.

Check that it loaded

After installing, ask for a card grid with no media queries. A correct answer should use auto-fit and minmax(), gap for spacing and custom properties for tokens.

Read the official instructions on GitHub

Key features

• Flex versus grid ruleA clear decision rule: flexbox for one dimensional layouts, CSS Grid when rows and columns both matter, with flex-wrap and gap for fluid card layouts.
• Token friendlyCustom properties carry themes, spacing scales and repeated values, and scoped selectors or media queries override them.
• Mobile firstBase styles target small screens, and min-width media queries layer complexity as the viewport grows.
• Container queriesComponents are styled from the size of their parent container rather than the viewport, which keeps them reusable.
• Cascade control@layer declarations manage specificity without !important, and :is() and :where() group selectors predictably.
• Performance aware motionAnimations prefer transform and opacity for smooth, GPU accelerated results, with short transitions on interactive states.
• Parent aware stylingThe :has() selector styles a parent from its children.
• Fluid type and ratiosclamp() scales font sizes between a minimum and a maximum without breakpoints, and aspect-ratio replaces the padding-bottom hack.
• Logical propertiesInline and block properties keep layouts internationalization ready.
• Pitfall listAvoid fixed pixel containers, arbitrary z-index values, unchecked vendor prefixes and deeply nested preprocessor selectors.

Frequently asked questions