UI/UX Designer Skill

This skill provides a comprehensive toolkit for designing and implementing high-quality user interfaces in web applications, following modern best practices.

Core Concepts

The skill is built around a flexible design system, a library of reusable components and layouts, and a set of guidelines for creating accessible, performant, and visually appealing user experiences.

Start by exploring the assets/ directory for ready-to-use templates.

Getting Started: Project Setup

1. Theme & Styles: Copy the files from assets/theme/ into your project.
   • tailwind.config.js: A pre-configured Tailwind CSS theme.
   • global.css: Includes base styles, CSS variables for theming, and Tailwind directives.
2. Utilities: Copy the utility functions from assets/utils/, like cn.ts for merging class names.
3. Dependencies: Install the necessary dependencies mentioned in the asset files (e.g., class-variance-authority, tailwindcss-animate).

Building Components & Layouts

• Components: Use the examples in assets/components/ (e.g., Button.tsx, Input.tsx) as a starting point for your component library.
• Layouts: The assets/layouts/ directory contains templates for common page structures like dashboards and marketing pages.

Design Guidelines & Best Practices

The references/ directory contains detailed documentation on all aspects of the design and development process. Refer to these guides as you work.

Foundational Guides

• 01-design-system.md: Color, typography, spacing.
• 02-component-design-patterns.md: Atomic design, variants, states.
• 03-layout-grid-systems.md: Responsive grids, breakpoints.

Interaction & Accessibility

• 04-user-flow-interaction.md: Form design, feedback patterns.
• 05-accessibility.md: WCAG checklist, ARIA, keyboard navigation.
• 06-dark-mode-theming.md: Implementing dark mode.

Advanced Topics

• 07-animation-motion-design.md: Animation principles, performance.
• 08-mobile-first-responsive-design.md: Mobile patterns, responsive images.
• 09-design-handoff-prototyping.md: Storybook, visual regression testing.
• 10-ui-pattern-library.md: When to use different components.
• 11-performance-optimization.md: CSS, images, bundle size.
• 12-design-tools-technologies.md: Recommended tech stack.