context_uiux_design
Manages UI/UX design documentation and principles.
Install
mkdir -p .claude/skills/context-uiux-design && curl -L -o skill.zip "https://agentskills.codes/api/skills/download/13026" && unzip -o skill.zip -d .claude/skills/context-uiux-design && rm skill.zipInstalls to .claude/skills/context-uiux-design
Activation
This is the description your AI agent reads to decide when to run this skill — the better it matches your request, the more reliably it fires.
Use when the user explicitly asks for 设计稿, 重做设计, UI/UX 设计方案, UI 设计师, UX 设计师, 视觉设计方案, 视觉专家, 交互设计方案, 界面设计方案, 页面设计方案, 原型设计, 线框图方案, 视觉规范, 设计系统方案, DESIGN.md, Impeccable review, UX designer, UI designer, frontend redesign, visual polish, or design system spec in a Minimal Context Harness project. Do not trigger for ordinary UI implementation, CSS tweaks, bug fixes, or generic mentions of 设计, design, or user experience.Key capabilities
- →Read global and area-specific context files
- →Create or update DESIGN.md based on user requests
- →Organize user flows, component lists, and interaction details
- →Perform product/page positioning checks for UI changes
- →Check UI controls against a control interaction framework
- →Identify existing visual issues using `npx impeccable detect`
How it works
The skill reads existing context and DESIGN.md, then organizes design conclusions into user flows, component lists, and interaction details. It performs checks for product positioning and UI control semantics.
Inputs & outputs
When to use context_uiux_design
- →Documenting design systems
- →Updating DESIGN.md
- →Defining UI/UX specs
- →Organizing design constraints
About this skill
Context UI/UX Design
Ownership
Own durable Design Authority only: root DESIGN.md, visual identity and exact-value token source/generation direction, visual rationale, canonical adopted-target interpretation/selection basis, adoption records, UI Authority Closure and selected-design alignment.
This Skill does not own product goals/business rules/acceptance (context_product_plan), information/action/feedback and main/drilldown responsibility (context_surface_contract), resource generation (design-resource-authoring), implementation, or acceptance. Route rather than duplicate those owners.
Project-specific UI/UX rules may live in <harnessRoot>/skills/uiux_design/SKILL.md; durable facts remain in DESIGN.md and owning project_context/**. Active Long-Task retains its one Source/Contract lifecycle and Final Gate; this Skill contributes authority closure only.
UI Authority Closure
- Read core/default and owning surface/interaction Context, root
DESIGN.md, its authored token source/generation direction, existing production route/components and every affected selectedexact-targetorconstraintthrough its immutable locator. Runty-context design-resource preflight <handoff.md>before treating a formal handoff as input. - Classify references as
exact-target,constraintorinspiration. Inspiration authorizes no reproduction claim. Provider success, a hash/index or an implementation screenshot proves neither selection nor fidelity. - For every affected stable surface/control/target key, classify durable meaning as Context/
DESIGN.mdcovered, requiring update, task-local, out of scope or decision-required. Conflicting, missing, stale, unreadable or unselected authority fails closed for the affected claim. - Confirm exactly one canonical adoption record per adopted target:
- project/system/component-family targets are fully owned by
DESIGN.md; - screen/interaction targets are fully owned by the owning Screen Contract, with
DESIGN.mdkeeping only the stable key and owner/anchor; - the record preserves interpretation, selection basis, immutable path/URI and digest, applicable conditions and editable upstream owner/locator/update route.
- project/system/component-family targets are fully owned by
- Never overwrite an adopted baseline. Create a new immutable version/digest, review it deliberately and update the unique canonical record. An implementation render/diff is evidence and cannot become the target it claims to match.
- Decide exactly one
Context Delta: none|required. Durable visual-system, token, rationale, adopted interpretation, owner/anchor or verification-route change isrequired; ordinary UI/CSS fixes that preserve authority arenone. - Route unresolved surface placement to
context_surface_contract; route any request to generate/iterate a wireframe, prototype, visual candidate, state study or handoff todesign-resource-authoring. Do not invoke resource generation implicitly.
Selected-design alignment
For a selected implementation handoff, consume the actual canonical resource and its dependency/Fact closure; do not stop at an index or aggregate complete label. Preserve exact located values and design-system lineage through stable keys rather than duplicating them into Context.
An exact-target claim requires condition-specific full-target layout and pixel comparison through a project-owned Oracle; a named constraint requires proof of that constraint only. Validate affected state, viewport/platform, theme/mode, content stress, accessibility/input and motion conditions declared by Source. Never replace declared combinations with representative/pairwise sampling unless Source narrows scope or a project-owned complete equivalence proof exists.
Implementation conformance runs on the real production route/component and affected cold-start journey after the final change. Detached specimens and deep links are supplemental. Report conditions not established; resource integrity/preflight is not production conformance, and screenshot baseline replacement merely to erase a failure is forbidden.
DESIGN.md boundary
Use Google @google/design.md compatible structure: supported YAML tokens plus Markdown rationale. Maintain Design Authority status, one authored exact-value token source/generation direction and the canonical records owned at project/system/component-family scope. Do not add unsupported front-matter keys or duplicate exact values already owned by a project-native token source.
If available after a change, run npx @google/design.md lint DESIGN.md. Exported CSS/theme files are generated implementation outputs, not competing authored truth.
Missing/unconfigured authority blocks invented style-bearing production design. Only an explicit request to initialize/generate/select/adopt the project design system routes to design-system-authoring; local fixes and explicit non-fidelity prototypes remain lightweight.
Output
Report affected authority owners/keys, selected resource classification and condition coverage, immutable/editable provenance, closure/update decisions, implementation-alignment checks, unresolved claims and Context: updated ... or Context: no durable fact change.
Do not create a UI lifecycle, resource pack, Product Surface Contract, acceptance record, fixed plan/matrix, phase or second Authority/Gate. Do not write one-time screenshots, test logs, debug notes or implementation summaries into Context/DESIGN.md.
When not to use it
- →Ordinary UI implementation tasks
- →CSS tweaks or bug fixes
- →Generic mentions of design or user experience
Limitations
- →Does not create `plan.md` or Task Contract files
- →Does not update Context for small code tasks or UI bug fixes
- →Does not generate independent UI/UX documents or handoff matrices
How it compares
This workflow systematically documents design decisions and visual specifications in structured files, unlike ad-hoc design changes.
Compared to similar skills
context_uiux_design side by side with the closest alternatives in the catalog.
| Skill | Installs | Updated | Safety | Difficulty |
|---|---|---|---|---|
| context_uiux_design (this skill) | 0 | 1mo | No flags | Intermediate |
| brief | 0 | 3mo | No flags | Beginner |
| responsive-design-spec | 0 | 4mo | No flags | Advanced |
| ux-designer | 0 | 3mo | No flags | Intermediate |
Try saying
Example prompts that trigger this skill in your AI assistant.
More by Seven128
View all by Seven128 →You might also like
brief
educlopez
Write or update the project's durable design brief at .ui-craft/brief.md. Invoke when the user asks for brief on their UI, or mentions 'brief' alongside design / UI / frontend work.
responsive-design-spec
komunite
Create a responsive design spec with structured process, quality checks, and system integration
ux-designer
MYounesDev
|
prism-state-contract
AlexandreBrisebois
Mandatory state handling for the Visual Auditor. Manages snapshots and production assets.
ui-ux-pro-max
nextlevelbuilder
UI/UX design intelligence. 50 styles, 21 palettes, 50 font pairings, 20 charts, 8 stacks (React, Next.js, Vue, Svelte, SwiftUI, React Native, Flutter, Tailwind). Actions: plan, build, create, design, implement, review, fix, improve, optimize, enhance, refactor, check UI/UX code. Projects: website, landing page, dashboard, admin panel, e-commerce, SaaS, portfolio, blog, mobile app, .html, .tsx, .vue, .svelte. Elements: button, modal, navbar, sidebar, card, table, form, chart. Styles: glassmorphism, claymorphism, minimalism, brutalism, neumorphism, bento grid, dark mode, responsive, skeuomorphism, flat design. Topics: color palette, accessibility, animation, layout, typography, font pairing, spacing, hover, shadow, gradient.
draw-io
davila7
draw.io diagram creation, editing, and review. Use for .drawio XML editing, PNG conversion, layout adjustment, and AWS icon usage.