@jaimevalasek/aioson 1.5.1 → 1.7.0

package/template/.aioson/skills/design/glassmorphism-ui/references/art-direction.md

@@ -0,0 +1,159 @@
+# Art Direction — Glassmorphism UI
+
+Read this file for any page-level work where differentiation matters: apps, dashboards, landing pages, and major flows.
+
+This file exists to stop Glassmorphism UI from collapsing into the same "blur everything and call it done" result every time.
+
+The glass system stays coherent, but the expression must change with the product, the user, and the dominant task.
+
+---
+
+## Core Rule
+
+**Same glass system, different expressions.**
+
+Keep the Glassmorphism DNA:
+- gradient background substrate (always)
+- backdrop-filter blur as structural depth
+- luminous borders (rgba white)
+- violet-blue accent with colored shadows
+- desaturated, luminous palette
+
+But do **not** keep the exact same card grid, blur intensity, gradient colors, or sidebar composition from product to product.
+
+---
+
+## Mandatory Pre-Build Outputs
+
+Before designing a full page, produce all of these:
+
+1. **Human**
+   The real person using this page right now.
+
+2. **Main action**
+   The one decision, action, or question that matters most on this screen.
+
+3. **Felt quality**
+   Concrete words such as `immersive`, `premium`, `fluid`, `calm`, `sophisticated`, `focused`, `alive`, `trustworthy`.
+   Never use empty labels like `modern`, `glassmorphic`, or `beautiful`.
+
+4. **Domain vocabulary**
+   At least 5 concepts from the product's world.
+   Example for fintech: `portfolio`, `allocation`, `yield`, `position`, `rebalance`.
+
+5. **Material world**
+   At least 5 tones or materials that belong to that product world.
+   Example for crypto: deep space navy, aurora violet glow, crystalline white, signal green, amber alert.
+
+6. **Defaults to avoid**
+   Name 3 obvious glass UI choices that would make the result generic.
+   Example: purple gradient background on everything, neon glow borders, glass card with no content hierarchy.
+
+7. **Signature move**
+   One memorable glass detail that appears in at least 5 places on the page.
+   Example: "stat numbers with accent-gradient text, repeated in hero, chart labels, and metric badges."
+
+If you cannot produce these seven, you are not ready to compose the page.
+
+---
+
+## Expression Modes
+
+Choose **one primary mode** per screen. You may borrow a small amount from a secondary mode only after the main expression is clear.
+
+### 1. Crystal Dashboard
+- **For**: fintech, crypto, investment portfolios, modern analytics
+- **Feel**: premium, trustworthy, sophisticated, modern
+- **Composition**: gradient background → glass stat cards floating → charts with gradient fills → translucent sidebar
+- **Visual cues**: strong backdrop-blur (20px+), luminous borders, large numbers in cards with transparent background, gradient fills in chart areas
+- **Signature ideas**: glass stat cards with inner glow on hover; chart area fill matches background gradient hue; glass sidebar showing gradient behind it
+- **Blur level**: `blur-md` (16px) for cards, `blur-lg` (24px) for sidebar
+
+### 2. Floating Mobile
+- **For**: mobile apps, PWAs, iOS-style interfaces, media players
+- **Feel**: modern, fluid, polished, delightful
+- **Composition**: cards floating over gradient background, glass bottom sheet, floating action buttons, translucent tab bar
+- **Visual cues**: very rounded corners (radius-2xl+), glass bottom sheets revealing blurred content behind, inset shadows on cards, icon backgrounds with blur
+- **Signature ideas**: bottom sheet revealing glass blur of content underneath; swipeable glass cards; glass tab bar matching iOS Control Center vibe
+- **Blur level**: `blur-sm` (8px) for performance on mobile, `blur-md` (16px) for key surfaces
+
+### 3. Aurora Landing
+- **For**: product launches, fintech marketing, modern SaaS marketing, crypto projects
+- **Feel**: futuristic, elegant, immersive, aspirational
+- **Composition**: hero with aurora gradient background (mesh of 2-3 pastel colors), floating glass feature cards, social proof in glass strip
+- **Visual cues**: aurora mesh gradient background (color-shifting blobs), glass hero card, floating product screenshots in glass frame, decorative gradient orbs
+- **Signature ideas**: animated aurora background with slow color shift; glass pricing cards with luminous highlight on featured; glass navigation becoming more opaque on scroll
+- **Blur level**: `blur-lg` (24px) for hero card, `blur-md` (16px) for feature cards, `blur-xl` (40px) for background blobs
+
+### 4. Media Player
+- **For**: music apps, video platforms, podcast players, streaming dashboards
+- **Feel**: immersive, atmospheric, contextual, alive
+- **Composition**: background is album art with extreme blur, controls over glass surfaces, playlist in glass sidebar, now-playing as central glass card
+- **Visual cues**: background adapts to dominant color of current media (color extraction), extreme blur (40px+), glass controls and buttons, progress bar over glass strip
+- **Signature ideas**: background color changes based on current media (smooth transition); glass now-playing card with album art reflection effect; volume and progress controls with glass knobs
+- **Blur level**: `blur-xl` (40px) for media background, `blur-lg` (24px) for player card, `blur-md` (16px) for playlist
+
+### 5. Zen Workspace
+- **For**: note-taking, writing tools, meditation apps, wellness dashboards
+- **Feel**: calm, focused, clean, serene
+- **Composition**: very subtle gradient background (almost solid), minimal glass cards, generous whitespace, clean typography
+- **Visual cues**: light blur (8-12px), almost invisible borders, ultra-subtle gradients, thin/line iconography
+- **Signature ideas**: focus mode where glass cards dim everything except the active card; soft ambient background with breathing opacity shift (very slow); glass toolbar that disappears during writing
+- **Blur level**: `blur-sm` (8px) throughout — restraint is the signature
+
+---
+
+## Signature Library
+
+These details are immediately available for any glass composition. Pick at least 2 per screen.
+
+| Detail | Usage |
+|--------|-------|
+| Gradient text on stat numbers | Hero metrics, KPI cards, price displays |
+| Top reflection `::before` | Every glass card, modal, sidebar |
+| Glass sidebar showing gradient behind | App shell, always |
+| Luminous border (rgba white) | All glass containers |
+| Colored shadow with violet tint | Cards, modals, elevated elements |
+| Accent gradient on primary CTA | Buttons, progress fills, chart fills |
+| Glass badge with semantic color tint | Status, labels, chip filters |
+| Inner glow on hover | Featured cards, stat cards |
+| Glass bottom sheet | Mobile overlays, drawers |
+| Aurora gradient background | Marketing heroes, login pages |
+| Gradient orbs (decorative blobs) | Landing pages, auth pages |
+| Glass nav becoming more opaque on scroll | All website navigation |
+
+---
+
+## Anti-Generic Tests
+
+Run all five before presenting the result.
+
+### Glass Test (unique to this skill)
+Remove `backdrop-filter: blur(...)` from all cards. If the interface still looks visually coherent and attractive, the glass is decorative, not structural. The transparency must be essential to the hierarchy — background must show through, gradient must be visible behind cards. Fix: reduce glass-bg opacity and ensure gradient substrate is visible.
+
+### Neon Test
+Is any color at saturation > 80%? If yes, you're building cyberpunk, not glassmorphism. Glass is desaturated and luminous. Fix: reduce saturation, shift to pastel variants, use violet-blue as accent only.
+
+### Depth Test
+Squint your eyes. Can you distinguish 3+ layers of depth? If everything feels flat, the glass isn't working. Fix: increase blur intensity on deeper layers, reduce opacity on background surfaces, add more distinct gradient between layers.
+
+### Squint Test
+Does the visual hierarchy hold without reading the text? Glass cards should create visible structure. If everything blurs into the same luminous soup, reduce glass nesting and increase contrast between layers.
+
+### Performance Test
+Does the blur cause excessive repaint? Every `backdrop-filter` creates a composite layer. More than 8-10 simultaneous blur elements on one screen can cause performance issues on mobile. Fix: use `blur-sm` on mobile, reduce glass nesting to 2 levels, use `will-change: transform` sparingly.
+
+---
+
+## What Makes Each Mode Distinct
+
+These are the diverging choices — the things that make mode 1 impossible to confuse with mode 5.
+
+| | Crystal Dashboard | Floating Mobile | Aurora Landing | Media Player | Zen Workspace |
+|---|---|---|---|---|---|
+| Blur intensity | 16-24px | 8-16px | 16-40px | 24-40px | 8-12px |
+| Card radius | radius-xl (16px) | radius-2xl+ (20px+) | radius-2xl (20px) | radius-2xl (20px) | radius-xl (16px) |
+| Background | Lavender aurora | Clean gradient | Color-shifting aurora | Album art (blurred) | Near-solid subtle gradient |
+| Signature element | Gradient stat numbers | Glass bottom sheet | Animated aurora orbs | Color-responsive background | Disappearing toolbar |
+| Motion | Card glow on hover | Swipe gestures | Parallax orbs | Color transition on track change | Breathing opacity |
+| Density | Medium | Low (mobile) | Low (marketing) | Low (immersive) | Very low |

