Frontend Ui Ux Design
This walks you through the full frontend design workflow, from gathering requirements and user research through building component libraries and accessibility compliance. It's structured around an 8-step process with references for deeper topics like WCAG standards, responsive patterns, and design system governance. The approach is mobile-first and accessibility-first, which is the right order to tackle things. What I like here is the practical focus on deliverables and handoff documentation, not just pretty mockups. It covers the gap between "here's a design" and "here's what engineering actually needs to build it," including design tokens, component specs, and performance considerations. Good for anyone doing UI work beyond basic landing pages.
- skills.sh installs
- 541
- GitHub stars
- 18
- last updated
- Aug 21, 2026
Install
$ npx -y skills add dauquangthanh/hanoi-rainbow --skill frontend-ui-ux-design --agent claude-codeInstalls into .claude/skills of the current project.
Files
Frontend UI/UX Design
Overview
This skill enables creation of production-ready frontend UI/UX designs from research through implementation. Follow a structured design process that balances user needs, business goals, technical constraints, and accessibility requirements.
Design Workflow
1. Understand Requirements
Gather Context:
- Project goals and success metrics
- Target audience and user personas
- Technical constraints (frameworks, browsers, devices)
- Brand guidelines and design language
- Accessibility requirements (WCAG level)
Clarify Scope:
- Type of deliverable (wireframes, mockups, design system, component library)
- Fidelity level (low, medium, high)
- Responsive breakpoints needed
- Browser and device support
2. Research & Strategy
User Research:
- Analyze user needs, goals, and pain points
- Review existing analytics or user feedback
- Identify key user journeys and scenarios
- Define information architecture
For complete research process: See uiux-design-process.md for detailed research, personas, journey mapping, and information architecture guidelines.
3. Design & Prototype
Sponsors
Agent CaffeineSponsoredClose your lid, come back to finished work
SnugSponsoredThe clipboard manager for the AI eraPromote your product hereReach 125k+ visitors monthly
WaxSponsoredBlock anything with supervision, without erasing your iPhonePromote your product hereReach 125k+ visitors monthly
knobsSponsoredSee your site on any phone, any day, in any languageDetails
- Repository
- github.com/dauquangthanh/hanoi-rainbow
- Categories
- Frontend Development, Design & UI/UX
- First seen
- Jun 3, 2026
More from dauquangthanh/hanoi-rainbow
All 3Recommended
More Frontend Development
tailwind-responsive-uipproenca/dot-skillsResponsive UI transformation patterns for Tailwind CSS applications. This skill should be used when making interfaces responsive, refactoring layouts for multip470skills.sh installstailwind-ui-refactorpproenca/dot-skillsRefactoring UI design patterns for Tailwind CSS applications. This skill should be used when writing, reviewing, or refactoring HTML with Tailwind utility class467skills.sh installs
frontend-tailwind-best-practicessergiodxa/agent-skillsTailwind CSS patterns and conventions for frontend apps. Use when writing component styles, layouts, or working with CSS classes.465skills.sh installs
tailwind-cssmanutej/luxor-claude-marketplaceUtility-first CSS framework for rapid UI development with responsive design, component patterns, and production optimization. Master core utilities, dark mode, 463skills.sh installs
shadcn-ui-expertmajesteitbart/talentmatcherDevelop high-quality, accessible React components using shadcn-ui, Tailwind CSS, and Radix UI. Use when building forms, layouts, dialogs, tables, or any UI comp445skills.sh installs
nuxt-ui-v4secondsky/claude-skillsNuxt UI v4 component library for building Nuxt v4 applications. 125+ accessible components with Tailwind v4, Reka UI, dark mode, theming. Use for dashboards, fo421skills.sh installs