A source-validated modern CSS skill for AI coding agents.
Give Claude Code, Codex, Cursor, Pi, OpenCode, Kiro, or any SKILL.md-compatible agent a better CSS compass: current browser support, safer fallbacks, and practical patterns that replace old hacks with native CSS.
Quick install | What's inside | Agent install paths | Verification
AI agents often mix timeless CSS patterns with outdated advice: float clearfixes, padding-ratio boxes, 100vh mobile bugs, blanket resets, pointer-only interactions, and unguarded experimental features.
css-pro-tips gives an agent one curated CSS reference that is:
- Baseline-aware: modern CSS is bucketed by MDN Baseline status and support risk.
- Fallback-first: limited or audience-dependent features ship behind
@supports. - Practical: reset, layout, selector, focus, media, token, and modernization patterns are written as usable guidance.
- Source-bound: compatibility claims link back to MDN, web.dev Baseline, Can I use, or the relevant web-platform reference.
A single self-contained skill: SKILL.md.
| Layer | What the agent gets | Examples |
|---|---|---|
| Evergreen CSS | Patterns that still hold up | box-sizing, :not(), :is(), :where(), aspect-ratio, gap, logical properties |
| Baseline widely available | Normal production CSS for evergreen targets | :has(), container queries, native nesting, @layer, subgrid, color-mix(), clamp() |
| Baseline newly available | Useful features that still need audience checks | text-wrap, light-dark(), @scope, @starting-style, anchor positioning, field-sizing |
| Limited availability | Enhancement-only features | accent-color, scroll-driven animations, interpolate-size, calc-size(), discrete transitions |
| Modern additions | Current CSS tricks with caveats | @property, container units, popovers, scrollbar-gutter, content-visibility, View Transitions, custom highlights |
| Modernization guide | Replacements for older tips | padding-ratio boxes, max-height disclosure, global owl selectors, strict local() fonts |
npm install css-pro-tipsThen copy SKILL.md into your agent's skill directory:
mkdir -p ~/.codex/skills/css-protips
cp node_modules/css-pro-tips/SKILL.md ~/.codex/skills/css-protips/No npm? Download SKILL.md directly and place it in the same destination.
mkdir -p ~/.claude/skills/css-protips
cp node_modules/css-pro-tips/SKILL.md ~/.claude/skills/css-protips/For project-scoped use, place it at .claude/skills/css-protips/SKILL.md.
mkdir -p ~/.codex/skills/css-protips
cp node_modules/css-pro-tips/SKILL.md ~/.codex/skills/css-protips/For a team repo, check it into .agents/skills/css-protips/SKILL.md. Codex recognizes any directory containing a file named exactly SKILL.md.
mkdir -p .opencode/skills/css-protips
cp node_modules/css-pro-tips/SKILL.md .opencode/skills/css-protips/OpenCode also reads .claude/skills/ and .agents/skills/, so a repo-local Claude or Codex install can be reused.
mkdir -p ~/.pi/skills/css-protips
cp node_modules/css-pro-tips/SKILL.md ~/.pi/skills/css-protips/Invoke it in a session with /skill:css-protips.
Cursor uses rules (.mdc) instead of SKILL.md. Copy the skill into a rule file:
mkdir -p .cursor/rules
cp node_modules/css-pro-tips/SKILL.md .cursor/rules/css-protips.mdcAdd this frontmatter to .cursor/rules/css-protips.mdc:
---
description: Modern, Baseline-aware CSS patterns and pro-tips
globs: ["**/*.css", "**/*.scss", "**/*.{tsx,jsx,vue,svelte,astro}"]
alwaysApply: false
---
Kiro uses steering files:
mkdir -p .kiro/steering
cp node_modules/css-pro-tips/SKILL.md .kiro/steering/css-protips.mdUse ~/.kiro/steering/ for a global install.
npm update css-pro-tips
# then re-copy SKILL.md into your agent's skills dirTo track this repo directly on macOS or Linux:
ln -sf "$(pwd)/node_modules/css-pro-tips/SKILL.md" ~/.codex/skills/css-protips/SKILL.md- Current package version:
1.1.0 - Last documented validation window: July 2026
- Compatibility model: MDN Baseline
- Change history:
CHANGELOG.md
Baseline is a browser-compatibility signal. It does not replace accessibility, keyboard, contrast, motion, performance, or project-specific browser testing.
Pull requests are welcome. When adding or changing a modern CSS claim:
- Cite the Baseline status or compatibility source.
- Keep fallbacks for limited or audience-dependent features.
- Put superseded tricks in the modernization section instead of deleting useful history.
- Keep examples small enough for an agent to reuse without cargo-culting a whole component.
Inspired by the community classic AllThingsSmitty/css-protips (CC0-1.0, public domain). This project is an original, Baseline-validated, agent-oriented reimagining with a modern CSS section and explicit source trail.
Created and maintained by Mohamed Elkholy (elkaix) under the Pythoughts Labs organization.
MIT © 2026 Mohamed Elkholy.