zhongwei/gh-dieshen-claude-marketplace-plugins-shadcn-aesthetic
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Initial commit

Browse Source
This commit is contained in:
Zhongwei Li
2025-11-29 18:21:47 +08:00
commit 3d0a4e46ef
7 changed files with 1670 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
.claude-plugin/plugin.json Normal file
View File

@@ -0,0 +1,11 @@
{
"name": "shadcn-aesthetic",
"description": "Modern CSS/SCSS architecture based on shadcn/ui design principles for refined, accessible styling",
"version": "1.0.0",
"author": {
"name": "Brock"
},
"skills": [
"./"
]
}

325
BEFORE_AFTER.md Normal file
View File

@@ -0,0 +1,325 @@
# Before & After: shadcn-aesthetic Transformation
This demonstrates the difference between old-school CSS and modern shadcn-aesthetic patterns.
## ❌ Before (Old-School, Clunky)
```scss
.button {
padding: 10px 20px;
background: #007bff;
color: white;
border: 1px solid #0056b3;
border-radius: 4px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
transition: all 0.3s ease;
font-size: 14px;
cursor: pointer;
}
.button:hover {
background: #0056b3;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}
.button:focus {
outline: none;
border: 2px solid blue;
}
.card {
padding: 15px;
margin-bottom: 20px;
background: white;
border: 1px solid #ddd;
border-radius: 5px;
box-shadow: 0 3px 6px rgba(0, 0, 0, 0.15);
}
.input {
padding: 8px 12px;
border: 1px solid #ccc;
border-radius: 3px;
font-size: 14px;
}
.input:focus {
border-color: #007bff;
outline: none;
}
```
**Problems:**
- Hard-coded colors (no theming)
- Random pixel values (10px, 15px, 20px)
- Heavy shadows
- Slow transitions (300ms)
- Poor focus states
- No dark mode support
- Inconsistent spacing
---
## ✅ After (Modern shadcn-aesthetic)
```scss
:root {
// Color system
--background: 0 0% 100%;
--foreground: 222.2 84% 4.9%;
--primary: 222.2 47.4% 11.2%;
--primary-foreground: 210 40% 98%;
--border: 214.3 31.8% 91.4%;
--input: 214.3 31.8% 91.4%;
--ring: 222.2 84% 4.9%;
// Spacing
--spacing-2: 0.5rem; // 8px
--spacing-3: 0.75rem; // 12px
--spacing-4: 1rem; // 16px
// Shadows
--shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
--shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
// Other
--radius: 0.5rem;
--duration-150: 150ms;
--ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
}
.dark {
--background: 222.2 84% 4.9%;
--foreground: 210 40% 98%;
--primary: 210 40% 98%;
--primary-foreground: 222.2 47.4% 11.2%;
--border: 217.2 32.6% 17.5%;
--input: 217.2 32.6% 17.5%;
--ring: 212.7 26.8% 83.9%;
}
.button {
// Layout
display: inline-flex;
align-items: center;
justify-content: center;
// Spacing
padding: var(--spacing-2) var(--spacing-4);
// Visual
background-color: hsl(var(--primary));
color: hsl(var(--primary-foreground));
border: 1px solid transparent;
border-radius: var(--radius);
box-shadow: var(--shadow-sm);
// Typography
font-size: 0.875rem;
font-weight: 500;
// Interaction
cursor: pointer;
transition: all var(--duration-150) var(--ease-in-out);
&:hover {
background-color: hsl(var(--primary) / 0.9);
box-shadow: var(--shadow-md);
}
&:focus-visible {
outline: 2px solid hsl(var(--ring));
outline-offset: 2px;
}
}
.card {
// Spacing
padding: var(--spacing-4);
// Visual
background-color: hsl(var(--background));
color: hsl(var(--foreground));
border: 1px solid hsl(var(--border));
border-radius: calc(var(--radius) + 2px);
box-shadow: var(--shadow-sm);
// Interaction
transition: box-shadow var(--duration-150) var(--ease-in-out);
&:hover {
box-shadow: var(--shadow-md);
}
}
.input {
// Layout
display: flex;
width: 100%;
// Spacing
padding: var(--spacing-2) var(--spacing-3);
// Visual
background-color: hsl(var(--background));
color: hsl(var(--foreground));
border: 1px solid hsl(var(--input));
border-radius: var(--radius);
box-shadow: var(--shadow-sm);
// Typography
font-size: 0.875rem;
line-height: 1.5;
// Interaction
transition: all var(--duration-150) var(--ease-in-out);
&::placeholder {
color: hsl(var(--muted-foreground));
}
&:focus {
outline: none;
border-color: hsl(var(--ring));
box-shadow: 0 0 0 2px hsl(var(--ring) / 0.2);
}
}
```
**Improvements:**
- ✅ CSS variables for complete theming
- ✅ HSL colors with opacity support
- ✅ Consistent spacing scale (4px base)
- ✅ Subtle, layered shadows
- ✅ Quick transitions (150ms)
- ✅ Proper focus-visible states
- ✅ Dark mode support (just add .dark class)
- ✅ Modern layout primitives
- ✅ Accessible by default
---
## Visual Comparison
### Light Mode
```
Old Button: [Blue pill button with heavy shadow]
Modern Button: [Refined button with subtle shadow, perfect spacing]
Old Card: [Bulky white box with strong borders]
Modern Card: [Clean card with subtle elevation, perfect proportions]
Old Input: [Generic text field]
Modern Input: [Refined input with smooth focus ring]
```
### Dark Mode
```
Old: [Doesn't exist or looks broken]
Modern: [Perfect dark mode with proper contrast]
```
---
## Real-World Impact
### Vibe.UI Component Example
**Before (Without Skill):**
```scss
.vibe-button {
padding: 10px 16px;
background: #6366f1;
color: white;
border-radius: 6px;
transition: all 0.2s;
}
```
**After (With shadcn-aesthetic Skill):**
```scss
.vibe-button {
display: inline-flex;
align-items: center;
gap: var(--spacing-2);
padding: var(--spacing-2) var(--spacing-4);
background-color: hsl(var(--primary));
color: hsl(var(--primary-foreground));
border-radius: var(--radius);
font-size: var(--text-sm);
font-weight: var(--font-medium);
box-shadow: var(--shadow-sm);
transition: all var(--duration-150) var(--ease-in-out);
&:hover {
background-color: hsl(var(--primary) / 0.9);
box-shadow: var(--shadow-md);
}
&:focus-visible {
outline: 2px solid hsl(var(--ring));
outline-offset: 2px;
}
}
```
**Result:**
- Professional appearance
- Complete theme support
- Perfect dark mode
- Accessible by default
- Consistent with the entire system
---
## File Size Impact
**Old CSS:** ~2.5KB (but requires separate dark mode styles)
**Modern CSS:** ~3KB (includes dark mode, accessibility, all states)
**Net benefit:** Smaller overall bundle, better functionality, easier maintenance.
---
## Developer Experience
### Old Way:
```scss
// What color should I use?
background: #007bff; // ¯\_(ツ)_/¯
// How much padding?
padding: 12px; // Looks about right?
// Dark mode?
// TODO: add dark mode styles (never happens)
```
### Modern Way:
```scss
// Clear semantic variables
background-color: hsl(var(--primary));
// Consistent spacing scale
padding: var(--spacing-3);
// Dark mode works automatically
// Just add .dark class to <html>
```
---
## Usage in Claude Code
Install the plugin:
```bash
/plugin marketplace add https://github.com/Dieshen/claude_marketplace.git
/plugin install shadcn-aesthetic@dieshen-plugins
```
Now when you ask Claude to create UI components, it automatically uses these modern patterns!
**Example prompt:**
"Create a button component for Vibe.UI with primary, secondary, and outline variants"
**Result:** Claude generates modern, shadcn-style CSS with proper theming, spacing, and accessibility. 🎉

