@jaimevalasek/aioson 1.5.1 → 1.6.0

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

@@ -0,0 +1,307 @@
+# Websites — Glassmorphism UI
+
+Landing pages and marketing sites. The gradient substrate rules remain: no glass without gradient.
+
+---
+
+## Navigation (website)
+
+Glass sticky navigation bar. The signature behavior is becoming more opaque as the user scrolls.
+
+```
+Structure:
+  position: sticky / fixed
+  top: 0
+  width: 100%
+  height: var(--nav-height-web)   /* 68px */
+  background: var(--glass-bg)
+  backdrop-filter: var(--glass-blur-lg)
+  border-bottom: 1px solid var(--glass-border)
+  z-index: 100
+
+  Layout: max-width container (1280px), centered, flex align-center
+    Left: logo (40px height) + product name (text-base weight-semibold)
+    Center: nav links (text-sm weight-medium text-secondary, hover text-heading)
+    Right: CTA button (primary gradient, height control-lg)
+
+Scroll behavior (JS):
+  At scroll > 20px: background → var(--glass-bg-hover) via transition-glass
+  At scroll > 80px: background → var(--glass-bg-active)
+```
+
+Mobile navigation:
+```
+Hamburger trigger: glass icon button (right of logo)
+Menu: full-viewport overlay
+  background: var(--glass-bg-active)
+  backdrop-filter: var(--glass-blur-xl)
+  position: fixed, inset: 0
+  flex-col, align-center, justify-center, gap-8
+  Nav links: text-2xl weight-semibold
+  CTA: primary button
+  Close: top-right ghost icon button
+Animation: fade + scale-materialize 300ms
+```
+
+---
+
+## Hero Patterns (choose one per landing)
+
+### A — Aurora Hero
+
+Best for: product launches, crypto, modern SaaS, fintech marketing.
+
+```
+Layout: full-viewport (min-height: 100vh)
+Background: aurora gradient (mesh of 3-4 desaturated colors)
+  gradient: radial-gradient or conic-gradient mesh — violet, blue, pink, teal tones
+  Optional: animated color shift (hue rotation 0→20deg, 8s ease-in-out infinite alternate)
+
+Decorative orbs (optional, enhance the aurora):
+  3-4 gradient blobs, position: absolute, z-index: 0
+  Size: 200-400px, border-radius: 50%
+  filter: blur(80px) — extreme blur to look like soft ambient light
+  opacity: 0.35-0.50
+  Colors: use accent, accent-secondary, and a pink/teal complementary
+
+Content (z-index: 1, centered):
+  Eyebrow label: glass chip (badge style) — "New: Feature X →"
+  Headline: text-5xl weight-bold text-heading, tracking -0.03em
+    Optional: gradient text on key words (accent-gradient)
+  Subtitle: text-lg text-secondary, max-width 520px, centered
+  CTA row: primary gradient button + ghost "Learn more" link
+  Social proof: "Trusted by X teams" + avatar group (5-6 overlapping avatars) + text-sm text-muted
+
+Scroll indicator: glass pill (text-xs "Scroll to explore" + chevron-down), centered, bottom-8
+  Animation: opacity 0→1 after 1s, chevron bounces subtly
+```
+
+### B — Product Float Hero
+
+Best for: apps with a strong product UI to showcase.
+
+```
+Layout: full-viewport, 2 columns
+Background: gradient (more contained than Aurora — 2 color stops)
+
+Left column (content, aligned center-left):
+  Eyebrow: glass chip badge
+  Headline: text-5xl weight-bold, left-aligned
+  Subtitle: text-lg text-secondary, max-width 440px
+  CTA row: primary button + ghost link, left-aligned
+  Feature list: 3 items with check icons (accent color), text-sm
+
+Right column (product visual):
+  Product screenshot/mockup, "floating" in a glass frame:
+    Glass Card (radius-2xl, blur-md, shadow-lg, border glass-border)
+    transform: rotate(2deg)   /* subtle tilt */
+    box-shadow: var(--shadow-lg) — large colored shadow below
+    Inner: ::before top reflection
+  Optional: second smaller screenshot overlapping, rotate(-3deg), smaller, glass-elevated bg
+```
+
+### C — Glass Showcase Hero
+
+Best for: feature-rich SaaS, platforms with multiple value props.
+
+```
+Layout: full-viewport, single column centered
+Background: gradient substrate (lavender aurora)
+
+Top section (centered):
+  Eyebrow chip
+  Headline: text-5xl, max-width 640px, centered
+  Subtitle: text-lg text-secondary, max-width 480px, centered
+  CTA row: 2 buttons centered
+
+Feature cards grid: 3 columns, glass cards with stagger entrance animation
+  Each card: icon area (accent-dim bg) + title + description
+  Cards have stagger: 0ms / 50ms / 100ms entrance delay
+
+Social proof strip (glass bar, full width):
+  Background: glass-bg, blur-md
+  "Trusted by leading companies" text-sm text-muted + logo grid (6-8 logos, grayscale)
+```
+
+### D — Immersive Media Hero
+
+Best for: media platforms, gaming, entertainment, storytelling products.
+
+```
+Layout: full-viewport
+Background: full-bleed image or video
+
+Overlay system:
+  Bottom gradient: linear-gradient(to top, rgba(bg-void, 0.9) 0%, transparent 60%)
+  Glass strip at bottom (NOT a centered card):
+    Glass bar, full width, blur-lg, padding 40px 80px
+    Contains: headline text-3xl weight-bold + subtitle text-base + CTA button + badge
+
+Floating glass elements (optional):
+  Small glass card (top-right): feature highlight or stat
+  Glass pill: "Now playing" or context label
+
+Scroll indicator: glass pill at very bottom-center, animated chevron
+```
+
+---
+
+## Section Patterns
+
+### 1. Feature Grid
+
+3-column glass feature cards, with staggered entrance as they scroll into view.
+
+```
+Container: section, py-32, max-width content-xl
+Header: eyebrow chip + headline text-4xl + subtitle text-lg, centered, mb-16
+
+Grid: 3 columns (1 on mobile, 2 on tablet, 3 on desktop), gap-6
+Cards: Feature Card component (art-direction.md)
+  Stagger entrance: 0 / 50ms / 100ms per card group
+  Animation: float-up + glass fade-in
+```
+
+### 2. Alternating Feature
+
+Image and text alternating sides, reinforcing product value.
+
+```
+Sections (2-4 alternating rows), py-24, gap-16
+Row: 2 columns (image + text), reverse on even index
+
+Image side: product screenshot in Glass Card (radius-2xl, shadow-lg, rotate ±1-2deg)
+Text side: aligned center
+  Eyebrow: glass chip badge
+  Title: text-3xl weight-bold
+  Description: text-base text-secondary
+  Feature list: 3 items with check icons
+  CTA: ghost link or glass button
+```
+
+### 3. Testimonial
+
+```
+Background: gradient section (different from hero — use subtle variant)
+Container: max-width content-md, centered
+
+Glass card (radius-2xl, blur-lg, shadow-md, featured style):
+  Quote icon: large, accent-dim color
+  Quote text: text-xl italic text-heading, line-height 1.7
+  Attribution: avatar (glass-bordered) + name weight-semibold + role text-secondary
+```
+
+### 4. Stats Strip
+
+Large numbers that establish credibility.
+
+```
+Glass bar (full width, not a card):
+  Background: glass-bg, backdrop-filter blur-md
+  Border top + bottom: glass-border
+  Padding: py-12
+  Layout: flex, justify-center, gap-16 (dividers: 1px glass-border between items)
+
+Each stat:
+  Number: text-4xl weight-bold gradient text (accent-gradient)
+  Label: text-sm text-secondary, mt-1
+```
+
+### 5. Pricing Glass
+
+```
+Section: py-32, gradient bg
+Header: headline + billing toggle (glass toggle switch: monthly/annual)
+
+Cards grid: 2-3 columns, max-width 900px
+  Standard card: Glass Card (radius-2xl)
+  Featured card ("Most Popular"):
+    Glass Card with featured modifier: border 1px rgba(accent 0.30), shadow-glow
+    Badge "Most Popular" (glass badge, accent) at top
+    Slightly larger/taller than other cards
+
+Each card:
+  Plan name: text-lg weight-semibold
+  Price: text-4xl weight-bold (gradient text for featured) + /month text-sm text-muted
+  Description: text-sm text-secondary
+  Feature list: checkmarks with glass icon area
+  CTA: primary gradient (featured) or glass button (others)
+```
+
+### 6. CTA Section
+
+```
+Container: glass card (radius-3xl, blur-lg, shadow-lg, max-width content-lg, mx-auto)
+  Background: subtle accent gradient tint (accent-dim, 0.08 opacity) + glass-bg
+
+Inside:
+  Eyebrow chip
+  Headline: text-4xl weight-bold, centered
+  Subtitle: text-lg text-secondary, centered, max-width 480px
+  Button row: primary gradient + ghost, centered, gap-4
+```
+
+### 7. Logo Cloud
+
+```
+Container: py-16
+Label: "Trusted by" text-sm text-muted, centered, mb-8
+
+Glass strip (full width):
+  Glass bar: blur-md, border top+bottom glass-border, py-8
+  Logos: inline-flex, gap-12, overflow hidden (marquee on mobile)
+  Logo treatment: grayscale, opacity 0.5, hover: color + opacity 1, transition 200ms
+```
+
+### 8. FAQ Accordion
+
+```
+Container: Glass Card (radius-2xl, blur-md, max-width content-md, mx-auto)
+
+Item:
+  Button (full width): text-base weight-medium text-heading + chevron icon right
+  Border bottom: 1px glass-border (except last item)
+  Hover: background glass-bg-hover
+  Active (open): chevron rotates 180deg
+
+Answer panel:
+  Padding: pb-5 px-0 (flush left)
+  text-sm text-secondary, line-height 1.7
+  Animation: height 0 → auto, opacity 0 → 1, 300ms ease-out
+```
+
+---
+
+## Footer
+
+```
+Background: glass-bg, backdrop-filter blur-lg
+Border top: 1px glass-border
+Padding: py-16
+
+Layout: 4 columns
+  Col 1: logo + tagline text-sm text-secondary + social icons (glass icon buttons)
+  Col 2-4: link groups
+    Group label: text-xs uppercase tracking-wider text-muted, mb-4
+    Links: text-sm text-secondary, hover text-heading, transition-fast
+
+Bottom bar:
+  Border top: 1px glass-border
+  mt-12, pt-6
+  flex justify-between
+  Copyright: text-sm text-muted
+  Legal links: text-sm text-secondary, gap-6
+```
+
+---
+
+## Anti-Patterns for Websites
+
+1. **Neon colors**: glass marketing is luminous, not neon. Keep saturation < 70%.
+2. **Glass over solid white**: if the background is pure white, glass has nothing to reveal. Always use a gradient.
+3. **Blur without fallback**: always include `@supports (backdrop-filter: blur(1px))` with a fallback solid background.
+4. **Glass on everything**: text, headings, dividers, and inline elements are solid. Glass is for containers (cards, navs, strips, modals).
+5. **Dark glass without contrast check**: dark glass can become illegible. Always verify WCAG AA on dark glass cards.
+6. **Rainbow gradient**: maximum 3-4 colors in any gradient, all from the same family (cool tones: violet, blue, teal, pink). Never mix warm + cool families.
+7. **3+ levels of nested glass cards**: max 2 levels per visible area. More than that creates visual soup and performance issues.
+8. **Animated aurora that distracts from content**: if using animated background, keep the animation very slow (8-12s cycle) and very subtle (opacity or hue shift only).

