Frontend

UI Library System

Selects and safely integrates components from the T7 Magic UI, Smooth UI, Retro UI and Unlumen UI libraries without importing a whole demo ecosystem.

What it does

Selects and safely integrates components from the T7 Magic UI, Smooth UI, Retro UI and Unlumen UI libraries without importing a whole demo ecosystem.

When to use it

Use when a build might benefit from an existing component instead of a bespoke one: heroes, cards, navigation, animation, interaction.

Problems it prevents

Stops projects from either reinventing solved problems or dragging in components that don't fit the product.

Typical workflow

  1. Audit the active project
  2. Choose by product fit, not novelty
  3. Inspect the exact component
  4. Integrate with the smallest safe change

Example output

One well-fitted component wired into the existing design system, not a bundle of unused demo dependencies.

What's included

  1. 01
    The complete prompt

    The full manual as a ready-to-save SKILL.md file, matched exactly to what ships in the T7 library.

  2. 02
    Install walkthrough

    Personal (~/.claude/skills/) and project (.claude/skills/) folder instructions, whichever fits how you work.

  3. 03
    Use notes

    How Claude invokes it, what a good result looks like, and what to check before you trust the output.

Installation

Save the manual as SKILL.md in ~/.claude/skills/ui-library-system/ to use it on every project, or in .claude/skills/ui-library-system/ to scope it to one repository. Then invoke it directly:

/ui-library-expert

Read the official Claude Code skills guide

Works well with