What is the software-ui-ux-design skill?
The software-ui-ux-design skill is a SKILL.md in the vasilyu1983 AI-Agents-public repository that designs and audits interfaces, flows and design systems for an AI coding agent. It works in six modes, covers loading, empty, error and offline states, reviews a ten-row Craft Bar, and ends with acceptance criteria.
The software-ui-ux-design skill will not call a screen finished on accessibility alone. It reviews work against ten Craft Bar rows, and if three or more fail, the skill treats the screen as debt regardless of what metrics say.
The skill sits at skills/universal/software-ui-ux-design in the vasilyu1983 AI-Agents-public repository, which packages 140 skills for coding agents. This one owns design direction, interaction behavior, state coverage and implementation-ready handoff, and leaves user research and code fixes to other skills.
Six modes
| Mode | Use when | Required output |
|---|---|---|
| Audit existing UI | Usability, accessibility, consistency or conversion issues | Findings plus acceptance criteria |
| Design new UI | A flow or screen must be shaped from scratch | Flow, states, components, handoff spec |
| Design-system decision | A team must choose primitives or token structure | Recommendation with tradeoffs |
| AI frontend brief | An AI will generate the UI | Visual thesis, interaction thesis, verification plan |
| AI UX review | The product includes chat, agents or automation | Transparency, control and failure handling guidance |
| Style, palette and font selection | A new surface needs a concrete direction | Design system generated from the offline database |
For that last mode the agent runs python3 scripts/search.py with a product, industry and tone, adding --design-system. The reference describes an offline searchable database of more than 80 styles, more than 190 palettes, font pairings and UX guidelines.
The Craft Bar
Consumer-grade product work is judged on these rows, not just task completion, because a screen that meets WCAG and still feels lifeless is not done.
| Dimension | Pass | Fail |
|---|---|---|
| Time to first value | Under 60 seconds for the primary user | A multi-step setup wizard |
| Empty state | Models the populated state with one verb CTA | No items yet plus a grey illustration |
| Loading state | A skeleton matching the populated layout | A centered spinner |
| Error recovery | Names the cause and offers a specific next step | Something went wrong |
| Motion | Functional, showing origin to destination and hierarchy | Decorative bounces on every state change |
| Recovery without restart | Back, undo and edit-without-redo paths exist | Are you sure gating every action |
Four more rows cover microcopy, touch feedback, optical alignment and first-run delight. For agent surfaces that act over multiple steps, four extra rows score steerability, action reversibility, cost visibility and memory legibility.
Checks before handoff
- Cover all five state types: loading, empty, error, offline or degraded, and happy path.
- Keep one primary action per view, with secondary actions visually subordinate.
- Compute every contrast ratio with
scripts/contrast_check.pyinstead of estimating it, and measure it against the surface the text actually renders on. - Give any live-updating region an aria-live politeness level and a batching rule.
- Provide a prefers-reduced-motion fallback for scroll-driven or CSS animation.
- Verify AI-generated UI in a browser with real content, not placeholder text.
Platform defaults differ: web focuses on semantic structure, focus behavior, reflow and target size, iOS on system navigation, Dynamic Type and safe areas, and Android on Material 3 patterns, edge-to-edge and predictive back.
Who the software-ui-ux-design skill is for
Best for
- Reviewing or shaping flows where loading, empty and error states decide trust.
- Choosing design-system primitives and token structure. For related patterns, see design-system-patterns.
- Writing a strong brief before an AI generates frontend work, with a visual thesis and an interaction thesis.
- Reviewing chat, agent or automation UX for transparency, control and failure handling.
- Accessibility-minded design specs. For a focused review, see accessibility-review.
Not for
- User research and study design, which the skill routes to a separate UX research skill.
- Code-level accessibility fixes, accessibility test automation and frontend implementation, which it routes elsewhere.
- Product strategy and roadmaps, which it hands to a product management skill.
Use it with UiChemy
This skill produces specs, flows and acceptance criteria, not WordPress pages. It does suit the step before a build: audit interfaces, flows and component systems, cover empty, loading and error states, and settle hierarchy before anything is converted.
Then convert the approved frames with UiChemy Figma to WordPress. If you build with UiChemy Composer instead, use the skill's brief structure, a visual thesis, an interaction thesis and real content, in your prompt. Click Get Started on uichemy.com.
How to install Software UI/UX Design Skill: Audit and Design with a Craft Bar
/plugin marketplace add vasilyu1983/AI-Agents-publicAdd the marketplace
In Claude Code, run
/plugin marketplace add vasilyu1983/AI-Agents-public.Install and reload
Run
/plugin install ai-agents@ai-agents, then/reload-plugins. This installs the repository's skills, not only this one.Or clone and link
For Codex, or to edit skills, run
git clone https://github.com/vasilyu1983/AI-Agents-public.git ~/AI-Agents-public, then run the sync script in its scripts/distribution folder from that clone. Pick one install path.Ask for design work
Request an audit of an existing screen, a new flow with states, a design-system decision or a brief for AI-generated frontend work.
Check that it loaded
Ask the agent to audit a settings screen. It should confirm the platform and mode, review the Craft Bar rows, cover loading, empty, error and offline states, and end with acceptance criteria.
Key features
- Six working modesAudit, design new UI, design-system decision, AI frontend brief, AI UX review and style selection each have a use case and a required output.
- Ten-row Craft BarRows such as time to first value, empty state, loading state, error recovery and motion get pass and fail criteria, and three or more fails mean the screen is debt.
- Agent surface rowsFour extra rows score steerability, action reversibility, cost visibility and memory legibility for surfaces that act on the user's behalf.
- Five-state coverageLoading, empty, error, offline or degraded and happy path states must all be covered, and handoffs must carry semantic and accessibility constraints.
- Offline design databaseA search script generates a design system from a product, industry and tone, and can persist it for reuse across sessions.
- Computed contrastEvery contrast ratio in a spec comes from running the contrast script, since an estimated ratio labeled as computed counts as a fabrication.
- Accessibility baselineNew work targets WCAG 2.2 AA, with a note that the legally binding version differs by jurisdiction and surface.
- AI frontend briefingThe brief defines visual thesis, page type, content structure, composition rules and design-system constraints, then requires real content and browser verification.
- Known trapsHappy-path-only design, adjectives like modern or clean in briefs, implicit responsive behavior and motion without a reduced-motion fallback are called out.
- Output contractEach output includes user and task context, primary flow, state coverage, accessibility and performance checks, component or token guidance and acceptance criteria.
Frequently asked questions
What is the software-ui-ux-design skill?
It is a skill in the vasilyu1983/ai-agents-public repository for designing and auditing UI and UX. It covers flows, component systems and AI-assisted frontend briefs, with state coverage, accessibility and acceptance criteria, and it avoids user research and code remediation.
How do I install the software-ui-ux-design skill?
The README documents two routes. In Claude Code, add the marketplace with /plugin marketplace add, install ai-agents@ai-agents and reload plugins. Otherwise clone the repository and run the sync-skills script. Both install the whole repository, so pick one.
Which AI coding agents can use the software-ui-ux-design skill?
The skill's own compatibility line calls it a portable core that works on Claude Code and Codex, and the README gives an install path for each. It does not name other agents, so test it in your own tool if you use another one.
What is the Craft Bar?
It is a table of ten dimensions with pass and fail examples, covering time to first value, empty and loading states, error recovery, microcopy, motion, touch feedback, optical alignment, first-run delight and recovery without restart. Three or more fails mean the screen is debt.
Does it cover accessibility?
Yes, as a design baseline. New work targets WCAG 2.2 AA, contrast ratios must be computed with a script, and live regions need announcement rules. Code-level fixes go to other skills. For related guidance, browse uiux-design in this hub.
Can it brief an AI to generate UI?
Yes. The AI frontend brief mode requires a visual thesis, interaction thesis, page type, content structure and composition rules before generation, plus real content instead of placeholder text and a browser verification path afterwards.
What is the offline design database?
It is a set of CSV files with styles, colors, typography, icons, charts, landing patterns and motion, searched with a BM25 script. The agent passes a product, industry and tone with the design-system flag, and can persist the result for reuse.
What license does the software-ui-ux-design skill use?
GitHub lists the vasilyu1983/ai-agents-public repository as MIT, and the README says it is licensed under MIT with a LICENSE file. Read that file before you redistribute the skill folder inside a product.