UI Styling
Ohh-889/skyroc
Create beautiful, accessible user interfaces with shadcn/ui components (built on Radix UI + Tailwind), Tailwind CSS utility-first styling, and canvas-based visual designs.
Turn a vague product, UI/UX, or AI feature idea into a decided direction.
$ npx skills add go-musicfox/go-musicfox --skill om-ux-shape -a claude-codeProject install by default; add -g for ~/.claude/skills/.
$ gh skill install go-musicfox/go-musicfox om-ux-shape --agent claude-codeProject scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).
$ git clone --depth 1 https://github.com/go-musicfox/go-musicfox.git skills-src && mkdir -p .claude/skills && cp -r skills-src/.agents/skills/om-ux-shape .claude/skills/om-ux-shape && rm -rf skills-srcUse ~/.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/
Install the "om-ux-shape" agent skill from https://github.com/go-musicfox/go-musicfox/tree/master/.agents/skills/om-ux-shape into .claude/skills/om-ux-shape/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "om-ux-shape", 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 install https://github.com/go-musicfox/go-musicfox/tree/master/.agents/skills/om-ux-shapeType 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.
$ npx skills add go-musicfox/go-musicfox --skill om-ux-shape -a codexProject install goes to .agents/skills/; add -g for ~/.codex/skills/.
$ gh skill install go-musicfox/go-musicfox om-ux-shape --agent codexProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/go-musicfox/go-musicfox.git skills-src && mkdir -p .agents/skills && cp -r skills-src/.agents/skills/om-ux-shape .agents/skills/om-ux-shape && rm -rf skills-srcUse ~/.agents/skills/ instead of .agents/skills for a personal install.
Codex skills documentation · loads skills from .agents/skills/
Install the "om-ux-shape" agent skill from https://github.com/go-musicfox/go-musicfox/tree/master/.agents/skills/om-ux-shape into .agents/skills/om-ux-shape/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "om-ux-shape", 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.
$ npx skills add go-musicfox/go-musicfox --skill om-ux-shape -a cursorProject install goes to .agents/skills/; add -g for ~/.cursor/skills/.
$ gh skill install go-musicfox/go-musicfox om-ux-shape --agent cursorProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/go-musicfox/go-musicfox.git skills-src && mkdir -p .cursor/skills && cp -r skills-src/.agents/skills/om-ux-shape .cursor/skills/om-ux-shape && rm -rf skills-srcUse ~/.cursor/skills/ instead of .cursor/skills for a personal install.
Cursor skills documentation · loads skills from .cursor/skills/, .agents/skills/, .claude/skills/, .codex/skills/
Install the "om-ux-shape" agent skill from https://github.com/go-musicfox/go-musicfox/tree/master/.agents/skills/om-ux-shape into .cursor/skills/om-ux-shape/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "om-ux-shape", 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 https://github.com/go-musicfox/go-musicfox.git --path .agents/skills/om-ux-shape--scope user (default) or --scope workspace; --path is the subfolder of the repo that holds the skill; --consent skips the security confirmation prompt.
$ npx skills add go-musicfox/go-musicfox --skill om-ux-shape -a gemini-cliProject install goes to .agents/skills/; add -g for ~/.gemini/skills/.
$ gh skill install go-musicfox/go-musicfox om-ux-shape --agent gemini-cliProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/go-musicfox/go-musicfox.git skills-src && mkdir -p .gemini/skills && cp -r skills-src/.agents/skills/om-ux-shape .gemini/skills/om-ux-shape && rm -rf skills-srcUse ~/.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/
Install the "om-ux-shape" agent skill from https://github.com/go-musicfox/go-musicfox/tree/master/.agents/skills/om-ux-shape into .gemini/skills/om-ux-shape/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "om-ux-shape", 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.
$ gh skill install go-musicfox/go-musicfox om-ux-shapeInstalls 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).
$ npx skills add go-musicfox/go-musicfox --skill om-ux-shape -a github-copilotProject install goes to .agents/skills/; add -g for ~/.copilot/skills/.
$ git clone --depth 1 https://github.com/go-musicfox/go-musicfox.git skills-src && mkdir -p .github/skills && cp -r skills-src/.agents/skills/om-ux-shape .github/skills/om-ux-shape && rm -rf skills-srcUse ~/.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/
Install the "om-ux-shape" agent skill from https://github.com/go-musicfox/go-musicfox/tree/master/.agents/skills/om-ux-shape into .github/skills/om-ux-shape/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "om-ux-shape", 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.
$ npx skills add go-musicfox/go-musicfox --skill om-ux-shape -a opencodeOpenCode documents no install command of its own. Project install goes to .agents/skills/; add -g for ~/.config/opencode/skills/.
$ gh skill install go-musicfox/go-musicfox om-ux-shape --agent opencodeProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/go-musicfox/go-musicfox.git skills-src && mkdir -p .opencode/skills && cp -r skills-src/.agents/skills/om-ux-shape .opencode/skills/om-ux-shape && rm -rf skills-srcUse ~/.config/opencode/skills/ instead of .opencode/skills for a personal install.
OpenCode skills documentation · loads skills from .opencode/skills/, .claude/skills/, .agents/skills/
Install the "om-ux-shape" agent skill from https://github.com/go-musicfox/go-musicfox/tree/master/.agents/skills/om-ux-shape into .opencode/skills/om-ux-shape/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "om-ux-shape", 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.
om-ux-shapeTurn a vague product, UI/UX, or AI feature idea into a decided direction.
Om UX Shape is an agent skill from go-musicfox/go-musicfox. Turn a vague product, UI/UX, or AI feature idea into a decided direction. Use when shaping a feature, simplifying an overcomplicated flow, deciding whether and how to use AI, defining screen states, planning validation, or preparing a design handoff for engineering.
Its SKILL.md is about 2k tokens, which your agent loads only when the skill is triggered. The skill folder holds 14 other files, including reference files (for example `agents/openai.yaml`, `references/agentic-setup.md` and `references/ai-interaction.md`).
It sits in Frontend & Design, covering UI design. The repository describes itself as: go-musicfox是用Go写的又一款网易云音乐命令行客户端,支持UnblockNeteaseMusic、各种音质级别、lastfm、MPRIS、MacOS交互响应(睡眠暂停、蓝牙耳机连接断开响应、菜单栏控制等)... The licence is GPL-3.0.
10 steps, taken from the first numbered list in SKILL.md.
Read from SKILL.md and the folder at commit 12169a7. It shows what the files ask for, not the result of running them.
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.
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.
No URLs in SKILL.md.
From URLs in SKILL.md, links to its own repository left out.
Names no API keys, tokens, secrets or passwords.
From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.
Om UX Shape loads about 2k tokens when it runs, and up to ~11k if it reads all its reference files. Until then it costs about 70 tokens; SKILL.md has 1,049 words of instructions outside code blocks.
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.
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.
The full file from go-musicfox/go-musicfox at commit 12169a7, republished under its GPL-3.0 licence (© go-musicfox). 1,049 words, ~2,048 tokens.
.claude/skills/om-ux-shape/SKILL.md (or your agent's skills folder). This skill also uses 12 other files; get the full folder from GitHub.Turn ambiguity into a clear product decision before turning it into screens. Connect user value, business value, interaction quality, AI behavior, delivery constraints, and evidence in one lightweight process.
Input — a feature idea, an existing concept or product area, or a decided
direction that needs implementation detail.
Output — one filled shape from references/report-templates.md.
om-ux-review-pr).Combine modes only when the request genuinely spans them, and never make a small task carry the full process.
Establish this before writing, because it decides how concrete the output must be. Ask when it is unclear, otherwise default to the least-context reader: someone who will build or draw this, does not know the design system, and was not in the conversation. Write for them. A senior designer can skim a concrete answer; nobody can build an abstract one.
These are not optional background. When the condition is met, load the reference before finishing the step: skipping it produces the failure this skill exists to prevent, an answer that sounds reasonable and decides nothing.
| Condition | Load |
|---|---|
| Shape or Review mode | references/decision-framework.md |
| AI is proposed, implied, or already present | references/ai-interaction.md, then references/hai-guidelines.md and references/reward-and-mental-models.md for whatever passed the gate |
| Outcomes or validation metrics are being defined | references/human-value-metrics.md |
| Before writing any result | references/report-templates.md |
| Before delivering any result | references/quality-rubric.md |
references/foundations.md explains the rationale behind the process; read it
only when adapting the process or evolving this skill.
Agentic setup — follow references/agentic-setup.md: repo-local
override contract, the design contract as constraints when present, and the
untrusted-content boundary. Shared communication and reporting rules live
in references/rules.md.
Establish the decision. State the decision being made, the primary actor and situation, the intended user and business outcomes, and the mode and depth. Ask only questions whose answers could materially change the direction; otherwise proceed with clearly marked assumptions.
Build the evidence ledger. Separate what is known, inferred, assumed,
and unknown, following references/decision-framework.md (§2). Prioritize
unknowns by decision risk, not curiosity.
Diagnose. Write a one-sentence diagnosis naming the main obstacle to
progress, distinguishing the underlying job from the requested feature.
Then define one primary behavioral outcome, its plausible business effect,
and a guardrail against harmful optimization. Framing and outcome
discipline: references/decision-framework.md (§1, §3); choosing signals
that mean people are better off: references/human-value-metrics.md.
Test the proposed mechanism. When AI is involved, run the necessity
gate in references/ai-interaction.md and explicitly consider a rules-based
alternative; a design that passes the gate is then checked against
references/hai-guidelines.md, and its preferred-mistake decision and
first-contact framing against references/reward-and-mental-models.md.
For any feature, rate the four product risks (value, usability,
feasibility, viability) per references/decision-framework.md (§4), adding
trust, safety, privacy, and model-quality risks for AI.
Choose a direction. Generate two or three meaningfully different
mechanisms, compare them per references/decision-framework.md (§5), and
select one, explaining the decisive trade-off. Tag the claims that carry
the argument with their honest tier from references/evidence-tiers.md. In
Review mode, rank findings by impact × frequency × reach, never by ease of
fix.
Shape the smallest coherent feature. One primary job and happy path,
the minimum states and recovery paths trust requires, and an explicit now,
later, and not-doing split (references/decision-framework.md §6). A thin
but broken slice is not an MVP: the smallest coherent feature completes a
real job end to end and survives its likely failures.
Specify the interaction contract, concretely. Entry point and trigger, information required, system response, primary decisions and actions, the relevant empty, loading, partial, success, error, and permission states, and the edit, undo, dismiss, retry, fallback, or escalation paths, plus accessibility and content requirements. For AI, also specify capability framing, uncertainty, explanations, data use, feedback, control, and behavior when the model cannot help.
Concrete means: name the screens, name the components (from the contract registry when one exists), and write the actual labels, headings, empty-state sentences, and error messages rather than describing them. "Add a helpful empty state" is unfinished work; the finished version says what the screen shows, in the words the user will read. If a reader could not build or draw it from your output, the step is not done.
De-risk and deliver. Name the riskiest unverified belief, choose the
smallest test that could change the decision, and state what each result
triggers (references/decision-framework.md §7). Then fill the matching
shape in references/report-templates.md, and apply
references/quality-rubric.md before delivering: a zero in diagnosis, user
outcome, coherent scope, AI necessity, or AI control and recovery means the
result is not ready. Close with the one-line Applied note the template
defines, so the reader can see which checks ran and which did not apply
instead of guessing what was considered.
om-ux-review-pr closes the loop on the
resulting PR.© go-musicfox, GPL-3.0. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file
SKILL.md and 12 other files (references) in .agents/skills/om-ux-shape of go-musicfox/go-musicfox.
Open the folder on GitHubat commit 12169a7
We found 1 copy of this SKILL.md (exact, near-identical or edited) in other folders, from 1 other GitHub owner. This page covers the copy in go-musicfox/go-musicfox, which our catalogue first saw on October 7, 2026.
Om UX Shape 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.
| Skill | Stars | Used in | Tokens | Auto-check | Licence | Repo updated |
|---|---|---|---|---|---|---|
| Om UX Shape this skillgo-musicfox/go-musicfox | 2.6k | 1 repos | ~2k | Automated safety check: Pass | GPL-3.0 | |
| UI StylingOhh-889/skyroc | 795 | 13 repos | ~2.5k | Automated safety check: Pass | MIT | |
| LobeHub Interactive Prototypelobehub/lobehub | 83k | — | ~1.6k | Automated safety check: Pass | Custom licence | |
| Make Interfaces Feel Bettersamuelclay/NewsBlur | 7.6k | 10 repos | ~1.5k | Automated safety check: Pass | MIT | |
| UI UX Pro MaxZxBing0066/pixel-converter | 181 | 13 repos | ~2.6k | Automated safety check: Notes | BSD-2-Clause | |
| Design Dnazanwei/design-dna | 1.9k | 1 repos | ~2.1k | Automated safety check: Pass | MIT |
Ohh-889/skyroc
Create beautiful, accessible user interfaces with shadcn/ui components (built on Radix UI + Tailwind), Tailwind CSS utility-first styling, and canvas-based visual designs.
lobehub/lobehub
Builds single-file interactive HTML prototypes rendered with the real LobeHub UI components and written as production-style React, so they can later be split into files.
samuelclay/NewsBlur
Design engineering principles for making interfaces feel polished.
ZxBing0066/pixel-converter
UI/UX design intelligence with searchable database. An agent skill from ZxBing0066/pixel-converter.
zanwei/design-dna
Extract, define, and apply design DNA across three dimensions: design system (tokens), design style (qualitative feel), and visual effects (Canvas, WebGL, 3D, particles, shaders, scroll effects…
warpdotdev/warp
Turns a Figma frame or component into production code that matches the design, using the Figma MCP server and the project's own design system.
go-musicfox/go-musicfox
Fix or implement a tracker issue end to end from a single command — takes an issue id or a plain problem description (filed first via om-prepare-issue), classifies, then drives the bug autofix chain…
go-musicfox/go-musicfox
Divergent conversation before any artifact exists — open questions one at a time, alternatives including building nothing, converging on a routing decision and a handoff brief for the next skill.
go-musicfox/go-musicfox
Close the tracker issues that recently merged PRs authoritatively fixed — via fixes/closes/resolves keywords or closingIssuesReferences — and post informational comments on issues whose PRs were…
go-musicfox/go-musicfox
Create one well-formed tracker issue from a brief without implementing it — dedupes against existing issues and PRs, links a covering spec (authoring one via om-auto-write-spec on a design-only PR…
go-musicfox/go-musicfox
Write and review feature specifications to staff-engineer standards.
go-musicfox/go-musicfox
Approve (submit an approving review) and squash-merge a PR given only its number, refusing when the QA gate or a blocking label forbids it.
Categories
Turn a vague product, UI/UX, or AI feature idea into a decided direction. Om UX Shape is an agent skill from go-musicfox/go-musicfox. Turn a vague product, UI/UX, or AI feature idea into a decided direction.
Om UX Shape fits situations like: shaping a feature; simplifying an overcomplicated flow; deciding whether and how to use AI; defining screen states.
Run `npx skills add go-musicfox/go-musicfox --skill om-ux-shape -a claude-code`. Or copy the skill folder (.agents/skills/om-ux-shape in go-musicfox/go-musicfox) into .claude/skills/om-ux-shape in your project. Claude Code loads it when a task matches its description.
Run `npx skills add go-musicfox/go-musicfox --skill om-ux-shape -a codex`. Or copy the skill folder (.agents/skills/om-ux-shape in go-musicfox/go-musicfox) into .agents/skills/om-ux-shape in your project. Codex loads it when a task matches its description.
Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add go-musicfox/go-musicfox --skill om-ux-shape -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/om-ux-shape, .gemini/skills/om-ux-shape, .github/skills/om-ux-shape and .opencode/skills/om-ux-shape in your project.
SKILL.md names no scripts, command-line tools or credentials: Om UX Shape is instructions for the agent only.
SKILL.md contains no URLs. Any network use would come from the scripts or tools the agent runs. This is read from the text; nothing was executed.
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.
Om UX Shape is published under the GPL-3.0 licence (the repository's licence). It allows redistribution, so the full SKILL.md is shown on this page.
About 2k tokens (SKILL.md is roughly 8.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 8.5k tokens, read only when the agent opens those files.
Skills that share tags, products or a category with Om UX Shape: UI Styling (Ohh-889/skyroc, 795 stars), LobeHub Interactive Prototype (lobehub/lobehub, 83k stars), Make Interfaces Feel Better (samuelclay/NewsBlur, 7.6k stars) and UI UX Pro Max (ZxBing0066/pixel-converter, 181 stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.
go-musicfox (a GitHub organization) maintains it in go-musicfox/go-musicfox, which has 2,584 GitHub stars. The repository holds 37 skills in this directory. The repository was last updated on September 7, 2026.
Source: go-musicfox/go-musicfox on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.