css-pro-tips

---

Why it exists

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.

What's inside

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

Quick install

npm install css-pro-tips

Then 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.

Agent install paths

Claude Code

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.

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

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 a repo-local Claude or Codex install can be reused.

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.

Cursor

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.mdc

Add 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

Kiro uses steering files:

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

Use ~/.kiro/steering/ for a global install.

Updating

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

To track this repo directly on macOS or Linux:

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

Verification

• Current package version: 1.1.1
• 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.

Contributing

Pull requests are welcome. When adding or changing a modern CSS claim:

1. Cite the Baseline status or compatibility source.
2. Keep fallbacks for limited or audience-dependent features.
3. Put superseded tricks in the modernization section instead of deleting useful history.
4. Keep examples small enough for an agent to reuse without cargo-culting a whole component.

Maintainer

Created and maintained by Mohamed Elkholy (elkaix) under the Pythoughts Labs organization.

License

MIT © 2026 Mohamed Elkholy.