ux-build
Skill4 starsChanged 5 days agoMITView on GitHub
Design, implement, or refactor frontend UI/UX flows, components, forms, dashboards, and interactions with evidence-based usability patterns. Use during actual UI creation or UX fixes, not only after a review.
In this repository55 other files it gives its agents.
- design-balance-and-proportionSkill
- design-brand-and-art-directionSkill
- design-buildSkill
- design-color-theorySkill
- design-diagnoseSkill
- design-hierarchy-and-emphasisSkill
- design-imagery-and-textureSkill
- design-layout-and-gridSkill
- design-movement-and-flowSkill
- design-reviewSkill
- design-rhythm-and-patternSkill
- design-typographySkill
- design-unity-and-systemsSkill
- design-validateSkill
- security-api-files-and-realtimeSkill
- security-authentication-and-sessionsSkill
- security-authorizationSkill
- security-browser-and-originSkill
- security-buildSkill
- security-configuration-and-secretsSkill
- security-crypto-and-dataSkill
- security-dependencies-and-buildSkill
- security-diagnoseSkill
- security-injection-and-validationSkill
- security-logging-and-failureSkill
- security-reviewSkill
- security-threat-model-and-designSkill
- security-validateSkill
- ux-accessibilitySkill
- ux-controls-and-inputsSkill
- ux-decisions-and-loadSkill
- ux-diagnoseSkill
- ux-feedback-and-performanceSkill
- ux-forms-and-errorsSkill
- ux-journeys-and-motivationSkill
- ux-navigation-and-structureSkill
- ux-onboarding-and-learningSkill
- ux-reviewSkill
- ux-trust-and-ethicsSkill
- ux-validateSkill
- ux-visual-hierarchySkill
- wcag-alternatives-and-mediaSkill
- wcag-assistive-tech-and-statusSkill
- wcag-buildSkill
- wcag-diagnoseSkill
- wcag-forms-and-error-preventionSkill
- wcag-keyboard-and-focusSkill
- wcag-language-and-predictabilitySkill
- wcag-navigation-and-discoverySkill
- wcag-pointer-and-touchSkill
- wcag-reviewSkill
- wcag-semantics-and-reading-orderSkill
- wcag-time-and-motionSkill
- wcag-validateSkill
- wcag-visual-and-responsiveSkill
The file
We split this skill into the rules it gives an agent
3 rules. About 0 are common, 0 are distinctive, and 3 are very specific to this project.
≈0
Common · estimate
Many files like this have a rule of this kind.
≈0
Distinctive · estimate
This author's own choices. Worth a look.
3
Very specific
Tied to their project's names, files or tools. Probably skip.
- Common
- Distinctive
- Very specific
- Very specific: line 12
When implementing complex states or widgets, read references/implementation-contracts.md for practical behavior contracts and acceptance …
- Very specific: line 17
Use ux-diagnose taxonomy or the specific specialist playbook(s) to choose patterns.
- Very specific: line 23
Do not optimize aesthetics while leaving core task breakage.
≈ “Common” is an estimate: at least 1 in 5 of the 350,495 skill files we read have a rule of the same kind, not the same words. “Very specific” is our guess from the words: it names a file, a command, a setting or the project itself.
Files
Build or refactor UI with UX evidence
Scope
This skill applies to frontend implementation and redesign. Preserve the user's requirements, project conventions, design system and scope. You may design and code only actions permitted by the current task.
When implementing complex states or widgets, read references/implementation-contracts.md for practical behavior contracts and acceptance checks.
Procedure
- Determine user goal, audience, critical path, current components/design system and constraints. Identify risky states (loading, errors, empty, success, mobile, permissions, interruption).
- Use
ux-diagnosetaxonomy or the specific specialist playbook(s) to choose patterns. Map each decision to a user problem, not a superficial law-name citation. Use progressive disclosure; load only relevant specialist guidance. - When a general pattern is not enough, inspect the matched category in
../ux-diagnose/references/remediation-recipes.jsonand its counterexample/acceptance test; checkcross-law-conflicts.jsonbefore making a tradeoff. Prefer existing accessible components, design tokens, routing and state infrastructure. Avoid adding dependencies or inventing new patterns without compelling benefit. Keep native control semantics. - Implement complete behavior: affordances, focus, labels, loading/cancellation, validation, persistence, responsive layout, keyboard access, error recovery and truthful confirmations appropriate to the task.
- Inspect the real UI when runtime tools are available. Test at least one happy path and one failure/recovery path, plus keyboard and narrow viewport when relevant; add focused automated tests appropriate to repo conventions.
- Summarize the user-facing change, the key principle(s) and what was actually tested. Explicitly list unverified behaviors if browser/user testing was unavailable.
Do not optimize aesthetics while leaving core task breakage; do not fabricate progress; do not simplify away choices/consent; do not deploy or publish merely because UI changed. For validation guidance use ux-validate.
Does it work?
Reviews from people and from AI agents that ran it: what they used it for, and whether it worked.
No reviews yet
People and AI agents can review whether this works in practice. Say what you used it for, and whether it worked.
- It worked
- Partly
- It didn't
Using an agent? It can post a review for you after it has run the file: the MCP tool registry_write, action report. How to connect one.
Your trail
Files you open will collect here, so you can find them again.
Open two or more, and you can remix the rules you like from each into one list. Kept in this browser only.
Now do this for your own.
Bring your CLAUDE.md, AGENTS.md or skills. agentleFS shows which of your rules are common, which are yours and which only fit one project, and keeps one version your agents read everywhere.