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
- 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.
- Utilities: Copy the utility functions from
assets/utils/, like cn.ts for merging class names.
- 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
Interaction & Accessibility
Advanced Topics
1---2name: ui-ux-designer-43description: Comprehensive skill for UI/UX design and implementation in web applications. Use for tasks involving design systems, component creation, responsive layouts, accessibility, theming, and frontend best practices. Triggers on requests to build, design, or style web components, pages, or applications with a focus on high-quality user experience.4---5
6# UI/UX Designer Skill
7
8This skill provides a comprehensive toolkit for designing and implementing high-quality user interfaces in web applications, following modern best practices.
9
10## Core Concepts
11
12The 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.
13
14Start by exploring the `assets/` directory for ready-to-use templates.
15
16## Getting Started: Project Setup
17
181. **Theme & Styles**: Copy the files from `assets/theme/` into your project.
19 - `tailwind.config.js`: A pre-configured Tailwind CSS theme.
20 - `global.css`: Includes base styles, CSS variables for theming, and Tailwind directives.
212. **Utilities**: Copy the utility functions from `assets/utils/`, like `cn.ts` for merging class names.
223. **Dependencies**: Install the necessary dependencies mentioned in the asset files (e.g., `class-variance-authority`, `tailwindcss-animate`).
23
24## Building Components & Layouts
25
26- **Components**: Use the examples in `assets/components/` (e.g., `Button.tsx`, `Input.tsx`) as a starting point for your component library.
27- **Layouts**: The `assets/layouts/` directory contains templates for common page structures like dashboards and marketing pages.
28
29## Design Guidelines & Best Practices
30
31The `references/` directory contains detailed documentation on all aspects of the design and development process. Refer to these guides as you work.
32
33### Foundational Guides
34- **[01-design-system.md](./references/01-design-system.md)**: Color, typography, spacing.
35- **[02-component-design-patterns.md](./references/02-component-design-patterns.md)**: Atomic design, variants, states.
36- **[03-layout-grid-systems.md](./references/03-layout-grid-systems.md)**: Responsive grids, breakpoints.
37
38### Interaction & Accessibility
39- **[04-user-flow-interaction.md](./references/04-user-flow-interaction.md)**: Form design, feedback patterns.
40- **[05-accessibility.md](./references/05-accessibility.md)**: WCAG checklist, ARIA, keyboard navigation.
41- **[06-dark-mode-theming.md](./references/06-dark-mode-theming.md)**: Implementing dark mode.
42
43### Advanced Topics
44- **[07-animation-motion-design.md](./references/07-animation-motion-design.md)**: Animation principles, performance.
45- **[08-mobile-first-responsive-design.md](./references/08-mobile-first-responsive-design.md)**: Mobile patterns, responsive images.
46- **[09-design-handoff-prototyping.md](./references/09-design-handoff-prototyping.md)**: Storybook, visual regression testing.
47- **[10-ui-pattern-library.md](./references/10-ui-pattern-library.md)**: When to use different components.
48- **[11-performance-optimization.md](./references/11-performance-optimization.md)**: CSS, images, bundle size.
49- **[12-design-tools-technologies.md](./references/12-design-tools-technologies.md)**: Recommended tech stack.
majiayu000