Ovlira — Design skill for Claude Code

Ovlira 0.2

Ovlira is a local, agent-first UI prototyping and design-system toolkit for Codex and Claude Code. It gives coding agents a small catalogue of real Lit components, page recipes, design tokens, and static guardrails without sending an entire design system into context.

The prototype is CLI-first, deterministic, and local. It is not Figma, a visual editor, a hosted service, a backend, or an MCP server.

Why it exists

Agents are good at composing interfaces but often spend context inventing controls, miss accessible labels, or create inconsistent states. Ovlira makes the useful path short:

search → inspect → add → compose → check

Install and run

Requirements: Node.js 20.19+ and npm.

npm install
npm test
npm run build
npm run manifest

To install the published CLI:

npm install -g @ovlira/cli
ovlira --version

The npm package is scoped to the `ovlira` organization, but the executable remains `ovlira`. To use the CLI from this checkout after building:

npm install -g .
ovlira search "settings page" --json

Or call `node dist/cli/index.js` directly while developing this repository.

Agent workflow

ovlira search "settings page" --json
ovlira inspect page.settings --json
ovlira init ./workspace-ui
ovlira add page.settings --cwd ./workspace-ui
cd workspace-ui
npm install
npm run build
ovlira check --json

`search` returns at most eight compact results. `inspect` returns one full descriptor. `add` copies only the recipe's component source, token CSS, and a runnable example into the project. The generated project is ordinary Vite + TypeScript and can be changed locally.

For a catalogue overview, use `ovlira list` or `ovlira list --json`.

Catalogue

The initial catalogue contains:

• Components: ov-button, ov-input, ov-select, ov-badge, ov-card, ov-alert, ov-page-header, ov-empty-state, ov-data-table, and ov-application-shell.
• Recipes: page.settings, `page.sear