About

Imported from nickcrew/claude-cortex (skills/ui-design-aesthetics/SKILL.md). Install upstream with npx skills add nickcrew/claude-cortex --skill ui-design-aesthetics. Copyright stays with the author.

UI Design & Aesthetics

Name: ui-design-aesthetics
Author: nickcrew

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.

Use it

Copy one of these into your project. Installing also returns the manifest and these snippets.

yaml

targets:
  - https://api.opensmartroute.ai/api/v1/registry/nickcrew-claude-cortex-ui-design-aesthetics/manifest   # or paste the manifest below

Manifest

An Open Capability Manifest: the router reads it to know what this does, what it costs and when to pick it.

nickcrew-claude-cortex-ui-design-aesthetics.ocm.jsonjson

{
  "ocm": "1",
  "id": "nickcrew-claude-cortex-ui-design-aesthetics",
  "kind": "skill",
  "name": "ui-design-aesthetics",
  "description": "Generates high-quality, non-generic UI designs with a focus on performance, progressive disclosure, and distinctive aesthetics.",
  "publisher": "nickcrew",
  "version": "1.0.0",
  "capabilities": {
    "domains": [
      "general"
    ],
    "tags": [
      "skill-md",
      "design-ui",
      "visual-design",
      "aesthetic-excellence",
      "aesthetics",
      "ui-design-aesthetics",
      "skills-sh"
    ],
    "languages": [
      "en"
    ]
  },
  "quality_prior": 0.6,
  "examples": [
    "Generates high-quality, non-generic UI designs with a focus on performance, progressive disclosure, and distinctive aesthetics."
  ],
  "primary": false,
  "metadata": {
    "source": {
      "provider": "skills.sh",
      "repository": "https://github.com/nickcrew/claude-cortex",
      "path": "skills/ui-design-aesthetics/SKILL.md",
      "ref": "HEAD",
      "url": "https://github.com/nickcrew/claude-cortex/blob/HEAD/skills/ui-design-aesthetics/SKILL.md",
      "key": "nickcrew/claude-cortex/skills/ui-design-aesthetics/SKILL.md"
    }
  },
  "instructions": "# UI Design & Aesthetics\n\nExpert 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.\n\n## Core Capabilities\n\n- **Aesthetic Direction**: avoiding \"AI slop\" by enforcing distinctive typography, color, and depth.\n- **Performance Architecture**: ensuring UI components load dynamically to minimize initial payload.\n- **Progressive Disclosure**: designing interfaces that reveal complexity only when needed.\n- **API Contract Validation**: ens",
  "cost": {
    "context_tokens": 502
  }
}

Fetch it by URL: GET /api/v1/registry/nickcrew-claude-cortex-ui-design-aesthetics/manifest?version=1.0.0

Reviews

Star ratings from people who tried it. One review per account; edit yours any time.

No reviews yet. Install it, try it, and be the first to rate it.