Aesthetic ui engine

Skill learn-with-santosh/claude-master-skills/skills/aesthetic-ui-engine

A curated collection of specialized skills and workflows designed to enhance Claude's capabilities in specific domains. These skills provide frameworks, psychological triggers, and structured processes to deliver high-quality, professional results.

Install

npx -y skills add learn-with-santosh/claude-master-skills --skill aesthetic-ui-engine

Assembled from the repository path, not quoted from the project. Check it against their README if it does not work.

2 things to look at

no licenseNo license file was found in the repository. Code published without one is not open source by default, so using it at work is a question for whoever answers licensing questions where you are.
0 stars0 stars. Stars are a popularity signal and not a quality one, but at this level it is likely that nobody has read this closely except its author, and you would be relying on your own review.

What its author says it does

Copied from the file, not written here

Guides Claude to build stunning, premium, and modern web interfaces. Use this skill whenever the user asks for a UI design, a website, a component, or wants to make their web app look "premium," "professional," or "modern." This skill enforces high-end design principles like Glassmorphism, Dark Mode, sleek typography, and smooth animations.

SKILL.md

3.4 KB, as published. Nobody here has run it

Aesthetic UI Engine 🚀

This skill transforms basic web components into premium, state-of-the-art user interfaces. It enforces design principles that make web applications feel expensive, modern, and alive.

When to use this skill

Use this skill when:

Designing a new web application from scratch.
Refactoring an existing UI to look more "premium" or "professional."
Building individual components (buttons, cards, navbars) that need to "wow" the user.
Implementing dark mode or sophisticated color palettes.
Adding animations and micro-interactions.

Design Principles

1. The Glassmorphism Effect

Use background blur and subtle transparency to create depth.

.glass {
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 16px;
}

2. Modern Typography

Avoid default browser fonts. Use high-quality Google Fonts like Inter, Outfit, or Poppins.

Headings: Semi-bold or Bold with tight letter-spacing.
Body: Regular with generous line-height (1.6+).

3. Sophisticated Color Palettes

Avoid flat primary colors (pure red, blue, green). Use curated HSL colors:

Dark Mode: Deep indigos (#0f172a), dark violets (#1e1b4b), or sleek blacks (#020617).
Accents: Vibrant gradients (e.g., linear-gradient(to right, #6366f1, #a855f7)).

4. Micro-interactions

Everything should feel alive. Add hover effects and smooth transitions.

.button {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.button:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 20px -5px rgba(99, 102, 241, 0.4);
}

Output Format

Every UI design output must include:

1. Visual Specification

Color Palette: List hex codes and their usage.
Typography: Specify fonts and sizes.
Design Style: Describe the "vibe" (e.g., "Minimalist Dark Mode with Neon Accents").

2. Implementation (Code)

HTML: Clean, semantic structure.
CSS: Modern, utility-first (if requested) or structured Vanilla CSS.
JS: Only if needed for interactivity/animations.

3. Design Rational

Explain why these choices make the UI feel premium.

Example Frameworks

The "SaaS Hero" Section

Hook: Huge, bold heading with a gradient span.
Sub-hook: Muted text with 1.6 line height.
Primary CTA: Glowing button with a hover lift.
Secondary CTA: Ghost button with a subtle border.
Background: Radial gradient to create a "glow" behind the content.

The "Feature Card" Grid

Container: Glassmorphism cards.
Icon: Styled with a soft background glow.
Title: High contrast.
Description: Low contrast (muted).
Border: Subtle top-border glow on hover.

Safety & Accessibility

Ensure high contrast for readability (WCAG compliance).
Don't sacrifice usability for aesthetics.
Keep animations subtle (don't cause motion sickness).

Use this skill by describing the component or page you want to build, and I will apply these premium design patterns to it.