ccg-workflow 1.8.2 → 2.0.0

package/templates/skills/domains/frontend-design/liquid-glass/SKILL.md

@@ -0,0 +1,137 @@
+---
+name: liquid-glass
+description: Apple Liquid Glass design system. Use when building UI with translucent, depth-aware glass morphism following Apple's design language. Provides CSS tokens, component patterns, dark/light mode, and animation specs.
+license: MIT
+user-invocable: false
+disable-model-invocation: false
+---
+
+# Liquid Glass Design System
+
+Apple-inspired translucent glass UI with depth, refraction, and ambient light response.
+
+## Core Principles
+
+1. **Translucency** — Surfaces reveal layered content beneath via backdrop blur
+2. **Depth** — Elements float on distinct z-layers with realistic shadows
+3. **Ambient Response** — Glass tints shift based on underlying content color
+4. **Minimal Chrome** — Borders are subtle; shape and blur define boundaries
+5. **Motion** — Transitions feel physical: spring-based, with inertia
+
+## Usage
+
+Import the token file in your CSS:
+
+```css
+@import 'references/tokens.css';
+```
+
+## CSS Tokens Reference
+
+All tokens are defined in `references/tokens.css`. Key categories:
+
+| Category | Prefix | Example |
+|---|---|---|
+| Glass backgrounds | `--lg-bg-*` | `--lg-bg-primary` |
+| Blur | `--lg-blur-*` | `--lg-blur-md` |
+| Borders | `--lg-border-*` | `--lg-border-color` |
+| Shadows | `--lg-shadow-*` | `--lg-shadow-elevated` |
+| Radius | `--lg-radius-*` | `--lg-radius-lg` |
+| Animation | `--lg-duration-*` | `--lg-duration-normal` |
+
+## Component Patterns
+
+### Glass Card
+
+```css
+.glass-card {
+  background: var(--lg-bg-primary);
+  backdrop-filter: blur(var(--lg-blur-md));
+  -webkit-backdrop-filter: blur(var(--lg-blur-md));
+  border: 1px solid var(--lg-border-color);
+  border-radius: var(--lg-radius-lg);
+  box-shadow: var(--lg-shadow-elevated);
+  transition: transform var(--lg-duration-normal) var(--lg-easing-spring);
+}
+
+.glass-card:hover {
+  transform: translateY(-2px);
+  box-shadow: var(--lg-shadow-high);
+}
+```
+
+### Glass Toolbar
+
+```css
+.glass-toolbar {
+  background: var(--lg-bg-toolbar);
+  backdrop-filter: blur(var(--lg-blur-lg)) saturate(var(--lg-saturate));
+  -webkit-backdrop-filter: blur(var(--lg-blur-lg)) saturate(var(--lg-saturate));
+  border-bottom: 1px solid var(--lg-border-subtle);
+}
+```
+
+### Glass Button
+
+```css
+.glass-btn {
+  background: var(--lg-bg-interactive);
+  backdrop-filter: blur(var(--lg-blur-sm));
+  border: 1px solid var(--lg-border-color);
+  border-radius: var(--lg-radius-md);
+  transition: all var(--lg-duration-fast) var(--lg-easing-spring);
+}
+
+.glass-btn:active {
+  transform: scale(0.97);
+  background: var(--lg-bg-pressed);
+}
+```
+
+### Glass Modal Overlay
+
+```css
+.glass-overlay {
+  background: var(--lg-bg-scrim);
+  backdrop-filter: blur(var(--lg-blur-xl));
+}
+
+.glass-modal {
+  background: var(--lg-bg-elevated);
+  border: 1px solid var(--lg-border-color);
+  border-radius: var(--lg-radius-xl);
+  box-shadow: var(--lg-shadow-high);
+}
+```
+
+## Dark / Light Mode
+
+Tokens auto-switch via `prefers-color-scheme`. Light mode uses white-tinted glass; dark mode uses dark-tinted glass with higher blur to maintain readability.
+
+```css
+/* Force a mode on a subtree */
+.light-glass { color-scheme: light; }
+.dark-glass  { color-scheme: dark; }
+```
+
+## Animations
+
+Use spring-based easing for physical feel:
+
+```css
+/* Entry */
+@keyframes glass-enter {
+  from { opacity: 0; transform: scale(0.95) translateY(8px); }
+  to   { opacity: 1; transform: scale(1) translateY(0); }
+}
+
+.glass-animate-in {
+  animation: glass-enter var(--lg-duration-normal) var(--lg-easing-spring) both;
+}
+```
+
+## Accessibility
+
+- Ensure `contrast-ratio ≥ 4.5:1` for text over glass surfaces
+- Respect `prefers-reduced-motion` — disable blur animations, use opacity-only transitions
+- Provide `prefers-contrast: high` overrides that replace translucent backgrounds with solid ones

