Agent skill

UI Design

Design and review Epicenter interfaces while collapsing local UI primitives into the shared component system.

Apache-2.0Auto-check passedFrontend & Design

Install UI Design

skills CLI

$ npx skills add EpicenterHQ/epicenter --skill ui-design -a claude-code

Project install by default; add -g for ~/.claude/skills/.

GitHub CLI

$ gh skill install EpicenterHQ/epicenter ui-design --agent claude-code

Project scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).

Manual copy

$ git clone --depth 1 https://github.com/EpicenterHQ/epicenter.git skills-src && mkdir -p .claude/skills && cp -r skills-src/.agents/skills/ui-design .claude/skills/ui-design && rm -rf skills-src

Use ~/.claude/skills/ instead of .claude/skills for a personal install. The folder must contain SKILL.md.

Claude Code skills documentation · loads skills from .claude/skills/

Paste into Claude Code

Install the "ui-design" agent skill from https://github.com/EpicenterHQ/epicenter/tree/main/.agents/skills/ui-design into .claude/skills/ui-design/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "ui-design", then confirm the skill loads.

Claude Code copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.

$skill-installer

$skill-installer install https://github.com/EpicenterHQ/epicenter/tree/main/.agents/skills/ui-design

Type this inside Codex. $skill-installer <name> installs a curated skill from openai/skills. The installer writes to $CODEX_HOME/skills (default ~/.codex/skills). Restart Codex if the skill does not show up.

skills CLI

$ npx skills add EpicenterHQ/epicenter --skill ui-design -a codex

Project install goes to .agents/skills/; add -g for ~/.codex/skills/.

GitHub CLI

$ gh skill install EpicenterHQ/epicenter ui-design --agent codex

Project scope by default (.agents/skills/); add --scope user for a personal install.

Manual copy

$ git clone --depth 1 https://github.com/EpicenterHQ/epicenter.git skills-src && mkdir -p .agents/skills && cp -r skills-src/.agents/skills/ui-design .agents/skills/ui-design && rm -rf skills-src

Use ~/.agents/skills/ instead of .agents/skills for a personal install.

Codex skills documentation · loads skills from .agents/skills/

Paste into Codex

Install the "ui-design" agent skill from https://github.com/EpicenterHQ/epicenter/tree/main/.agents/skills/ui-design into .agents/skills/ui-design/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "ui-design", then confirm the skill loads.

Codex copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.

skills CLI

$ npx skills add EpicenterHQ/epicenter --skill ui-design -a cursor

Project install goes to .agents/skills/; add -g for ~/.cursor/skills/.

GitHub CLI

$ gh skill install EpicenterHQ/epicenter ui-design --agent cursor

Project scope by default (.agents/skills/); add --scope user for a personal install.

Manual copy

$ git clone --depth 1 https://github.com/EpicenterHQ/epicenter.git skills-src && mkdir -p .cursor/skills && cp -r skills-src/.agents/skills/ui-design .cursor/skills/ui-design && rm -rf skills-src

Use ~/.cursor/skills/ instead of .cursor/skills for a personal install.

Cursor skills documentation · loads skills from .cursor/skills/, .agents/skills/, .claude/skills/, .codex/skills/

Paste into Cursor

Install the "ui-design" agent skill from https://github.com/EpicenterHQ/epicenter/tree/main/.agents/skills/ui-design into .cursor/skills/ui-design/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "ui-design", then confirm the skill loads.

Cursor copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.

gemini skills install

$ gemini skills install https://github.com/EpicenterHQ/epicenter.git --path .agents/skills/ui-design

--scope user (default) or --scope workspace; --path is the subfolder of the repo that holds the skill; --consent skips the security confirmation prompt.

skills CLI

$ npx skills add EpicenterHQ/epicenter --skill ui-design -a gemini-cli

Project install goes to .agents/skills/; add -g for ~/.gemini/skills/.

GitHub CLI

$ gh skill install EpicenterHQ/epicenter ui-design --agent gemini-cli

Project scope by default (.agents/skills/); add --scope user for a personal install.

Manual copy

$ git clone --depth 1 https://github.com/EpicenterHQ/epicenter.git skills-src && mkdir -p .gemini/skills && cp -r skills-src/.agents/skills/ui-design .gemini/skills/ui-design && rm -rf skills-src

