ui-design-aesthetics✓ Pass

SKILL.md Content

---
name: ui-design-aesthetics
description: Generates high-quality, non-generic UI designs with a focus on performance, progressive disclosure, and distinctive aesthetics.
keywords:
  - design UI
  - visual design
  - aesthetic excellence
  - aesthetics
  - ui design 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

1.  **Analyze & Select Aesthetic**: Choose a cohesive theme (Swiss, Neo-Brutalism, etc.) and reject generic defaults.
2.  **Architect for Performance**: Identify heavy components for lazy loading (`React.lazy`, dynamic imports).
3.  **Design Interaction**: Plan staggered reveals and interaction-based loading.
4.  **Validate Data**: Define TypeScript interfaces or Zod schemas for API responses.
5.  **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.

License

Declared license: MIT

MIT License

Copyright (c) 2025 NickCrew

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.

View the license in the source repository — the version published there is authoritative.