Compose ui

Skill IntelliHelper/agent-skills/skills/compose-ui

Official IntelliHelper UI agent plugin — Liquid Glass React components via MCP, skills, and slash commands

Install

npx -y skills add IntelliHelper/agent-skills --skill compose-ui

Assembled from the repository path, not quoted from the project. Check it against their README if it does not work.

2 things to look at

22 days oldThe repository was created 22 days ago. New is not bad, but a brand new repository carrying a familiar-sounding name is the shape a typosquat arrives in, and there has been no time for anyone else to find a problem with it.
1 stars1 stars. Stars are a popularity signal and not a quality one, but at this level it is likely that nobody has read this closely except its author, and you would be relying on your own review.

What its author says it does

Copied from the file, not written here

Compose production pages with IntelliHelper UI components — settings, dashboards, auth, CRUD tables, empty/loading/error states, mobile nav, and glass-stage layouts. Use when building screens, layouts, or multi-component flows rather than installing a single primitive. Prefer registry composition over custom shells.

SKILL.md

4.2 KB, as published. Nobody here has run it

Compose UI with IntelliHelper

Build screens, not isolated widgets. Always:

Discover/install missing pieces via skill add-component / MCP.
Apply chrome vs content rules from skill liquid-glass.
Match real APIs via get_component / get_component_examples.

Reach for this first

Use case	Components	Why
Settings page	`tabs` + `card` + form controls + `button`	Grouped sections, clear save
Dashboard	`card` + `badge` + `table` + `skeleton`	Summary + dense data
CRUD table	`table` + `sheet`/`dialog` + `button` + `empty`	Browse, edit, create
Auth / onboarding	`card` + `input` + `button` + `alert` + `separator`	Focused entry
Mobile nav	`sheet` + `button` + `separator`	Compact shell
Detail page	header + `badge` + `card` + `separator`	Hierarchy without nesting chaos
Filters	`select` + `popover`/`sheet` + `button`	Desktop + mobile
Confirm destructive	`dialog` + destructive `button`	Explicit consequence
Empty / loading / error	`empty` + `skeleton` + `alert` + primary CTA	Designed non-happy paths
Glass stage / media	`background-picture-picker` + `glass-bar` + `glass-icon-button`	Liquid Glass showcase chrome
Docs / content	`typography` + `markdown-viewer` / `markdown-editor`	Long-form surfaces
Sidebar app shell	`sidebar` + `separator` + `scroll-area`	Product navigation

Install only what you need:

npx @intellihelper/cli@latest add tabs card button input alert table sheet dialog empty skeleton -y

Composition recipes

Settings

Tabs for sections (Profile, Appearance, Billing)
Each section: Card with header + form fields
Footer actions: ghost Cancel + primary Save
Prefer switch for boolean prefs; select for enums

Admin dashboard

Top row: 3–4 summary Cards (metric + muted label)
Toolbar: outline filters + primary “New …”
Main: Table with row actions in ghost/outline buttons
Loading: Skeleton matching card/table shape

Entity detail

Title row + status Badge
Main column Card for core fields
Side Card for metadata
Destructive action in dialog, not inline surprise

Auth

Centered max-width Card
Input + labels, primary submit
Alert for errors (never only toast)
Separator “or continue with” social row if needed

Glass media chrome

Stage background via theme / background-picture-picker
Floating glass-bar with glass-icon-button cluster
Content CTA separate from chrome cluster

Empty state

Empty illustration/title/description
  + primary Button (create/import)
  + optional outline secondary

Use empty when available; otherwise compose with card + typography + buttons.

Layout quality rules

One primary CTA per visible region.
Consistent spacing scale — do not mix gap-2 and gap-10 without hierarchy reason.
Prefer components over raw shells — if Dialog exists, do not reinvent modal markup.
Responsive: sheet for mobile filters/nav; keep desktop sidebars from sidebar.
States: happy path alone is incomplete — ship loading, empty, and error.
Accessibility: labels on inputs, dialog titles, button names, focus order.

Workflow for multi-file features

1. get_project_config / init
2. Plan component list for the screen
3. search + get_component for each unfamiliar API
4. get_add_command → CLI add -y (batch installs)
5. Compose page/components
6. get_audit_checklist
7. Visual pass: chrome quiet, CTA clear, contrast OK

Anti-patterns

Dashboard of only nested cards with no table/data hierarchy
Every button primary
Missing empty/loading states
Custom modal without focus trap when dialog exists
Hard-coded colors fighting the active theme
Importing monorepo packages in consumer apps