package/template/.aioson/skills/design/glassmorphism-ui/references/components.md

@@ -0,0 +1,498 @@
+# Components — Glassmorphism UI
+
+All components use glass tokens. The Glass Card is the fundamental building block — everything else extends or contains it.
+
+---
+
+## Glass Rules (read first)
+
+Before building any component:
+
+1. **Minimum 2 layers**: never place a glass card directly over white or solid black. Always over a gradient or another glass layer.
+2. **Text over glass**: guarantee WCAG AA contrast. If blur is insufficient, increase `glass-bg` opacity toward `glass-bg-active`.
+3. **Fallback without blur**: if `backdrop-filter` is unsupported, use `glass-fallback-bg` at 0.95 opacity (see `design-tokens.md`).
+4. **Performance**: limit glass nesting to 3 levels max. Each `backdrop-filter` is a composite layer.
+5. **Top reflection**: every glass card has `::before` with `glass-highlight` for the top edge reflection. This is what makes glass feel real.
+
+---
+
+## 1. Glass Card (fundamental component)
+
+Every other container-type component inherits from this.
+
+```
+Structure:
+  position: relative
+  overflow: hidden
+  background: var(--glass-bg)
+  backdrop-filter: var(--glass-blur-md)
+  border: 1px solid var(--glass-border)
+  border-radius: var(--radius-xl)
+  box-shadow: var(--shadow-sm), var(--shadow-inner)
+  padding: var(--space-6)
+
+Pseudo-element ::before (top reflection):
+  content: ''
+  position: absolute
+  top: 0; left: 0; right: 0
+  height: 50%
+  background: var(--glass-highlight)
+  pointer-events: none
+  border-radius: inherit
+
+Hover:
+  background: var(--glass-bg-hover)
+  box-shadow: var(--shadow-md), var(--shadow-inner)
+  transition: var(--transition-glass)
+```
+
+Variants:
+- `glass-card--sm`: `border-radius: var(--radius-lg)`, `padding: var(--space-4)`
+- `glass-card--lg`: `border-radius: var(--radius-2xl)`, `padding: var(--space-8)`
+- `glass-card--hero`: `border-radius: var(--radius-3xl)`, `padding: var(--space-10)`, `backdrop-filter: var(--glass-blur-lg)`
+- `glass-card--elevated`: `background: var(--glass-bg-elevated)` (more opaque, for nested)
+- `glass-card--featured`: adds `box-shadow: var(--shadow-glow)` + `border: 1px solid rgba(124,58,237,0.30)`
+
+---
+
+## 2. Stat Card
+
+Glass Card + stat display. Used in dashboards and analytics.
+
+```
+Structure: Glass Card (radius-xl, padding-6)
+  └─ Label: text-sm, text-secondary, weight-500, mb-2
+  └─ Value: text-3xl or text-4xl, weight-bold, text-heading
+       Optional: gradient text (var(--accent-gradient), -webkit-background-clip: text)
+  └─ Trend badge: below value, inline-flex
+       ↑ green / ↓ red + percentage text-sm
+  └─ Optional: sparkline (40px height) at bottom
+
+Hover: glass card hover + inner glow (shadow-glow at 50% opacity)
+```
+
+---
+
+## 3. Feature Card
+
+Glass Card for marketing and feature lists.
+
+```
+Structure: Glass Card (radius-2xl, padding-8)
+  └─ Icon area: 48x48px, background: var(--accent-dim), border-radius: var(--radius-lg)
+       icon: 24px, accent color
+  └─ Title: text-lg, weight-semibold, text-heading, mt-4
+  └─ Description: text-sm, text-secondary, mt-2, line-height 1.6
+  └─ Optional: link/CTA at bottom (text-sm, accent color, arrow icon)
+```
+
+---
+
+## 4. Navigation Bar (app)
+
+Glass top bar, sticky, inside the content area (not full-width over sidebar).
+
+```
+Structure:
+  position: sticky
+  top: 0
+  height: var(--nav-height)   /* 64px */
+  background: var(--glass-bg)
+  backdrop-filter: var(--glass-blur-lg)
+  border-bottom: 1px solid var(--glass-border)
+  z-index: 10
+
+  Layout: flex, align-center, px-6, gap-4
+    Left: page title (text-lg, weight-semibold)
+    Right: actions (search icon, notifications, avatar)
+
+On scroll: background → var(--glass-bg-hover) via transition-glass
+```
+
+---
+
+## 5. Sidebar
+
+Glass sidebar, fixed or sticky, 256px wide.
+
+```
+Structure:
+  width: var(--sidebar-width)   /* 256px */
+  height: 100vh
+  position: fixed
+  top: 0; left: 0
+  background: var(--glass-bg)
+  backdrop-filter: var(--glass-blur-lg)
+  border-right: 1px solid var(--glass-border)
+  padding: var(--space-6) 0
+  overflow-y: auto
+
+  Sections:
+    Logo area: px-6, mb-8, height 40px
+    Nav groups: label text-xs uppercase tracking-wider text-muted px-6 mb-2
+    Nav items: px-4, py-2.5, radius-lg, gap-3, icon + label
+
+  Nav item states:
+    Default: text-secondary, icon text-muted
+    Hover: background var(--glass-bg-hover)
+    Active: background var(--accent-dim), border-left 2px solid var(--accent), text-heading, icon accent
+```
+
+---
+
+## 6. Bottom Sheet (mobile)
+
+Glass overlay sheet sliding up from bottom. iOS-style.
+
+```
+Structure:
+  position: fixed
+  bottom: 0; left: 0; right: 0
+  background: var(--glass-bg-active)   /* more opaque */
+  backdrop-filter: var(--glass-blur-xl)
+  border-radius: var(--radius-3xl) var(--radius-3xl) 0 0
+  border-top: 1px solid var(--glass-border)
+  padding: var(--space-3) var(--space-6) var(--space-8)
+
+  Drag handle:
+    width: 40px; height: 4px
+    background: var(--text-muted)
+    border-radius: var(--radius-full)
+    margin: 0 auto var(--space-6)
+
+Content behind: background becomes blur (achieved by the backdrop-filter revealing gradient below)
+```
+
+---
+
+## 7. Button — Primary
+
+Accent gradient, solid feel within glass environment.
+
+```
+height: var(--control-lg)   /* 44px */
+padding: 0 var(--space-5)
+background: var(--accent-gradient)
+color: var(--accent-contrast)
+border: none
+border-radius: var(--radius-md)
+box-shadow: var(--shadow-sm)
+font-weight: 500
+font-size: var(--text-sm)
+
+Hover: box-shadow var(--shadow-md) + filter brightness(1.05), 120ms
+Active: filter brightness(0.95)
+Disabled: opacity 0.4
+```
+
+---
+
+## 8. Button — Glass
+
+Secondary action button. Looks like a glass surface with text.
+
+```
+height: var(--control-lg)
+padding: 0 var(--space-5)
+background: var(--glass-bg)
+backdrop-filter: var(--glass-blur-sm)
+border: 1px solid var(--glass-border)
+border-radius: var(--radius-md)
+color: var(--text-primary)
+font-weight: 500
+
+Hover: background var(--glass-bg-hover), 120ms
+Active: background var(--glass-bg-active)
+```
+
+---
+
+## 9. Button — Ghost
+
+Minimal button, transparent, glass hover.
+
+```
+height: var(--control-md)
+padding: 0 var(--space-4)
+background: transparent
+border: none
+border-radius: var(--radius-md)
+color: var(--text-primary)
+
+Hover: background var(--glass-bg)
+```
+
+---
+
+## 10. Input
+
+Text input with glass surface and luminous focus ring.
+
+```
+height: var(--control-md)
+padding: 0 var(--space-3)
+background: var(--glass-bg)
+backdrop-filter: var(--glass-blur-sm)
+border: 1px solid var(--glass-border)
+border-radius: var(--radius-md)
+color: var(--text-primary)
+font-size: var(--text-sm)
+
+Placeholder: color var(--text-muted)
+Focus: border-color var(--glass-border-focus) + box-shadow 0 0 0 3px var(--accent-dim)
+Transition: var(--transition-glass)
+
+Icon left/right: 16px, text-muted, position absolute with padding offset
+```
+
+---
+
+## 11. Select / Dropdown
+
+Trigger uses Input style. Menu is a glass card.
+
+```
+Trigger: Input appearance + chevron-down icon right
+Menu:
+  Glass Card (radius-lg, padding-2, shadow-lg, blur-lg)
+  position: absolute, top: calc(100% + 4px), min-width: 100%
+  max-height: 240px, overflow-y: auto
+
+  Item: px-3, py-2, radius-md, text-sm text-primary
+  Item hover: background var(--glass-bg-hover)
+  Item selected: background var(--accent-dim), text-accent, font-weight 500
+```
+
+---
+
+## 12. Toggle Switch
+
+```
+width: 44px; height: 24px
+background: var(--glass-border)   /* off state */
+border-radius: var(--radius-full)
+position: relative
+transition: background var(--transition-base)
+
+Thumb:
+  width: 18px; height: 18px
+  background: white
+  border-radius: var(--radius-full)
+  box-shadow: var(--shadow-sm)
+  position: absolute, top: 3px, left: 3px
+  transition: transform var(--transition-base)
+
+Checked:
+  background: var(--accent-gradient)
+  thumb: transform translateX(20px)
+```
+
+---
+
+## 13. Badge
+
+```
+height: 22px
+padding: 0 var(--space-2.5)   /* 10px */
+border-radius: var(--radius-full)
+background: var(--glass-bg)
+border: 1px solid var(--glass-border)
+font-size: var(--text-xs)
+font-weight: 500
+
+Semantic variants (add tint to glass-bg):
+  success: background rgba(16, 185, 129, 0.12), color var(--semantic-green)
+  warning: background rgba(245, 158, 11, 0.12), color var(--semantic-amber)
+  error:   background rgba(239, 68, 68, 0.12), color var(--semantic-red)
+  info:    background rgba(59, 130, 246, 0.12), color var(--semantic-blue)
+  accent:  background var(--accent-dim), color var(--accent)
+```
+
+---
+
+## 14. Modal
+
+Glass card with blurred backdrop.
+
+```
+Backdrop:
+  position: fixed, inset: 0
+  background: rgba(var(--bg-void-rgb), 0.50)
+  backdrop-filter: var(--glass-blur-sm)
+  z-index: 50
+
+Modal container:
+  Glass Card (radius-2xl, shadow-lg, blur-lg)
+  max-width: 520px; width: calc(100% - 32px)
+  position: fixed, top: 50%, left: 50%
+  transform: translate(-50%, -50%)
+  padding: var(--space-8)
+  z-index: 51
+
+  Header: title text-lg weight-semibold + close button (ghost, icon-only)
+  Body: mt-4, text-sm text-secondary
+  Footer: mt-6, flex gap-3 justify-end
+```
+
+---
+
+## 15. Toast
+
+Auto-dismissing glass notification.
+
+```
+Glass Card (radius-xl, shadow-md)
+padding: var(--space-4) var(--space-5)
+display: flex, align-center, gap-3
+border-left: 3px solid semantic-color
+min-width: 280px; max-width: 400px
+position: fixed, bottom: var(--space-6), right: var(--space-6)
+z-index: 60
+animation: float-up 350ms ease-out + auto-dismiss 5s
+```
+
+---
+
+## 16. Tooltip
+
+Small glass bubble on hover.
+
+```
+Glass Card (radius-md, blur-sm)
+background: var(--glass-bg-active)   /* more opaque for readability */
+padding: var(--space-2) var(--space-3)
+font-size: var(--text-xs)
+box-shadow: var(--shadow-sm)
+pointer-events: none
+z-index: 70
+animation: scale-materialize 150ms
+```
+
+---
+
+## 17. Tab Bar
+
+Horizontal navigation tabs.
+
+```
+Container:
+  display: flex
+  background: var(--glass-bg)
+  backdrop-filter: var(--glass-blur-md)
+  border-bottom: 1px solid var(--glass-border)
+  padding: 0 var(--space-6)
+
+Tab item:
+  padding: var(--space-3) var(--space-4)
+  font-size: var(--text-sm)
+  font-weight: 500
+  color: var(--text-secondary)
+  border-bottom: 2px solid transparent
+  position: relative
+
+Active tab:
+  color: var(--text-heading)
+  border-bottom: 2px solid var(--accent)
+
+Hover: color var(--text-primary), transition var(--transition-fast)
+```
+
+---
+
+## 18. Progress Bar
+
+```
+Container:
+  height: 6px
+  background: var(--glass-border)
+  border-radius: var(--radius-full)
+  overflow: hidden
+
+Fill:
+  height: 100%
+  background: var(--accent-gradient)
+  border-radius: var(--radius-full)
+  transition: width var(--transition-slow)
+```
+
+---
+
+## 19. Avatar
+
+```
+Sizes: 24px / 32px / 40px / 56px
+border-radius: var(--radius-full)
+border: 2px solid var(--glass-border)
+box-shadow: var(--shadow-sm)
+overflow: hidden
+
+Fallback (no image): background var(--accent-dim), initials text-sm weight-600 accent color
+Avatar group: overlapping avatars with margin-left -8px, each with border 2px white/glass
+```
+
+---
+
+## 20. Empty State
+
+```
+Container: centered, py-16, flex-col align-center gap-4
+
+Illustration: abstract gradient shape (not line art)
+  80px x 80px, background var(--accent-gradient) with opacity 0.2
+  border-radius var(--radius-3xl)
+  + icon on top (24px, accent)
+
+Title: text-base weight-semibold text-heading
+Description: text-sm text-secondary, max-width 280px text-center
+CTA: Glass Button or Primary Button
+```
+
+---
+
+## 21. Skeleton Loader
+
+Glass surface with shimmer animation.
+
+```
+Shape: matches the component it replaces (text lines, card, avatar)
+background: var(--glass-bg)
+border-radius: matches component radius
+overflow: hidden
+position: relative
+
+Shimmer (::after):
+  content: ''
+  position: absolute, inset: 0
+  background: linear-gradient(90deg,
+    transparent 0%,
+    rgba(255,255,255,0.10) 50%,
+    transparent 100%)
+  animation: shimmer 1.5s infinite
+  transform: translateX(-100%)
+
+@keyframes shimmer {
+  to { transform: translateX(100%); }
+}
+
+Reduced motion: no shimmer animation — use static glass-bg only
+```
+
+---
+
+## 22. Chip / Tag
+
+```
+height: var(--control-xs)   /* 28px */
+padding: 0 var(--space-3)
+background: var(--glass-bg)
+backdrop-filter: var(--glass-blur-sm)
+border: 1px solid var(--glass-border)
+border-radius: var(--radius-full)
+font-size: var(--text-sm)
+color: var(--text-primary)
+display: inline-flex, align-center, gap-2
+
+Close icon: 14px, text-muted, hover text-primary, cursor pointer
+Hover: background var(--glass-bg-hover)
+Selected: background var(--accent-dim), border-color rgba(accent 0.30), color var(--accent)
+```