Install, integrate, and modify Lumi UI components. Use when tasks mention Lumi UI, shadcn-style component copying, Base UI render composition, `.root` scoping, animation/highlight utilities, or form wiring with React Hook Form and Zod.
npxskills add patrick-xin/lumi-ui-skill--skill lumiLoading…
Lumi is a distribution pattern (like shadcn/ui), not a runtime library. After components are copied, code is owned by the user project.
Pick mode.
bootstrap: set up a new project and install first components.integrate: add or modify components in an existing project.Run preflight.
components.json); add Lumi registry if missing..root div).@/components/ui/* wrappers and local conventions.Resolve knowledge (strict order).
references/official/llms.txt.node_modules/@base-ui/react — for version-accurate truth.Apply minimal, idempotent patches.
@/components/ui/* and @/lib/utils); merge changes or create adjacent files instead.shadcn add, do not use --overwrite; if prompted about an existing file, keep the existing file by default.Verify.
@/components/ui/*.asChild; uses Base UI render composition..root contract and baseline utilities present.@/components/ui/*; never raw Base UI in feature files.asChild; use Base UI render prop.text-foreground, bg-popover); no arbitrary color values.data-slot attributes on every wrapper.render/useRender/mergeProps semantics.button, ) unless the user explicitly requests that exact overwrite.references/playbook.md — primary execution guide: preflight, code conventions, CSS strategy, composition rules, patching, and final checks.references/forms-rhf-quickstart.md — RHF + Zod minimal wiring. Escalate to full reference when needed.references/official/llms.txt — full component index with doc URLs.references/official/introduction.md — Lumi overview, dual-layer architecture, customization levels.references/official/installation.md — step-by-step setup, CSS utility definitions.references/official/animation-guide.md — animation system, component compatibility matrix.references/official/highlights.md — hit-test pattern, highlight-on-active utility.utilsreferences/official/philosophies.md — architectural decisions and trade-offs.references/official/baseui/composition.md — render prop usage (replaces Radix asChild).references/official/baseui/customization.md — event handling, controlled components.references/official/baseui/merge-props.md — mergeProps utility for combining props.references/official/baseui/typescript.md — namespace types, Props/State patterns.references/official/baseui/use-render.md — useRender hook for custom render props.references/official/forms/basic.md — native form implementation with Base UI Field.references/official/forms/rhf.md — full React Hook Form integration guide.
Create or update AgentSkills. Use when designing, structuring, or packaging skills with scripts, references, and assets.
Create or update AgentSkills. Use when designing, structuring, or packaging skills with scripts, references, and assets.
Set up and use 1Password CLI (op). Use when installing the CLI, enabling desktop app integration, signing in (single or multi-account), or reading/injecting/running secrets via op.
CLI to manage emails via IMAP/SMTP. Use `himalaya` to list, read, write, reply, forward, search, and organize emails from the terminal. Supports multiple accounts and message composition with MML (MIME Meta Language).
Create or update AgentSkills. Use when designing, structuring, or packaging skills with scripts, references, and assets.
Create or update AgentSkills. Use when designing, structuring, or packaging skills with scripts, references, and assets.
Set up and use 1Password CLI (op). Use when installing the CLI, enabling desktop app integration, signing in (single or multi-account), or reading/injecting/running secrets via op.
CLI to manage emails via IMAP/SMTP. Use `himalaya` to list, read, write, reply, forward, search, and organize emails from the terminal. Supports multiple accounts and message composition with MML (MIME Meta Language).