# CSS Pro Max > Comprehensive CSS and UI design guidance for responsive layout strategy, spacing rhythm, design-system terminology, animations/keyframes, typography (Japanese/English), visual polish, and accessibility baselines. Use this skill whenever the user asks about CSS architecture, layout behavior, component naming, motion decisions, readability tuning, interaction polish, or accessibility quality checks in web UI work, even if the request is abstract and not asking for CSS code directly. - Skill: `hrdtbs/css-pro-max` (Agent Skill, multi-file: 13 files) - Install (CLI): `npx skillmds@latest add hrdtbs/css-pro-max` - Raw SKILL.md: https://api.skillmd.com/api/skills/hrdtbs/css-pro-max/raw - Safety review: pending - Works with: Claude Code, Claude.ai, OpenAI Codex - Category: Design & Media - Author: hrdtbs (https://skillmd.com/u/hrdtbs) - Updated: 2026-09-17 - Page: https://skillmd.com/skills/hrdtbs/css-pro-max --- # 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. ## When not to use Skip this skill for pure backend logic, database schema work, API design decoupled from UI, non-visual scripts, or infrastructure and DevOps work. Decision rule: if the change affects how a feature looks, feels, moves, or is interacted with, open this skill. ## Core principles 1. **CSS is a suggestion, not a command.** Let the engine handle what it does well (intrinsic sizing, wrapping, auto-fit grids) before reaching for queries or fixed values. 2. **Keep an intrinsic baseline.** Responsive work starts with contracting/expanding behavior and flexibility; queries are escalation tools, not the default. 3. **Use the escalation order.** Static → intrinsic → container query → media query. Do not jump to media queries before exhausting intrinsic layout. 4. **Prefer logical properties where the layout primitive is logical.** Flex and grid already think in inline/block axes; match them. Stay physical where the spec is physical (transforms, backgrounds, media queries). 5. **Name by responsibility, never by appearance.** A `