Use ~/.gemini/skills/ instead of .gemini/skills for a personal install, then run /skills reload.

Gemini CLI skills documentation · loads skills from .gemini/skills/, .agents/skills/

Paste into Gemini CLI

Install the "ui-design" agent skill from https://github.com/EpicenterHQ/epicenter/tree/main/.agents/skills/ui-design into .gemini/skills/ui-design/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "ui-design", then confirm the skill loads.

Gemini CLI copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.

GitHub CLI

$ gh skill install EpicenterHQ/epicenter ui-design

Installs for Copilot at project scope by default; add --scope user for a personal install. Preview a skill first with gh skill preview. Needs GitHub CLI 2.90.0 or later (public preview).

skills CLI

$ npx skills add EpicenterHQ/epicenter --skill ui-design -a github-copilot

Project install goes to .agents/skills/; add -g for ~/.copilot/skills/.

Manual copy

$ git clone --depth 1 https://github.com/EpicenterHQ/epicenter.git skills-src && mkdir -p .github/skills && cp -r skills-src/.agents/skills/ui-design .github/skills/ui-design && rm -rf skills-src

Use ~/.copilot/skills/ instead of .github/skills for a personal install. Commit .github/skills so cloud agent and code review can use it.

GitHub Copilot skills documentation · loads skills from .github/skills/, .claude/skills/, .agents/skills/

Paste into GitHub Copilot

Install the "ui-design" agent skill from https://github.com/EpicenterHQ/epicenter/tree/main/.agents/skills/ui-design into .github/skills/ui-design/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "ui-design", then confirm the skill loads.

GitHub Copilot copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.

skills CLI

$ npx skills add EpicenterHQ/epicenter --skill ui-design -a opencode

OpenCode documents no install command of its own. Project install goes to .agents/skills/; add -g for ~/.config/opencode/skills/.

GitHub CLI

$ gh skill install EpicenterHQ/epicenter ui-design --agent opencode

Project scope by default (.agents/skills/); add --scope user for a personal install.

Manual copy

$ git clone --depth 1 https://github.com/EpicenterHQ/epicenter.git skills-src && mkdir -p .opencode/skills && cp -r skills-src/.agents/skills/ui-design .opencode/skills/ui-design && rm -rf skills-src

Use ~/.config/opencode/skills/ instead of .opencode/skills for a personal install.

OpenCode skills documentation · loads skills from .opencode/skills/, .claude/skills/, .agents/skills/

Paste into OpenCode

Install the "ui-design" agent skill from https://github.com/EpicenterHQ/epicenter/tree/main/.agents/skills/ui-design into .opencode/skills/ui-design/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "ui-design", then confirm the skill loads.

OpenCode copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.

Facts

Skill name: ui-design
GitHub stars: 4.8k
Token cost: ~1.5k tokens
SKILL.md length: 690 words
Files: 7 (incl. references)
Skills in repo: 65
Repo updated: Oct 8, 2026
First seen: Oct 7, 2026
Licence: Apache-2.0

At a glance

Design and review Epicenter interfaces while collapsing local UI primitives into the shared component system.

Works in 7 steps: Name the user-visible objective in one… → Read the current and neighboring… → Sketch the simplest greenfield… → …
Exploring comparable apps
SKILL.md covers Canonical Path, Component-System Collapse Pass, Human Taste Gate and Product UI And Expressive…, plus 3 more sections
Reaches raw.githubusercontent.com

What it does

UI Design is an agent skill from EpicenterHQ/epicenter. Design and review Epicenter interfaces while collapsing local UI primitives into the shared component system. Use when co-designing, exploring comparable apps, turning a feature idea into Svelte UI, or changing packages/ui, not for a tiny CSS repair.

Its SKILL.md is about 1.5k tokens, which your agent loads only when the skill is triggered. The skill folder holds 7 other files, including reference files (for example `references/anti-slop-tells.md`, `references/comparable-apps.md` and `references/component-system.md`).

It sits in Frontend & Design, covering UI design. It works with Svelte. The repository describes itself as: Open-source, local-first apps. The licence is Apache-2.0.

When your agent uses it

Exploring comparable apps
Turning a feature idea into Svelte UI
Changing packages/ui
Not for a tiny CSS repair

Example prompts

“/ui-design”

Workflow steps

7 steps, taken from the first numbered list in SKILL.md.

