Agent skill

A short skill file that teaches your agent what devl is, when to use it, how to install pieces the right way, and how to borrow devl's patterns when a design brief is open-ended.

Install for Claude Code

From your project root (or use ~/.claude/skills to have it everywhere):

mkdir -p .claude/skills/devl && curl -fsSL https://devl.dev/skill/SKILL.md -o .claude/skills/devl/SKILL.md

Claude picks it up automatically when you build or restyle React UI.

Other agents

The skill is plain markdown, so it works anywhere an agent reads instructions. Save it as a Cursor rule, point to it from your AGENTS.md for Codex, or paste it into your agent's custom instructions. The per-agent pages show the exact commands.

https://devl.dev/skill/SKILL.md

What it teaches

What's in devl, and to look for a ready screen or block before building one.
How to search: the MCP server when it's connected, otherwise llms.txt and the raw source URLs.
How to install: coss ui once, then the shadcn CLI, then the named export.
coss ui conventions: Base UI's render prop, theme tokens for light and dark, springs that respect reduced motion.
How to use devl as inspiration: read a few relevant pieces and borrow layout, interaction details and restraint, without copying demo data.

It works best with the MCP server connected, so your agent can search and read pieces instead of guessing.