
om-ux-shape
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.
- Installs
- 2.6K
- Last 24h
- +50
- Trending rank
- #3341
- Security
- Not audited
Install
Works with every agent the skills CLI supports.
npx skills add https://github.com/open-mercato/skills --skill om-ux-shape- 01
Install
Run the command in your project. The CLI asks which agents to install for.
- 02
Describe the task
Ask your agent for something this skill covers. It loads om-ux-shape automatically when relevant.
- 03
Review the result
The agent follows the SKILL.md steps, scripts and references bundled with the skill.
SKILL.md
The instructions your agent reads when the skill is triggered.
Shape Useful Features
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.
Choose the mode
- Shape for a vague opportunity, request, or feature idea. The default.
- Review for an existing concept, flow, design, prototype, or product area
(including a whole module handed over by
om-ux-review-pr). - Handoff when the direction is decided and implementation-ready behavior is what is missing.
Combine modes only when the request genuinely spans them, and never make a small task carry the full process.
Who reads the result
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.
Required reading
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.
Operating principles
- Start from the consequential problem, not the requested interface.
- Treat requirements as claims until evidence supports them.
- Label facts, inferences, assumptions, and open questions. Never invent research, user quotes, metrics, or constraints.
- Tie the user outcome to a business effect without treating business value as a substitute for user value.
- Prefer the smallest coherent end-to-end solution over a collection of features.
- Recommend a direction. Do not hide behind an unranked menu of options.
- Make every UI element earn its place by enabling an action, decision, status, explanation, or recovery.
- Treat AI as a design material with uncertainty, latency, cost, and failure modes, not as a default interface.
- Preserve meaningful human control, especially for consequential or hard-to-reverse actions.
- Match the depth of the process and output to the decision's risk.
Workflow
ALWAYS check first: Apply .ai/skills/om-ux-shape/SKILL.md when present; safety rules still win.
-
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 inreferences/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.mdand explicitly consider a rules-based alternative; a design that passes the gate is then checked againstreferences/hai-guidelines.md, and its preferred-mistake decision and first-contact framing againstreferences/reward-and-mental-models.md. For any feature, rate the four product risks (value, usability, feasibility, viability) perreferences/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 fromreferences/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 inreferences/report-templates.md, and applyreferences/quality-rubric.mdbefore delivering: a zero in diagnosis, user outcome, coherent scope, AI necessity, or AI control and recovery means the result is not ready. Disclose material evidence limits: distinguish inspected or tested behavior from proposals and assumptions. Keep routine framework checks internal; retain the concrete states and recovery paths needed for implementation.
Response behavior
- Lead with the recommendation or verdict.
- Use plain language and concrete product behavior; keep process narration shorter than the decision it supports.
- Scale detail down for low-risk work and up for consequential, novel, or implementation-ready work.
- If the evidence does not support a confident recommendation, say what is provisional and propose the smallest learning step.
- If the user asks to build the feature, use this workflow to decide, then
continue into implementation. The Handoff shape is written to feed the
collection's implementing skills;
om-ux-review-prcloses the loop on the resulting PR.
FAQ
What does the om-ux-shape skill do?
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.
How do I install om-ux-shape?
Run npx skills add https://github.com/open-mercato/skills --skill om-ux-shape in your project. The skills CLI detects the agents you use and copies the skill into the right folder. For Claude Code you can also place the skill folder at ~/.claude/skills/om-ux-shape/ (personal) or .claude/skills/om-ux-shape/ (project).
Which AI agents can use om-ux-shape?
Any agent that supports the open Agent Skills format (a folder with a SKILL.md file), including Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, Windsurf, Cline, OpenCode and more.
Is om-ux-shape safe to install?
No partner security audit is available yet. Skills can run commands and scripts, so read the SKILL.md and any bundled files before installing.
Who maintains om-ux-shape?
It is published by open-mercato in open-mercato/skills. It has 2,559 recorded installs.
More from open-mercato/skills
om-apply-upgrade-notes
open-mercato/skills
Apply the skills collection's UPGRADENOTES.md after an upgrade. Re-syncs installed tracker and browser-provider descriptors while preserving local edits, reports custom-provider gaps, checks pipeline config and installed artifacts, and summarizes exactly what changed.
om-auto-continue-pr
open-mercato/skills
Resume any open PR — started by om-auto-create-pr or opened outside the pipeline. Claims it, resumes in an isolated worktree from the first unchecked step of its execution plan; a PR with no plan is adopted — the goal is reconstructed from its description, comments, review feedback, linked issues and diff, then executed. Usage - /om-auto-continue-pr
om-auto-create-pr
open-mercato/skills
Run an arbitrary autonomous task end-to-end and ship it as a PR against the configured base branch. Drafts a Progress-tracked execution plan, commits on a fresh worktree branch, implements phase-by-phase, runs the configured validation gate, applies pipeline labels. Long plans hand off to om-auto-create-pr-loop automatically. Resumable via om-auto-continue-pr.
om-auto-continue-pr-loop
open-mercato/skills
Advanced om-auto-continue-pr for PRs started by om-auto-create-pr-loop — claims the PR, resumes from the first non-done PLAN.md Tasks row in an isolated worktree, keeps the per-step commit and checkpoint discipline (integration tests + screenshots for UI), runs the full gate at completion, keeps spec-only design PRs design-only (implementation ships on its own PR via om-auto-implement-spec), and preserves the run-folder and label contract. Use plain om-auto-continue-pr for simple runs.
om-auto-create-pr-loop
open-mercato/skills
Advanced om-auto-create-pr for long, multi-step spec implementations needing resumability and strict step tracking — run folder (PLAN/HANDOFF/NOTIFY), one lean commit per Step, checkpoint verification every 5 Steps with integration tests and UI screenshots, full gate at completion, ready labeled PR. Resumable via om-auto-continue-pr-loop. Use plain om-auto-create-pr for small fixes.
om-auto-fix-issue
open-mercato/skills
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 (om-verify-in-repo, om-root-cause, om-fix, om-open-pr, om-auto-review-pr, om-auto-qa-pr for UI fixes) or the feature route (spec via om-auto-write-spec, built via om-auto-implement-spec). Isolated worktree, claim protocol, clean stops. Use for "fix issue 123" or a pasted problem description.
Popular frontend & design skills
setup-matt-pocock-skills
mattpocock/skills
Configure this repo for the engineering skills: set up its issue tracker, triage label vocabulary, and domain doc layout. Run once before first use of the other engineering skills.
frontend-design
anthropics/skills
Guidance for distinctive, intentional visual design when building new UI or reshaping an existing one. Helps with aesthetic direction, typography, and making choices that don't read as templated defaults.
hyperframes-animation
heygen-com/hyperframes
All animation knowledge for HyperFrames — atomic motion rules, multi-phase scene blueprints, scene transitions, broader motion-design techniques, AND the seven runtime adapters (GSAP default, plus Lottie, Three.js, Anime.js, CSS keyframes, Web Animations API, TypeGPU). Use for any motion or animation task: pick 2-4 rules and compose, or load a blueprint, or look up runtime-specific API (e.g. GSAP eases / Lottie player / Three.js mixer). Also covers auditing an existing composition's choreography (animation map) and 24 named text-animation effects. HyperFrames-native: single paused timeline, seek-safe, deterministic.
prototype
mattpocock/skills
Build a throwaway prototype to answer a design question. Use when the user wants to sanity-check whether a state model or logic feels right, or explore what a UI should look like.
hyperframes-core
heygen-com/hyperframes
The HyperFrames composition contract — build one renderable project. Use for composition structure, the data- timing attributes, class="clip", tracks, sub-compositions, variables, framework-owned media playback, deterministic-render rules, and validation. Read before writing composition HTML.
vercel-react-best-practices
vercel-labs/agent-skills
React and Next.js performance optimization guidelines from Vercel Engineering. This skill should be used when writing, reviewing, or refactoring React/Next.js code to ensure optimal performance patterns. Triggers on tasks involving React components, Next.js pages, data fetching, bundle optimization, or performance improvements.