# Design shadcn-style CSS Systems

Inconsistent CSS makes interfaces hard to theme, maintain, and audit. This skill guides Claude, Codex, and Claude Code toward structured shadcn-style patterns.

## Install

```bash
npx skillstore add dieshen/shadcn-aesthetic
```

## Metadata

- Status: approved
- Slug: dieshen-shadcn-aesthetic
- Skillstore revision: r1
- Version status: missing
- Tree hash: 1b735a438328926360ee8d3b37d1d1a1a49bdc4cf12d02c37364257cf70248dc
- Author: Dieshen
- GitHub username: Dieshen
- License: MIT
- Repository: https://github.com/Dieshen/claude\_marketplace/tree/main/plugins/shadcn-aesthetic
- Ref: 72d5025b022c77f7a51bdf5c1637c689c80e89d1
- Supported tools: Claude, Codex, Claude Code
- Audit status: complete
- Agent install advisory: allowed
- Manual install advisory: allowed
- Artifact signature: available
- Audit attestation: unavailable
- Human verification: not\_verified
- Risk factors: network, external\_commands
- Quality score: 76
- Public page: https://skillstore.pages.dev/skills/dieshen-shadcn-aesthetic
- Manifest: https://skillstore.pages.dev/api/skills/dieshen-shadcn-aesthetic/manifest

## Capabilities

- Provides HSL color variable patterns for light and dark themes.
- Defines spacing, radius, shadow, typography, transition, and z-index scales.
- Gives reusable CSS and SCSS patterns for buttons, inputs, cards, badges, and alerts.
- Encourages accessible focus states, reduced motion support, and screen reader utilities.
- Documents before-and-after examples that replace hard-coded styling with theme tokens.
- Supports styling guidance for React, Vue, Blazor, and general web interfaces.

## Use Cases

- Refine Existing Component Styles: Convert hard-coded colors, spacing, and shadows into maintainable theme tokens.
- Build A Theme Foundation: Create a consistent color, spacing, radius, shadow, and typography system for a product UI.
- Improve Accessibility Defaults: Add focus-visible states, reduced motion support, high contrast handling, and screen reader utilities.

## Prompt Templates

### Style A Basic Component

```
Use the shadcn-aesthetic skill to style this component with CSS variables, accessible focus states, and dark mode support.
```

### Refactor Legacy CSS

```
Refactor this CSS using shadcn-style tokens for colors, spacing, radius, shadows, and transitions. Preserve the current behavior.
```

### Create A Component Set

```
Design CSS for buttons, inputs, cards, badges, and alerts using one shared token system and accessible interaction states.
```

### Audit A Design System

```
Review this stylesheet for shadcn-style consistency. Identify hard-coded values, missing accessibility states, and token gaps.
```

## Limitations

- It is guidance-only and does not install shadcn/ui components.
- It does not verify browser rendering or visual regressions automatically.
- It does not generate project-specific tokens without user design requirements.
- It may need adaptation for existing design systems with different naming rules.

## Best Practices

- Provide the existing CSS and the design intent before asking for refactoring.
- Ask for token names that match your project conventions.
- Review generated focus, contrast, and motion behavior before shipping.

## Anti Patterns

- Do not request only a visual rewrite without accessibility requirements.
- Do not mix hard-coded colors with token-based theme rules.
- Do not assume the generated styles match your brand without review.

## Security Audit

- Audited at: 2026-07-06T11:42:12.794\+00:00
- Summary: All 108 static findings were adjudicated as false positives after reviewing the referenced files. The external command hits are markdown SCSS fences, the blocker hits are CSS examples, and the network hits are documentation or metadata links.

## Stats

- Views: 155
- Downloads: 8
- Favorites: 0
- Popularity score: 0