Mastercss skill

Master CSS Agent Skill

Master CSS is a CSS language and framework that uses structured, native-like syntax in markup to generate CSS on demand. Unlike Tailwind CSS, it uses colon (:) as the property separator, pipe (|) for multi-value delimiters, and suffix-based selectors/conditions.

• Docs: https://rc.css.master.co/guide
• Repo: https://github.com/master-co/css (rc branch)
• NPM: @master/css@rc

When to Use This Skill

Load this skill when:

• Writing or editing HTML/JSX with Master CSS class names
• Creating or modifying master.css configuration files
• Migrating from Tailwind CSS to Master CSS
• Debugging Master CSS class name syntax issues
• Setting up Master CSS in a project (Vite, Next.js, Nuxt, React, Svelte, Vue, Angular, Astro, etc.)
• Working with design tokens, theme modes, responsive breakpoints, or cascade layers in Master CSS

Core Syntax Rules

1. Declaration Structure

Every class reads left to right: declaration<selector?>@condition

bg:blue              → background-color: blue
bg:blue:hover        → applies on hover
bg:blue:hover@md     → applies on hover AND viewport ≥ md
bg:blue@dark         → applies in dark mode

2. Property Syntax

• Full names: display:flex, background-color:blue
• Abbreviations: bg:blue (background-color), fg:white (color), r:lg (border-radius), p:md (padding), w:full (width)
• Multi-value: Use | as delimiter → p:2x|4x, b:1|solid|blue, shadow:0|2|8|rgba(0,0,0,.1)

3. Value Types

• x multiplier: p:4x = 16px (base-unit × N, default 4px)
• Keywords: w:full, w:fit, w:min, w:max
• Fractions: w:1/2, h:3/4
• Native units: h:100dvh, w:72ch, font:1.5rem
• CSS functions: w:clamp(16rem,50vw,40rem), scale(1.1), bg:rgb(23,95,233)
• Colors with opacity: bg:sky-50/.75, bg:sky-50/75%
• Semantic tokens: p:sm, m:md, gap:lg, text:3xl, r:lg, font:bold
• Negative: mt:-2x

4. State Selectors (suffix after value)

Full order: property:value<selector?>@condition — selector comes before query.

Pseudo-classes:

bg:blue:hover          bg:purple:active
outline:2|blue:focus-visible    b:red:invalid
opacity:.5:disabled    bg:indigo:checked

Structural shorthands:

:first  → :first-child       :last   → :last-child
:odd    → :nth-child(2n)     :even   → :nth-child(2n+1)
:rtl    → :dir(rtl)           :ltr    → :dir(ltr)

Combinators (target other elements relative to this one):

bg:blue>div       → direct child
bg:blue_div       → descendant (_ = space)
bg:blue+div       → adjacent sibling
bg:blue~div       → general sibling
bg:blue>*         → all direct children

Class/attribute/state:

bg:blue.active                → when .active class
bg:blue[disabled]             → when [disabled]
text:18[data-size=large]      → data attribute match
bg:white[open]                → <details> expanded
bg:blue[aria-checked=true]    → ARIA state

Attribute selectors: [attr], [attr=val], [attr^=val], [attr$=val], [attr*=val], [attr|=val], [attr~=val]

:has() and :not():

bg:blue:has(.active)          → contains matching child
fg:green:not(.active)         → excludes selector
bg:blue-20:hover:not(.active) → can stack

:of() — proprietary outside-in context:

hidden:of(.active)       ← ancestor matches
hidden:of(.active>)      ← parent matches
hidden:of(.active+)      ← previous adjacent sibling
hidden:of(.active~)      ← any preceding sibling

::scrollbar family: ::scrollbar, ::scrollbar-thumb, ::scrollbar-track, ::scrollbar-button, ::scrollbar-corner

size:6::scrollbar bg:gray/.2::scrollbar-thumb

Selector groups with ,:

content:'"'::before,::after
block>div,>span

For the complete state selectors reference, see state-selectors.md.

5. Conditional Queries (suffix with @)

Full order: declaration<selector?>@condition — query comes after selector.

Comparison operators:

hidden@sm              ≥ sm (shorthand)
hidden@>=sm            ≥ sm (explicit)
hidden@<=md            ≤ md
hidden@>sm             > sm
hidden@<md             < md
hidden@!md             NOT ≥ md (= @<md)
hidden@sm&<md          sm ≤ width < md

Height queries (prefix with h):

hidden@h<sm            height < sm
hidden@h>=sm&h<lg      height in [sm, lg)

Container queries:

container                        → sets container-type
flex-col@container(<=2xs)        → at container ≤ 2xs
container:card/inline-size       → named container
hidden@card(3xs)                 → named container query

Logical operators:

@!md              NOT (negate)
@<sm,>=lg         OR (any match)
@sm&<md           AND (all match)
@only(print)      ONLY keyword

Grouped conditions with ():

hidden@!(screen&(any-hover:hover))

Built-in tokens: @print, @screen, @landscape, @portrait, @motion, @reduce-motion, @dark, @light, @start, @base, @preset

Arbitrary conditions:

hidden@media(pointer:coarse)
bg:white/.8@supports(backdrop-filter(0px))
hidden@layer(modifiers)

For the complete conditional queries reference, see conditional-queries.md.

6. Typography

• text:<size> = all-in-one (font-size + line-height + letter-spacing): text:sm, text:3xl, text:5xl
• font:<size> = font-size only: font:lg, font:7vw
• font:<weight> = font:thin, font:light, font:regular, font:medium, font:bold, font:heavy

7. Transitions and Animations

~transform|.2s                         → transition
~background-color|slow|smooth          → named speed + easing
@fade-in|fast                          → animation
@rotate|slowest|linear|infinite        → animation with options

