Lumi Skill

This repo is the source for the lumi agent skill.

It tells coding agents how to add and modify Lumi UI components in real React projects without breaking local conventions.

Links

• Lumi UI
• Lumi UI GitHub
• Base UI

Install (Cross-Tool)

Use ~/.agents/skills/lumi as the shared skill path for Claude Code, Codex, Cursor, and other agent tools that support .agents.

1. Download the repository:

   git clone https://github.com/patrick-xin/lumi-ui-skill.git
   cd lumi-ui-skill

2. Install the skill folder to the shared path:

   mkdir -p ~/.agents/skills/lumi
   cp -R lumi-ui/. ~/.agents/skills/lumi/

3. Verify required files exist:

   • ~/.agents/skills/lumi/SKILL.md
   • ~/.agents/skills/lumi/references/

Agent-Assisted Install (No Manual Commands)

You can also ask a coding agent to install or update this skill directly from GitHub.

Example prompt:

Install (or update) the Lumi skill from https://github.com/patrick-xin/lumi-ui-skill

This works well across tools where the agent can run shell commands in your environment.

How To Use This Skill

1. Invoke it explicitly when needed:
   • Mention it in your prompt: use lumi
   • In UIs that support skill chips/commands: /skills then pick lumi, or type $lumi
2. You can also rely on implicit use:
   • Agents may auto-select lumi when your task matches the skill description.
3. If a specific tool does not auto-scan ~/.agents/skills, point that tool's skill setting to this path or mirror the same lumi folder into its tool-specific skills directory.

Repository Layout

.
├── README.md
└── lumi-ui/
    ├── SKILL.md
    └── references/
        ├── playbook.md
        ├── forms-rhf-quickstart.md
        └── official/
            ├── llms.txt
            ├── introduction.md
            ├── installation.md
            ├── animation-guide.md
            ├── highlights.md
            ├── philosophies.md
            ├── baseui/
            └── forms/

Skill Workflow

1. Choose mode: bootstrap or integrate.
2. Run preflight checks (components.json, global CSS utilities, .root, local wrapper conventions).
3. Resolve context in order: project code, Lumi docs, Base UI docs, then local installed types/source.
4. Apply minimal and repeat-safe patches.
5. Verify imports and composition rules.

Source of Truth

• /lumi-ui/SKILL.md
• /lumi-ui/references/playbook.md
• /lumi-ui/references/official/llms.txt