BeClaude

aesthetic-guide

New
4Community RegistryGeneralby Pete Petrash

Research a UI design aesthetic (brutalist, glassmorphism, cyberpunk, Apple HIG, neumorphism, Swiss modernist, Material Design, art deco, vaporwave, etc.) and produce exhaustive, implementation-ready design guidelines with exact CSS values, color palettes, component states, animations, and typography

First seen 6/21/2026
View Source

Summary

This skill enables Claude to research any UI design aesthetic and produce exhaustive, implementation-ready design guidelines with exact CSS values, color palettes, component states, animations, and typography.

  • It helps developers quickly adopt and implement specific design styles with pixel-perfect precision.

Overview

Agent Skills for UI development, parameter tuning, and design iteration.

Installation

bash
# Install all skills
npx add-skill petekp/agent-skills

# Or install individually via Claude Code
/plugin install petekp/agent-skills

Available Skills

tuning-panel

Create bespoke parameter tuning panels for iterating on animations, layouts, colors, typography, physics, or any visual parameters.

Trigger phrases:

  • •"create a tuning panel"
  • •"add parameter controls"
  • •"tweak parameters visually"
  • •"fine-tune values"

Supports: leva (React), tweakpane (vanilla JS), dat.GUI, SwiftUI native controls

rust

Robust Rust patterns for file-backed data, parsing, persistence, FFI boundaries, and system integration.

Trigger phrases:

  • •"write Rust for file handling"
  • •"Rust subprocess integration"
  • •"Serde serialization patterns"
  • •"UniFFI boundaries"

Covers: UTF-8 safety, atomic writes, state machines, defensive error handling

swiftui

Build world-class SwiftUI interfaces for iOS, iPadOS, macOS, and visionOS.

Trigger phrases:

  • •"build SwiftUI interface"
  • •"Liquid Glass adoption"
  • •"SwiftUI animations"
  • •"Apple-level UI quality"

Covers: Layout patterns, state management, design tokens, performance, accessibility

Structure

code
petekp/agent-skills/
├── .claude-plugin/
│   └── marketplace.json
├── skills/
│   ├── tuning-panel/
│   ├── rust/
│   └── swiftui/
└── README.md

License

MIT

Install & Usage

1
Add a marketplace
/plugin marketplace add <org/repo>
2
Install the plugin

Add the configuration to /plugin install aesthetic-guide@<marketplace>

3
Manage with /plugin
/plugin

Use Cases

Generate complete CSS guidelines for a brutalist UI design including color palette, typography, and component states.
Create a glassmorphism design system with exact backdrop-filter values, border properties, and shadow effects.
Produce Apple HIG-compliant design tokens for a new iOS app including light and dark mode colors.
Implement a cyberpunk-themed UI with neon glow effects, grid backgrounds, and futuristic typography.
Design a neumorphic component library with exact box-shadow values for inset and outset effects.
Generate Material Design 3 guidelines with dynamic color theming, elevation values, and motion specs.

Usage Examples

1

/aesthetic-guide glassmorphism with exact CSS values for cards, buttons, and modals

2

Research Swiss modernist design and produce typography scale, grid system, and color palette

3

Generate vaporwave aesthetic guidelines with neon gradients, retro fonts, and glitch animations

View source on GitHub
design

Security Audits

LicenseUnknownSourceWarnRepositoryPass

Frequently Asked Questions

What is aesthetic-guide?

This skill enables Claude to research any UI design aesthetic and produce exhaustive, implementation-ready design guidelines with exact CSS values, color palettes, component states, animations, and typography. It helps developers quickly adopt and implement specific design styles with pixel-perfect precision.

How to install aesthetic-guide?

To install aesthetic-guide: add a marketplace (/plugin marketplace add <org/repo>), then add the config to /plugin install aesthetic-guide@<marketplace>. Finally, /plugin in Claude Code.

What is aesthetic-guide best for?

aesthetic-guide is a plugin categorized under General. It is designed for: design. Created by Pete Petrash.

What can I use aesthetic-guide for?

aesthetic-guide is useful for: Generate complete CSS guidelines for a brutalist UI design including color palette, typography, and component states.; Create a glassmorphism design system with exact backdrop-filter values, border properties, and shadow effects.; Produce Apple HIG-compliant design tokens for a new iOS app including light and dark mode colors.; Implement a cyberpunk-themed UI with neon glow effects, grid backgrounds, and futuristic typography.; Design a neumorphic component library with exact box-shadow values for inset and outset effects.; Generate Material Design 3 guidelines with dynamic color theming, elevation values, and motion specs..