Css Pro Tips

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

The fastest path works for 75+ coding agents. skills detects the agents you have installed and copies the skill into each one:

Or install from npm and copy it yourself:

Always copy both SKILL.md and references/. SKILL.md is a small router that is loaded on every activation; it links to references/*.md, which the agent reads only when a task needs them. To pick up updates automatically, symlink the package instead of copying it. Remove any copied directory first, or the link is created inside it:

Where each agent looks

Install into a css-protips/ folder under one of these directories. Project paths can be committed so your team shares the skill.

Paths come from the skills supported-agents table, which lists the rest of the 75+ agents. Pythinker Code's paths come from its skill loader. Kiro custom agents also need "resources": ["skill://.kiro/skills//SKILL.md"] in .kiro/agents/.json.

Aider has no skill discovery. Load the router as a read-only conventions file, and add the reference files a task needs:

To load it every session, add read: [node_modules/css-pro-tips/SKILL.md] to .aider.conf.yml.

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…