CSS Master

Download SKILL.mdGet Murage How skills work

Open source. macOS, Windows and Linux.

At a glance

What it is

Advanced CSS expertise covering Grid and Flexbox mastery, custom properties architecture, responsive design methodology, CSS methodology selection, animation performance, container queries, cascade layers, and specificity management.

A skill is a written procedure a bot loads when a job calls for it. This one is a single file, SKILL.md, and the whole file is on this page.

File: SKILL.md
Length: 505 lines1,782 words, about 9 min read
Category: Web developmentHTML and CSS
Level: Intermediate
License: Apache-2.0

More web development skills.

The full skill.

The whole file, exactly as it downloads. Read it before you rely on it.

SKILL.md

505 lines · 1,782 words

Download

CSS Master

Purpose

Provide expert-level CSS guidance for building maintainable, performant, and responsive user interfaces. This skill covers layout systems, architectural patterns, modern CSS features, and methodology selection for teams of any size.

Grid vs Flexbox Decision Framework

LAYOUT DECISION TREE:

Is the layout one-dimensional (row OR column)?
  YES -> Flexbox
  NO  -> Is it two-dimensional (rows AND columns)?
    YES -> Grid

Additional signals for Grid:
  - Content needs to align to a defined grid structure
  - Overlapping elements needed (grid-area overlap)
  - Template-based layout (named areas)
  - Item placement should be independent of source order

Additional signals for Flexbox:
  - Items should distribute along a single axis
  - Content size should drive layout
  - Simple centering needed
  - Navigation bars, toolbars, card rows

Put this skill to work.

Questions.

What is the CSS Master skill?

How much does it cost?

Nothing. It ships with Murage, which is open source. Your bots run on the AI plan you already have.

Can I change it?

Yes. Open it in Settings → Skills to read, edit or duplicate it. Skill Guard scans it again after every edit.

Give your first job to Murage.

Download the app, connect the AI you already pay for, and tell your Chief of Staff what needs doing. Plan on about ten minutes from install to a working team.

Download Murage

No account needed · Runs on the AI plan you already pay for

LAYOUT DECISION TREE: Is the layout one-dimensional (row OR column)? YES -> Flexbox NO -> Is it two-dimensional (rows AND columns)? YES -> Grid Additional signals for Grid: - Content needs to align to a defined grid structure - Overlapping elements needed (grid-area overlap) - Template-based layout (named areas) - Item placement should be independent of source order Additional signals for Flexbox: - Items should distribute along a single axis - Content size should drive layout - Simple centering needed - Navigation bars, toolbars, card rows

Factor	BEM	Utility-First (Tailwind)	CSS Modules	CSS-in-JS
Team size	Any	Any	Small-Medium	Small-Medium
Framework	Any	Any	React/Vue	React
Runtime cost	None	None	None	Variable
Learning curve	Low	Medium	Low	Medium
Component scoping	Convention	N/A (class collision safe)	Automatic	Automatic
Design system	Good	Excellent	Good	Excellent
SSR support	Full	Full	Full	Requires setup
Bundle size	Medium	Small (purge)	Small	Variable

CSS Master

More web development skills.

The full skill.

CSS Master

Purpose

Grid vs Flexbox Decision Framework

Put this skill to work.

Questions.

Give your first job to Murage.

Search murage.ai

CSS Master

More web development skills.

The full skill.

CSS Master

Purpose

Grid vs Flexbox Decision Framework

Put this skill to work.

Questions.

Give your first job to Murage.

Create a bot and use this skill.

Ask Ember to create the bot

Open the bot’s skills

Find CSS Master and switch it on

Ask the bot for the job

About this skill.

Grid Mastery

Flexbox Mastery

CSS Custom Properties Architecture

Token System

Responsive Custom Properties

Responsive Design Methodology

Mobile-First Breakpoint System

Fluid Typography

Container Queries

Cascade Layers

CSS Methodology Selection

Decision Matrix

BEM Naming Convention

Specificity Management

Specificity Hierarchy (Low to High)

Specificity Strategies

Animation Performance

Rules for Performant Animation

High-Performance Animation Patterns

Modern CSS Features Checklist

CSS Architecture Checklist

When to Use

Output Format

Example

Edge Cases