164
QUICK_REFERENCE.md Normal file
View File

@@ -0,0 +1,164 @@
# Shadcn Aesthetic - Quick Reference
## Color Usage
```scss
// Always use HSL variables
background-color: hsl(var(--primary));
color: hsl(var(--primary-foreground));
// With opacity
border: 1px solid hsl(var(--border) / 0.5);
```
## Spacing Scale (4px base)
```scss
--spacing-1: 0.25rem; // 4px
--spacing-2: 0.5rem; // 8px
--spacing-4: 1rem; // 16px
--spacing-6: 1.5rem; // 24px
--spacing-8: 2rem; // 32px
```
## Shadows (Subtle & Layered)
```scss
--shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
--shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1);
--shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1);
```
## Transitions (Quick & Smooth)
```scss
transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
```
## Focus States
```scss
&:focus-visible {
outline: 2px solid hsl(var(--ring));
outline-offset: 2px;
}
```
## Modern Layouts
```scss
// Grid with gap
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: var(--spacing-6);
// Flex with gap
display: flex;
gap: var(--spacing-2);
```
## Typography Scale
```scss
--text-sm: 0.875rem; // 14px
--text-base: 1rem; // 16px
--text-lg: 1.125rem; // 18px
--text-xl: 1.25rem; // 20px
```
## Button Pattern
```scss
.button {
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--spacing-2);
padding: var(--spacing-2) var(--spacing-4);
font-size: var(--text-sm);
font-weight: var(--font-medium);
border-radius: var(--radius);
background-color: hsl(var(--primary));
color: hsl(var(--primary-foreground));
box-shadow: var(--shadow-sm);
transition: all var(--duration-150) var(--ease-in-out);
&:hover {
background-color: hsl(var(--primary) / 0.9);
}
&:focus-visible {
outline: 2px solid hsl(var(--ring));
outline-offset: 2px;
}
}
```
## Card Pattern
```scss
.card {
padding: var(--spacing-6);
border-radius: calc(var(--radius) + 2px);
border: 1px solid hsl(var(--border));
background-color: hsl(var(--card));
box-shadow: var(--shadow-sm);
&:hover {
box-shadow: var(--shadow-md);
}
}
```
## Input Pattern
```scss
.input {
padding: var(--spacing-2) var(--spacing-3);
font-size: var(--text-sm);
border-radius: var(--radius);
border: 1px solid hsl(var(--input));
background-color: hsl(var(--background));
box-shadow: var(--shadow-sm);
&:focus {
outline: none;
border-color: hsl(var(--ring));
box-shadow: 0 0 0 2px hsl(var(--ring) / 0.2);
}
}
```
## Dark Mode
```scss
// Define in :root
:root {
--background: 0 0% 100%;
--foreground: 222.2 84% 4.9%;
}
// Override with .dark class
.dark {
--background: 222.2 84% 4.9%;
--foreground: 210 40% 98%;
}
// Components automatically adapt
.card {
background-color: hsl(var(--background));
color: hsl(var(--foreground));
}
```
## Anti-Patterns to Avoid
❌ Hard-coded hex colors
❌ Random pixel values (13px, 22px)
❌ Heavy shadows (0 5px 15px rgba(0,0,0,0.3))
❌ Slow transitions (0.3s)
❌ Margins instead of gap
❌ Removing outline without focus-visible
❌ RGB colors without variables
## Quality Checklist
✅ CSS variables for all colors
✅ HSL format with opacity support
✅ 4px spacing scale
✅ Subtle shadows
✅ 150ms transitions
✅ focus-visible states
✅ Grid/Flex with gap
✅ Dark mode support
✅ Reduced motion support
✅ Semantic class names

