@jaimevalasek/aioson 1.4.0 → 1.6.0

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

@@ -0,0 +1,387 @@
+# Websites & Landing Pages — Aurora Command UI
+
+Landing pages, marketing sites, and product websites using the aurora-command-ui system.
+
+Requires `design-tokens.md` + `components.md`.
+
+---
+
+## General rules
+
+1. **Aurora gradient spans the full page** — `background-attachment: fixed`, no section resets the background.
+2. **Glass nav becomes more opaque on scroll** — starts at `glass-blur-md`, opacity increases as user scrolls.
+3. **Aurora orbs as decorative atmosphere** — large blurred gradient circles anchored to sections. They must be blurred (60px+), never sharp.
+4. **Mono labels on section eyebrows** — every section starts with a mono uppercase label before the section heading.
+5. **One gradient CTA per page** — the primary call-to-action button uses the full `--accent-gradient`. Do not overuse it.
+6. **Section contrast through glass density** — vary glass opacity between sections to create visual rhythm. Not every section at the same blur level.
+
+---
+
+## Page shell (landing)
+
+```css
+.landing-shell {
+  min-height: 100vh;
+  background: var(--bg-gradient);
+  background-attachment: fixed;
+  font-family: var(--font-body);
+  color: var(--text-primary);
+  overflow-x: hidden;
+}
+
+/* Glass navigation */
+.landing-nav {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  z-index: var(--z-sticky);
+  height: 64px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0 var(--space-8);
+  background: rgba(8, 12, 22, 0.40);
+  backdrop-filter: var(--glass-blur-md);
+  border-bottom: 1px solid var(--glass-border);
+  transition: background 300ms ease, backdrop-filter 300ms ease;
+}
+
+/* Nav becomes more opaque on scroll — add via JS */
+.landing-nav.scrolled {
+  background: rgba(8, 12, 22, 0.80);
+  backdrop-filter: var(--glass-blur-lg);
+}
+```
+
+---
+
+## 1. Aurora Hero — Split Layout
+
+For product launches, platform marketing. Avoids the generic centered hero.
+
+```
+┌─────────────────────────────────────────────────────────────────┐
+│  GLASS NAV                                                      │
+├─────────────────────────────────────────────────────────────────┤
+│                                                                 │
+│  LEFT (text side, 55%):          RIGHT (visual side, 45%):     │
+│  [MONO: PLATFORM · V2.0 LAUNCH]  [Glass product card / UI      │
+│  [Heading text-5xl tight]         screenshot in glass frame,   │
+│  [Subheading text-xl muted]       floating over aurora orb]    │
+│  [CTA Row: [Gradient Button] [Ghost Button]]                   │
+│  [Social proof: 4,200+ teams]    [Teal glow orb behind frame]  │
+│                                                                 │
+└─────────────────────────────────────────────────────────────────┘
+```
+
+```css
+.hero-section {
+  min-height: 100vh;
+  display: grid;
+  grid-template-columns: 55% 45%;
+  align-items: center;
+  padding: 0 var(--space-16);
+  padding-top: 80px; /* account for fixed nav */
+  position: relative;
+}
+
+.hero-text { padding-right: var(--space-12); }
+
+.hero-heading {
+  font-size: var(--text-5xl);
+  font-weight: var(--weight-black);
+  line-height: var(--leading-tight);
+  letter-spacing: var(--tracking-tight);
+  color: var(--text-heading);
+  margin-bottom: var(--space-5);
+}
+
+.hero-heading-accent {
+  background: var(--accent-gradient);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
+}
+
+.hero-subheading {
+  font-size: var(--text-xl);
+  color: var(--text-secondary);
+  line-height: var(--leading-relaxed);
+  margin-bottom: var(--space-8);
+}
+
+/* Glass product frame */
+.product-frame {
+  background: var(--glass-surface);
+  backdrop-filter: var(--glass-blur-md);
+  border: 1px solid var(--glass-border);
+  border-radius: var(--radius-2xl);
+  overflow: hidden;
+  position: relative;
+  box-shadow: var(--shadow-glow);
+}
+
+.product-frame::before {
+  content: '';
+  position: absolute;
+  inset: 0;
+  background: var(--glass-highlight);
+  pointer-events: none;
+  z-index: 1;
+  border-radius: inherit;
+}
+
+/* Aurora orb behind product frame */
+.hero-orb {
+  position: absolute;
+  width: 400px;
+  height: 400px;
+  border-radius: 50%;
+  background: radial-gradient(circle, rgba(0,200,232,0.20), rgba(124,58,237,0.15), transparent 70%);
+  filter: blur(60px);
+  right: 5%;
+  top: 30%;
+  pointer-events: none;
+}
+```
+
+---
+
+## 2. Aurora Hero — Centered (atmospheric)
+
+For manifesto pages, product teasers, atmospheric launches.
+
+```
+┌─────────────────────────────────────────────────────────────────┐
+│  [Teal aurora orb — top center, large]                         │
+│                                                                 │
+│                   [MONO: BUILT FOR SCALE]                      │
+│              [Heading — text-5xl, 2–3 lines, center]           │
+│           [Subtext — text-xl, max-width 600px, center]         │
+│                 [CTA Row — centered]                           │
+│                                                                 │
+│      [Glass feature strip — 3 items horizontal, below fold]    │
+└─────────────────────────────────────────────────────────────────┘
+```
+
+Use this variant only when the product visual is not available or the focus is the manifesto text. The aurora orb creates the depth.
+
+---
+
+## 3. Feature Section — Glass Cards Grid
+
+```
+MONO EYEBROW: PLATFORM CAPABILITIES
+Heading: The control center you always wanted. (text-4xl, left-aligned)
+Subtext: One line max. (text-lg, muted)
+
+GLASS CARDS GRID (3 col):
+┌─────────────────────────────────────────────────────────────────┐
+│ ┌────────────────┐  ┌────────────────┐  ┌────────────────┐     │
+│ │ [Icon — teal]  │  │ [Icon — teal]  │  │ [Icon — violet]│     │
+│ │ Feature title  │  │ Feature title  │  │ Feature title  │     │
+│ │ Short desc     │  │ Short desc     │  │ Short desc     │     │
+│ └────────────────┘  └────────────────┘  └────────────────┘     │
+│ ┌────────────────┐  ┌────────────────┐  ┌────────────────┐     │
+│ │ ...            │  │ ...            │  │ ...            │     │
+│ └────────────────┘  └────────────────┘  └────────────────┘     │
+└─────────────────────────────────────────────────────────────────┘
+```
+
+```css
+.features-section {
+  padding: var(--space-24) var(--space-16);
+  position: relative;
+}
+
+.features-grid {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: var(--space-4);
+  margin-top: var(--space-10);
+}
+
+.feature-card {
+  background: var(--glass-surface);
+  backdrop-filter: var(--glass-blur-sm);
+  border: 1px solid var(--glass-border);
+  border-radius: var(--radius-xl);
+  padding: var(--space-6);
+  position: relative;
+  transition: background var(--transition-glass), box-shadow var(--transition-base);
+}
+
+.feature-card:hover {
+  background: var(--glass-elevated);
+  box-shadow: var(--shadow-glow);
+}
+
+.feature-card::before {
+  content: '';
+  position: absolute;
+  inset: 0;
+  border-radius: inherit;
+  background: var(--glass-highlight);
+  pointer-events: none;
+}
+
+.feature-icon {
+  width: 40px; height: 40px;
+  background: var(--accent-primary-dim);
+  border-radius: var(--radius-md);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-bottom: var(--space-4);
+  color: var(--accent-primary);
+}
+```
+
+---
+
+## 4. Stats / Proof Rail
+
+A horizontal glass strip showing key social proof numbers.
+
+```
+┌─────────────────────────────────────────────────────────────────┐
+│   4,200+          99.9%          <500ms         SOC 2 Type II  │
+│   Teams using     Uptime SLA     Avg latency    Certified       │
+└─────────────────────────────────────────────────────────────────┘
+```
+
+```css
+.proof-rail {
+  background: var(--glass-surface);
+  backdrop-filter: var(--glass-blur-md);
+  border-top: 1px solid var(--glass-border);
+  border-bottom: 1px solid var(--glass-border);
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  padding: var(--space-8) var(--space-16);
+}
+
+.proof-item {
+  text-align: center;
+  padding: var(--space-4);
+  border-right: 1px solid var(--glass-border);
+}
+
+.proof-item:last-child { border-right: none; }
+
+.proof-number {
+  font-size: var(--text-3xl);
+  font-weight: var(--weight-bold);
+  background: var(--accent-gradient);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
+  display: block;
+}
+
+.proof-label {
+  font-family: var(--font-mono);
+  font-size: 0.625rem;
+  letter-spacing: 0.10em;
+  text-transform: uppercase;
+  color: var(--text-muted);
+  margin-top: var(--space-1);
+}
+```
+
+---
+
+## 5. Pricing Section
+
+Three glass cards. Center card is elevated/featured with gradient border.
+
+```
+MONO: PRICING PLANS
+Heading: Start free. Scale confidently.
+
+┌──────────────┐  ┌──────────────────┐  ┌──────────────┐
+│  STARTER     │  │  PRO (featured)  │  │  ENTERPRISE  │
+│  $0/mo       │  │  $49/mo (grad)   │  │  Custom      │
+│  Features... │  │  Features...     │  │  Features... │
+│  [Ghost btn] │  │  [Gradient btn]  │  │  [Ghost btn] │
+└──────────────┘  └──────────────────┘  └──────────────┘
+```
+
+```css
+.pricing-grid {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: var(--space-4);
+  align-items: start;
+}
+
+.pricing-card-featured {
+  background: var(--glass-elevated);
+  backdrop-filter: var(--glass-blur-lg);
+  border-radius: var(--radius-2xl);
+  padding: var(--space-8);
+  position: relative;
+  box-shadow: var(--shadow-glow-strong);
+  /* Gradient border */
+  background-clip: padding-box;
+  border: 1px solid transparent;
+}
+
+.pricing-card-featured::after {
+  content: '';
+  position: absolute;
+  inset: 0;
+  border-radius: inherit;
+  padding: 1px;
+  background: var(--accent-gradient);
+  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
+  -webkit-mask-composite: xor;
+  mask-composite: exclude;
+  pointer-events: none;
+}
+```
+
+---
+
+## 6. Testimonials Section
+
+```
+MONO: TRUSTED BY TEAMS WORLDWIDE
+Heading: The command center that teams rely on.
+
+[Glass testimonial cards — masonry or 3-col grid]
+Each card:
+  Quote text (italic, text-base)
+  Avatar + Name + Role/Company
+  Teal-electric accent line at top of card
+```
+
+---
+
+## 7. Footer
+
+Minimal. Glass strip at the bottom of the aurora background.
+
+```css
+.footer {
+  background: var(--glass-shell);
+  backdrop-filter: var(--glass-blur-md);
+  border-top: 1px solid var(--glass-border);
+  padding: var(--space-8) var(--space-16);
+  display: grid;
+  grid-template-columns: 1fr auto;
+  align-items: center;
+}
+```
+
+---
+
+## Anti-patterns
+
+- **Do NOT** reset the background in each section — the aurora gradient must flow continuously top to bottom.
+- **Do NOT** use a centered hero with generic "Modern Platform" headline as the only opening move. Use split layout, offset frame, or atmospheric centered with real copy.
+- **Do NOT** repeat the same glass card layout in every section. Vary: glass strip, glass split, proof rail, centered manifesto.
+- **Do NOT** add neon glows or bright aurora orbs with saturation >70%. The orbs are atmospheric, not decorative neon.
+- **Do NOT** use glass pricing cards without the featured-card distinction. The featured card must feel more elevated than the others.
+- **Do NOT** put a plain solid white footer on an aurora background page.

