Initial commit

2025-11-29 18:21:47 +08:00
commit 3d0a4e46ef
7 changed files with 1670 additions and 0 deletions
--- a/.claude-plugin/plugin.json
+++ b/.claude-plugin/plugin.json
@@ -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": [
+    "./"
+  ]
+}
--- a/BEFORE_AFTER.md
+++ b/BEFORE_AFTER.md
@@ -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. 🎉
--- a/QUICK_REFERENCE.md
+++ b/QUICK_REFERENCE.md
@@ -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
--- a/README.md
+++ b/README.md
@@ -0,0 +1,3 @@
+# shadcn-aesthetic
+
+Modern CSS/SCSS architecture based on shadcn/ui design principles for refined, accessible styling
--- a/SKILL.md
+++ b/SKILL.md
--- a/plugin.json
+++ b/plugin.json
@@ -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"]
+}
--- a/plugin.lock.json
+++ b/plugin.lock.json
@@ -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": []
+  }
+}