css-pro-tips

CSS Pro-Tips

A validated, Baseline-aware modern CSS skill for AI coding agents.

Drop it into Claude Code, Codex, Cursor, Pi, OpenCode, Kiro — or any agent that reads SKILL.md — and your agent writes idiomatic, browser-safe CSS instead of copy-pasted hacks from 2015.

Why this exists

Most CSS advice an agent has absorbed is a mix of timeless patterns and outdated hacks — float clearfixes, padding-bottom ratio boxes, 100vh mobile bugs, :focus rings on every mouse click. This skill gives the agent one curated file that:

• Keeps the evergreen tips that still hold up (resets, :not(), aspect-ratio, logical properties).
• Adds a Modern CSS section bucketed by MDN Baseline — :has(), container queries, @layer, subgrid, color-mix(), light-dark(), @scope, anchor positioning, scroll-driven animations, and more.
• Labels every modern feature as 🟢 Widely / 🟡 Newly / 🔴 Limited, with a graceful @supports fallback for anything not yet safe to ship unconditionally.

Every status claim was verified against MDN's per-feature Baseline data and the web-platform-dx/web-features dataset (last validated June 2026). Baseline is a browser-compatibility signal only — the skill still tells the agent to test accessibility, motion preferences, keyboard behavior, and contrast separately.

What's inside

A single self-contained skill: SKILL.md (skill name: css-protips).

Section	Covers
Evergreen tips	Resets, box-sizing inheritance, :not() navigation, aspect-ratio, :is(), intrinsic sizing, focus styling, mobile form fixes
Baseline 🟢 Widely	:has(), @container, native nesting, @layer, subgrid, color-mix(), logical properties, :focus-visible, clamp()
Baseline 🟡 Newly	text-wrap, light-dark(), @scope, @starting-style, contrast-color()
🔴 Limited	accent-color, scroll-driven animations, field-sizing, anchor positioning — all with @supports gates
Modernize older tips	When to retire the padding-hack ratio box, max-height sliders, * + * owl, local() fonts

Install

The fastest path is npm — it fetches the skill into node_modules/css-pro-tips/, then you copy SKILL.md into your agent's skills directory.

npm install css-pro-tips

Then pick your agent below. (No npm? Just download SKILL.md directly and copy it into the same path.)

Claude Code

mkdir -p ~/.claude/skills/css-protips
cp node_modules/css-pro-tips/SKILL.md ~/.claude/skills/css-protips/

Project-scoped instead? Use .claude/skills/css-protips/SKILL.md in your repo. Restart Claude Code; it auto-discovers the skill by its frontmatter.

OpenAI Codex CLI

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 instead. Codex recognizes any directory containing a file named exactly SKILL.md. (docs)

OpenCode

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 if you've already installed for Claude Code or Codex in the same repo, OpenCode picks it up with no extra step. (docs)

Pi (@earendil-works/pi-coding-agent)

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. (docs)

Cursor

Cursor uses rules (.mdc), not SKILL.md. Reference the skill from a rule so Cursor loads it on CSS work:

mkdir -p .cursor/rules
cp node_modules/css-pro-tips/SKILL.md .cursor/rules/css-protips.mdc

Then add this frontmatter to the top of .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

Kiro uses steering files (plain markdown):

mkdir -p .kiro/steering
cp node_modules/css-pro-tips/SKILL.md .kiro/steering/css-protips.md

Use ~/.kiro/steering/ for a global, all-workspace install. (docs)

Any other agent

The skill is plain Markdown with YAML frontmatter. Point your agent's instruction file (AGENTS.md, a system prompt, a rules file) at SKILL.md, or paste its contents in. The .agents/skills/ and .claude/skills/ conventions are honored by a growing set of agents.

Updating

npm update css-pro-tips
# then re-copy SKILL.md into your agent's skills dir

On a Mac/Linux box, symlink instead of copy to stay current automatically:

ln -sf "$(pwd)/node_modules/css-pro-tips/SKILL.md" ~/.claude/skills/css-protips/SKILL.md

Credits

• Inspired by the community classic AllThingsSmitty/css-protips (CC0-1.0, public domain) — the evergreen tips trace back to that collection.
• Baseline statuses sourced from MDN, web.dev/baseline, and web-platform-dx/web-features.

This skill is original work: a Baseline-validated, agent-oriented reimagining with a curated Modern CSS section and modernization guidance not present upstream. See SOURCE.txt for the full provenance trail.

Contributing

PRs welcome. When adding or changing a modern-CSS claim, cite the Baseline status (with a source) so the file stays verifiable. Keep the evergreen tips evergreen — if a tip is superseded by a native feature, add it to the "Modernize older tips" section rather than deleting the original.

Author

Mohamed Elkholy — @mohamed-elkholy95

License

MIT © 2026 Mohamed Elkholy