Frontend development skills
CSS and Layout Skills-md for Claude, Codex & AI Agents
Free SKILL.md files that teach Claude, Cursor and other AI agents to audit and fix CSS layout: flexbox and grid that overflow, rules that lose to other rules, and components that should respond to their own container. Each skill measures with a checker script first and changes code only in batches you approve.
All 12 skills in the set are published: flexbox and grid layout, cascade layers, container queries, fluid type and spacing, viewport units, modern CSS selectors, CSS nesting, CSS custom properties, CSS animations and transitions, CSS logical properties, CSS scroll-driven animations and CSS anchor positioning.
Start with Flexbox and Grid Layout if a page scrolls sideways, a column will not shrink or truncated text pushes a layout wider. Use Cascade Layers when a rule loses to another rule, and Container Queries when a component should respond to the space it is given.
Flexbox and Grid Layout
Fix horizontal overflow, 1fr blowouts, min-width 0 and truncation with a checker and a measuring snippet.
Cascade Layers and Specificity
Find why a CSS rule loses, rank the winner and migrate to @layer in approved batches.
Container Queries
Fix @container rules that never match, zero-size containers and cq units, and measure at two container widths.
Fluid Type and Spacing
Fix vw text and clamp() sizes that fail 500% zoom with a checker and a calculator that tests every value.
Viewport Units
Fix 100vh heroes and modals on mobile with svh, lvh and dvh, a checker, and a real-device probe.
Modern CSS Selectors
Fix :has(), :is() and :where() bugs with a linter, a specificity calculator and a Chromium match count.
CSS Nesting
Convert flat CSS to native nesting and fix &__suffix and ordering bugs with a linter and a computed-style equivalence check.
CSS Custom Properties
Fix undefined var(), bad fallbacks, cycles and ignored @property rules with a scanner, then edit flagged lines only.
CSS Animations and Transitions
Fix transition: all, layout animation, missing reduced motion and display fades with a scanner, then edit flagged lines only.
CSS Logical Properties
Fix margin-left, padding-right and Tailwind ml- classes for RTL with a scanner, then review overrides and transforms by hand.
CSS Scroll-Driven Animations
Fix animation-timeline that does nothing, shorthand resets, fill mode, named timeline scope and missing reduced motion with a scanner, then edit flagged lines only.
CSS Anchor Positioning
Fix tooltips and menus that sit in the wrong place, bind to the last item or clip at the edge with a scanner, then edit flagged lines only.
No skill matches that search. Clear it or choose All.
What is in this set
The set covers CSS problems that an agent can measure: layouts that overflow at phone widths, selectors that win or lose in the cascade, and components whose layout should depend on the space they are given. Each skill ships a read-only checker and a measuring step, so a fix is confirmed by output and not by a screenshot.
How to use these skills
Open a skill page, copy the file or download the .md and its checker script, and add the folder to your skills directory in Claude, Cursor or another agent. Then ask the agent to use the skill on a page or stylesheet.
Frequently asked questions
Who are the CSS and layout skills for?
They are for frontend developers, theme builders and anyone who reviews CSS written by an AI tool. Each skill reads your stylesheet with a checker, measures the page in a browser and edits in small batches you approve. They work on plain CSS and on the CSS that frameworks output.
Do these skills change my code without asking?
No. Each skill reports first and edits only after you approve a batch, on a branch under version control. It never pushes, merges or deploys. It measures local pages only, with invented data, and never prints page text.
Which CSS skill should I install first?
Install Flexbox and Grid Layout first if a page scrolls sideways or a column will not shrink. It covers the most common layout bug. Add Cascade Layers when a vendor style or an !important keeps winning, and Container Queries when a card or widget should change layout with its container.
