Skills

A usage guide your AI assistant loads once, so it stops guessing at the catalog's conventions.

MCP & AI editors 2 min read

TL;DR · teach the model once

  • A skill is a markdown file your assistant reads before it works.
  • Get it with get_vuesax_skill; each editor keeps it in its own file.
  • Re-run it every so often; the catalog grows weekly.

Ours teaches the assistant how the catalog is organised, where files belong, how tokens and effects are wired, and which component to reach for.

Without it, an agent with MCP access still works — it just rediscovers the conventions every session, and sometimes invents its own.

Getting it

The skill ships through the MCP server. Ask once:

YouCall get_vuesax_skill and install it.

The tool returns the full markdown plus install instructions for Claude Code. For other editors, save the returned text to whatever file that editor reads as project instructions:

EditorWhere it goes
Claude Code~/.claude/skills/vuesax/SKILL.md
Cursor.cursor/rules/vuesax.mdc
VS Code (Copilot).github/copilot-instructions.md
Windsurf.windsurfrules
Zed.rules

Restart the editor afterwards — instruction files are read at startup.

What it covers

  • Connecting — the endpoint, the header, how to check the connection.
  • The tools — when to list, when to search, when to pull source, and why listing is free but pulling is metered.
  • File placement — where a component’s vs-*.js file (and any sibling tag it reuses) goes, and how to register it once.
  • Framework wiring — that the same custom element binds to React, Svelte, Vue or vanilla, with attributes for strings and DOM properties for objects/arrays.
  • Conventions — the shared size / variant / tone / radius prop language, the token-fallback pattern, the reduced-motion rule.

Why it changes the output

Without the skill

  1. Pulls four variants to compare them.
  2. Re-copies tokens.css with every component.
  3. Rewrites the props API to its own taste.
  4. Duplicates helpers per component.

With the skill

  1. Searches first, pulls one item and reuses it.
  2. Adds tokens.css once and stops.
  3. Keeps the props API intact.
  4. Puts shared helpers in one place.

Keeping it current

An agent with a stale skill, looking for a component that was renamed last month.

The catalog grows weekly. Re-run get_vuesax_skill every so often and overwrite the file — it is regenerated from the live catalog, so a stale copy is the main way an agent ends up looking for a component that has since been renamed.