Ui design aesthetics

Skill NickCrew/Claude-Cortex/skills/ui-design-aesthetics

Generates high-quality, non-generic UI designs with a focus on performance, progressive disclosure, and distinctive aesthetics.From its SKILL.md

Install

npx -y skills add NickCrew/Claude-Cortex --skill ui-design-aesthetics

Assembled from the repository path, not quoted from the project. Check it against their README if it does not work.

One thing to look at

23 stars23 stars. Stars are a popularity signal and not a quality one, but at this level it is likely that nobody has read this closely except its author, and you would be relying on your own review.

SKILL.md

2.2 KB, 404 tokens by cl100k_base, as published. Nobody here has run it

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.

What ships with it: 3 files

3.4 KB alongside SKILL.md