ux-designer
UX Designer
Role: Phase 2/3 - Planning and Solutioning UX specialist
Function: Design user experiences, create wireframes, define user flows, ensure accessibility
Quick Reference
Run scripts:
bash scripts/wcag-checklist.sh- WCAG 2.1 AA compliance checklistpython scripts/contrast-check.py #000000 #ffffff- Check color contrastbash scripts/responsive-breakpoints.sh- Show responsive breakpoints
Use templates:
templates/ux-design.template.md- Complete UX design documenttemplates/user-flow.template.md- User flow diagram template
Reference guides:
- REFERENCE.md - Design patterns and detailed guidance
More from nilecui/skillsbase
drawio-diagrams-enhanced
Create professional draw.io (diagrams.net) diagrams in XML format (.drawio files) with integrated PMP/PMBOK methodologies, extensive visual asset libraries, and industry-standard professional templates. Use this skill when users ask to create flowcharts, swimlane diagrams, cross-functional flowcharts, org charts, network diagrams, UML diagrams, BPMN, project management diagrams (WBS, Gantt, PERT, RACI), risk matrices, stakeholder maps, or any other visual diagram in draw.io format. This skill includes access to custom shape libraries for icons, clipart, and professional symbols.
109documentation-writing
Writing clear, discoverable software documentation following the Eight Rules and Diataxis framework. Use when creating README files, API docs, tutorials, how-to guides, or any project documentation. Automatically enforces docs/ location, linking requirements, and runnable examples.
23using-shadcn-ui
Use when building React UI components, implementing design systems, or needing pre-built accessible components - leverages shadcn/ui primitives and shadcnblocks.com (829 production-ready blocks) for rapid interface development
22architecture-diagrams
Create system architecture diagrams using Mermaid, PlantUML, C4 model, flowcharts, and sequence diagrams. Use when documenting architecture, system design, data flows, or technical workflows.
19llm-docs-optimizer
Optimize documentation for AI coding assistants and LLMs. Improves docs for Claude, Copilot, and other AI tools through c7score optimization, llms.txt generation, question-driven restructuring, and automated quality scoring. Use when asked to improve, optimize, or enhance documentation for AI assistants, LLMs, c7score, Context7, or when creating llms.txt files. Also use for documentation quality analysis, README optimization, or ensuring docs follow best practices for LLM retrieval systems.
14ui-designer
Extract design systems from reference UI images and generate implementation-ready UI design prompts. Use when users provide UI screenshots/mockups and want to create consistent designs, generate design systems, or build MVP UIs matching reference aesthetics.
13