mcpField
U
ui-design-aesthetics

ui-design-aesthetics

github.com/nickcrewDesign & UI62358 installsUpdated 17w ago
Repository

About ui-design-aesthetics

ui-design-aesthetics is a skill for designing and implementing user interfaces, suited to new features, redesigns, and complex dashboards. It combines visual direction, progressive disclosure, dynamic loading, and API contract checks with performance considerations.

Key features

  1. 01Set a cohesive visual direction
  2. 02Load components dynamically as needed
  3. 03Reveal interface complexity progressively
  4. 04Validate frontend and backend API contracts
  5. 05Plan interactions and loading states

Use cases

  1. 01Design an application or feature from scratch
  2. 02Refactor an existing UI with performance in mind
  3. 03Build complex dashboards and data-heavy interfaces

Install

Copy the command and run it in a terminal.

$npx skills add https://github.com/nickcrew/claude-cortex --skill ui-design-aesthetics

After installing, type/ui-design-aestheticsin Claude Code to confirm it loaded.

Bundled files

References and scripts installed along with SKILL.md.

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

Details

From the project README

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

TopicReference
Aesthetic Rules (Typography, Color, Motion)skills/ui-design-aesthetics/references/aesthetics.md
Progressive Disclosure & Dynamic Loadingskills/ui-design-aesthetics/references/progressive-disclosure.md
API Contract Validationskills/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.

Comments

Markdown supported