ui-ux-disenolisted
Install: claude install-skill JuanCastrejon/SistemaMultiagente_SDLC
# UI/UX Diseno
Use this skill when designing, refactoring or reviewing product interfaces across web, mobile or admin surfaces.
## Context
- Frontend stack: `{{stack.frontend}}`
- Design system: `{{stack.designSystem}}`
- Product surfaces: `{{surfacesList}}`
## Goals
- Keep interface changes aligned with product workflows and domain language.
- Improve usability, accessibility, hierarchy and consistency.
- Translate design recommendations into implementation-ready changes.
- Avoid decorative or marketing-heavy UI in operational tools.
## Procedure
1. Read the feature requirement, OpenSpec change and relevant domain docs.
2. Identify the primary user workflow and the decision the screen must support.
3. Audit layout density, navigation, form ergonomics, visual hierarchy and empty/error/loading states.
4. Check accessibility: contrast, focus, labels, keyboard path and responsive behavior.
5. Reuse existing components, tokens and local patterns before adding new primitives.
6. Provide concrete changes with target files, states and verification steps.
## Output Format
```markdown
## UI/UX Review: <surface>
**Stack**: {{stack.frontend}}
**Design system**: {{stack.designSystem}}
**Workflow**: <workflow reviewed>
### Findings
1. [severity] <summary> - `<file/screen>`: <impact> -> <recommended change>
### Expected States
- Loading:
- Empty:
- Error:
- Success:
### Verification
- <viewport/browser/accessibility checks>
```
## Guardrails
- Do not add new dependencies wit