web-ui-ux
Scannednpx machina-cli add skill ssdeanx/AI-Skills/web-ui-ux --openclawWeb UI/UX
You help produce modern, usable, accessible web UI with clear, testable guidance.
How to run this skill well
Establish context quickly (ask only what you need): platform, audience/jobs-to-be-done, the page/component in scope, and constraints (brand, timeline, existing design system).
Prefer concrete outputs: a short prioritized fix list, a component spec (states + interactions), and accessibility notes.
Keep scope tight: avoid broad redesigns unless asked; fix the top usability issues first.
Core workflows
A) UI/UX review of an existing page
Do this when the user shares a screenshot, route/page, or component and asks for improvement.
Steps:
- Identify intent and primary action.
- Check clarity: hierarchy, CTA prominence, labels, and visual noise.
- Check usability: forms, errors, loading/empty states, and navigation.
- Check accessibility basics: keyboard, focus order, labels, contrast.
- Produce output: top issues (with why), fixes, quick wins vs deeper refactors.
Use detailed checklists in:
B) Designing a new screen/component
Do this when the user asks to design a new page, dialog, component, or flow.
Steps:
- Ask for minimum inputs: users + goal, must-have fields/actions, and target content density.
- Propose an IA/layout: structure, regions, hierarchy.
- Define component spec: states (default/hover/focus/disabled), async states (loading/empty/error), validation, microcopy.
- Provide acceptance criteria: responsive behavior and keyboard/focus behavior.
Use system defaults and token guidance in:
Output templates
UI/UX findings template
Use this structure:
- Summary (1-2 sentences)
- Top issues (prioritized)
- Issue: ...
- Why it matters: ...
- Fix: ...
- Accessibility notes
- Responsive notes
- Copy/microcopy suggestions
Component spec template
Use this structure:
- Purpose
- Anatomy (slots/parts)
- States (default/hover/focus/disabled/loading/error/empty)
- Keyboard interactions
- Validation rules (if form-related)
- Responsive behavior
Notes
- Keep content ASCII-friendly when possible to avoid Windows encoding pitfalls in older validators.
- This skill is web-first, but the same heuristics often apply to Unreal UIs (UMG): clarity, hierarchy, navigation, input focus, and feedback.
Source
git clone https://github.com/ssdeanx/AI-Skills/blob/main/skills/web-ui-ux/SKILL.mdView on GitHub Overview
Web UI/UX provides practical guidance to design, review, and polish web interfaces for clarity, usability, and accessibility. It covers layout, usability, microcopy, responsive behavior, forms, navigation, and can also apply to Unreal UI (UMG) heuristics.
How This Skill Works
Establish context quickly (platform, audience, scope, constraints). Choose a workflow: A) review an existing page or B) design a new screen/component. The skill outputs a prioritized issue list, a component spec (states + interactions + validation), accessibility notes, and acceptance criteria for responsive and keyboard behavior, using system defaults and token guidance from design-system references.
When to Use It
- Audit a page or route for clarity, hierarchy, CTA prominence, labels, and visual noise.
- Design a new screen, dialog, or user flow with a clear IA and component specs.
- Create a component spec with states, interactions, async states, and validation rules.
- Review forms, navigation, error handling, and microcopy to improve usability and accessibility.
- Generate HTML head, manifest, and icon guidance for a web app (including PWA considerations); apply UX heuristics to Unreal UMG as needed.
Quick Start
- Step 1: Gather inputs (platform, audience, goal, must-have fields/actions, and target content density).
- Step 2: Run the appropriate workflow (A: review; B: design) and produce outputs (issues, fixes, and a component spec).
- Step 3: Deliver findings with acceptance criteria, accessibility notes, and testable, responsive guidance.
Best Practices
- Ask for context up front: platform, audience, goals, must-have constraints, and content density.
- Deliver concrete outputs: a short prioritized fix list, a component spec, and accessibility notes.
- Keep the scope tight: fix top usability issues first; avoid broad redesigns unless asked.
- Use the provided checklists (ui-review-checklist.md, accessibility-checklist.md) to guide audits.
- Reference design-system defaults and tokens for consistency across screens and components.
Example Use Cases
- Audit a product page to improve clarity, hierarchy, and CTA prominence.
- Design a new login/signup screen with accessible forms and clear microcopy.
- Create a component spec for a modal with default/hover/focus/disabled states and async states.
- Review a checkout flow for errors, loading/empty states, and keyboard navigation.
- Generate HTML head/manifest/icon guidance for a new web app (and apply the same UX principles to Unreal UMG if needed).
