Experience System
Overview

Skills

Agent skills and LLM instruction files published through the @by-es shadcn registry—what they do, how to install them, and how to copy their Markdown from this site.

The @by-es registry publishes more than UI primitives. It also ships agent skills (Markdown workflows tools often load as SKILL.md) and separate LLM reference Markdown files. Use the copy actions under each section to grab the full text without running the CLI.

Install from the registry

Configure @by-es in components.json and set REGISTRY_TOKEN as described in Registry. Then add an item by name:

npx shadcn@latest add @by-es/<item-name>

Use the exact item name from the tables below (for example @by-es/setup-tailwind-theme-provider-skill).

Agent skills

These registry items install a single Markdown file (with YAML frontmatter: name, description) to a path such as ~/.agent/skills/<skill-id>/SKILL.md, depending on your tool. They are workflows: step-by-step guidance for tooling and setup.

Agent skills

Each row is a registry-published skill. Use the registry item name with shadcn, or copy the full Markdown file directly.

  • Set up Tailwind + ThemeProvider

    Registry item setup-tailwind-theme-provider-skill

    Full Markdown for the Tailwind v4, theme CSS, ThemeProvider, and optional LuiThemeProvider workflow.

    npx shadcn@latest add @by-es/setup-tailwind-theme-provider-skill
  • Add @by/icons

    Registry item by-icons-skill

    Full Markdown for discovering icons, namespaces, and imports.

    npx shadcn@latest add @by-es/by-icons-skill
  • Portal theme message + ThemeProvider

    Registry item portal-theme-message-skill

    Full Markdown for Portal ThemeRequestMessage / ThemeResponseMessage, themeMessage.themeObject, and ThemeProvider wiring.

    npx shadcn@latest add @by-es/portal-theme-message-skill
  • Scan repository for migration tasks

    Registry item migration-scan-repository-skill

    Full Markdown for running by-es migrate scan, choosing target presets, and reading findings, categories, confidence, registry links, and related skills.

    npx shadcn@latest add @by-es/migration-scan-repository-skill
  • Create a migration report

    Registry item migration-report-skill

    Full Markdown for by-es migrate report usage, report JSON/Markdown artifacts, hotspots, missing mappings, registry links, skill links, and planning summaries.

    npx shadcn@latest add @by-es/migration-report-skill
  • Migrate component to BY DS

    Registry item migrate-component-to-by-es-skill

    Full Markdown for migrating a focused component, file, route, or UI slice from CCL/LUI/MUI or legacy icons to @by/experience-system and @by/icons.

    npx shadcn@latest add @by-es/migrate-component-to-by-es-skill
  • Triage a migration plan

    Registry item migration-triage-plan-skill

    Full Markdown for converting scan/report output into sequenced migration work across setup, icons, direct replacements, registry recipes, styling, and manual review.

    npx shadcn@latest add @by-es/migration-triage-plan-skill

LLM reference files (not skills)

Two registry items deliver generated Markdown aimed at AI agents: broad API surface, imports, tokens, and lists. They are not skill workflows—they are instruction / reference documents you install into the repo (default paths docs/llm/experience-system.md and docs/llm/icons.md) and point tools at—for example @ those files in Cursor, reference them from .github/copilot-instructions.md, or add a thin .cursor/rules/*.mdc rule that links here instead of duplicating the full text. Treat them like versioned API docs: refresh when you upgrade @by/experience-system or @by/icons. See Getting started (§4 — Familiarize yourself with resources, §5 — Migration) for placing LLM reference Markdown alongside Skills, MCP, and migration work.

LLM reference files

Each row is a registry-published reference document. Use the registry item name with shadcn, or copy the generated Markdown directly.

  • Design system LLM reference

    Registry item by-es-llm-reference

    Generated reference: components, ThemeProvider, tokens, and practices (not a skill file).

    npx shadcn@latest add @by-es/by-es-llm-reference
  • Icons LLM reference

    Registry item by-icons-llm-reference

    Generated reference: namespaces and icon names (not a skill file).

    npx shadcn@latest add @by-es/by-icons-llm-reference
  • Getting started — Adoption checklist and tools overview
  • Migration — CCL/MUI migration, preflight, and by-es migrate scan
  • Registrycomponents.json, token, and CLI usage
  • Installation — package install, Tailwind, and ThemeProvider
  • Portal Theme ConsumptionthemeMessage.themeObject, ThemeResponseMessage, and ThemeProvider in the Portal Shell