playbooks

home / skills / nickcrew / claude-cortex / ui-design-aesthetics

ui-design-aesthetics skill

/skills/ui-design-aesthetics

This skill helps you craft distinctive, high-performance UI designs with progressive disclosure and API-aligned frontend components.

npx playbooks add skill nickcrew/claude-cortex --skill ui-design-aesthetics

Review the files below or copy the command above to add this skill to your agents.

Files (4)
SKILL.md
2.1 KB
---
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

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.

Overview

This skill generates high-quality, non-generic UI designs that prioritize performance, progressive disclosure, and distinctive aesthetics. It provides concrete guidance to avoid generic, templated visuals and to enforce a coherent visual language across typography, color, and depth. The focus is on practical implementation patterns that reduce initial payload and reveal complexity only when needed.

How this skill works

The skill inspects UI goals and identifies a cohesive aesthetic direction (for example, Swiss or Neo‑Brutalism) and a list of components that must be lazy loaded. It recommends performance architecture like dynamic imports, IntersectionObserver-driven loading, and optimistic UI states for slow interactions. It also validates API contracts by producing TypeScript interfaces or validation schemas to ensure frontend components match backend responses.

When to use it

  • Designing a new feature or application where look and performance matter.
  • Refactoring an existing UI to reduce bundle size and improve load time.
  • Building data-heavy dashboards that must remain responsive.
  • Implementing progressive disclosure to prevent cognitive overload.
  • Enforcing a distinct brand aesthetic across multiple screens.

Best practices

  • Pick one cohesive aesthetic and reject generic defaults to avoid 'AI slop'.
  • Load only critical CSS/JS on the initial path; lazy load secondary components.
  • Use IntersectionObserver and interaction triggers for dynamic loading.
  • Define TypeScript or Zod schemas for API responses and validate early.
  • Design optimistic UI states for operations that can exceed 100 ms.

Example use cases

  • Create a performant admin dashboard that reveals advanced controls only on demand.
  • Refactor a single-page app to split routes and heavy widgets into dynamic chunks.
  • Design a mobile-first consumer flow with distinctive typography and reduced runtime cost.
  • Validate frontend components against backend contracts before integration.
  • Implement staggered micro-interactions to guide user attention without heavy initial payload.

FAQ

How does this skill reduce initial load time?

By identifying non-critical components and recommending dynamic imports, lazy loading, and critical-path-only CSS/JS to keep the initial payload minimal.

Can it help avoid generic UI outputs?

Yes. It enforces an aesthetic direction and concrete rules for typography, color, and depth to produce distinctive, non-generic designs.