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

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.