DevSnips Skill
The operational layer an AI coding agent loads before it touches UI: discover what exists, pick the smallest resource that fits the project, install it, verify it, adapt it — or build it normally and say so.
At a Glance
What the skill is
An agent that is asked for "a pricing section" has three options: invent one, guess at a library it half-remembers, or look up what actually exists. The skill exists to make the third option the cheap one. It is a set of operating instructions — when to reach for DevSnips, how to query it, which resource to pick, what to verify after installing, and how to fold the result into the project without breaking it.
It ships as one markdown file, SKILL.md, plus a references/ folder
holding the CLI reference, the registry schema, the schema definitions and an
accessibility/responsive checklist. Nothing in it runs on its own: the host agent reads it
and follows it.
- It is not a package. Installing the skill adds instructions, not code. Resources arrive later, when the agent runs the CLI.
- It is not an obligation. If the current registry has nothing that fits, the skill's own answer is to build the UI normally and say DevSnips was not used.
- It is not a cache of facts. Inventory questions are answered from a registry fetched in the same session — never from the skill's own text.
The lifecycle
The skill walks one path from request to report. Each stage has a page in the docs explaining what it is for and where it goes wrong.
- Understand the UI requirement component, section or template?
- Discover DevSnips registry and per-type indexes
- Search and match candidates tags, searchTerms, features, files
- Evaluate candidates description, features, styles, manifest
- Select the smallest sufficient resource never upscale, never downscale
- Install npx devsnips add <path>
- Verify the installation mandatory — five checks, not silence
- Inspect the installed implementation README, metadata, code
- Adapt to the host project the project wins over the resource
- Validate the result behavior, keyboard, responsive, motion
- Report what was used and what changed including what was not
Stages 6–10 are where most integrations fail, so they carry the most rules: a single non-interactive install command, five file checks before success may be claimed, an inspection pass before any edit, and a validation pass afterwards.
Where it reads from
Every surface below derives from the same generated inventory, so the agent can take whichever is cheapest to reach in its environment.
snippets-index.json- Every family and variant: tech, type, category, paths, descriptions, tags, features, styles, file manifests. The authoritative inventory.
agents/resources/indexes/- components-index.json, sections-index.json, templates-index.json — one type each, with id and a ready-to-run install command per variant.
library/- The canonical files on disk. Wins over the registry whenever the two disagree.
devsnips/config.json- In a project that already uses DevSnips: what is installed. Read before touching UI.
/mcp/- The same registry over MCP, when the host prefers tools to files.
Install
Adding the skill to a project is one command — it installs instructions, not resources.
$npx skills add github.com/sarthakbystander/DevSnips --skill devsnipsThe skill then drives the CLI whenever it decides a resource fits. Paths are registry paths, never guesses:
$npx devsnips add React/Components/Buttons/solid-button
$npx devsnips add Tailwind/Sections/AI-Product/agent-workflow/vercel
$npx devsnips add Vanilla/Components/Buttons/split-buttonpath shape<Technology>/<Category>/<Family>/<variant>/[style]— treat it as guidance; take the exact string from the registry, not from memory.destination- Files land under the project's
./devsnips/directory and nowhere else. Existing files are never overwritten. context- The first install creates
devsnips/config.jsonanddevsnips/AGENTS.md, and records the resource once the files are on disk. no CLI- With no network or no node, the agent reads
library/<registry path>/<file>directly and states that the CLI path was not used.
The verification contract
Installation success may not be reported until all five checks pass. A failed check is a failed installation, not a partial success — see Installation.
- The command exited successfully — check the exit code and the output; never infer success from silence.
- The destination exists: ./devsnips/<technology>/<category>/<family>/<variant>/.
- The files the registry manifest lists for that type and stack are present — minus metadata.json and preview.html, which are never installed.
- The files belong to the requested resource, not a sibling.
- No unexpected extra files appeared.
After adaptation the same discipline applies to the result: Validation runs the host project's build, typecheck and tests, then checks the resource's declared behavior — keyboard model, focus visibility, ARIA state, responsive widths and reduced motion — and reports only what was actually checked.
Ground rules
Seven rules the rest of the skill is read through.
- The current registry is authoritative. Never answer "does DevSnips have X", or quote counts, from memory or from documentation. Fetch the registry and read it in-session.
- The filesystem is authoritative for file content. Registry descriptions are indexed copies and can lag the source.
- Never guess a path. A path that is not in the registry cannot be installed.
- Match the host stack. Do not add React or Tailwind to a project that does not use them just to consume a resource.
- Select the smallest sufficient type. No template for a section request, no component promoted into a page.
- Verify every installation independently. Command success plus expected files on disk, every time.
- Never claim success you did not observe. Failed install, failed build, unverified integration — say so and fall back to a normal implementation.
Skill, MCP or CLI?
Three ways into the same registry. They are complementary, not competing:
Skill- Instructions the agent loads before writing UI. Decides whether to reuse, which resource, and what must be verified.
MCP- A read-only stdio server exposing four tools —
list_facets,search_resources,get_resource,get_resource_file— for hosts that query through tools instead of files. DevSnips MCP. CLI- The installer.
npx devsnips addresolves a registry path and writes the files into the project. CLI docs.
A session typically uses all three: the skill sets the policy, the MCP server or the registry answers the query, and the CLI performs the install.
Package
- skill
devsnips- version
1.0.1- contents
SKILL.md+references/(CLI reference, registry schema, schemas, accessibility/responsive checklist)- path
agents/skills/devsnips/- license
MIT, same repository as the CLI and the library- GitHub
- agents/skills/devsnips
Documentation
The contract behind each stage, page by page:
- Agents — overview — the lifecycle and the ground rules
- Discovery — every surface an agent can query
- Resource selection — the selection ladder
- Installation — what the CLI does and what to verify
- Adaptation — turning a resource into project code
- Validation — proving the integration works