Loading...
Loading...
Use when designing or auditing UI/UX (wireframes to UI specs), running heuristic and accessibility reviews (WCAG 2.2 AA, ARIA), defining design systems and tokens, improving flows/forms/states and conversion (CRO), or tailoring inclusive experiences (age, neurodiversity) across web/iOS/Android/desktop, including AI/automation UX patterns.
npx skill4agent add vasilyu1983/ai-agents-public software-ui-ux-designDesign challenge:
├─ What to build? → Use software-ux-research first
├─ Improving existing UI?
│ ├─ Usability issues → Heuristic review
│ ├─ Accessibility gaps → WCAG 2.2 audit
│ ├─ Inconsistency → Design system alignment
│ └─ Conversion issues → CRO audit
├─ Building new UI?
│ └─ references/ui-generation-workflows.md
├─ Specific demographics?
│ └─ references/demographic-inclusive-design.md
└─ Platform constraints?
├─ Web → semantics + focus + reflow
├─ iOS → system nav + Dynamic Type
└─ Android → Material + edge-to-edge| Goal | Do | Avoid |
|---|---|---|
| Clarity | One primary action per view | Competing CTAs |
| Affordances | Native controls, strong signifiers | Clickable divs, hover-only |
| Feedback | Immediate visual response | Silent taps |
| Error prevention | Constrain inputs, show examples | Submit-then-fail |
| Error recovery | Specific message + next step | "Something went wrong" |
| Consistency | Reuse patterns and terms | Same term, different meanings |
| State | Treatment | When |
|---|---|---|
| Loading | Placeholder matching layout | Data fetching |
| Empty | Message + CTA | Zero items |
| Error | Alert + retry action | Request fails |
| Offline | Banner + cached indicator | No network |
| Degraded | Warning + limited functionality | Partial failure |
| Requirement | Implementation |
|---|---|
| Focus not obscured | Keep focus visible with sticky UI |
| Focus appearance | Clear visible indicator |
| Dragging movements | Non-drag alternatives |
| Target size | ≥24×24 CSS px |
| Redundant entry | Don't re-request known info |
| Accessible auth | Avoid cognitive tests |
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: 0.01ms !important;
transition-duration: 0.01ms !important;
}
}{
"color": {
"primary": {
"$value": "#0066cc",
"$type": "color"
}
},
"spacing": {
"sm": {
"$value": "8px",
"$type": "dimension"
}
}
}| Layer | Examples | Purpose |
|---|---|---|
| Primitive | | Raw values |
| Semantic | | Intent-based |
| Component | | Component-specific |
| Resource | Purpose |
|---|---|
| references/implementation-research-workflow.md | Research before building |
| references/design-systems.md | Design system patterns |
| references/component-library-comparison.md | shadcn, MUI, Radix |
| references/nielsen-heuristics.md | Heuristic evaluation |
| references/wcag-accessibility.md | WCAG compliance |
| references/demographic-inclusive-design.md | Age-specific UX |
| references/neurodiversity-design.md | ADHD, autism, dyslexia |
| references/ui-generation-workflows.md | UI from scratch |
| references/ai-design-tools-2025.md | Figma AI, v0 |
| references/cro-framework.md | Conversion optimization |
| references/operational-playbook.md | Decision frameworks |
| Template | Purpose |
|---|---|
| assets/design-brief.md | Design brief |
| assets/ux-review-checklist.md | UX review |
| assets/ui-generation/full-ui-spec.md | UI spec |
| assets/audits/cro-audit-template.md | CRO audit |
| Skill | Purpose |
|---|---|
| software-ux-research | Research (use first) |
| software-frontend | Implementation |
| software-mobile | Mobile patterns |
| product-management | Product strategy |