Ask an LLM to write code against a UI library it half-knows and you already know how the demo ends: invented imports, props that don’t exist, event names borrowed from a different framework.
The model isn’t lying - it’s interpolating. It knows React fundamentals fine, but for a specific component library, “interpolating” is just a polite word for making things up. Without library-specific context LLMs often invent props, imports, and event names.
That is why we shipped a small repo of skills and context packs that give AI agents real, structured knowledge of SVAR UI components, so they can generate accurate code instead of guessing.
What a skill actually is
A skill - in the Claude Code, Cursor, agent sense - is a scoped bundle of instructions and reference material the agent loads on demand. It’s not a fine-tune, MCP server, or a plugin. Under the hood, a skill is mostly structured reference material: API docs, examples, and instructions the agent can pull in when needed.
For a UI library, that means: here’s the exact prop list for <Grid>, here are the events it emits, here’s how data flows in and out. No guessing.
What’s in the SVAR UI skill package
The package includes three skills for SVAR UI component library, one per each framework:
svar-vue- Vue componentssvar-svelte- Svelte componentssvar-react- React components
And a guides directory of flat markdown files - same knowledge, but as raw context you can paste anywhere.
Installing the skill
Pick your framework, run one command:
# Reactnpx skills add svar-widgets/skills --skill svar-react
# Sveltenpx skills add svar-widgets/skills --skill svar-svelte
# Vuenpx skills add svar-widgets/skills --skill svar-vuePrefer to copy the folder yourself:
git clone https://github.com/svar-widgets/skills.gitcd skillscp -r svar-vue ~/.claude/skills/That’s the install. Next time you ask the agent to build a SVAR datagrid or a Gantt chart, it loads the skill and writes against the real API.
One thing worth knowing: skills are loaded automatically only when the agent decides they match the task. Most of the time this works well, but not always. If you want to guarantee that a skill is used, invoke it explicitly — start your prompt with /svar-react in Claude Code or $svar-react in OpenAI Codex.
Which AI coding tools support SVAR skills?
SVAR skills work with AI coding agents that follow the SKILL.md convention (a standard way for agents to load structured context for specific tasks), including Claude Code, Cursor, OpenAI Codex CLI, and Gemini CLI.
In Cursor, you can place the skill folder directly in your project and reference it from a Cursor rule. In Claude Code and Codex, the skills are loaded automatically when the task matches.
The escape hatch: raw guides
If you’re using tools without native skill support — like ChatGPT, GitHub Copilot, or browser-based playgrounds — the guides folder provides the same context as plain markdown files you can paste or attach.
Two shapes:
svar-<framework>-<package>.md- one package, e.g.svar-vue-grid.mdsvar-<framework>-all.md- every package for the framework, in one file
Drop it into a prompt, attach it to a Cursor rule, pipe it into whatever takes file context.
Under the hood, skills are lightweight reference files containing component APIs, examples, and usage instructions, so they work anywhere that accepts file context.
Picking the right bundle
The full bundle is convenient but it isn’t free. Token-wise:
| Bundle | React | Svelte | Vue |
|---|---|---|---|
| All components | ~77k | ~73k | ~76k |
| Core | ~30k | ~28k | ~29k |
| Datagrid | ~10k | ~9.8k | ~10k |
| Gantt | ~10k | ~9.9k | ~10k |
| Filter | ~13k | ~13k | ~13k |
| Tasklist | ~4.4k | ~4.2k | ~4.3k |
Rule of thumb: if the agent only needs one component, use the per-package file. The full bundle pays off when the agent has to reason across widgets at once - wiring a toolbar, a filter, and a grid together - and you don’t want it loading three files in a row.
With skills this trade-off is mostly irrelevant; the loader pulls in the slice it needs. The token math matters most for the raw-context path, where you’re pasting the file in by hand.
Why this beats prompting harder
You can keep telling the model “the prop is called data, not items” every session. Or you can put the API in a file once and let the agent read it. The second one scales. The first one doesn’t.
Skills aren’t magic - they’re just a place to put the knowledge the model is missing, with a convention for loading it. And yet, when an agent ships a working app from a single prompt without breaking a thing, it still looks a lot like magic. Enjoy it!