ui-design-aesthetics
Generates high-quality, non-generic UI designs with a focus on performance, progressive disclosure, and distinctive aesthetics.
When & Why to Use This Skill
The UI Design & Aesthetics skill is a specialized Claude agent tool designed to generate high-performance, visually distinctive user interfaces. It moves beyond generic AI-generated layouts by enforcing specific aesthetic themes (such as Swiss or Neo-Brutalism), optimizing initial payloads through progressive disclosure, and ensuring robust frontend-backend integration via API contract validation. This skill is ideal for developers and designers aiming to combine technical excellence with high-end visual design.
Use Cases
- Case 1: Designing a new feature or application from scratch with a unique, non-generic visual identity and cohesive design system.
- Case 2: Refactoring legacy web interfaces to improve performance using dynamic loading, React.lazy, and optimized asset delivery.
- Case 3: Implementing complex, data-heavy dashboards that require progressive disclosure to maintain usability and reduce cognitive load.
- Case 4: Ensuring frontend components strictly adhere to backend data structures using TypeScript interfaces or Zod schemas for API validation.
| name | ui-design-aesthetics |
|---|---|
| description | Generates high-quality, non-generic UI designs with a focus on performance, progressive disclosure, and distinctive aesthetics. |
UI Design & Aesthetics
Expert guidance for designing and implementing beautiful, high-performance user interfaces. This skill enforces distinctive aesthetics while ensuring technical excellence through progressive disclosure and dynamic loading.
Core Capabilities
- Aesthetic Direction: avoiding "AI slop" by enforcing distinctive typography, color, and depth.
- Performance Architecture: ensuring UI components load dynamically to minimize initial payload.
- Progressive Disclosure: designing interfaces that reveal complexity only when needed.
- API Contract Validation: ensuring frontend components align with backend data structures.
Usage
Use this skill when:
- Designing a new feature or application from scratch.
- Refactoring an existing UI to be more modern and performant.
- Implementing complex dashboards or data-heavy interfaces.
Quick Reference
| Topic | Reference |
|---|---|
| Aesthetic Rules (Typography, Color, Motion) | skills/ui-design-aesthetics/references/aesthetics.md |
| Progressive Disclosure & Dynamic Loading | skills/ui-design-aesthetics/references/progressive-disclosure.md |
| API Contract Validation | skills/ui-design-aesthetics/references/api-contracts.md |
Design Workflow
- Analyze & Select Aesthetic: Choose a cohesive theme (Swiss, Neo-Brutalism, etc.) and reject generic defaults.
- Architect for Performance: Identify heavy components for lazy loading (
React.lazy, dynamic imports). - Design Interaction: Plan staggered reveals and interaction-based loading.
- Validate Data: Define TypeScript interfaces or Zod schemas for API responses.
- Implement: Write the code using utility classes (Tailwind) and enforcing the design system.
Performance Requirements
- Initial Payload: Critical path CSS/JS only.
- Dynamic Loading: Secondary components MUST load on interaction or visibility (IntersectionObserver).
- Latency: Design optimistic UI states for interactions > 100ms.