Skip to main content
196

Search Lumen

Find components, APIs, guides, and recipes.

Type at least two characters to search.

GitHub
All documentation
AI-native UI

Build interfaces with AI and Lumen.

Give your coding agent reusable components and precise API guidance. The portable Lumen skill teaches it to select, compose, theme, and verify interfaces across web and native applications.

Build a working example Install the skill Read the source
YOU

Build a focused settings screen with Lumen.

$lumen-uiFramework · components · tokens · accessibility

On-system implementation

Install
1 command
Targets
6
Format
SKILL.md

Purposeful context

Spend context on the interface you need.

Compose existing components instead of generating each primitive. Search for the task, read the matching framework usage, and request full source only when it helps. This workflow is designed to reduce repetitive code and unnecessary AI context; it does not guarantee lower token use on every task. Read the measurement method.

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.

bashTerminal
npx skills add santi020k/lumen --skill lumen-ui
npx skills add santi020k/lumen --skill lumen-ui
CodexClaude CodeCursorGemini CLIGitHub CopilotWindsurfand other Agent Skills clients
  1. 1

    Run the command

    Open a terminal anywhere and run the installation command shown above.

  2. 2

    Choose your AI tools

    Follow the installer prompts and select each compatible coding tool you use.

  3. 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-astro
React@santi020k/lumen-react
Web Components@santi020k/lumen-elements
React Native@santi020k/lumen-react-native
SwiftUILumenUI
Jetpack Composelumen-compose
Use $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.

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.

  1. 01

    Understand the app

    The skill detects the web or native target and preserves the project’s architecture.

  2. 02

    Use real contracts

    It retrieves current components, props, tokens, and rules instead of inventing a parallel UI system.

  3. 03

    Compose and verify

    It maps product intent to accessible Lumen primitives, then checks the edited surface.

Portable guidance

The skill

Gives any compatible agent Lumen’s framework choices, design language, component-selection heuristics, accessibility guardrails, and completion checklist.

View SKILL.md
Live catalog

The 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 server

Try 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.

plaintextPrompt
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.
All documentationWeb and native guides