code-abyss 1.6.16 → 1.7.1

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

@@ -0,0 +1,138 @@
+---
+name: glassmorphism
+description: Glassmorphism design system skill. Use when building frosted-glass UI components with blur, transparency, and layered depth effects.
+license: MIT
+---
+
+# 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/skills/domains/frontend-design/glassmorphism/references/tokens.css

@@ -0,0 +1,32 @@
+:root {
+  /* Backgrounds */
+  --glass-bg-light: rgba(255, 255, 255, 0.08);
+  --glass-bg: rgba(255, 255, 255, 0.15);
+  --glass-bg-heavy: rgba(255, 255, 255, 0.25);
+
+  /* Blur */
+  --glass-blur-light: blur(8px);
+  --glass-blur: blur(16px);
+  --glass-blur-strong: blur(32px);
+
+  /* Border */
+  --glass-border: 1px solid rgba(255, 255, 255, 0.18);
+
+  /* Radius */
+  --glass-radius: 12px;
+  --glass-radius-lg: 20px;
+
+  /* Shadow */
+  --glass-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
+  --glass-shadow-elevated: 0 8px 40px rgba(0, 0, 0, 0.15);
+}
+
+/* Dark theme overrides */
+[data-theme="dark"] {
+  --glass-bg-light: rgba(255, 255, 255, 0.04);
+  --glass-bg: rgba(255, 255, 255, 0.08);
+  --glass-bg-heavy: rgba(255, 255, 255, 0.14);
+  --glass-border: 1px solid rgba(255, 255, 255, 0.12);
+  --glass-shadow: 0 4px 30px rgba(0, 0, 0, 0.3);
+  --glass-shadow-elevated: 0 8px 40px rgba(0, 0, 0, 0.4);
+}

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

@@ -0,0 +1,135 @@
+---
+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
+---
+
+# 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/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/skills/domains/frontend-design/neubrutalism/SKILL.md

@@ -0,0 +1,141 @@
+---
+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
+---
+
+# 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/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;
+}