Muffled ui

Skill muffled-studio/muffled.skills/skills/muffled-ui

Install and compose @muffled components from ui.muffled.studio. Use when adding registry components, wiring theme/tokens, forms, floating menus, or styling UI in a consumer app. Avoid editing pulled registry files; push fixes upstream to muffled.ui and keep project-specific changes in app code.From its SKILL.md

Install

npx -y skills add muffled-studio/muffled.skills --skill muffled-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

no licenseNo license file was found in the repository. Code published without one is not open source by default, so using it at work is a question for whoever answers licensing questions where you are.
0 stars0 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.

SKILL.md

5.0 KB, ~1.2k tokens by cl100k_base, as published. Nobody here has run it

muffled.ui (consumer)

shadcn-compatible registry at ui.muffled.studio. Same CLI workflow as shadcn; different defaults (ink/paper, 0.5px borders, no shadows).

For full brand rules (colour, type, voice), also use the muffled-studio-design skill.

Setup

Add the registry to components.json:

"registries": {
  "@muffled": "https://ui.muffled.studio/r/{name}.json"
}

Install theme first — it merges tokens and Tailwind theme into your CSS and registers Space Grotesk / Space Mono:

bunx shadcn@latest add @muffled/theme

Then components as needed:

bunx shadcn@latest add @muffled/button
bunx shadcn@latest add @muffled/form

Catalog and docs: ui.muffled.studio · manifest: registry.json

Optional dark mode:

bunx shadcn@latest add @muffled/theme-provider

Wire ThemeProvider and the theme init script per the installed theme-provider file comments so .dark does not flash on load.

After install

Tokens live in the CSS file shadcn targets (usually app/globals.css). Prefer theme utilities (border, text-muted-foreground, h-hairline, duration-drift) — not gray-*, not arbitrary border-[0.5px].
Aliases come from the consumer project's components.json. Installed files land under your configured ui / lib paths; import from those aliases, not from @/registry/* unless your project uses the same layout as the docs site.
Dependencies — registry items declare npm deps; let the CLI install them. Many components need radix-ui, clsx, tailwind-merge, etc.

Composing UI

Forms

Stack: react-hook-form + zod + @hookform/resolvers/zod.

bunx shadcn@latest add @muffled/form

Wire: Form → FormField → FormItem → FormLabel / FormControl / FormDescription / FormMessage.

Labels: mono (FormLabel).
Hints: grotesk text-sm text-muted-foreground on FormDescription.
Errors: grotesk text-sm text-destructive on FormMessage; lowercase copy.
Do not restyle inside FormControl; use aria-invalid on the slotted control.

Floating surfaces

Menus, popovers, selects, and similar panels must match installed components. If you add a new floating surface, reuse the same surface helpers the registry ships (typically floatingSurfaceClasses from the installed lib / utils path after surface or equivalent is present):

paper background, border-border-strong, shadow-none
drift motion (duration-[var(--d-drift)])
no backdrop-blur, no box shadows

Dialogs/sheets use the modal surface pattern from the registry (modalSurfaceClasses where exported).

Custom components

Use cn() from the installed utils/surface module.
Focus: focus-visible:outline at ink/56, 2px offset — do not invent a new ring colour.
Hover/press: opacity 0.6 / 0.4 — no scale transforms on press.
Icons: Lucide, stroke 1.5, currentColor, sizes 12/16/20/24.

Do not reintroduce

These break the system and fight installed components:

shadow-* (except shadow-none)
gray-100 … gray-900
1px borders (border-[1px], default h-px for hairlines — use h-hairline / w-hairline)
backdrop-blur, zoom-in-* on chrome
opacity-50 for disabled (use opacity-40)

Updating components

Re-run bunx shadcn@latest add @muffled/<name> to refresh a component. Diff carefully if you have local edits on generated files.

Local edits vs upstream

Installed registry files are copies from muffled.ui. Prefer not to edit them in the consumer app.

Change	In consumer app	Upstream
Project-only (props, layout, composition, app-specific wrappers)	Yes — edit your code, not the pulled file	Not needed
Bug fix, token/style alignment, accessibility, shared behaviour	Only if unavoidable; keep the diff minimal	Yes — fix in muffled.ui, then reinstall

When you must patch a pulled component (fix or style update):

Make the smallest change that solves the problem.
Tell the user to push the same fix upstream to muffled.ui so the next shadcn add does not wipe it.
Do not refactor or restyle pulled files for convenience — wrap or compose in app code instead.

Do not treat consumer copies as the source of truth for the design system.

Install this skill (Cursor + Claude)

bunx skills add muffled-studio/muffled.skills --skill muffled-ui -a cursor -a claude-code -y

List skills in this repo: bunx skills add muffled-studio/muffled.skills --list

What ships with it

Read from the repository

Just SKILL.md. No reference files, no scripts.

Gives 0 of the 12 instructions most design frontend skills give in ~1.2k tokens

Counted across 1,169 of the 1,878 authors here whose files we hold, read 2026-08-07

Use CSS variables for color consistencyin 72 of 1169, across 23 files
Commit to one bold aesthetic direction before codingin 72 of 1169, across 27 files
Match implementation complexity to the aesthetic visionin 70 of 1169, across 20 files
Add atmospheric background effects and texturesin 57 of 1169, across 9 files
Use unexpected spatial compositions and layoutsin 56 of 1169, across 8 files
Implement real working codein 55 of 1169, across 7 files
Vary themes and aesthetics across different designsin 48 of 1169, across 7 files
Launch chromium in headless modein 47 of 1169, across 4 files
Close the browser when donein 47 of 1169, across 4 files
Run provided scripts with help flag firstin 47 of 1169, across 4 files
Wait for network idle statein 47 of 1169, across 4 files
Use descriptive selectors for elementsin 47 of 1169, across 4 files

Said here and by no other author read

install theme before other components
install registry components using the cli
prefer theme utilities over hard-coded values
wire form components in the specified nesting order
match installed components when adding floating surfaces
reuse exported surface helper classes for floating panels

Grouped from the skills themselves: near-identical wordings counted once, and counted by distinct author, so one author publishing three of these counts once. Length counted with cl100k_base; the agent that loads this file may tokenize it differently.