CSS Pro Max

This skill consolidates production-grade guidance for CSS and UI work on the modern web. It covers layout and responsive strategy, spacing and whitespace rhythm, design-system terminology, motion, typography, visual-detail polish, accessibility baselines, foundation CSS architecture, token systems, color systems, and z-axis layering rules. The guidance is opinionated: when there is a preferred default, it is stated.

Each concept has exactly one canonical reference. Other references link to it rather than restating it — open the canonical file when you need to change or cite a rule.

When to use

Apply this skill for any task that touches CSS, markup that implies CSS responsibilities, or the look-and-feel quality of a product:

• Writing CSS for a component, page, or design system.
• Choosing padding, gaps, section rhythm, gutters, or spacing scale steps.
• Choosing a layout strategy: intrinsic sizing, flex, grid, container queries, media queries, or viewport units.
• Naming components, tokens, or layers inside a design system.
• Designing animations, transitions, scroll-linked motion, or @keyframes.
• Configuring typography (font stack, kerning, line-height, text-wrap, fluid type, Japanese-specific features).
• Polishing interactive UI: border radius, shadows, icon animation, staggered enters, tabular numerals.
• Auditing a UI for accessibility.
• Deciding px vs rem, physical vs logical properties, shorthand vs longhand, viewport vs container units.