ui-ux-designer

Build accessible UI components by implementing WCAG AA/AAA contrast ratios, keyboard navigation, and semantic HTML within Tailwind-styled React components. Use the design system in references/design-system.md to apply the Cream, Yellow, and Forest Green brand palette consistently across your Next.js application.

Yes. Implement responsive design by using Tailwind's mobile-first breakpoints, Image optimization, and responsive layout utilities. The Skill guides you through building reusable components and style guides that scale across devices while maintaining alignment with your brand palette.

Establish a design system by documenting your brand colors, component patterns, and Tailwind configuration, then build reusable React components that enforce consistency. This Skill provides templates and best practices for Next.js routing, performance, and accessible component design.

Meet accessibility standards by designing with WCAG AA/AAA compliance, ensuring color contrast, supporting keyboard navigation, and testing responsive layouts. The Skill automates these checks and guides component implementation with accessibility-first patterns in Tailwind.

Yes. Tailwind supports custom brand colors through configuration and utility classes. This Skill helps you integrate your specific palette (Cream, Yellow, Forest Green) into responsive, mobile-first layouts while maintaining consistency across Next.js pages and components.

Design wireframes and layouts by mapping Next.js routing to page structure, applying Tailwind's grid and flexbox utilities, and aligning components with your design system. The Skill provides guidance on Next.js Image optimization and responsive breakpoints for each layout.