A collection of reusable AI agent skills by ART+COM. Each skill gives AI coding agents domain-specific knowledge so they can work effectively with our libraries and tools.
| Skill | Description |
|---|---|
| prototyping | Scaffold and deploy password-protected ART+COM web prototypes with GitLab, Netlify, and optional MQTT support |
| mqtt-topping | Connect to MQTT brokers, subscribe/publish messages, and query retained data over HTTP using mqtt-topping |
| figma-to-react | Translate a Figma design into React code that matches the target project's own styling, tokens, and components |
| skill-selection | Pick the most specific matching skill (project > org/custom > bundled plugin) and complete its required steps instead of stopping at "it renders" |
| react-pixel-overlay | Set up and use react-pixel-overlay, the PerfectPixel-style design overlay for verifying pixel-perfect React implementations against design exports |
| figma-sync | Track drift between Figma designs and generated code with the figma-sync CLI — baseline design + code hashes, report sync status per component, and gate CI on design drift |
| figma-preflight | Preflight a Figma file for design-to-code fidelity before codegen — detect source-fixable defects (unbound colors, collapsed surface tokens, substituted fonts) and report or repair them in Figma |
| react-transition-performance | Diagnose and fix janky view transitions in a React app — profile first to identify which frame phase is at fault, then apply the fix that phase actually needs |
Install skills with the skills CLI:
# List available skills in this repo
npx skills add artcom/agent-skills --list
# Install a specific skill
npx skills add artcom/agent-skills --skill mqtt-topping
# Install the prototyping skill
npx skills add artcom/agent-skills --skill prototyping
# Install all skills, to every detected agent
npx skills add artcom/agent-skills --all
# Install to specific agents only
npx skills add artcom/agent-skills --skill mqtt-topping -a claude-code
# Install globally (available across all projects)
npx skills add artcom/agent-skills --skill mqtt-topping -g
# Install all skills, globally, to Claude Code only
npx skills add artcom/agent-skills --skill '*' -a claude-code -g -yGotcha:
--allalways installs to every detected agent and ignores an-afilter — running--all -a claude-codestill fans out into every agent's folder. To scope "all skills" to one agent, use--skill '*'instead of--all, as in the last example above.
Skills are symlinked into your project's .agents/skills/ directory and become available to your AI agent automatically. Use --copy if you prefer independent copies instead of symlinks.
Confirm what's installed for one agent with npx skills ls -g -a claude-code. If a previous --all run left skills in the wrong agents' folders, clean them up and reinstall scoped:
# Remove all globally-installed skills from every agent
npx skills remove --skill '*' --agent '*' -g -y
# Then reinstall scoped to the agent you actually want
npx skills add artcom/agent-skills --skill '*' -a claude-code -g -yUpdate an installed skill to the latest published version with:
npx skills update prototyping -p -ySkills.sh updates from the original source; it does not define a per-skill version field. Use annotated, per-skill Semantic Versioning Git tags for immutable releases, for example prototyping-v1.0.0. Create a patch tag for fixes, a minor tag for backwards-compatible behavior, and a major tag for breaking workflow changes. Keep main as the latest version.
Version each skill independently with an annotated tag named <skill-name>-vMAJOR.MINOR.PATCH. The tag, not the repository-wide commit count, is the immutable release identifier. main remains the current development and installation source.
- Patch (
v0.1.1): Correct instructions, scripts, or examples without changing the expected workflow. - Minor (
v0.2.0): Add a backwards-compatible capability, integration, or optional workflow step. - Major (
v1.0.0): Remove or rename a skill, or change required workflow behavior, defaults, or integration contracts in a way that existing users must adapt to.
For each release:
-
Merge the skill change to
mainand validate the affected skill. -
Create an annotated tag on that exact commit, with a short release summary:
git tag -a prototyping-v1.0.1 -m "Release prototyping v1.0.1" git push origin prototyping-v1.0.1 -
Describe the user-visible change in the annotated tag message or the Git hosting release notes.
npm test verifies that every skill's metadata.version matches the newest heading in its
CHANGELOG.md. Add npm run check:bumped (which is --since main) to also require that a skill
whose SKILL.md changed has a changed metadata.version — the two ways versions have drifted here
are a bump that outran its changelog, and an edit that never bumped at all. Both run without
dependencies and are worth wiring into a pre-commit hook:
git config core.hooksPath .githooks # if you add oneskills-lock.json records a content hash for an installed copy. It helps detect whether a local copy matches its source, but it is not a release version. To identify a release, use the per-skill Git tag.
This repository hosts multiple skills side-by-side. Each skill lives in its own directory under skills/:
skills/
├── prototyping/
│ ├── SKILL.md
│ └── scripts/
├── mqtt-topping/
│ └── SKILL.md
└── <future-skill>/
└── SKILL.md
Every skill directory must contain a SKILL.md with YAML frontmatter (name, description) and markdown instructions. The description drives when the AI agent activates the skill — it should cover both what the skill does and the contexts in which it's useful.
Installing via npx skills add copies or symlinks a snapshot — editing skills/<name>/SKILL.md afterward doesn't affect what your agent sees. dev-link.sh symlinks a skill's folder straight from this repo into an agent's global skills directory, so edits are picked up immediately with no reinstall step:
./dev-link.sh link # link every skill to Claude Code
./dev-link.sh link prototyping # link just one skill
./dev-link.sh status # show what's currently linked
./dev-link.sh unlink prototypingWhen you're done, unlink and go back to the published version with npx skills update.
-
Create a new directory under
skills/<skill-name>/ -
Add a
SKILL.mdwith frontmatter and instructions:--- name: my-skill description: Short description of what this skill does and when to use it. --- # My Skill Instructions for the AI agent...
-
Optionally add supporting files (
scripts/,references/,assets/) -
Add an entry to the Available Skills table above
-
Commit and push
- skills.sh — Skill discovery and leaderboard
- Skills CLI docs
- Claude Code skills guide
- Why agent skills?
- The Complete Guide to Building Skills for Claude