{"id":11399,"plugin_id":"plugin_asdk_app_6a8f6c526c5481918eb8a48806fa112b","kind":"skill","collection_source":null,"comparison_source":null,"observed_at":"2026-09-30T22:59:25.242Z","digest":"3b1a3070228e9eec9221e87822793c34effcb3ad107de78cffaecf1fbf739ff8","against":null,"payload":{"name":"lumen-ui","description":"Build, restyle, review, or migrate product interfaces with Lumen UI for Astro, React, Web Components, React Native, SwiftUI, or Jetpack Compose. Use when a request mentions Lumen UI, Lumen packages or tokens, or asks an AI agent to create an accessible interface that should use Lumen instead of inventing primitives.","included_files":[{"relative_path":"agents/openai.yaml","size_in_bytes":259},{"relative_path":"references/component-selection.md","size_in_bytes":4633},{"relative_path":"references/design-system.md","size_in_bytes":3073},{"relative_path":"references/frameworks.md","size_in_bytes":5427}],"skill_md_contents":"---\nname: lumen-ui\ndescription: Build, restyle, review, or migrate product interfaces with Lumen UI for Astro, React, Web Components, React Native, SwiftUI, or Jetpack Compose. Use when a request mentions Lumen UI, Lumen packages or tokens, or asks an AI agent to create an accessible interface that should use Lumen instead of inventing primitives.\n---\n\n# Lumen UI\n\nBuild interfaces from Lumen's real component contracts, semantic tokens, and framework adapters.\nTreat Astro as the reference surface, while following the user's existing stack.\n\n## Workflow\n\n1. Inspect the app before editing. Identify the framework, package manager, global style entry,\n   existing Lumen packages, theme overrides, and local component conventions.\n2. Choose the matching target:\n   - Astro: `@santi020k/lumen-astro`\n   - React: `@santi020k/lumen-react`\n   - Web Components or framework-neutral HTML: `@santi020k/lumen-elements`\n   - React Native or Expo: `@santi020k/lumen-react-native`\n   - SwiftUI or Apple platforms: `LumenUI`\n   - Jetpack Compose or Android: `lumen-compose`\n3. Retrieve current contracts before guessing:\n   - For Astro, React, and Elements, prefer connected Lumen MCP tools: read snapshot metadata and diagnostics, read agent rules,\n     search with the target framework, then read the selected component's usage contract and tokens.\n     Retain the catalog manifest when the client supports caching so a later catalog diff identifies\n     only the contracts that changed.\n   - For native targets, prefer `lumen_list_native_components` and `lumen_get_native_component`,\n     then verify installed adapter source/types when the local package version may differ.\n   - Otherwise inspect installed package types/source or use the Lumen CLI and online docs.\n   - Never invent a component, prop, variant, event, or import path from memory.\n4. Plan the interface as product structure and states, then map each part to the smallest suitable\n   Lumen primitive. Read [references/component-selection.md](references/component-selection.md)\n   when choosing components or composing a full screen.\n5. Read [references/frameworks.md](references/frameworks.md) for setup and runtime rules for the\n   selected target.\n6. Implement with Lumen components and platform-native semantics. Import a stylesheet once only for\n   web targets. Preserve the app's state, navigation, data, and domain logic.\n7. Customize through Lumen tokens and public props. Read\n   [references/design-system.md](references/design-system.md) when theming, polishing, or reviewing\n   visual quality.\n8. Verify the edited surface with the narrowest relevant typecheck, test, lint, and visual or\n   browser check available in the project.\n\n## Non-negotiable Rules\n\n- Prefer existing Lumen primitives over hand-built replacements.\n- Prefer Astro only for a new project with no requested framework; do not migrate an existing app\n  merely because Astro is the reference implementation.\n- Load the matching package stylesheet once at the app boundary for web targets; native adapters do\n  not use CSS.\n- Mount `UIPrimitives` once in an Astro root layout when interactive primitives are present.\n- Use React behavior hooks for behavior-heavy React primitives; do not mount the Astro runtime.\n- Register Lumen custom elements once before using `lumen-*` elements.\n- Use `CodeTabs` for related commands, languages, or configuration examples instead of building a\n  parallel tab controller.\n- Use accessible names, native semantics, visible focus, keyboard paths, and meaningful empty,\n  loading, error, success, disabled, and destructive states.\n- Use Lucide names through web Lumen `Icon`; React Native accepts application-provided native icon\n  components, SwiftUI uses SF Symbols, and Compose accepts `ImageVector`. Do not substitute emoji\n  for interface icons.\n- Use only the public semantic color vocabulary. Do not hardcode a second palette into component\n  markup.\n- Keep glass surfaces selective and legible. Decorative styling must not obscure behavior.\n- Do not replace working app architecture or add dependencies unrelated to the requested interface.\n\n## Discovery Without MCP\n\nIf Lumen is installed, inspect its exported types and package README. For the catalog, otherwise use:\n\n```bash\npnpm exec lumen list\npnpm exec lumen show Button\n```\n\nUse the project's package-manager equivalent of `lumen show <name>` before relying on an unfamiliar\nweb component. Component names also accept kebab-case aliases such as `data-table`. For a native\ncomponent, use the MCP native list/get tools or inspect the matching adapter and documentation. If the CLI is\nnot installed, use the public documentation or GitHub source below.\n\nCurrent public documentation:\n\n- `https://lumen.santi020k.com/docs`\n- `https://lumen.santi020k.com/docs/components`\n- `https://github.com/santi020k/lumen/blob/main/docs/ai-usage.md`\n\n## Completion Check\n\nBefore handing off, confirm that the chosen components and props exist, imports match the target,\nrequired providers or themes occur once, semantic tokens replace ad hoc colors, and the primary\ninteraction works with the target's keyboard, focus, touch, pointer, and assistive-technology paths.\n"},"changes":[],"summary":"First saved snapshot. No earlier version is available for comparison.","summary_kind":"deterministic","summary_metadata":{}}