AI Agent Skill HUB

ui-design-aesthetics

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

13 stars
byNickCrew
View on GitHubInstallation ↓

Best use case

ui-design-aesthetics is best used when you need a repeatable AI agent workflow instead of a one-off prompt.

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

Teams using ui-design-aesthetics should expect a more consistent output, faster repeated execution, less prompt rewriting.

When to use this skill

  • You want a reusable workflow that can be run more than once with consistent structure.

When not to use this skill

  • You only need a quick one-off answer and do not need a reusable workflow.
  • You cannot install or maintain the underlying files, dependencies, or repository context.

Installation

Claude Code / Cursor / Codex

$curl -o ~/.claude/skills/ui-design-aesthetics/SKILL.md --create-dirs "https://raw.githubusercontent.com/NickCrew/Claude-Cortex/main/skills/ui-design-aesthetics/SKILL.md"

Manual Installation

  1. Download SKILL.md from GitHub
  2. Place it in .claude/skills/ui-design-aesthetics/SKILL.md inside your project
  3. Restart your AI agent — it will auto-discover the skill

How ui-design-aesthetics Compares

Feature / Agentui-design-aestheticsStandard Approach
Platform SupportNot specifiedLimited / Varies
Context Awareness High Baseline
Installation ComplexityUnknownN/A

Frequently Asked Questions

What does this skill do?

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

Where can I find the source code?

You can find the source code on GitHub using the link provided at the top of the page.

SKILL.md Source

# 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

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.

Related Skills

We are still matching the closest adjacent skills for this page. In the meantime, continue through the full directory.