Run the command
Open a terminal anywhere and run the installation command shown above.
AI-native UI
Give your AI the Lumen design system.
A portable Agent Skill that teaches coding assistants how to select, compose, theme, and verify Lumen components across web and native applications.
YOU
Build a focused settings screen with Lumen.
$lumen-uiFramework · components · tokens · accessibility
On-system implementation
- Install
- 1 command
- Targets
- 6
- Format
- SKILL.md
Open Agent Skills
Install once from the repository
The standard skills CLI discovers the canonical skill in Lumen’s GitHub repository and installs it into the AI coding tools you select.
npx skills add santi020k/lumen --skill lumen-uinpx skills add santi020k/lumen --skill lumen-uiCodexClaude CodeCursorGemini CLIGitHub CopilotWindsurfand other Agent Skills clients
1 2 Choose your AI tools
Follow the installer prompts and select each compatible coding tool you use.
3 Open your application
Open the project in that tool and ask for Lumen by name or invoke $lumen-ui explicitly.
Choose the application target
One skill, six Lumen adapters
Open the application folder in your AI coding tool and name the platform in the request. The skill keeps the existing framework and selects the corresponding public package.
Astro
@santi020k/lumen-astroReact
@santi020k/lumen-reactWeb Components
@santi020k/lumen-elementsReact Native
@santi020k/lumen-react-nativeSwiftUI
LumenUIJetpack Compose
lumen-composeUse $lumen-ui to build an accessible account settings screen in this Astro app.
Use public Lumen components, load the stylesheet once, and mount UIPrimitives once at the root.Use $lumen-ui to build this screen in the existing React Native app.
Use @santi020k/lumen-react-native, one LumenProvider, and native accessibility states.Use $lumen-ui to build this screen in SwiftUI.
Use the LumenUI package, preserve native navigation, and support Dynamic Type and VoiceOver.Use $lumen-ui to build this screen with Jetpack Compose.
Use the lumen-compose module and LumenTheme, and preserve TalkBack and native state behavior.The skill and optional MCP server support all six targets. MCP provides live component contracts for web, React Native, SwiftUI, and Jetpack Compose; the agent can still verify APIs from the installed package when a project uses a different version.
Built for implementation
From product intent to Lumen code
The skill supplies the durable workflow. Current component details can come from the installed packages, the Lumen CLI, documentation, or the optional MCP server.
- 01
Understand the app
The skill detects the web or native target and preserves the project’s architecture.
- 02
Use real contracts
It retrieves current components, props, tokens, and rules instead of inventing a parallel UI system.
- 03
Compose and verify
It maps product intent to accessible Lumen primitives, then checks the edited surface.
The skill
Gives any compatible agent Lumen’s framework choices, design language, component-selection heuristics, accessibility guardrails, and completion checklist.
View SKILL.mdThe MCP server
Adds live component search, real source and prop lookup, tokens, and agent rules. Use it with the skill for the richest AI-native Lumen workflow.
Connect the MCP serverTry it
Invoke Lumen in the request
Explicit invocation is useful when several design or framework skills are installed. The skill can also trigger automatically when the task names Lumen.
Use $lumen-ui to build an account settings page in this app.
Keep the current framework and data flow, use Lumen primitives and tokens,
and include validation, loading, success, and platform-native accessibility states.Use $lumen-ui to build an account settings page in this app.
Keep the current framework and data flow, use Lumen primitives and tokens,
and include validation, loading, success, and platform-native accessibility states.