DevSnips Documentation · Docs

DevSnips is an agent-first UI resource library: a structured collection of UI resources — Components, Sections, and Templates in React, Tailwind CSS, and Vanilla HTML/CSS/JS — that AI coding agents can discover, evaluate, install, adapt, and verify through machine-readable interfaces.

Start here based on what you are doing:

You are…	Read
An AI coding agent integrating DevSnips into a project	Introduction → Agent overview → CLI
A developer evaluating DevSnips	What is DevSnips → Architecture → Resources
A contributor adding a resource	Resource model → Creating resources → Validation
An integrator consuming the registry programmatically	Machine-readable overview → Registry schema
An AI coding agent (or developer) connecting DevSnips to an MCP client	DevSnips MCP
New to DevSnips and want a guided path	Tutorials
Theming a project or adapting a resource	Theming
Running or extending the repository tooling	Tooling → QA
Looking up a definition, path, or command	Reference → FAQ

Documentation map

docs/
├── introduction/        What DevSnips is, why it exists, how the pieces fit together
│   ├── what-is-devsnips.md
│   ├── philosophy.md
│   └── architecture.md
├── agents/              The agent lifecycle: discovery → selection → install → adapt → verify
│   ├── overview.md
│   ├── discovery.md
│   ├── resource-selection.md
│   ├── installation.md
│   ├── adaptation.md
│   └── validation.md
├── resources/           The resource model: types, technologies, file contracts
│   ├── overview.md
│   ├── components.md
│   ├── sections.md
│   ├── templates.md
│   ├── technologies.md
│   └── resource-structure.md
├── cli/                 The `devsnips` CLI: add, init, project context, troubleshooting
│   ├── overview.md
│   ├── add.md
│   ├── init.md
│   ├── configuration.md
│   └── troubleshooting.md
├── machine-readable/    The registry, metadata, and derived machine-readable surfaces
│   ├── overview.md
│   ├── registry.md
│   ├── metadata.md
│   └── schemas.md
├── mcp/                 The devsnips-mcp server: install, configure, connect, use
│   └── overview.md
├── tooling/             scripts/tooling/: validators, indexing, generators, utilities
│   └── overview.md
├── qa/                  The QA surface: validators, quality bars, browser harnesses
│   └── overview.md
├── tutorials/           Step-by-step walkthroughs
│   ├── getting-started.md
│   ├── install-and-customize.md
│   ├── build-a-landing-page.md
│   └── author-a-resource.md
├── contributing/        How to add resources: structure, metadata, agent files, validation
│   ├── overview.md
│   ├── creating-resources.md
│   ├── metadata.md
│   ├── agent-files.md
│   └── validation.md
├── reference/           Terminology, directory structure, CLI reference, conventions
│   ├── terminology.md
│   ├── directory-structure.md
│   ├── cli-reference.md
│   └── conventions.md
├── theming.md           Design tokens and the --ds-* contract per technology
└── faq.md

Canonical sources inside this repository

These documentation pages explain the system. The following are the authoritative sources; when this documentation and one of them disagree, the source wins:

library/ and each resource's metadata.json — what actually exists.
snippets-index.json — the generated machine-readable registry. Never quote resource counts from documentation; read them from the registry.
AGENTS.md (repository root) — the entry point for AI agents working on this repository.

AGENTS.md — agent-facing repository context (maintenance and modification tasks).
agents/resources/*.md — repository-side deep reference for agents modifying DevSnips itself.
agents/skills/devsnips/SKILL.md — the operational skill for agents consuming DevSnips.
docs/COMPONENT_STRUCTURE.md, docs/CONTRIBUTING.md — maintainer-facing structure specs.

Documentation map

Canonical sources inside this repository

Related entry points