8. Group Syntax {...}

When several declarations share the same selector or query suffix, group them with {...} and write the suffix once:

<!-- Without grouping: repetitive suffix -->
<ul class="block>li:hover@md font:14>li:hover@md text:center>li:hover@md">

<!-- With grouping: suffix written once -->
<ul class="{block;font:14;text:center}>li:hover@md">

Inside {...}, separate declarations with semicolons. After the closing }, append selectors and conditional queries exactly as you would on a single declaration.

{font:mono;font-feature:mono}_:is(code,kbd,samp)
{bg:white;fg:primary}:hover@md
{opacity:0;scale(.9)}@start

9. Arbitrary Properties {property:value}

Use arbitrary properties for native CSS declarations without a built-in utility. Wrap in {}:

<div class="{block-size:5rem}">
<div class="{aspect-ratio:16/9}">
<div class="{scroll-behavior:smooth}">

Prefer built-in utilities when they exist; arbitrary properties are the escape hatch for platform features, experiments, and one-off declarations.

10. Variable Properties $name:value

Declare CSS custom properties with full selector and query support (unlike inline style=):

<div class="$color:red:hover $size:5rem@sm">

Generated CSS applies --color on :hover and --size at @sm. Useful for component internals: set a variable in one state, then let child declarations or native CSS consume the same custom property.

11. Unit Sensing

Some properties have an obvious default unit. Master CSS infers it from the property:

rotate(30)        → 30deg (not px)
@duration:200     → 200ms
font:48           → 48px → 3rem (pixel-to-rem conversion)

12. Important

<div class="bg:blue!">   → !important

Configuration (master.css)

The config file uses native CSS syntax inside @master blocks:

@master {
    root-size: 16;
    base-unit: 4;
    default-mode: light;
    mode-trigger: media;     /* media | class | host */

    /* Variables (design tokens) */
    --color-primary: #4f46e5;
    --screen-md: 768;

    /* Mode-specific tokens */
    @mode dark {
        --color-primary: #818cf8;
    }

    /* Custom at tokens */
    @custom-at motion-safe @media (prefers-reduced-motion: no-preference);

    /* Custom selector tokens */
    @custom-selector :interactive :is(:hover, :focus-visible);

    /* General utilities (layer: general, highest priority) */
    @layer general {
        .content-auto {
            content-visibility: auto;
            contain-intrinsic-size: auto 32rem;
        }
    }

    /* Main styles (components, on-demand) */
    .btn {
        @compose "inline-flex ai:center jc:center gap:xs px:md py:xs r:lg font:sm font:medium";
        background: var(--color-primary);
        color: white;

        &:disabled {
            @compose "opacity:.55 pointer-events:none";
        }
    }

    /* Keyframes */
    @keyframes fade-in {
        from { opacity: 0; }
        to { opacity: 1; }
    }
}

Split files: @import './styles/btn.css';

Cascade Layers (priority low → high)

base < theme < preset < main < general

Layer	Purpose
base	Resets and normalization
theme	Generated CSS custom properties
preset	Broad element defaults
main	Component styles (.btn, .card)
general	Utilities and local adjustments

Common Layout Patterns

<!-- Flexbox -->
<div class="flex ai:center jc:between gap:md">
<div class="flex-col flex:1">
<div class="inline-flex">

<!-- Grid -->
<div class="grid grid-cols:3 gap:md">
<div class="grid-cols:2@sm grid-cols:4@md">

<!-- Centering -->
<div class="flex ai:center jc:center">
<div class="grid place-content:center">

<!-- Page wrapper -->
<div class="w:full max-w:screen-lg mx:auto">

<!-- Positioning -->
<div class="rel">
    <div class="abs inset:0">

<!-- Responsive -->
<div class="w:full w:1/2@sm max-w:screen-lg@lg">
<div class="hidden@<md">
<div class="flex flex-col@container(<=2xs)">

Migrating from Tailwind CSS

Key mental model shifts:

1. : instead of - for property→value: bg:blue not bg-blue
2. | instead of _ for multi-value: p:2x|4x not p-2_4
3. Suffix instead of prefix for states/breakpoints: bg:blue:hover@md not md:hover:bg-blue
4. Explicit units via x multiplier: p:4x = 1rem (predictable, no abstract scale)
5. CSS config instead of JS config: master.css not tailwind.config.js
6. @compose instead of @apply
7. Use gap: instead of space-x- / space-y-

See Tailwind migration reference for detailed examples.

Dynamic Classes (for extract mode)

// ❌ Don't construct partial class names
const className = 'bg:' + (error ? 'red': 'green')

// ✅ Map states to complete class names
const className = error ? 'bg:red' : 'bg:green'

// ✅ CSS variables for dynamic values
<div className="font-size:$size@sm" style={{ '--size': size }}>

Installation Quick Start

# Core package
npm install @master/css@rc

# Framework integration (pick one)
npm install @master/css.vite@rc      # Vite
npm install @master/css.next@rc      # Next.js
npm install @master/css.nuxt@rc      # Nuxt.js
npm install @master/css.react@rc     # React
npm install @master/css.svelte@rc    # Svelte

Reference Documents

• State Selectors — Complete pseudo-classes, combinators, :of(), ::scrollbar, attribute selectors
• Conditional Queries — At tokens, comparison/logical operators, container queries, arbitrary conditions
• Master CSS vs Tailwind — Capability comparison, gaps, and migration readiness
• Syntax Cheatsheet — Full syntax quick reference with abbreviations and patterns
• Configuration — master.css setup, variables, modes, components, layers
• Tailwind Migration — Side-by-side comparison tables
• Integrations — Framework setup (Vite, Next.js, Nuxt, React, Svelte, etc.)