package/templates/skills/domains/frontend-design/liquid-glass/references/tokens.css

@@ -0,0 +1,81 @@
+/* Liquid Glass Design Tokens */
+
+:root {
+  color-scheme: light dark;
+
+  /* Blur */
+  --lg-blur-sm: 8px;
+  --lg-blur-md: 16px;
+  --lg-blur-lg: 32px;
+  --lg-blur-xl: 48px;
+
+  /* Saturation */
+  --lg-saturate: 1.8;
+
+  /* Radius */
+  --lg-radius-sm: 8px;
+  --lg-radius-md: 12px;
+  --lg-radius-lg: 16px;
+  --lg-radius-xl: 24px;
+
+  /* Shadows */
+  --lg-shadow-subtle: 0 1px 3px rgba(0,0,0,0.08);
+  --lg-shadow-elevated: 0 4px 16px rgba(0,0,0,0.1);
+  --lg-shadow-high: 0 8px 32px rgba(0,0,0,0.15);
+
+  /* Animation */
+  --lg-duration-fast: 150ms;
+  --lg-duration-normal: 300ms;
+  --lg-duration-slow: 500ms;
+  --lg-easing-spring: cubic-bezier(0.22, 1, 0.36, 1);
+
+  /* Light mode (default) */
+  --lg-bg-primary: rgba(255,255,255,0.72);
+  --lg-bg-elevated: rgba(255,255,255,0.82);
+  --lg-bg-toolbar: rgba(255,255,255,0.65);
+  --lg-bg-interactive: rgba(255,255,255,0.5);
+  --lg-bg-pressed: rgba(255,255,255,0.35);
+  --lg-bg-scrim: rgba(0,0,0,0.25);
+  --lg-border-color: rgba(255,255,255,0.45);
+  --lg-border-subtle: rgba(0,0,0,0.06);
+}
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    --lg-bg-primary: rgba(30,30,30,0.65);
+    --lg-bg-elevated: rgba(40,40,40,0.75);
+    --lg-bg-toolbar: rgba(25,25,25,0.6);
+    --lg-bg-interactive: rgba(255,255,255,0.1);
+    --lg-bg-pressed: rgba(255,255,255,0.06);
+    --lg-bg-scrim: rgba(0,0,0,0.5);
+    --lg-border-color: rgba(255,255,255,0.12);
+    --lg-border-subtle: rgba(255,255,255,0.06);
+    --lg-shadow-subtle: 0 1px 3px rgba(0,0,0,0.3);
+    --lg-shadow-elevated: 0 4px 16px rgba(0,0,0,0.4);
+    --lg-shadow-high: 0 8px 32px rgba(0,0,0,0.5);
+  }
+}
+
+@media (prefers-contrast: high) {
+  :root {
+    --lg-bg-primary: rgba(255,255,255,0.95);
+    --lg-bg-elevated: rgba(255,255,255,0.98);
+    --lg-border-color: rgba(0,0,0,0.3);
+  }
+}
+
+@media (prefers-contrast: high) and (prefers-color-scheme: dark) {
+  :root {
+    --lg-bg-primary: rgba(20,20,20,0.95);
+    --lg-bg-elevated: rgba(25,25,25,0.98);
+    --lg-border-color: rgba(255,255,255,0.3);
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  :root {
+    --lg-duration-fast: 0ms;
+    --lg-duration-normal: 0ms;
+    --lg-duration-slow: 0ms;
+  }
+}

package/templates/skills/domains/frontend-design/neubrutalism/SKILL.md

@@ -0,0 +1,143 @@
+---
+name: neubrutalism
+description: Neubrutalism design system skill. Use when building bold UI with thick borders, offset solid shadows, high saturation colors, and minimal border radius.
+license: MIT
+user-invocable: false
+disable-model-invocation: false
+---
+
+# Neubrutalism Design Spec
+
+## Core Principles
+
+1. **Thick Borders** — Bold `3–5px solid` black outlines on all elements
+2. **Offset Solid Shadows** — Hard-edge `box-shadow` with zero blur (e.g. `5px 5px 0 #000`)
+3. **High Saturation Colors** — Vivid, punchy fills: pinks, yellows, blues, greens
+4. **Minimal Radius** — `0–8px` border-radius; sharp or barely rounded corners
+5. **Flat Aesthetic** — No gradients, no blur, no transparency
+
+## CSS Tokens
+
+Reference: [references/tokens.css](references/tokens.css)
+
+```css
+@import 'references/tokens.css';
+
+.nb-card {
+  background: var(--nb-yellow);
+  border: var(--nb-border-thick);
+  border-radius: var(--nb-radius);
+  box-shadow: var(--nb-shadow);
+}
+```
+
+## Component Examples
+
+### Card
+```css
+.nb-card {
+  background: var(--nb-white);
+  border: var(--nb-border-thick);
+  border-radius: var(--nb-radius);
+  box-shadow: var(--nb-shadow);
+  padding: 1.5rem;
+}
+```
+
+### Button
+```css
+.nb-btn {
+  background: var(--nb-yellow);
+  border: var(--nb-border);
+  border-radius: var(--nb-radius);
+  box-shadow: var(--nb-shadow-sm);
+  padding: 0.6rem 1.4rem;
+  font-family: var(--nb-font);
+  font-weight: var(--nb-font-weight);
+  cursor: pointer;
+  transition: transform 0.1s, box-shadow 0.1s;
+}
+.nb-btn:hover {
+  transform: translate(-2px, -2px);
+  box-shadow: var(--nb-shadow);
+}
+.nb-btn:active {
+  transform: translate(3px, 3px);
+  box-shadow: none;
+}
+```
+
+### Navbar
+```css
+.nb-nav {
+  background: var(--nb-bg);
+  border-bottom: var(--nb-border-thick);
+  padding: 1rem 2rem;
+  position: sticky;
+  top: 0;
+  z-index: 100;
+}
+```
+
+### Input
+```css
+.nb-input {
+  background: var(--nb-white);
+  border: var(--nb-border);
+  border-radius: var(--nb-radius);
+  box-shadow: var(--nb-shadow-sm);
+  padding: 0.6rem 1rem;
+  font-family: var(--nb-font);
+  font-weight: var(--nb-font-weight-body);
+}
+.nb-input:focus {
+  outline: none;
+  box-shadow: var(--nb-shadow);
+}
+```
+
+### Badge
+```css
+.nb-badge {
+  background: var(--nb-pink);
+  border: var(--nb-border);
+  border-radius: var(--nb-radius);
+  padding: 0.2rem 0.8rem;
+  font-family: var(--nb-font);
+  font-weight: var(--nb-font-weight);
+  font-size: 0.85rem;
+}
+```
+
+## Typography
+
+- Use bold, geometric sans-serif fonts (Space Grotesk, Inter, etc.)
+- Headings: `font-weight: 700`, `letter-spacing: -0.02em`
+- Body: `font-weight: 500`
+- Uppercase sparingly for labels/badges
+
+```css
+h1, h2, h3 {
+  font-family: var(--nb-font-heading);
+  font-weight: var(--nb-font-weight);
+  letter-spacing: var(--nb-letter-spacing);
+}
+body {
+  font-family: var(--nb-font);
+  font-weight: var(--nb-font-weight-body);
+}
+```
+
+## Accessibility Notes
+
+- Thick borders provide strong visual boundaries — good for low-vision users
+- Ensure color contrast ≥ 4.5:1 for text on colored backgrounds
+- Active/hover states use `transform` shifts — provide `prefers-reduced-motion` fallback
+
+```css
+@media (prefers-reduced-motion: reduce) {
+  .nb-btn:hover, .nb-btn:active {
+    transform: none;
+  }
+}
+```

package/templates/skills/domains/frontend-design/neubrutalism/references/tokens.css

@@ -0,0 +1,44 @@
+:root {
+  /* Borders */
+  --nb-border: 3px solid #000;
+  --nb-border-thick: 5px solid #000;
+
+  /* Shadows (offset solid, no blur) */
+  --nb-shadow-sm: 3px 3px 0 #000;
+  --nb-shadow: 5px 5px 0 #000;
+  --nb-shadow-lg: 8px 8px 0 #000;
+
+  /* Radius */
+  --nb-radius: 4px;
+  --nb-radius-lg: 8px;
+
+  /* Colors — high saturation */
+  --nb-pink: #ff6b9d;
+  --nb-yellow: #ffd43b;
+  --nb-blue: #4dabf7;
+  --nb-green: #51cf66;
+  --nb-orange: #ff922b;
+  --nb-purple: #cc5de8;
+  --nb-red: #ff6b6b;
+  --nb-white: #fff;
+  --nb-black: #000;
+  --nb-bg: #f5f0e8;
+
+  /* Typography */
+  --nb-font: 'Space Grotesk', 'Inter', system-ui, sans-serif;
+  --nb-font-heading: 'Space Grotesk', 'Inter', system-ui, sans-serif;
+  --nb-font-weight: 700;
+  --nb-font-weight-body: 500;
+  --nb-letter-spacing: -0.02em;
+}
+
+[data-theme="dark"] {
+  --nb-border: 3px solid #fff;
+  --nb-border-thick: 5px solid #fff;
+  --nb-shadow-sm: 3px 3px 0 #fff;
+  --nb-shadow: 5px 5px 0 #fff;
+  --nb-shadow-lg: 8px 8px 0 #fff;
+  --nb-bg: #1a1a2e;
+  --nb-black: #fff;
+  --nb-white: #1a1a2e;
+}

package/templates/skills/domains/frontend-design/reference/color-and-contrast.md

@@ -0,0 +1,132 @@
+# Color & Contrast
+
+## Color Spaces: Use OKLCH
+
+**Stop using HSL.** Use OKLCH (or LCH) instead. It's perceptually uniform, meaning equal steps in lightness *look* equal—unlike HSL where 50% lightness in yellow looks bright while 50% in blue looks dark.
+
+```css
+/* OKLCH: lightness (0-100%), chroma (0-0.4+), hue (0-360) */
+--color-primary: oklch(60% 0.15 250);      /* Blue */
+--color-primary-light: oklch(85% 0.08 250); /* Same hue, lighter */
+--color-primary-dark: oklch(35% 0.12 250);  /* Same hue, darker */
+```
+
+**Key insight**: As you move toward white or black, reduce chroma (saturation). High chroma at extreme lightness looks garish. A light blue at 85% lightness needs ~0.08 chroma, not the 0.15 of your base color.
+
+## Building Functional Palettes
+
+### The Tinted Neutral Trap
+
+**Pure gray is dead.** Add a subtle hint of your brand hue to all neutrals:
+
+```css
+/* Dead grays */
+--gray-100: oklch(95% 0 0);     /* No personality */
+--gray-900: oklch(15% 0 0);
+
+/* Warm-tinted grays (add brand warmth) */
+--gray-100: oklch(95% 0.01 60);  /* Hint of warmth */
+--gray-900: oklch(15% 0.01 60);
+
+/* Cool-tinted grays (tech, professional) */
+--gray-100: oklch(95% 0.01 250); /* Hint of blue */
+--gray-900: oklch(15% 0.01 250);
+```
+
+The chroma is tiny (0.01) but perceptible. It creates subconscious cohesion between your brand color and your UI.
+
+### Palette Structure
+
+A complete system needs:
+
+| Role | Purpose | Example |
+|------|---------|---------|
+| **Primary** | Brand, CTAs, key actions | 1 color, 3-5 shades |
+| **Neutral** | Text, backgrounds, borders | 9-11 shade scale |
+| **Semantic** | Success, error, warning, info | 4 colors, 2-3 shades each |
+| **Surface** | Cards, modals, overlays | 2-3 elevation levels |
+
+**Skip secondary/tertiary unless you need them.** Most apps work fine with one accent color. Adding more creates decision fatigue and visual noise.
+
+### The 60-30-10 Rule (Applied Correctly)
+
+This rule is about **visual weight**, not pixel count:
+
+- **60%**: Neutral backgrounds, white space, base surfaces
+- **30%**: Secondary colors—text, borders, inactive states
+- **10%**: Accent—CTAs, highlights, focus states
+
+The common mistake: using the accent color everywhere because it's "the brand color." Accent colors work *because* they're rare. Overuse kills their power.
+
+## Contrast & Accessibility
+
+### WCAG Requirements
+
+| Content Type | AA Minimum | AAA Target |
+|--------------|------------|------------|
+| Body text | 4.5:1 | 7:1 |
+| Large text (18px+ or 14px bold) | 3:1 | 4.5:1 |
+| UI components, icons | 3:1 | 4.5:1 |
+| Non-essential decorations | None | None |
+
+**The gotcha**: Placeholder text still needs 4.5:1. That light gray placeholder you see everywhere? Usually fails WCAG.
+
+### Dangerous Color Combinations
+
+These commonly fail contrast or cause readability issues:
+
+- Light gray text on white (the #1 accessibility fail)
+- **Gray text on any colored background**—gray looks washed out and dead on color. Use a darker shade of the background color, or transparency
+- Red text on green background (or vice versa)—8% of men can't distinguish these
+- Blue text on red background (vibrates visually)
+- Yellow text on white (almost always fails)
+- Thin light text on images (unpredictable contrast)
+
+### Never Use Pure Gray or Pure Black
+
+Pure gray (`oklch(50% 0 0)`) and pure black (`#000`) don't exist in nature—real shadows and surfaces always have a color cast. Even a chroma of 0.005-0.01 is enough to feel natural without being obviously tinted. (See tinted neutrals example above.)
+
+### Testing
+
+Don't trust your eyes. Use tools:
+
+- [WebAIM Contrast Checker](https://webaim.org/resources/contrastchecker/)
+- Browser DevTools → Rendering → Emulate vision deficiencies
+- [Polypane](https://polypane.app/) for real-time testing
+
+## Theming: Light & Dark Mode
+
+### Dark Mode Is Not Inverted Light Mode
+
+You can't just swap colors. Dark mode requires different design decisions:
+
+| Light Mode | Dark Mode |
+|------------|-----------|
+| Shadows for depth | Lighter surfaces for depth (no shadows) |
+| Dark text on light | Light text on dark (reduce font weight) |
+| Vibrant accents | Desaturate accents slightly |
+| White backgrounds | Never pure black—use dark gray (oklch 12-18%) |
+
+```css
+/* Dark mode depth via surface color, not shadow */
+:root[data-theme="dark"] {
+  --surface-1: oklch(15% 0.01 250);
+  --surface-2: oklch(20% 0.01 250);  /* "Higher" = lighter */
+  --surface-3: oklch(25% 0.01 250);
+
+  /* Reduce text weight slightly */
+  --body-weight: 350;  /* Instead of 400 */
+}
+```
+
+### Token Hierarchy
+
+Use two layers: primitive tokens (`--blue-500`) and semantic tokens (`--color-primary: var(--blue-500)`). For dark mode, only redefine the semantic layer—primitives stay the same.
+
+## Alpha Is A Design Smell
+
+Heavy use of transparency (rgba, hsla) usually means an incomplete palette. Alpha creates unpredictable contrast, performance overhead, and inconsistency. Define explicit overlay colors for each context instead. Exception: focus rings and interactive states where see-through is needed.
+
+---
+
+**Avoid**: Relying on color alone to convey information. Creating palettes without clear roles for each color. Using pure black (#000) for large areas. Skipping color blindness testing (8% of men affected).