Name the user-visible objective in one concrete sentence. When the product
Read the current and neighboring surfaces. Inventory the workflow, hierarchy,
Sketch the simplest greenfield composition using the natural anatomy of
Run the component-system collapse pass below. Refuse exact reproduction of
Implement the whole state surface: loading, empty, error, disabled, pending,
Verify visible, responsive, and interactive results in the browser.
Run UI pre-flight before final handoff or committing the change.

What it can do on your machine

Read from SKILL.md and the folder at commit 5b4bb69. It shows what the files ask for, not the result of running them.

Tool permissions
Pre-approves nothing: there is no allowed-tools line, so your agent's usual permission prompts apply.
From allowed-tools in the SKILL.md frontmatter.
Runs code
No scripts in the folder and no shell commands in SKILL.md.
From the folder's file list and the shell code blocks in SKILL.md.
Network
Hosts in commands or code, which the agent is likely to contact:
- raw.githubusercontent.com
From URLs in SKILL.md, links to its own repository left out.
Credentials
Names no API keys, tokens, secrets or passwords.
From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.

Context cost

UI Design loads about 1.5k tokens when it runs, and up to ~4.8k if it reads all its reference files. Until then it costs about 66 tokens; SKILL.md has 690 words of instructions outside code blocks.

Always · name and description, kept in context so the agent knows when to use it: ~66
When it runs · the whole SKILL.md, loaded when a task matches: ~1.5k
With references · SKILL.md plus every file in references/, read only if the agent opens them: ~4.8k

Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.

Safety

Auto-check passed

The automated check found no risky patterns in SKILL.md.

Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); files beside SKILL.md are not scanned.

SKILL.md

The full file from EpicenterHQ/epicenter at commit 5b4bb69, republished under its Apache-2.0 licence (© EpicenterHQ). 690 words, ~1,546 tokens.

