shadcn-aesthetic

Q: How to install shadcn-aesthetic?

Add a marketplace: /plugin marketplace add . Then add the config to /plugin install shadcn-aesthetic@ . Finally, /plugin in Claude Code.

Q: What is shadcn-aesthetic best for?

shadcn-aesthetic is categorized under General. It covers: design, css, scss, shadcn, design-system, ui, styling, modern.

New

Community RegistryGeneralby Brock

Modern CSS/SCSS architecture based on shadcn/ui design principles for refined, accessible styling

First seen 5/22/2026

Summary

This skill provides modern CSS/SCSS architecture based on shadcn/ui design principles, enabling developers to create refined, accessible, and consistent user interfaces.

It helps you apply design tokens, responsive layouts, and accessible styling patterns directly in your projects, saving time and ensuring design system alignment.

Install & Usage

Add a marketplace

/plugin marketplace add <org/repo>

Install the plugin

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

Manage with /plugin

/plugin

Use Cases

Generate a set of CSS custom properties for colors, spacing, and typography following shadcn/ui design tokens.

Create a responsive grid layout with accessible focus styles and dark mode support using SCSS mixins.

Style a form component with consistent input fields, labels, and error states based on shadcn/ui patterns.

Build a button system with multiple variants (primary, secondary, ghost) and proper ARIA attributes.

Implement a card component with hover effects, border radius, and shadow tokens from the design system.

Apply a consistent spacing scale and typography hierarchy across a new page layout.

Usage Examples

/shadcn-aesthetic Generate SCSS variables for a design system with primary, secondary, and neutral color palettes, plus spacing and font size scales.

Create a responsive navigation bar with mobile hamburger menu, using shadcn/ui design tokens and accessible ARIA labels.

Style a modal dialog component with backdrop overlay, focus trap, and smooth transitions using SCSS mixins from this skill.

View source on GitHub

designcssscssshadcndesign-systemuistylingmodern

Security Audits

LicenseUnknownSourceWarnRepositoryPass

Frequently Asked Questions

What is shadcn-aesthetic?

This skill provides modern CSS/SCSS architecture based on shadcn/ui design principles, enabling developers to create refined, accessible, and consistent user interfaces. It helps you apply design tokens, responsive layouts, and accessible styling patterns directly in your projects, saving time and ensuring design system alignment.

How to install shadcn-aesthetic?

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

What is shadcn-aesthetic best for?

shadcn-aesthetic is a plugin categorized under General. It is designed for: design, css, scss, shadcn, design-system, ui, styling, modern. Created by Brock.

What can I use shadcn-aesthetic for?

shadcn-aesthetic is useful for: Generate a set of CSS custom properties for colors, spacing, and typography following shadcn/ui design tokens.; Create a responsive grid layout with accessible focus styles and dark mode support using SCSS mixins.; Style a form component with consistent input fields, labels, and error states based on shadcn/ui patterns.; Build a button system with multiple variants (primary, secondary, ghost) and proper ARIA attributes.; Implement a card component with hover effects, border radius, and shadow tokens from the design system.; Apply a consistent spacing scale and typography hierarchy across a new page layout..