CSS Pro-Tips

A source-checked modern CSS skill for AI coding agents.
Drop one file into Claude Code, Codex, Cursor, Pi, OpenCode, Kiro, or anything else that reads SKILL.md, and the agent writes CSS against what browsers actually support today instead of what was true in 2018.

Install | What's inside | Where the file goes | Verification

---

Why it exists

Ask an agent for CSS and you often get a mix of good habits and museum pieces: float clearfixes, padding-hack aspect ratios, 100vh that breaks on mobile Safari, blanket resets, hover-only interactions, and experimental properties used with no fallback.

This package gives the agent one reference to check against. Every compatibility claim in it is bucketed by MDN Baseline status and links back to MDN, web.dev, Can I use, or the spec. Features with limited support are wrapped in @supports rather than assumed.

What's inside

One file: 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, but check your audience first	text-wrap, light-dark(), @scope, @starting-style, anchor positioning, field-sizing, container style queries, :open, text-box-trim
Limited availability	Enhancement only, never load-bearing	accent-color, scroll-driven animations, interpolate-size, calc-size(), typed attr(), customizable <select>, shape()
Modern additions	Newer tricks with their caveats attached	@property, container units, popovers, scrollbar-gutter, content-visibility, View Transitions, custom highlights
User preferences	Accessibility defaults the agent should apply	prefers-reduced-motion, prefers-contrast, forced-colors, prefers-reduced-transparency
Tailwind v4	How the patterns map onto v4's CSS-first config	@theme, @utility, @custom-variant, native layers
Modernization guide	What replaced the old advice	padding-ratio boxes, max-height disclosure, global owl selectors, strict local() fonts

Install

npm install css-pro-tips

Then copy SKILL.md into your agent's skill directory. For Claude Code:

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

If you would rather not use npm, download SKILL.md and copy it to the same place.

To update later, run npm update css-pro-tips and copy the file again. On macOS or Linux you can symlink it once and skip the copying:

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

Where the file goes

Agent	Destination
Claude Code	~/.claude/skills/css-protips/SKILL.md, or .claude/skills/... for one project
Codex CLI	~/.codex/skills/css-protips/SKILL.md, or .agents/skills/... to commit it to a repo
OpenCode	.opencode/skills/css-protips/SKILL.md, and it also reads .claude/skills/ and .agents/skills/
Pi	~/.pi/skills/css-protips/SKILL.md, then call /skill:css-protips in a session
Kiro	.kiro/steering/css-protips.md, or ~/.kiro/steering/ for a global install

Cursor is the odd one out, since it uses .mdc rules rather than SKILL.md:

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

Then add frontmatter at the top of that file:

---
description: Modern, Baseline-aware CSS patterns and pro-tips
globs: ["**/*.css", "**/*.scss", "**/*.{tsx,jsx,vue,svelte,astro}"]
alwaysApply: false
---

Verification

• Package version: 1.2.0
• Last validation window: August 2026
• Compatibility model: MDN Baseline
• Change history: CHANGELOG.md

Baseline tells you whether browsers support a feature. It says nothing about whether your CSS is accessible, keyboard-usable, readable at your contrast ratio, or fast on the devices your users own. Test for those separately.

Contributing

Pull requests are welcome. If you add or change a compatibility claim:

1. Cite the Baseline status or the compatibility source.
2. Keep the @supports fallback for anything with limited or audience-dependent support.
3. Move superseded tricks into the modernization section rather than deleting them, since knowing why an old pattern existed is useful.
4. Keep examples small. An agent should be able to reuse a snippet without pasting an entire component.

Maintainer

Built and maintained by Mohamed Elkholy (elkaix) under the PyModel organization.

License

MIT © 2026 Mohamed Elkholy.