Download SKILL.mdSave it as .claude/skills/ui-design/SKILL.md (or your agent's skills folder). This skill also uses 6 other files; get the full folder from GitHub.

name: ui-design
description: Design and review Epicenter interfaces while collapsing local UI primitives into the shared component system. Use when co-designing, exploring comparable apps, turning a feature idea into Svelte UI, or changing `packages/ui`, not for a tiny CSS repair.
metadata.author: epicenter
metadata.version: 1.0
license: Complete terms in LICENSE.txt

UI Design

ui-design preserves the user-visible objective while reimagining the simplest greenfield composition and collapsing local markup, arbitrary styling, and duplicated visual contracts into @epicenter/ui, except where app-specific behavior or a load-bearing interaction earns the custom shape.

The existing screen is evidence, not a structure to reproduce. For Epicenter product apps, @epicenter/ui is the default system. Treat shadcn-svelte as implementation lineage and upstream grounding, not as an app import path.

Canonical Path

Name the user-visible objective in one concrete sentence. When the product direction is unsettled, read references/direction-discovery.md before choosing the composition.
Read the current and neighboring surfaces. Inventory the workflow, hierarchy, accessibility, important states, and recognizable product intent that matter.
Sketch the simplest greenfield composition using the natural anatomy of existing @epicenter/ui primitives.
Run the component-system collapse pass below. Refuse exact reproduction of incidental markup, spacing, colors, breakpoints, and one-off states.
Implement the whole state surface: loading, empty, error, disabled, pending, selected, and filter-empty where relevant.
Verify visible, responsive, and interactive results in the browser.
Run UI pre-flight before final handoff or committing the change.

For substantial work, state the design read:

txt

Objective: <what the user accomplishes>.
Greenfield shape: <the simplest natural component-system composition>.
Collapse: <the local structure or styling that disappears>.

Component-System Collapse Pass

Run this for every meaningful UI implementation or review, not only work called a redesign. This is the UI application of asymmetric-wins; load that skill when a candidate refusal needs an explicit product-loss versus deletion-prize decision.

txt

Preserve the product sentence.
Challenge the inherited composition.
Refuse the incidental visual promise.
Delete the local code family.

Inspect every wrapper, class bundle, arbitrary Tailwind value, custom color, locally reconstructed state surface, and primitive override. Ask:

Does an existing primitive or variant already own this contract?
Can the primitive's natural shape replace the wrapper and its classes?
Is the exact local detail load-bearing for comprehension, accessibility, interaction, brand, or required geometry?
If it survives, who owns it: the app's product behavior or the shared system?

Implement obvious collapses directly. Ask the user only when the refusal changes workflow, hierarchy, product meaning, brand posture, or a plausibly load-bearing detail.

Keep custom UI app-local only when it owns app-specific behavior or product meaning. Move a stable visual contract into packages/ui when several apps need it or it owns an accessibility or interaction contract.

Human Taste Gate

Ask one focused question when human preference would materially change the visual language, brand posture, primary hierarchy, navigation, density, or the direction of an expressive public surface. Present concrete alternatives and a recommendation. Do not ask about choices settled by the shared system, accessibility, existing product intent, or a mechanical collapse.

Show full SKILL.md (280 more words)Show less

Product UI And Expressive Surfaces

Product UI should usually be dense, quiet, and operational. Distinctiveness comes from workflow fit, hierarchy, copy, state design, and purposeful details. Marketing pages, docs entry points, prototypes, and explicitly expressive work can use a stronger visual identity, but still run the collapse pass and keep only details that serve the chosen direction.

References

Read references/direction-discovery.md when the user wants to co-design, compare directions, or turn a rough UI idea into a buildable surface.
Read references/comparable-apps.md when the design question depends on category fit or what other apps do.
Read references/component-system.md for every meaningful Epicenter product UI implementation or review. It owns collapse smells and exceptions, then routes exact component and package mechanics to the authoritative packages/ui guide.
Read references/anti-slop-tells.md for public, marketing, docs, portfolio-like, or highly polished work where templated output is a material risk.
Read references/preflight.md before final handoff or committing any visible UI change. Report only failures or intentional exceptions.

Delegation Boundaries

styling owns CSS, Tailwind, spacing, wrappers, overflow, and scroll traps.
svelte owns component structure, runes, lifecycle, and state mechanics.
tanstack-table owns table state, columns, sorting, and row identity.
writing-voice owns visible interface copy and tone.

For an explicit external standards or accessibility audit, WebFetch the Vercel Web Interface Guidelines and apply them directly, reporting findings as file:line. Fetch them per review rather than caching a copy here, because the upstream rules change and a stale copy would be worse than no copy.

txt

https://raw.githubusercontent.com/vercel-labs/web-interface-guidelines/main/command.md

The design decision and component-system collapse stay here even when another skill owns their implementation mechanics.

Final Output

Report the changed surfaces, browser verification, any material deletion prize, and only the custom shapes or pre-flight exceptions that intentionally remain.

Files

SKILL.md and 6 other files (references) in .agents/skills/ui-design of EpicenterHQ/epicenter.

SKILL.md
LICENSE.txt
references/anti-slop-tells.md
references/comparable-apps.md
references/component-system.md
references/direction-discovery.md
references/preflight.md

Open the folder on GitHubat commit 5b4bb69

Compare with similar skills

UI Design next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.

UI Design compared with similar skills
Skill	Stars	Used in	Tokens	Auto-check	Licence	Repo updated
UI Design this skillEpicenterHQ/epicenter	4.8k	—	~1.5k	Automated safety check: Pass	Apache-2.0	today
UI/UX Design System AdvisorGalaxy-Dawn/claude-scholar	5.7k	1 repos	~1.1k	Automated safety check: Pass	MIT	16 days ago
UI UX Pro Maxsundial-org/awesome-openclaw-skills	663	2 repos	~657	Automated safety check: Pass	None	7 mo ago
GlideSrivarsanK/Glide	125	—	~1.7k	Automated safety check: Pass	Apache-2.0	8 days ago
UI UX Pro MaxOhh-889/skyroc	795	27 repos	~3.6k	Automated safety check: Notes	MIT	1 mo ago
UI UX Pro Maxshobcoder/shob	576	—	~3.7k	Automated safety check: Pass	MIT	21 days ago

Similar skills

UI/UX Design System Advisor
Galaxy-Dawn/claude-scholar
Turns a vague UI request into a concrete design system with style, palette, typography and layout guidance from a search script, plus stack-specific implementation advice.
5.7k GitHub starsUsed in 1 repo~1.1k tokens
Frontend & DesignAuto-check passed
UI UX Pro Max
sundial-org/awesome-openclaw-skills
UI/UX design intelligence and implementation guidance for building polished interfaces.
663 GitHub starsUsed in 2 repos~657 tokens
Frontend & DesignAuto-check passed
Glide
SrivarsanK/Glide
Authoritative guide and toolset for AI agents to operate, configure, and visually design applications using Glide (@srivarsank/glide).
125 GitHub stars~1.7k tokensUpdated 8 days ago
Frontend & DesignAuto-check passed
UI UX Pro Max
Ohh-889/skyroc
UI/UX design intelligence. An agent skill from Ohh-889/skyroc.
795 GitHub starsUsed in 27 repos~3.6k tokens
Frontend & DesignAuto-check: notes
UI UX Pro Max
shobcoder/shob
UI/UX design intelligence expert for web and mobile applications.
576 GitHub stars~3.7k tokensUpdated 21 days ago
Frontend & DesignAuto-check passed
Svelte UI Design
podman-desktop/extension-bootc
Guides designing and building Svelte 5 UI components in the bootc extension.
474 GitHub stars~1.3k tokensUpdated today
Frontend & DesignAuto-check passed

Questions about UI Design

What does UI Design do?

Design and review Epicenter interfaces while collapsing local UI primitives into the shared component system. UI Design is an agent skill from EpicenterHQ/epicenter. Design and review Epicenter interfaces while collapsing local UI primitives into the shared component system.

When should I use UI Design?

UI Design fits situations like: exploring comparable apps; turning a feature idea into Svelte UI; changing packages/ui; not for a tiny CSS repair.

How do I install UI Design in Claude Code?

Run `npx skills add EpicenterHQ/epicenter --skill ui-design -a claude-code`. Or copy the skill folder (.agents/skills/ui-design in EpicenterHQ/epicenter) into .claude/skills/ui-design in your project. Claude Code loads it when a task matches its description.

How do I install UI Design in Codex?

Run `npx skills add EpicenterHQ/epicenter --skill ui-design -a codex`. Or copy the skill folder (.agents/skills/ui-design in EpicenterHQ/epicenter) into .agents/skills/ui-design in your project. Codex loads it when a task matches its description.

Can I use UI Design in Cursor, Gemini CLI or GitHub Copilot?

Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add EpicenterHQ/epicenter --skill ui-design -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/ui-design, .gemini/skills/ui-design, .github/skills/ui-design and .opencode/skills/ui-design in your project.

What does UI Design need to run?

SKILL.md names no scripts, command-line tools or credentials: UI Design is instructions for the agent only.

Does UI Design access the network?

SKILL.md names 1 domain. In commands or code: raw.githubusercontent.com; the agent is likely to contact it when it follows the instructions. This is read from the text; nothing was executed.

Is UI Design safe to install?

Our automated static check of SKILL.md found no risky patterns, such as piping downloads into a shell, reading credential files or hidden Unicode. It is not a guarantee. Review the folder before installing.

What licence does UI Design use?

UI Design is published under the Apache-2.0 licence (from the LICENSE file in the skill folder). It allows redistribution, so the full SKILL.md is shown on this page.

How many tokens does UI Design use?

About 1.5k tokens (SKILL.md is roughly 6.2k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full. Its references folder adds about 3.2k tokens, read only when the agent opens those files.

What are the alternatives to UI Design?

Skills that share tags, products or a category with UI Design: UI/UX Design System Advisor (Galaxy-Dawn/claude-scholar, 5.7k stars), UI UX Pro Max (sundial-org/awesome-openclaw-skills, 663 stars), Glide (SrivarsanK/Glide, 125 stars) and UI UX Pro Max (Ohh-889/skyroc, 795 stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains UI Design?

EpicenterHQ (a GitHub organization) maintains it in EpicenterHQ/epicenter, which has 4,821 GitHub stars. The repository holds 65 skills in this directory. The repository was last updated on October 8, 2026.

Source: EpicenterHQ/epicenter on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.

Install UI Design

Facts

At a glance

What it does

When your agent uses it

Example prompts

Workflow steps

What it can do on your machine

Tool permissions

Runs code

Network

Credentials

Context cost

Safety

SKILL.md

UI Design

Canonical Path

Component-System Collapse Pass

Human Taste Gate

Product UI And Expressive Surfaces

References

Delegation Boundaries

Final Output

Files

Compare with similar skills

Similar skills

More from EpicenterHQ/epicenter

Related

Questions about UI Design