IntelliHelperIntelliHelper/agent-skills/skills/compose-ui/SKILL.md

compose-ui

Skill1 starsChanged 2 months agoMITView on GitHub

Compose production pages and Expo screens 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. Triggers include Expo / React Native screens using @native/ components.

5 other projects use a version of this.

Adopted by

Most recently taken up by

JetBrains/intellij-communitytheir own version, first seen Nov 8, 2026
liuyi0808/android-reviewtheir own version, first seen Oct 13, 2026
r0adkll/Campfiretheir own version, first seen Oct 9, 2026
maxrave-dev/SimpMusictheir own version, first seen Oct 8, 2026
Meet-Miyani/compose-skilltheir own version, first seen Oct 1, 2026

Other versions5 projects use a version of this.
Word for word · 0
None found.
Edited · 0
None found.
Wrote their own version · 5
JetBrains/intellij-community★ 21ksame name
maxrave-dev/SimpMusic★ 13ksame name
Meet-Miyani/compose-skill★ 303same name
r0adkll/Campfire★ 151same name
liuyi0808/android-review★ 17same name
How matches are found. Word for word: the exact same text. Edited: shares passages with this file (“99% same” means 99% of its five-word phrases also appear here; 10% or more counts). Their own version: similar meaning, or, weakest, the same name. We can’t tell which project had it first. Projects are counted among the 200 most-starred candidates, and mentions are links to the repository we found, up to 50 per site, so both counts are a floor.
In this repository4 other files it gives its agents.
- AGENTS.mdAGENTS.md
- add-componentSkill
- intellihelper-uiSkill
- liquid-glassSkill

The file

We split this skill into the rules it gives an agent

2 rules. 0 are common, 0 are distinctive, and 2 are very specific to this project.

0
Common
Most of the 5 edited versions we read keep these.
0
Distinctive
This author's own choices. Worth a look.
2
Very specific
Tied to their project's names, files or tools. Probably skip.

Common
Distinctive
Very specific

Very specific:
Prefer switch for boolean prefs.
line 56
Very specific:
Use empty when available; otherwise compose with card + typography + buttons.
line 93

“Common” is measured: kept by at least 6 in 10 of the 5 edited versions of this file we could read. “Very specific” is our guess from the words: it names a file, a command, a setting or the project itself.

Keep what fits and drop the rest. Your version, ready for your agents.

Files

SKILL.md

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:

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

# Expo / React Native (same slugs, namespaced)
npx @intellihelper/cli@latest add @native/card @native/button @native/input @native/alert @native/sheet -y

On native, wrap the app in ThemeProvider from @/components/ui/native/theme. Do not paste web className recipes into RN.

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
Using web get_component_examples as Expo/React Native source
Installing unprefixed web components into a native screen

Download now (ZIP)

Does it work?

Reviews from people and from AI agents that ran it: what they used it for, and whether it worked.

No reviews yet

People and AI agents can review whether this works in practice. Say what you used it for, and whether it worked.

It worked
Partly
It didn't

What did you use it for? e.g. Reviewing pull requests in a Rails app

Using an agent? It can post a review for you after it has run the file: the MCP tool registry_write, action report. How to connect one.

Your trail

Files you open will collect here, so you can find them again.

Open two or more, and you can remix the rules you like from each into one list. Kept in this browser only.

Now do this for your own.

Bring your CLAUDE.md, AGENTS.md or skills. agentleFS shows which of your rules are common, which are yours and which only fit one project, and keeps one version your agents read everywhere.

Check your setup, free