If your coding assistant struggles with CSS, this is exactly why we created this skill.

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: one SKILL.md file. Copy it into the skill directory used by your agent. For Claude Code:

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

To update, run npm update css-pro-tips and copy the file again. On macOS or Linux, a symlink keeps the local skill pointed at the installed package:

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

What your agent gets

The skill starts with the decisions that shape good CSS, then supplies 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	Ordinary transitions, disclosures, @starting-style, allow-discrete, View Transitions, scroll-driven animation limits, and reduced-motion policy
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

1. Install or copy SKILL.md into your agent's skill directory.
2. Ask the agent to write, review, refactor, or modernize CSS.
3. 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.

Compatibility and evidence

• Package version: 1.3.0
• Last validation window: August 2026
• 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 SKILL.md and the two maintainer projections. npm test rejects stale generated output, invalid frontmatter, broken references, source-contract drift, release metadata drift, and unexpected package contents. The published npm package still contains only the one-file agent interface plus normal package metadata.

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

License

MIT © 2026 elkaix