package/template/.aioson/skills/design/neo-brutalist-ui/SKILL.md

@@ -0,0 +1,213 @@
+---
+name: neo-brutalist-ui
+description: Neo-Brutalist UI is a design system for bold, personality-driven interfaces that embrace raw aesthetics, thick borders, hard shadows, and deliberate visual tension. Use it when `design_skill: neo-brutalist-ui` is set in project.context.md OR when the user explicitly asks for "brutalist", "neo-brutalist", "chunky UI", "indie", "bold borders", "hard shadows", "raw aesthetic", "devtools", "hacker", "playful bold", "anti-corporate", "punk UI", or similar. Ideal for indie products, devtools, creative tools, personal sites, side projects, hackathon projects, educational platforms, and any product where personality and memorability matter more than neutrality. Supports apps, dashboards, and websites — light by default with an energetic dark variant. Do NOT use this skill unless explicitly selected.
+---
+
+# Neo-Brutalist UI
+
+Neo-Brutalist UI sits at the intersection of **structural honesty** and **chromatic energy** — a design system for products that refuse to look like every other SaaS app. Thick borders, hard shadows, monospace type, and saturated colors are not decoration: they are the structure.
+
+Inspiration: Gumroad (old redesign), Poolsuite.net, Notion blog sticker aesthetics, bfrss.be, terminal/CLI interfaces.
+
+**This is one visual system.** Never combine it with another design skill.
+
+## Package structure
+
+```text
+.aioson/skills/design/neo-brutalist-ui/
+  SKILL.md                      ← you are here (load this first)
+  references/
+    art-direction.md            ← 5 expression modes, signature moves, anti-generic tests
+    design-tokens.md            ← CSS variables light + dark, thick borders, hard shadows, patterns
+    components.md               ← 23 components: brutalist cards, push buttons, full-grid tables, sticker badges, etc.
+    patterns.md                 ← App shell, 6 page patterns, responsive rules
+    dashboards.md               ← 5 dashboard presets + chart palette + flat-fill rules
+    websites.md                 ← 4 hero patterns, 8 section patterns, anti-patterns
+    motion.md                   ← Push mechanic, mechanical timings, minimal scroll animations
+```
+
+## Activation rules
+
+- Apply this package **only** when `project.context.md` contains `design_skill: "neo-brutalist-ui"` or the user explicitly chooses it.
+- If another design skill is selected, do **not** load this package.
+- Never auto-select this skill — always require explicit confirmation.
+- If no skill is set yet, the active agent must ask or confirm before applying.
+
+## Responsibility boundary
+
+This skill defines:
+- Visual direction and aesthetic DNA
+- Design tokens (colors, typography, spacing, radius, shadows)
+- Component vocabulary and anatomy
+- Page composition patterns
+- Theme switching behavior (light default / dark optional)
+
+This skill does **not** decide:
+- Stack (React, Vue, Blade, HTML, etc.)
+- Output format (single file, multi-file, CSS modules, Tailwind, etc.)
+- Icon library choice
+- Whether a theme toggle exists in the product (the agent decides)
+
+## Loading guide
+
+Always load only what the current task needs:
+
+| Task | Load |
+|---|---|
+| Any UI work | `references/design-tokens.md` |
+| Reusable components | `references/design-tokens.md` + `references/components.md` |
+| Dashboard or admin panel | `references/art-direction.md` + `references/design-tokens.md` + `references/components.md` + `references/patterns.md` + `references/dashboards.md` |
+| Detail / settings page | `references/art-direction.md` + `references/design-tokens.md` + `references/components.md` + `references/patterns.md` |
+| Landing page or website | `references/art-direction.md` + `references/design-tokens.md` + `references/components.md` + `references/websites.md` |
+| Motion / animation | add `references/motion.md` when push mechanics and interaction detail matter |
+| Full UI build | all seven reference files |
+
+## Visual signature — three pillars
+
+1. **Structural honesty** — Borders grossas e visíveis. Sombras duras (sem blur — offset sólido). Elementos parecem "construídos", não desenhados. Cada componente mostra sua estrutura: border, fill, shadow. Sem gradientes, sem blur, sem transparência. O que você vê é o que existe.
+2. **Chromatic energy** — Cores primárias saturadas como accent. Fundos off-white ou preto puro. Contraste maximizado. Nada pastéis (isso é glassmorphism), nada desaturado (isso é clean-saas). As cores são vivas, diretas, confiantes. Como posters de protesto ou capas de zines.
+3. **Typographic personality** — Mono ou sans-serif bold como baseline. Headings podem ser ultra-bold ou mono uppercase. A tipografia tem atitude — não é neutra, não é elegante, é direta. Tamanhos grandes com tracking tight para headings, mono para metadata e labels.
+
+## Theme system
+
+```html
+<div data-theme="light">   <!-- or data-theme="dark" -->
+```
+
+- **Light (default)**: fundo off-white (#FFFDF5), borders pretas, sombras pretas offset, cores saturadas
+- **Dark**: fundo near-black (#1A1A1A), borders claras, sombras coloridas offset, cores saturadas terrestres (não neon)
+- Toggle disponível
+
+If the user does not specify: default to **light with a theme toggle** in the top bar.
+
+## Visual DNA
+
+### Colors — light theme (default)
+- Background void: `#F5F0E8` (warm off-white, newspaper feel)
+- Background base: `#FFFDF5` (cream white — main background)
+- Surface: `#FFFFFF` (pure white cards)
+- Elevated: `#F5F0E8` (off-white hover/nested)
+- Primary accent: `#FACC15` (yellow-400 — THE brutalist accent)
+- Text heading: `#1A1A1A` (near-black)
+- Text primary: `#2A2A2A`
+- Text secondary: `#666666`
+- Text muted: `#999999`
+
+### Colors — dark theme
+- Background void: `#111111`
+- Background base: `#1A1A1A`
+- Surface: `#242424`
+- Elevated: `#2E2E2E`
+- Primary accent: `#FACC15` (yellow stays strong)
+- Text heading: `#FFFFFF`
+- Text primary: `#E0E0E0`
+
+### Typography
+- Display/headings: `Space Grotesk`, system-ui, sans-serif — geometric with personality, not neutral
+- Body: `Inter`, system-ui, sans-serif
+- Mono: `JetBrains Mono`, ui-monospace — **first-class citizen** in this skill. Used for labels, metadata, badges, status, code, and any technical content.
+- Headings: weight 700–800, tracking tight
+- Body: weight 400, tracking normal
+- Mono metadata: uppercase, letter-spacing 0.05em
+
+### Layout structure (app)
+```
+┌──────────────────────────────────────────────────────────┐
+│  SIDEBAR (240px)       │  TOP BAR (56px)                  │
+│  border-right: 3px     │  border-bottom: 3px              │
+│  Nav items: mono font  ├──────────────────────────────────┤
+│  Active: bg accent     │  CONTENT AREA                    │
+│          text black    │  bg-base (cream)                 │
+│                        │  (brutalist cards / tables)      │
+└────────────────────────┴──────────────────────────────────┘
+```
+
+### Signature details
+- **The push mechanic**: buttons and cards shrink shadow + translate on `:active` — feels like a physical press
+- **Hard shadows**: `4px 4px 0 #1A1A1A` — zero blur. This is the single strongest visual differentiator
+- **Thick borders**: 2–3px on everything interactive. No borderless components
+- **Square + pill extremes**: `border-radius: 0` (cards, inputs, buttons) OR `border-radius: 9999px` (badges, tags). Nothing in between
+- **Mono for all data**: numbers, dates, status text, labels — all `font-mono`
+- **Chunky controls**: buttons 44–52px height (vs 36px in clean-saas) — brutalist is chunky, not elegant
+- **Full-grid tables**: every cell has a visible border. No minimal table borders
+
+## Application rules
+
+- Treat `references/design-tokens.md` as the source of truth for ALL tokens.
+- Treat `references/art-direction.md` as the source of truth for expression modes and anti-generic decisions.
+- Never combine this package with `interface-design`, `warm-craft-ui`, `clean-saas-ui`, `bold-editorial-ui`, or any other design skill.
+- Reuse the project's component library if one exists — map Neo-Brutalist tokens onto it instead of rebuilding primitives.
+- Adapt code examples to the active stack. Reference snippets are design specifications, not copy-paste code.
+- Accessibility, responsiveness, and production semantics are the agent's responsibility (not this skill).
+
+## Intent before visuals
+
+Before choosing layout, answer all three:
+
+1. Who is the human using this page right now?
+2. What is the main action or decision they must complete?
+3. How should this interface feel in concrete words, not generic labels?
+
+Bad answers:
+- "for indie developers"
+- "show a dashboard"
+- "bold and brutalist"
+
+Good answers:
+- "indie hacker checking if their side project is growing — wants raw numbers fast, no corporate fluff"
+- "developer reviewing build failures — needs to see status at a glance without context switching"
+- "unapologetic, fast, honest — looks hand-built by someone who knows exactly what they're doing"
+
+## Workflow discipline
+
+1. Choose one of the 5 expression modes from `references/art-direction.md` before writing any HTML or CSS.
+2. Name one signature move and repeat it intentionally across the page.
+3. Run the **Brutality Test**: remove all thick borders and hard shadows. If the interface now looks like a generic clean-saas output, the personality was decorative, not structural. Rebuild.
+4. Build from tokens first, then components, then page composition.
+5. Validate state parity before finishing: default, hover, active, focus, disabled.
+6. Validate contrast: body text WCAG AA, mono on accent must remain legible.
+
+## Non-negotiable quality gates
+
+- Never use `box-shadow` with blur-radius > 0. Hard offset only.
+- Never use `border-radius` between 6px and 9998px. Zero or pill only.
+- Never use `border: 1px solid #ccc` on interactive components. Minimum 2px solid #1A1A1A (light) or #E0E0E0 (dark).
+- Never use gradient fills. All colors are flat and solid.
+- Never use `backdrop-filter: blur()`. Brutalist UI has zero blur.
+- Mono font must be applied to ALL numbers, dates, IDs, statuses, and technical labels — not just code blocks.
+- Every interactive element with a hard shadow must implement the push mechanic on `:active`.
+- Tables must never stack into card lists on mobile — they scroll horizontally.
+- Hardcoded colors, arbitrary shadows, and one-off border widths are design-system failures.
+- Sameness is failure. If the result could pass for a default Tailwind UI starter with a yellow accent, iterate.
+- Every page must pass the **Brutality Test**: structure must be brutalist even with all color removed.
+- Every page must pass the **Corporate Test**: no enterprise product would ship this (good — that's the goal).
+
+## Positioning vs other skills
+
+| Aspect | neo-brutalist-ui | warm-craft-ui | clean-saas-ui | bold-editorial-ui |
+|--------|-----------------|---------------|---------------|-------------------|
+| Accent | Yellow (#FACC15) | Terracotta | Blue (#2563EB) | Red-orange |
+| Borders | 2–3px black, visible on everything | 1px subtle | 1px gray | 1px minimal |
+| Shadows | Hard offset (zero blur) | Warm blur | Very subtle blur | Dramatic blur |
+| Radius | 0 or 9999px (nothing between) | Large (16px+) | Medium (8px) | Minimal |
+| Typography | Mono + bold sans | Serif headings | All sans | Display sans |
+| Polish | Anti-polish (intentional) | Warm polish | Professional | Cinematic |
+| Best for | Indie, devtools, hackathon, creative | B2C, productivity | B2B SaaS, admin | Marketing, portfolio |
+
+## Delivery modes
+
+### Greenfield
+1. Choose expression mode (indie / devtool / creative / zine / dashboard punk) from `art-direction.md`
+2. Answer the three Intent questions
+3. Load relevant references
+4. Apply token scope from `design-tokens.md`
+5. Compose layout from `patterns.md` or `websites.md`
+6. Build components from `components.md`
+7. Run Brutality Test before presenting
+
+### Brownfield
+1. Audit existing UI before rewriting
+2. Map Neo-Brutalist tokens onto the existing component library
+3. Apply thick borders and hard shadows systematically — don't add them ad-hoc
+4. Consolidate duplicate component variants before introducing new ones
+5. Prefer targeted upgrades over full rewrites unless the user asks for a redesign