Update to Lumen UI

{
  "description": "Build or restyle product interfaces with Lumen UI for Astro, React, Web Components, React Native, SwiftUI, or Jetpack Compose. Use for implementation requests using Lumen packages, components, or tokens, including accessible interfaces composed from Lumen primitives. Use lumen-review for requested audits and lumen-migrate for version upgrades.",
  "included_files": [
    {
      "relative_path": "agents/openai.yaml",
      "size_in_bytes": 259
    },
    {
      "relative_path": "references/astro.md",
      "size_in_bytes": 1507
    },
    {
      "relative_path": "references/component-selection.md",
      "size_in_bytes": 5516
    },
    {
      "relative_path": "references/compose.md",
      "size_in_bytes": 657
    },
    {
      "relative_path": "references/data-visualization.md",
      "size_in_bytes": 4466
    },
    {
      "relative_path": "references/design-system.md",
      "size_in_bytes": 6194
    },
    {
      "relative_path": "references/elements.md",
      "size_in_bytes": 2905
    },
    {
      "relative_path": "references/frameworks.md",
      "size_in_bytes": 1096
    },
    {
      "relative_path": "references/react-native.md",
      "size_in_bytes": 922
    },
    {
      "relative_path": "references/react.md",
      "size_in_bytes": 1379
    },
    {
      "relative_path": "references/swiftui.md",
      "size_in_bytes": 1108
    },
    {
      "relative_path": "references/verification.md",
      "size_in_bytes": 2527
    }
  ],
  "name": "lumen-ui",
  "skill_md_contents": "---\nname: lumen-ui\nmetadata:\n  guidance-version: \"5.1.0\"\ndescription: Build or restyle product interfaces with Lumen UI for Astro, React, Web Components, React Native, SwiftUI, or Jetpack Compose. Use for implementation requests using Lumen packages, components, or tokens, including accessible interfaces composed from Lumen primitives. Use lumen-review for requested audits and lumen-migrate for version upgrades.\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   resolved installed Lumen versions, 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   - Start discovery with `limit: 5` and the requested `framework` or native `platform`. Add\n     `kind: \"component\"` or `kind: \"native-component\"` when choosing primitives; use\n     `kind: \"recipe\"` for a complete composition. Widen the search only when those results do not\n     cover the requirement. Read `detail: \"usage\"` for the selected contracts; request source only\n     to resolve a specific missing detail. Reuse retrieved contracts within the same matching\n     catalog version instead of listing the full catalog for every component.\n   - For Astro, React, and Elements, when Lumen MCP is connected, read snapshot metadata and diagnostics, read agent rules,\n     compare resolved installed versions with `lumen_check_compatibility`, 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   - On a version mismatch, use a matching published MCP version or installed public types and package documentation. Do not apply a newer catalog as the installed API or silently upgrade the app.\n   - For a requested upgrade, use the `lumen-migrate` workflow; for a requested audit, use `lumen-review`. Ordinary UI changes retain their requested scope.\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.\n   For charts or analytics, read [references/data-visualization.md](references/data-visualization.md)\n   to choose the encoding and verify its data and accessibility contract.\n5. Read only the matching setup and runtime reference:\n   [Astro](references/astro.md), [React](references/react.md),\n   [Elements](references/elements.md), [React Native / Expo](references/react-native.md),\n   [SwiftUI](references/swiftui.md), or [Compose](references/compose.md).\n   Keep Tailwind optional, use public named imports, and retain state in the host application.\n6. Implement with Lumen components and platform-native semantics. Follow the installed version's\n   style contract: v5 Astro imports component CSS automatically; React/Elements load the foundation\n   once and selected component CSS. Full styles.css remains supported. 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 project's relevant typecheck, tests, zero-warning lint,\n   and build. Read [references/verification.md](references/verification.md) for interaction\n   and rendered checks; apply only the checks relevant to the changed behavior.\n\n## Non-negotiable Rules\n\n- Prefer existing Lumen primitives over hand-built replacements.\n- For web product choices, default to `Select` for custom option lists and `Combobox` for\n  searchable choices. Use `NativeSelect` only when the product explicitly requires the native\n  platform picker. Keep Select's native fallback and verify the enhanced list, keyboard paths,\n  focus, and mobile layout with the matching framework runtime enabled.\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- Match CSS setup to the installed major version. For v5, prefer component CSS; keep full styles.css\n  for existing setup or deliberate catalog-wide use. Native adapters do not use CSS.\n- Install the optional @santi020k/lumen CLI separately as a development dependency in v5.\n- Use verified public granular exports where available. Catalog fallbacks may traverse more code;\n  measure built and requested assets before claiming that a route loads only its components.\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"
}