package/template/.aioson/skills/design/bold-editorial-ui/SKILL.md

@@ -0,0 +1,205 @@
+---
+name: bold-editorial-ui
+description: Bold Editorial UI is a design system for high-impact, typographically-driven interfaces inspired by premium editorial design, fashion magazines, and creative agency portfolios. Use it when `design_skill: bold-editorial-ui` is set in project.context.md OR when the user explicitly asks for "bold", "editorial", "dramatic typography", "magazine style", "Stripe-like", "Vercel-like", "premium marketing", "cinematic", "agency portfolio", or similar. Ideal for landing pages, product marketing, creative portfolios, SaaS marketing sites, and any product where visual impact and storytelling matter more than density. Supports websites, landing pages, and apps — dark by default with a light variant. Do NOT use this skill unless explicitly selected.
+---
+
+# Bold Editorial UI
+
+A design system where **typography is the architecture and contrast is the material**. Bold Editorial sits at the intersection of premium magazine design and modern digital craft — interfaces that feel authored, cinematic, and unforgettable.
+
+**This is one visual system.** Never combine it with another design skill.
+
+## Package structure
+
+```text
+.aioson/skills/design/bold-editorial-ui/
+  SKILL.md                      <- you are here (load this first)
+  references/
+    art-direction.md            <- intent, expression modes, signature moves, anti-generic tests
+    design-tokens.md            <- CSS variables dark + light, typography, token guardrails
+    components.md               <- All reusable components (display headings, buttons, cards, inputs, etc.)
+    patterns.md                 <- Page layouts: app shell, marketing, documentation, dashboard, auth
+    dashboards.md               <- Dashboard presets: marketing, developer, analytics, content, executive
+    websites.md                 <- Landing page, product page layouts + hero patterns + anti-patterns
+    motion.md                   <- Animations: cinematic entrances, scroll-driven, hover, page transitions
+```
+
+## Activation rules
+
+- Apply this package **only** when `project.context.md` contains `design_skill: "bold-editorial-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 (dark/light)
+
+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 animation materially improves the result |
+| Full UI build | all seven reference files |
+
+## Visual signature — three pillars
+
+1. **Typographic drama** — Typography oversized as the primary design element. Display fonts with personality. Lettering as architecture. Headlines that occupy 40–60% of the viewport. The type IS the visual — not decoration supporting a layout, but the layout itself. Sizes go up to 128px. Tracking tight. Weight bold to black.
+2. **Cinematic contrast** — Extreme contrast between light and dark. Sections that alternate between deep near-black and pure white. Color transitions like film cuts. Nothing in the middle — every surface either commits to dark or light. The drama of film stills, not the comfort of day-to-day.
+3. **Editorial rhythm** — A grid that breaks intentionally. Asymmetry as principle. Sections with different cadences — dense → breathing → impact → pause. Each scroll should feel like turning the page of a premium magazine. Hierarchy through scale, not color.
+
+## Theme system
+
+```html
+<div data-theme="dark">   <!-- or data-theme="light" -->
+```
+
+- **Dark (default)**: Landing pages, portfolios, product marketing, premium experiences, SaaS marketing sites
+- **Light**: Institutional, documentation, content-heavy editorial, case study pages
+- **Both with toggle**: When the product spans both contexts or user preference is required
+
+If the user does not specify: default to **dark with a light variant** available.
+
+## Visual DNA
+
+### Colors — dark theme (default)
+- Background void: `#050505` (near-black, not navy)
+- Background base: `#0A0A0A` (main background)
+- Surface: `#141414` (cards, panels)
+- Elevated: `#1E1E1E` (hover, nested, modals)
+- Primary accent: `#FF4D2A` (energetic red-orange) — CTAs, highlights, key moments
+- Text heading: `#FFFFFF` (pure white — maximum contrast)
+- Text primary: `#B8B8B8`
+- Text secondary: `#787878`
+- Text muted: `#484848`
+
+### Colors — light theme
+- Background void: `#F5F5F0` (off-white, slightly warm)
+- Background base: `#FAFAF7`
+- Surface: `#FFFFFF`
+- Elevated: `#EFEFEA`
+- Primary accent: `#E03A18` (deeper red-orange for light backgrounds)
+- Text heading: `#0A0A0A` (near-black)
+- Text primary: `#3A3A3A`
+- Text secondary: `#7A7A7A`
+- Text muted: `#AAAAAA`
+
+### Typography
+- Display headings: `Clash Display`, `Impact` fallback — weight 700, tracking `-0.04em`, line-height `0.9` at large sizes
+- Body: `Inter`, `weight-regular (400)`, `line-height: 1.65`
+- Metadata/captions: `JetBrains Mono`, `weight-500`, `uppercase`, `tracking-widest`, `font-size: 0.75rem`
+- Stats/numbers: `Clash Display`, `weight-bold (700)`, sizes `text-3xl` and up
+
+### Layout structure (marketing sites)
+```
++-----------------------------------------------------------+
+|  TOP BAR: [Logo]   [Nav — minimal]            [CTA]       |
++-----------------------------------------------------------+
+|                                                           |
+|  HERO — full-viewport or near-full                        |
+|  Headline dominates: 60–80% of hero height               |
+|  One CTA, one subtitle max                               |
+|                                                           |
++-----------------------------------------------------------+
+|  SECTION — alternating rhythm                             |
+|  Dense feature → white breathing → impact counter         |
+|  → pause with testimonial → dark CTA                      |
+|                                                           |
++-----------------------------------------------------------+
+|  FOOTER — bg-void, minimal                                |
++-----------------------------------------------------------+
+```
+
+### Signature details
+- **Minimal radius**: cards `radius-lg` (8px), buttons `radius-md` (6px) — sharp and adult, not bubbly
+- **Dramatic shadows**: `0 8px 24px rgba(0,0,0,0.35)` — deep, cinematic drops
+- **Accent glow**: `0 0 60px rgba(255, 77, 42, 0.15)` — used only on featured/hero elements
+- **Mono captions**: Every category, date, overline, and metadata uses JetBrains Mono + uppercase + wide tracking
+- **Display-only font for impact numbers**: stat counters, big headlines, manifesto text
+- **White sections as dramatic counterpoint**: light sections inside dark pages feel like spotlight moments
+
+## 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, signature moves, and anti-generic decisions.
+- Resolve the page variant before composing: marketing/landing pages use narrative editorial pacing; apps use structured dark shell with focused hierarchy.
+- Never combine this package with `warm-craft-ui`, `clean-saas-ui`, `glassmorphism-ui`, `neo-brutalist-ui`, or any other design skill in the same task.
+- Reuse the project's component library if one exists — map Bold Editorial 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 arriving at this page right now?
+2. What is the single impression or action that must land?
+3. How should this interface feel — in concrete, visceral words, not generic labels?
+
+Bad answers:
+- "for users"
+- "show features"
+- "bold and modern"
+
+Good answers:
+- "developer evaluating a new infrastructure product at 11pm"
+- "creative director deciding whether to shortlist an agency"
+- "cinematic, authoritative, like a product launch trailer"
+
+## Workflow discipline
+
+1. Audit the current page or existing UI before changing visuals.
+2. Explore the product domain and choose one expression mode from `references/art-direction.md`.
+3. Name one signature move and repeat it intentionally across the page.
+4. Consolidate repeating patterns instead of inventing new card/button variants per screen.
+5. Build from tokens first, then components, then page composition.
+6. Validate state parity before finishing: default, hover, active, focus, disabled.
+7. Validate contrast: white text on dark surfaces must exceed WCAG AA. Light sections must re-verify independently.
+
+## Non-negotiable quality gates
+
+- Never use a generic dark theme — `#0A0A0A` is near-black, intentionally chosen, not "dark mode gray".
+- Never use blue, teal, or purple as the primary accent — this is red-orange or nothing.
+- Display font is non-negotiable — if Clash Display is unavailable, use Cabinet Grotesk or Syne, not Inter.
+- Typography must carry the hierarchy before color does — if the type scale is wrong, no color fix will help.
+- The grid must break intentionally at least once per page — a fully regular grid is anti-editorial.
+- Mono captions are the connective tissue — overlines, categories, and metadata must use `font-mono`.
+- Never add a warm tint, rounded corners above `radius-xl` (16px), or serif fonts — these belong to Warm Craft.
+- Accent glow (`shadow-glow`) is reserved for one element per viewport — the hero CTA or the featured card.
+- Every section alternation (dark → light → dark) must feel like a deliberate cut, not an accident.
+- Sameness is failure. If the result could be a generic dark SaaS landing page, iterate before presenting.
+- Every full page must have one typographic statement that could stand alone as a poster.
+
+## Delivery modes
+
+### Greenfield
+1. Choose page variant (marketing, app, dashboard, documentation)
+2. Load relevant references
+3. Apply token scope from `design-tokens.md`
+4. Compose layout from `patterns.md` or `websites.md`
+5. Build components from `components.md`
+
+### Brownfield
+1. Audit existing UI before rewriting
+2. Map Bold Editorial tokens onto the existing component library
+3. Fix token scope issues (font/color variables must be on the correct container)
+4. Consolidate duplicate variants before introducing new ones
+5. Prefer targeted upgrades over full rewrites unless the user asks for a redesign