CSS Pro-Tips gives your agent the CSS superpowers it needs: a clear policy for tokens, cascade control, static CSS, component-first layouts, accessibility, performance, and fallbacks that actually work.

Install | What your agent gets | Use it | Maintain it

Install

npm install css-pro-tips

Or add the repository through skills.sh:

npx skills add PyModel/css-pro-tips

Both paths give you the same installed artifact: a SKILL.md router plus a references/ folder the agent reads on demand. Copy both into the skill directory used by your agent. For Claude Code:

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

To update, run npm update css-pro-tips and copy both again. On macOS or Linux, you can instead symlink the skill directory to the installed package so updates apply automatically. Remove any copied css-protips directory first, or the link is created inside it:

rm -rf ~/.claude/skills/css-protips
ln -s "$(pwd)/node_modules/css-pro-tips" ~/.claude/skills/css-protips

What your agent gets

The skill starts with an execution contract: activation and negative triggers, validated inputs, gated execution, acceptance criteria, and failure recovery. Review mode and no dependency changes are the defaults. It then supplies CSS decisions, implementation guidance, and compatibility evidence.

Decision	Guidance
Architecture	Semantic design tokens, CSS custom properties, cascade layers, component scope, CSS Modules, Tailwind v4, and when runtime CSS-in-JS has a real reason to exist
Layout	Grid, Flexbox, intrinsic sizing, `aspect-ratio`, container queries, container units, style queries, and viewport fallbacks
Typography	Unitless line height, bounded `clamp()` type, `text-wrap`, `text-box`, font loading, subsetting, and fallback metrics
Color	Semantic themes, `oklch()`, `color-mix()`, `light-dark()`, relative-color fallbacks, and forced-colors behavior
State	`:focus-visible`, `:has()`, native form state, `:open`, popovers, customizable select, and real ARIA/data state
Motion	Native transitions, semantic disclosures, optional Animate.css presets, cancellation-safe lifecycle guidance, no-motion/print baselines, View Transitions, and scroll-driven animation limits
Accessibility	Focus, contrast, forced colors, reduced transparency, zoom, reflow, keyboard behavior, and semantic HTML
Performance	Static output, CSS delivery, critical CSS, fonts, `content-visibility`, and profiling instead of selector folklore
Tooling	CSS Modules, Tailwind v4, Sass/Less relevance, PostCSS, Autoprefixer, Browserslist, and Stylelint

It also includes a generated compatibility quick reference. Widely available features can be normal production CSS for evergreen targets. Newly available features need a browser-floor check. Limited availability features are optional enhancements with a viable baseline first.

Use it

Install or copy SKILL.md and references/ into your agent's skill directory.
Ask the agent to write, review, refactor, or modernize CSS.
The skill directs it to choose a policy and fallback before it chooses a feature.

It works with Claude Code, Codex CLI, Cursor, OpenCode, Pi, Kiro, and other tools that can read a SKILL.md file.

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 repository
OpenCode	`.opencode/skills/css-protips/SKILL.md`, plus `.claude/skills/` and `.agents/skills/`
Pi	`~/.pi/skills/css-protips/SKILL.md`
Kiro	`.kiro/steering/css-protips.md`, or `~/.kiro/steering/`

Cursor uses .mdc rules. Copy the file to .cursor/rules/css-protips.mdc, then add Cursor frontmatter for the CSS and component file types you want it to match.

Animate.css reference

The animation module references Animate.css without adding it as a package dependency. It covers the v4 class prefix, timing variables, single-owner imports, reduced-motion/print handling, cancellation and missing-CSS paths, production bundle checks, and migration/rollback.

The reference was reviewed on September 4, 2026 against the v4.1.1 source tag. That tag's license is MIT; the live website states a different license. Check the exact distributed artifact and the project's dependency policy before adopting it. This is a versioned reference, not a claim that 4.1.1 is the latest release.

Compatibility and evidence

Package version: 2.0.0
Last validation window: September 2026 (derived from the most recent claim reviewed_at in content/evidence.yml)
Compatibility model: MDN Baseline
Generated compatibility summary
Generated evidence index
Release history: CHANGELOG.md

Baseline reports browser support, not whether a rule is accessible, keyboard-usable, readable, or fast. The skill treats those checks as separate constraints.

Maintain it

SKILL.md is generated from the canonical files in content/. The repository keeps policy, capabilities, compatibility claims, sources, and concept modules separate so a source update does not turn into a manual edit across several tables.

npm run build
npm test
npm run pack:check

npm run build regenerates the SKILL.md router, references/, and the evidence index. npm test rejects stale generated output, invalid frontmatter, broken references, source-contract drift, release metadata drift, and unexpected package contents. It also checks the five-part execution contract, optional Animate.css guidance, versioned evidence, reduced-motion safeguards, and top-level vendor imports. GitHub Actions runs these checks with read-only repository permissions. The published npm package contains the router, its generated references, and normal package metadata; a word/heading ceiling test keeps the always-loaded router small.

The September 2026 review records confirmed findings, verification scope, and remaining limitations. Browser-compatibility claims for motion references were refreshed in that review; adding animation references does not revalidate every browser claim.

CSS Pro-Tips is maintained by elkaix under the PyModel organization.