Skills

Skills that teach Claude Code, Cursor and other coding agents to build with LumioUI. The LumioUI skill is free; the 7 design tastes come with Pro, each grounded in screens we ship.

Skills

What your agent needs to use the kit.

Skill SKILL.md # LumioUI LumioUI is a React Native component library for Expo and bare React Native. Components and screens are copied into the project as source by `npx @lumioui/cli`, so they live in this repo and can be edited like any other file. Styling is NativeWind (`className`) on theme tokens; motion is Reanimated. ## 1. Before writing UI, look for it 1. Check what is already installed: `components/ui/<name>/` (components) and `screens/<flow>/` (screen templates). 2. Check the catalogue: https://lumioui.com/llms.txt lists every component, variant and screen with one line each. Read a component's props and examples at `https://lumioui.com/components/<name>.md`, a screen's at `https://lumioui.com/screens/<name>.md`. 3. Prefer composing LumioUI components over writing new ones. Write a new component only when nothing in the catalogue fits, and build it from the same tokens and motion rules below. ## 2. Install ```sh npx @lumioui/cli add button card input # free components npx @lumioui/cli add accordion-multiple # a variant: <family>-<slug> npx @lumioui/cli add pro/bottom-sheet # Pro components need the pro/ prefix npx @lumioui/cli add pro/ecommerce-checkout # Pro screens: pro/<flow>-<name> LumioUI How a coding agent finds, installs and uses LumioUI components and screens: the catalogue, the CLI, imports, theme tokens and accents, motion tokens, accessibility and doctor.

Design tastes

One core contract, then one per design language.

Pro Design taste Lumio taste The core contract every language extends: colour, type, motion and a whole-app checklist. Pro Design taste Editorial Reading and writing apps that lead with type: news, journals, learning. Pro Design taste Photo-first Apps where real photos carry the colour and a sheet rides over them. Pro Design taste Bento Live figures in mixed-size tiles: finance, health, wallets, storage. Pro Design taste Dark stage One lit thing in a dark room: music, video, camera, sleep, timers. Pro Design taste Liquid glass Photos, maps and footage fill the screen; navigation floats over them as glass. Pro Design taste Quiet utility Apps people scan and tick daily: tasks, calendar, mail, notes, orders.

Install

One command adds a skill to your project. Re-run it to update.

Add the free skillYour agent learns the catalogue, the CLI and the theme tokens.

npx @lumioui/cli skills add lumioui
Log in (Pro)Paste a licence key from your account. In CI, set LUMIO_LICENSE_KEY.

npx @lumioui/cli login
Add the core taste and a languagePick the design language that fits the screen you're building.

npx @lumioui/cli skills add lumio-taste lumio-taste-photo

Skills land in .claude/skills/ for Claude Code, .cursor/rules/ for Cursor, and a list in AGENTS.md for every other agent. CLI reference

Questions

What is a skill?

A Markdown file of instructions a coding agent reads when the task matches. The LumioUI skill tells the agent how to find, install and use components and screens; the design tastes tell it how to design them.

Which agents do they work with?

Claude Code, Cursor, and any agent that reads AGENTS.md (Codex, Copilot, Gemini CLI and others). npx @lumioui/cli skills add writes the Claude Code skill and the AGENTS.md entry, plus the Cursor rule when the project uses Cursor; choose with --agent.

Are they free?

The lumioui skill is free. The design tastes come with Pro ($15/month, $150/year or $299 once), installed with the same licence as Pro components: run npx @lumioui/cli login once. Pro accounts can also read and copy every taste on its page.

Do I need LumioUI installed?

The tastes work best with LumioUI, since they name the components and screen templates to use, but their design rules apply to any React Native app.