Teach your agent Lumora
One small download turns a coding agent into a Lumora specialist. The skill carries our composition recipes, the motion language, the token system, and the complete component catalog — so when you ask for a landing page or a dashboard, the agent composes it from the real library instead of improvising.
Three markdown files, zipped. No build step.
Install it
Two ways in, both under a minute — pick where the skill should live.
Pick a destination
Unzip into your skills directory — globally for every project, or per-project alongside the code.
Unzip it there
terminal — global (all projects)unzip lumora-builder-skill.zip -d ~/.claude/skills/ # → ~/.claude/skills/lumora-builder/SKILL.mdterminal — per-project (this repo only)unzip lumora-builder-skill.zip -d .claude/skills/ # → .claude/skills/lumora-builder/SKILL.mdJust ask
Next time you ask for a page — “build a pricing section with Lumora” — the skill triggers automatically and the agent composes from the real catalog.
Commands & prompts
Once the skill is loaded you talk to your agent in plain English — Ask your agent — and it reaches for the right components and the real CLI commands under the hood to install their source.
Build me a landing page with Lumora
Composes Navbar → Hero → FeatureBento → Pricing → Testimonials → Faq → CtaBanner → Footer, with the lumen owned by the Hero above the fold.
Create a dashboard shell with Lumora
Frames a Sidebar + Topbar around a SpotlightCard + NumberTicker stat row and AnimatedTabs, with the command menu on ⌘K.
Add an AI docs page using Lumora
Wraps prose in SelectionToolbar, wires CommandMenu for search, and floats a ChatWidget bottom-right — all handlers left backend-agnostic.
Make a pricing section with a monthly/yearly toggle
Drops in the Pricing block with its period switch, and lets one highlighted tier carry the lumen.
Use Lumora's motion language here
Routes every interaction through springs.snap / drift / glide so the screen settles as one body — no custom physics.
Recolor this to the dusk accent
Overrides --lm-accent and --lm-glow to the secondary dusk tones; nothing hardcodes hex, so the retheme is one variable.
Which Lumora component fits a testimonials wall?
Consults the catalog and points you at the Testimonials block (or Marquee for a scrolling logo wall) with its import path.
Wire a ChatWidget to my streaming endpoint
Returns an AsyncIterable<string> from onSend so chunks stream into the assistant bubble — typing indicator and scroll handled.
What’s inside
Three markdown files the agent reads on demand. Nothing executes.
SKILL.md
Composition & motion rules
How pages are assembled and how they move: which block owns each section, the one-lumen-per-viewport rule, and the three named springs every interaction settles on.
references/component-catalog.md
The full catalog
Every component, block, and AI surface with its import path and the props that matter — the same names the registry and CLI use, so nothing is guessed.
references/page-recipes.md
Ready page recipes
Copy-pasteable JSX skeletons for a full landing page, a dashboard shell, and an AI-enhanced docs page. Swap the copy, keep the physics.
How it works
Skills are plain instruction folders. When a request matches the skill’s description — building screens with Lumora — the agent loads SKILL.md and pulls in the reference files as it needs them. Nothing in the zip executes: it’s markdown the agent reads, which also means it works with any agent that supports the skills format. The catalog mirrors the component gallery, so what the agent builds is what you see here.