Skill

ui-design-aesthetics

Generates non-generic UI designs emphasizing distinctive aesthetics, performance via dynamic loading/progressive disclosure, and API validation with TypeScript/Zod.

React

Tailwind

npx claudepluginhub nickcrew/claude-cortex

Tool Access

This skill uses the workspace's default tool permissions.

Preview

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.

Supporting Assets

references/aesthetics.mdreferences/api-contracts.mdreferences/progressive-disclosure.md

SKILL.md

Similar Skills

frontend-design

Designs and builds distinctive production-grade frontend UIs with high aesthetic intentionality. For new web UIs, visual redesigns, or themed components in React/Vue/Svelte/HTML/CSS.

1 file

amplify

bencium-innovative-ux-designer

115

Generates distinctive, production-grade frontend code for web components, pages, and apps with bold, creative UX designs in styles like brutalist or retro-futuristic, avoiding generic AI aesthetics.

4 files

bencium-innovative-ux-designer

design

Creates distinctive, non-generic UI designs with aesthetic direction and wireframes, or polishes existing UI code post-implementation. Use for UI design, layouts, wireframing, cleanup, or componentization.

arc

Stats

Stars15

Forks6

Last CommitApr 23, 2026

Used By2 plugins

Actions

View Source View Plugin View on GitHub View README

Help us improve

Share bugs, ideas, or general feedback.

UI Design & Aesthetics

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.