ui-ux-generation
Skill0 starsChanged 3 months agoApache-2.0View on GitHub
Generate or reshape coherent, production-ready UI/UX by routing interface components and cross-cutting concerns to focused specialist rules. Use for building screens, flows, design systems, or multi-component frontend work; use the matching ui-ux specialist skill directly when the request has one focused concern.
In this repository46 other files it gives its agents.
- AGENTS.mdAGENTS.md
- academixSkill
- agent-browserSkill
- ai-engineering-platformSkill
- apocalypseSkill
- aria-apg-reviewSkill
- context-budgetSkill
- crawler-readiness-auditSkill
- data-protection-gateSkill
- decision-criticality-gateSkill
- fact-checkerSkill
- find-skillsSkill
- focus-friendly-outputSkill
- frontend-designSkill
- grill-meSkill
- grill-with-docsSkill
- humanizerSkill
- improve-codebase-architectureSkill
- microsoft-foundrySkill
- output-templatesSkill
- pre-launch-security-gateSkill
- prompt-preflightSkill
- quick-recapSkill
- rag-retrieval-qualitySkill
- rest-api-best-practicesSkill
- rigorous-responseSkill
- security-checklistSkill
- shepherdSkill
- skill-optimizerSkill
- sql-query-correctnessSkill
- system-design-scaleSkill
- tddSkill
- ui-ux-color-contrastSkill
- ui-ux-component-qualitySkill
- ui-ux-design-systemsSkill
- ui-ux-dropdownsSkill
- ui-ux-form-validationSkill
- ui-ux-loading-statesSkill
- ui-ux-mobile-cssSkill
- ui-ux-typographySkill
- ux-logic-loopSkill
- ux-pattern-reviewSkill
- vercel-react-best-practicesSkill
- visual-flow-storyboardSkill
- visual-pr-reviewSkill
- web-design-guidelinesSkill
The file
We split this skill into the rules it gives an agent
5 rules. About 0 are common, 4 are distinctive, and 1 is very specific to this project.
≈0
Common · estimate
Many files like this have a rule of this kind.
≈4
Distinctive · estimate
This author's own choices. Worth a look.
1
Very specific
Tied to their project's names, files or tools. Probably skip.
- Common
- Distinctive
- Very specific
- Distinctive: line 21
Read the brief, current UI, component kit, semantic tokens, supported states, and responsive behavior.
- Distinctive: line 23
Read every matching specialist skill in the map below before designing or editing that concern.
- Distinctive: line 26
Verify keyboard, pointer, touch, viewport, responsive, reduced-motion, initial, loading, empty, partial-data, success, error, offline, …
- Distinctive: line 45
If the request concerns only one mapped concern, use its specialist skill directly.
- Very specific: line 49
Add one top-level ui-ux-<concern> skill only when that concern is requested.
≈ “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
UI/UX Generation
Route component and cross-cutting behavior before generating code or visual direction.
Workflow
- Read the brief, current UI, component kit, semantic tokens, supported states, and responsive behavior.
- Inventory the component types and cross-cutting concerns required by the requested screen or flow.
- Read every matching specialist skill in the map below before designing or editing that concern.
- Reuse native elements, existing product primitives, and installed dependencies before writing a custom control.
- Generate the smallest coherent implementation that satisfies the brief and every selected specialist skill.
- Verify keyboard, pointer, touch, viewport, responsive, reduced-motion, initial, loading, empty, partial-data, success, error, offline, disabled, read-only, permission-denied, unsaved-changes, destructive-confirmation, and recovery behavior that applies to the changed UI.
Specialist skill map
| Concern | Read |
| Design-system architecture, tokens, spacing, grid, layout, iconography, motion, component contracts, documentation, or governance | UI/UX Design Systems |
| Component radii, action labels, selection visibility, touch targets, readability, or decision metadata | UI/UX Component Quality |
| Color contrast, semantic color roles, status cues, charts, dark mode, or forced-colors behavior | UI/UX Color Contrast |
| Dropdown, select, combobox, popup option list, or action menu | UI/UX Dropdowns |
| Form validation, inline error, error summary, or valid-field feedback | UI/UX Form Validation |
| Skeleton, spinner, progress, pending action, slow operation, timeout, or retry | UI/UX Loading States |
| Mobile CSS, anchor motion, modal scrolling, input zoom, tap feedback, or focus styling | UI/UX Mobile CSS |
| Typography scale, body size, fluid headings, line height, text measure, wrapping, or text resizing | UI/UX Typography |
| Whole-screen visual direction, brand signature, dashboards, or multi-concern implementation with no single focused concern | Frontend Design |
| Auditing already-built UI against accessibility/interaction/responsive guidance (not generating new UI) | Web Design Guidelines |
| Reviewing UX pattern fit for an existing flow (not generating new UI) | UX Pattern Review |
| ARIA role/state/keyboard conformance for a composite widget | ARIA APG Review |
If the request concerns only one mapped concern, use its specialist skill directly. If no specialist skill exists yet, follow the existing product patterns and accessibility requirements; do not invent a speculative subskill during unrelated implementation work.
Adding specialist skills
Add one top-level ui-ux-<concern> skill only when that concern is requested. Keep its rules specific, testable, and free of screen-level duplication, then add it to the map and repository inventories.
Output
Return the requested artifact first. Follow it with the exact verification performed and any behavior that remains unverified.
Shared output profile
Compose the execution profile from output-templates.
Preserve stricter specialist-skill rules, omit empty components, and never present unverified behavior as complete.
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.