Liquid glass
Official IntelliHelper UI agent plugin — Liquid Glass React components via MCP, skills, and slash commands
npx -y skills add IntelliHelper/agent-skills --skill liquid-glassAssembled 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
IntelliHelper Liquid Glass design system — chrome vs content layers, frosted surfaces, themes (mono, aurora, sunset, frost, ocean), glass primitives, and visual polish. Use when styling glass UI, choosing button variants, building toolbars vs CTAs, setting themes, or fixing washed-out/over-saturated glass. Triggers: "liquid glass", "glassmorphism", "frosted glass", "chrome layer", "glass-bar", "theme mono aurora", "glass button variant".
SKILL.md
4.4 KB, as published. Nobody here has run it
Liquid Glass design system
IntelliHelper UI is a two-layer glass language:
| Layer | Role | Feel | Typical components / variants |
|---|---|---|---|
| Chrome | Toolbars, icon controls, navigation chrome, secondary actions | Neutral, frosted, Apple mini-player | outline, secondary, ghost, glass; glass-bar, glass-icon-button |
| Content | Primary CTAs, marketing panels, destructive emphasis | Theme-saturated, expressive | primary, destructive; glass-content-card |
Rule of thumb: chrome stays quiet so content and data stay legible. One saturated CTA per region is usually enough.
Before styling
- Call MCP
list_themesfor theme IDs and descriptions. - Call
get_componentfor the realvariant/size/shapeAPIs — do not invent them. - Ensure project CSS loads tokens/themes (init + docs: https://ui.intellihelper.in/getting-started).
Themes
| ID | Label | Character |
|---|---|---|
mono | Mono Basic | Pure black/white foundational minimal |
aurora | Cool Aurora | Deep navy + cyan-violet accents |
sunset | Warm Sunset | Amber-coral + rose-gold glass |
frost | Neutral Frost | Icy slate, crystalline |
ocean | Deep Ocean | Teal depths + aqua accents |
Themes drive CSS variables used by glass utilities. Prefer theme tokens over ad-hoc hex for surfaces, borders, and glow.
Glass system components
Prefer these over custom backdrop-blur one-offs:
| Component | Use |
|---|---|
glass-bar | Neutral capsule for grouped media / chrome controls |
glass-icon-button | Circular icon-only chrome actions |
glass-content-card | Expressive saturated content panels under chrome |
background-picture-picker | Mesh/gradient/upload backgrounds for glass stages |
component-preview | Live preview + source (docs/playground style) |
card | Frosted panels for chrome and content layouts |
Install: npx @intellihelper/cli@latest add glass-bar glass-icon-button card -y
Button language (verify with get_component)
Typical button variants in the design system:
| Variant | Layer | Use |
|---|---|---|
default / glass | Chrome-ish frosted | Default frosted control |
outline / secondary / ghost | Chrome | Neutral toolbars, secondary actions |
primary | Content | Main CTA |
destructive | Content | Destructive CTA |
link | Material | Text link, no glass chrome |
Shapes commonly include rounded, pill, rectangular. Sizes: default, sm, lg, icon.
// Chrome toolbar
<Button variant="outline" size="icon"><Settings /></Button>
<Button variant="ghost">Cancel</Button>
// Content CTA
<Button variant="primary">Continue</Button>
<Button variant="destructive">Delete</Button>
Always re-check exports and prop names via MCP before shipping.
Visual quality bar
Ship interfaces that feel intentional:
- Hierarchy: one primary action; chrome supports, content leads.
- Density: pick comfortable (
gap-6/p-6) or compact (gap-4/p-4) per page — do not mix randomly. - Radius: stay consistent with component shapes; avoid stacking many different radii.
- Contrast: verify light/dark on frosted surfaces (audit checklist).
- Motion: prefer existing component transitions over custom bounce everywhere.
- Icons: Lucide at consistent sizes (
size-4/h-4 w-4).
Anti-patterns
- Glass on every surface (noise, illegible text)
- Saturated primary chrome on icon toolbars
- Nested glass cards three levels deep
- Random gradients + glow competing with theme
- Ignoring
focusRing/ keyboard focus styles - Using playground internal imports (
@intelli/ui,@intelli/utils) in consumer apps
Progressive disclosure
- Layer details & pairing → references/layers.md
- Theme setup notes → references/themes.md
- Page recipes → skill
compose-ui - Install path → skill
add-component
Gives 0 of the 12 instructions most design systems skills give
Counted across 528 of the 534 authors here whose files we hold, read 2026-08-06
- create a custom theme if neededin 54 of 528, across 10 files
- read the corresponding theme filein 54 of 528, across 10 files
- ask which theme to applyin 53 of 528, across 9 files
- show the theme showcasein 53 of 528, across 9 files
- maintain visual identity across all slidesin 50 of 528, across 6 files
- apply the specified colors and fontsin 47 of 528, across 3 files
- get explicit confirmationin 45 of 528, across 1 file
- Generate a design system before codingin 19 of 528, across 6 files
- Maintain at least 4.5:1 color contrast ratioin 19 of 528, across 8 files
- Describe component shapes, colors, shadows, and interaction statesin 18 of 528, across 4 files
- Check Python installation and install if missingin 17 of 528, across 4 files
- Default to html-tailwind if stack is unspecifiedin 17 of 528, across 4 files
Said here and by no other author read
- use chrome layers for toolbars and navigation
- use content layers for primary actions and panels
- keep chrome quiet so content stays legible
- limit saturated primary actions to one per region
- call list_themes for theme ids and descriptions
- call get_component for real variant size and shape apis
Grouped from the skills themselves: near-identical wordings counted once, and counted by distinct author, so one author publishing three of these counts once.