🎯

ui-design-aesthetics

🎯Skill

from nickcrew/claude-ctx-plugin

What it does

ui-design-aesthetics skill from nickcrew/claude-ctx-plugin

📦

Part of

nickcrew/claude-ctx-plugin(60 items)

ui-design-aesthetics

Installation

PythonRun Python server

python examples/supersaiyan_demo.py # See it in action!

pip installInstall Python package

pip install claude-cortex

git cloneClone repository

git clone https://github.com/NickCrew/claude-cortex.git

pip installInstall Python package

pip install -e ".[dev]"

📖 Extracted from docs: nickcrew/claude-ctx-plugin

Need more details? View full documentation on GitHub →

7Installs

Last UpdatedJan 17, 2026

View on GitHub Back to Skills

Skill Details

SKILL.md

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

Overview

# 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.