121
GitHub
Documentation
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 Astro, React, and Web Components.

Install the skillRead the source
YOU

Build a focused settings screen with Lumen.

$lumen-uiFramework · components · tokens · accessibility

On-system implementation

Install
1 command
Targets
3
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.

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

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 Astro, React, or Web Components 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 keyboard 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 keyboard states.