You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
{{ message }}
Repository navigation
Commit 132dff1
Browse filesBrowse the repository at this point in the historyBrowse files
Document install paths for all Agent Skills coding agents
Lead with npx skills add, list project/global paths for 27 agents including Pythinker Code, add Aider --read instructions, the Skill Grader badge, and agent keywords.
@@ -22,30 +23,74 @@ CSS Pro-Tips gives your agent the CSS superpowers it needs: a clear policy for t
22
23
23
24
## Install
24
25
26
+
The fastest path works for 75+ coding agents. [`skills`](https://github.com/vercel-labs/skills) detects the agents you have installed and copies the skill into each one:
27
+
25
28
```bash
26
-
npm install css-pro-tips
29
+
npx skills add PyModel/css-pro-tips # this project
30
+
npx skills add PyModel/css-pro-tips -g # every project (global)
31
+
npx skills add PyModel/css-pro-tips -g -a claude-code -a codex # specific agents
27
32
```
28
33
29
-
Or add the repository through skills.sh:
34
+
Or install from npm and copy it yourself:
30
35
31
36
```bash
32
-
npx skills add PyModel/css-pro-tips
37
+
npm install css-pro-tips
38
+
SKILL_DIR=~/.claude/skills/css-protips # pick your agent's path below
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:
43
+
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:
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:
49
+
### Where each agent looks
50
+
51
+
Install into a `css-protips/` folder under one of these directories. Project paths can be committed so your team shares the skill.
52
+
53
+
| Agent |`npx skills -a`| Project | Global |
54
+
|---|---|---|---|
55
+
| Claude Code |`claude-code`|`.claude/skills/`|`~/.claude/skills/`|
Paths come from the [`skills` supported-agents table](https://github.com/vercel-labs/skills#supported-agents), 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/<agent>.json`.
84
+
85
+
**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`.
93
+
49
94
## What your agent gets
50
95
51
96
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.
@@ -66,21 +111,11 @@ It also includes a generated compatibility quick reference. Widely available fea
66
111
67
112
## Use it
68
113
69
-
1. Install or copy `SKILL.md` and `references/` into your agent's skill directory.
114
+
1. Install the skill with `npx skills add`or copy `SKILL.md` and `references/` into your agent's skill directory.
70
115
2. Ask the agent to write, review, refactor, or modernize CSS.
71
-
3. The skill directs it to choose a policy and fallback before it chooses a feature.
72
-
73
-
It works with Claude Code, Codex CLI, Cursor, OpenCode, Pi, Kiro, and other tools that can read a `SKILL.md` file.
74
-
75
-
| Agent | Destination |
76
-
|---|---|
77
-
| Claude Code |`~/.claude/skills/css-protips/SKILL.md`, or `.claude/skills/...` for one project |
78
-
| Codex CLI |`~/.codex/skills/css-protips/SKILL.md`, or `.agents/skills/...` to commit it to a repository |
79
-
| OpenCode |`.opencode/skills/css-protips/SKILL.md`, plus `.claude/skills/` and `.agents/skills/`|
80
-
| Pi |`~/.pi/skills/css-protips/SKILL.md`|
81
-
| Kiro |`.kiro/steering/css-protips.md`, or `~/.kiro/steering/`|
116
+
3. The skill directs it to choose a policy and fallback before it chooses a feature, and to load only the references the task needs.
82
117
83
-
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.
118
+
It follows the [Agent Skills specification](https://agentskills.io/specification), so any client that reads a `SKILL.md` directory can use it.
0 commit comments