// 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.
| name | ui-ux-designer |
| description | 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. |
This skill provides a comprehensive toolkit for designing and implementing high-quality user interfaces in web applications, following modern best practices.
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.
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.assets/utils/, like cn.ts for merging class names.class-variance-authority, tailwindcss-animate).assets/components/ (e.g., Button.tsx, Input.tsx) as a starting point for your component library.assets/layouts/ directory contains templates for common page structures like dashboards and marketing pages.The references/ directory contains detailed documentation on all aspects of the design and development process. Refer to these guides as you work.