3
README.md Normal file
View File

@@ -0,0 +1,3 @@
# shadcn-aesthetic
Modern CSS/SCSS architecture based on shadcn/ui design principles for refined, accessible styling

1098
SKILL.md Normal file
View File

File diff suppressed because it is too large Load Diff

12
plugin.json Normal file
View File

@@ -0,0 +1,12 @@
{
"name": "shadcn-aesthetic",
"description": "Modern CSS/SCSS architecture based on shadcn/ui design principles for refined, accessible styling",
"version": "1.0.0",
"author": {
"name": "Brock / Narcoleptic Fox LLC",
"email": "contact@narcolepticfox.com"
},
"homepage": "https://github.com/Dieshen/claude_marketplace",
"license": "MIT",
"keywords": ["css", "scss", "shadcn", "design-system", "ui", "styling", "modern", "accessibility"]
}

57
plugin.lock.json Normal file
View File

@@ -0,0 +1,57 @@
{
"$schema": "internal://schemas/plugin.lock.v1.json",
"pluginId": "gh:Dieshen/claude_marketplace:plugins/shadcn-aesthetic",
"normalized": {
"repo": null,
"ref": "refs/tags/v20251128.0",
"commit": "00af9abb02ed70c9df91b719f1a439bd3aa612fd",
"treeHash": "53455b09424826ed33ed48fb6b38255ad0aaecf7f4306340c1a79745d9e33384",
"generatedAt": "2025-11-28T10:10:20.711907Z",
"toolVersion": "publish_plugins.py@0.2.0"
},
"origin": {
"remote": "git@github.com:zhongweili/42plugin-data.git",
"branch": "master",
"commit": "aa1497ed0949fd50e99e70d6324a29c5b34f9390",
"repoRoot": "/Users/zhongweili/projects/openmind/42plugin-data"
},
"manifest": {
"name": "shadcn-aesthetic",
"description": "Modern CSS/SCSS architecture based on shadcn/ui design principles for refined, accessible styling",
"version": "1.0.0"
},
"content": {
"files": [
{
"path": "BEFORE_AFTER.md",
"sha256": "af1025628b1063b938edf5981a7b3a64d5c429ee804bc3e2d3d3e6a8199cde8b"
},
{
"path": "plugin.json",
"sha256": "54bb1fc1136574b14576a89089940f91115ca75efb7e4dd7515ec61e23b07e61"
},
{
"path": "README.md",
"sha256": "6d5482d328f0fc3c2b68f6593f053541e1e83ecbd785b2bb1438d9456484b304"
},
{
"path": "SKILL.md",
"sha256": "418ae2ff1336f9032ae92b1621518398dad68ffab7c5647f7719fab10239fd92"
},
{
"path": "QUICK_REFERENCE.md",
"sha256": "ae8a9c8d79d18b9dc82140786dd8a86a11a9e2915f70ed359aa1181772585745"
},
{
"path": ".claude-plugin/plugin.json",
"sha256": "9fe3ecff7214e382310223e7a19d65059084fade5dfdb1f9c028c9eee3612415"
}
],
"dirSha256": "53455b09424826ed33ed48fb6b38255ad0aaecf7f4306340c1a79745d9e33384"
},
"security": {
"scannedAt": null,
"scannerVersion": null,
"flags": []
}
}