writing-vela-ui-components
Installation
SKILL.md
Writing vela-ui components
Choose the route
| Situation | Route |
|---|---|
| A kit component almost fits | Its props and the theme first (the theming-vela-ui skill) |
| A kit component needs other markup or behavior | npx @luxalgo/vela-ui add <name> --source: copies it into your project as app-<name>, yours to change; npx @luxalgo/vela-ui diff app-<name> shows upstream changes since |
| Nothing in the kit fits | A component of your own, in the shape below |
| You are working in the Vela repository | npm run new-component -- <name> and packages/vela-ui/AGENTS.md |
The shape of a component
One file per component: its declaration, variants, CSS and create<Name> function.
// Gauge: a value between 0 and 100 on a track, in the loss tone above 75.
import { css, defineComponent, defineStyles, h, t, variants, type VariantProps } from '@luxalgo/vela-ui';