ccgx-workflow 1.0.0 → 1.0.2

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

@@ -1,142 +1,142 @@
----
-name: glassmorphism
-description: Glassmorphism 玻璃态设计（毛玻璃、透明度、模糊、分层深度）。
-license: MIT
-user-invocable: false
-disable-model-invocation: false
-context: fork
-paths: "*.tsx,*.jsx,*.vue,*.svelte,*.css,*.scss"
----
-
-# Glassmorphism Design Spec
-
-## 4 Core Elements
-
-1. **Transparency** — Semi-transparent backgrounds using `rgba()` or `hsla()` with alpha `0.05–0.4`
-2. **Blur** — `backdrop-filter: blur()` ranging 8–40px for frosted-glass effect
-3. **Border** — Subtle semi-transparent borders (`1px solid rgba(255,255,255,0.18)`) to define edges
-4. **Shadow** — Soft layered `box-shadow` for depth separation from background
-
-## CSS Tokens
-
-Reference: [references/tokens.css](references/tokens.css)
-
-Use CSS custom properties from `tokens.css` for consistent theming:
-
-```css
-@import 'references/tokens.css';
-
-.glass-card {
-  background: var(--glass-bg);
-  backdrop-filter: var(--glass-blur);
-  -webkit-backdrop-filter: var(--glass-blur);
-  border: var(--glass-border);
-  border-radius: var(--glass-radius);
-  box-shadow: var(--glass-shadow);
-}
-```
-
-## Component Examples
-
-### Card
-```css
-.glass-card {
-  background: var(--glass-bg);
-  backdrop-filter: var(--glass-blur);
-  -webkit-backdrop-filter: var(--glass-blur);
-  border: var(--glass-border);
-  border-radius: var(--glass-radius);
-  box-shadow: var(--glass-shadow);
-  padding: 1.5rem;
-}
-```
-
-### Navbar
-```css
-.glass-nav {
-  background: var(--glass-bg-heavy);
-  backdrop-filter: var(--glass-blur-strong);
-  -webkit-backdrop-filter: var(--glass-blur-strong);
-  border-bottom: var(--glass-border);
-  box-shadow: var(--glass-shadow);
-  position: sticky;
-  top: 0;
-  z-index: 100;
-}
-```
-
-### Modal Overlay
-```css
-.glass-modal-backdrop {
-  background: rgba(0, 0, 0, 0.4);
-  backdrop-filter: blur(4px);
-}
-.glass-modal {
-  background: var(--glass-bg-heavy);
-  backdrop-filter: var(--glass-blur-strong);
-  -webkit-backdrop-filter: var(--glass-blur-strong);
-  border: var(--glass-border);
-  border-radius: var(--glass-radius-lg);
-  box-shadow: var(--glass-shadow-elevated);
-}
-```
-
-### Button
-```css
-.glass-btn {
-  background: var(--glass-bg-light);
-  backdrop-filter: var(--glass-blur-light);
-  -webkit-backdrop-filter: var(--glass-blur-light);
-  border: var(--glass-border);
-  border-radius: var(--glass-radius);
-  transition: background 0.2s;
-}
-.glass-btn:hover {
-  background: var(--glass-bg);
-}
-```
-
-## Browser Compatibility
-
-| Feature | Chrome | Firefox | Safari | Edge |
-|---------|--------|---------|--------|------|
-| `backdrop-filter` | 76+ | 103+ | 9+ (`-webkit-`) | 79+ |
-| `rgba()` backgrounds | All | All | All | All |
-
-- Always include `-webkit-backdrop-filter` for Safari support
-- Firefox <103: use `@supports` fallback with solid semi-transparent bg
-- Fallback pattern:
-
-```css
-.glass-card {
-  background: rgba(255, 255, 255, 0.85); /* fallback */
-}
-@supports (backdrop-filter: blur(1px)) {
-  .glass-card {
-    background: var(--glass-bg);
-    backdrop-filter: var(--glass-blur);
-  }
-}
-```
-
-## Accessibility Notes
-
-- Ensure **contrast ratio ≥ 4.5:1** for text over glass surfaces — test against all possible backgrounds
-- Provide `prefers-reduced-transparency` media query to disable blur/transparency for users who need it
-- Avoid placing critical text on highly transparent surfaces without a fallback
-- Use `prefers-contrast: more` to increase border opacity and reduce transparency
-
-```css
-@media (prefers-reduced-transparency: reduce) {
-  .glass-card {
-    background: rgba(255, 255, 255, 0.92);
-    backdrop-filter: none;
-  }
-}
-@media (prefers-contrast: more) {
-  .glass-card {
-    background: rgba(255, 255, 255, 0.85);
-    border: 1px solid rgba(0, 0, 0, 0.3);
-  }
-}
-```
+---
+name: glassmorphism
+description: Glassmorphism 玻璃态设计（毛玻璃、透明度、模糊、分层深度）。
+license: MIT
+user-invocable: false
+disable-model-invocation: false
+context: fork
+paths: "*.tsx,*.jsx,*.vue,*.svelte,*.css,*.scss"
+---
+
+# Glassmorphism Design Spec
+
+## 4 Core Elements
+
+1. **Transparency** — Semi-transparent backgrounds using `rgba()` or `hsla()` with alpha `0.05–0.4`
+2. **Blur** — `backdrop-filter: blur()` ranging 8–40px for frosted-glass effect
+3. **Border** — Subtle semi-transparent borders (`1px solid rgba(255,255,255,0.18)`) to define edges
+4. **Shadow** — Soft layered `box-shadow` for depth separation from background
+
+## CSS Tokens
+
+Reference: [references/tokens.css](references/tokens.css)
+
+Use CSS custom properties from `tokens.css` for consistent theming:
+
+```css
+@import 'references/tokens.css';
+
+.glass-card {
+  background: var(--glass-bg);
+  backdrop-filter: var(--glass-blur);
+  -webkit-backdrop-filter: var(--glass-blur);
+  border: var(--glass-border);
+  border-radius: var(--glass-radius);
+  box-shadow: var(--glass-shadow);
+}
+```
+
+## Component Examples
+
+### Card
+```css
+.glass-card {
+  background: var(--glass-bg);
+  backdrop-filter: var(--glass-blur);
+  -webkit-backdrop-filter: var(--glass-blur);
+  border: var(--glass-border);
+  border-radius: var(--glass-radius);
+  box-shadow: var(--glass-shadow);
+  padding: 1.5rem;
+}
+```
+
+### Navbar
+```css
+.glass-nav {
+  background: var(--glass-bg-heavy);
+  backdrop-filter: var(--glass-blur-strong);
+  -webkit-backdrop-filter: var(--glass-blur-strong);
+  border-bottom: var(--glass-border);
+  box-shadow: var(--glass-shadow);
+  position: sticky;
+  top: 0;
+  z-index: 100;
+}
+```
+
+### Modal Overlay
+```css
+.glass-modal-backdrop {
+  background: rgba(0, 0, 0, 0.4);
+  backdrop-filter: blur(4px);
+}
+.glass-modal {
+  background: var(--glass-bg-heavy);
+  backdrop-filter: var(--glass-blur-strong);
+  -webkit-backdrop-filter: var(--glass-blur-strong);
+  border: var(--glass-border);
+  border-radius: var(--glass-radius-lg);
+  box-shadow: var(--glass-shadow-elevated);
+}
+```
+
+### Button
+```css
+.glass-btn {
+  background: var(--glass-bg-light);
+  backdrop-filter: var(--glass-blur-light);
+  -webkit-backdrop-filter: var(--glass-blur-light);
+  border: var(--glass-border);
+  border-radius: var(--glass-radius);
+  transition: background 0.2s;
+}
+.glass-btn:hover {
+  background: var(--glass-bg);
+}
+```
+
+## Browser Compatibility
+
+| Feature | Chrome | Firefox | Safari | Edge |
+|---------|--------|---------|--------|------|
+| `backdrop-filter` | 76+ | 103+ | 9+ (`-webkit-`) | 79+ |
+| `rgba()` backgrounds | All | All | All | All |
+
+- Always include `-webkit-backdrop-filter` for Safari support
+- Firefox <103: use `@supports` fallback with solid semi-transparent bg
+- Fallback pattern:
+
+```css
+.glass-card {
+  background: rgba(255, 255, 255, 0.85); /* fallback */
+}
+@supports (backdrop-filter: blur(1px)) {
+  .glass-card {
+    background: var(--glass-bg);
+    backdrop-filter: var(--glass-blur);
+  }
+}
+```
+
+## Accessibility Notes
+
+- Ensure **contrast ratio ≥ 4.5:1** for text over glass surfaces — test against all possible backgrounds
+- Provide `prefers-reduced-transparency` media query to disable blur/transparency for users who need it
+- Avoid placing critical text on highly transparent surfaces without a fallback
+- Use `prefers-contrast: more` to increase border opacity and reduce transparency
+
+```css
+@media (prefers-reduced-transparency: reduce) {
+  .glass-card {
+    background: rgba(255, 255, 255, 0.92);
+    backdrop-filter: none;
+  }
+}
+@media (prefers-contrast: more) {
+  .glass-card {
+    background: rgba(255, 255, 255, 0.85);
+    border: 1px solid rgba(0, 0, 0, 0.3);
+  }
+}
+```

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

@@ -1,139 +1,139 @@
----
-name: liquid-glass
-description: Apple Liquid Glass 液态玻璃设计（半透明、深度感知、Apple 设计语言）。
-license: MIT
-user-invocable: false
-disable-model-invocation: false
-context: fork
-paths: "*.tsx,*.jsx,*.vue,*.svelte,*.css,*.scss"
----
-
-# 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
+---
+name: liquid-glass
+description: Apple Liquid Glass 液态玻璃设计（半透明、深度感知、Apple 设计语言）。
+license: MIT
+user-invocable: false
+disable-model-invocation: false
+context: fork
+paths: "*.tsx,*.jsx,*.vue,*.svelte,*.css,*.scss"
+---
+
+# 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