@jaimevalasek/aioson 1.3.0 → 1.5.1

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

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

@@ -0,0 +1,338 @@
+# Art Direction — Bold Editorial UI
+
+Read this file for any page-level work where differentiation matters: landing pages, apps, dashboards, portfolios, and major marketing flows.
+
+This file exists to stop Bold Editorial from collapsing into the same dark card layout with big white type every time.
+
+The system stays coherent, but the expression must change with the product, the audience, and the dominant message.
+
+---
+
+## Core Rule
+
+**Same drama, different character.**
+
+Keep the Bold Editorial DNA:
+- extreme typographic scale as the primary design tool
+- cinematic dark/light contrast
+- editorial rhythm and intentional grid-breaking
+- mono captions as structural connective tissue
+
+But do **not** keep the exact same composition, hero treatment, or typographic moment from project to project.
+
+---
+
+## Mandatory Pre-Build Outputs
+
+Before designing a full page, produce all of these:
+
+1. **Human**
+   The real person arriving at this page right now — their mindset, context, what they just came from.
+
+2. **Main action**
+   The one impression, decision, or action that must land on this screen.
+
+3. **Felt quality**
+   Concrete visceral words: `cinematic`, `authoritative`, `electric`, `precise`, `confident`, `intense`, `premium`, `editorial`, `stark`, `magnetic`.
+   Never use empty labels like `bold and modern` or `premium feel`.
+
+4. **Domain vocabulary**
+   At least 5 concepts from the product's world.
+   Example for a developer tool: `pipeline`, `deploy`, `latency`, `incident`, `artifact`.
+
+5. **Material world**
+   At least 5 materials or textures belonging to that product world.
+   Example: brushed metal, matte black cardstock, cinema screen, exposed concrete, carbon fiber, architect's blueprint, overexposed film.
+
+6. **Defaults to avoid**
+   Name 3 obvious choices that would make this feel like a generic AI-generated dark landing page.
+
+7. **Signature move**
+   One memorable typographic or compositional move that appears in at least 5 places on the page.
+
+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 established.
+
+### 1. Manifesto
+
+Use for:
+- brand pages
+- about/mission pages
+- vision statements
+- advocacy products
+- philosophical software (tools that believe in something)
+
+Feel:
+- powerful
+- intentional
+- confident
+- philosophical — every word was chosen
+
+Composition:
+- typography at extreme scale dominates full sections
+- statements as compositional blocks — each section IS a statement
+- negative space used as punctuation between ideas
+- one color only; images minimal or absent
+- reader must scroll through the argument
+
+Visual cues:
+- display font at `text-5xl` to `text-6xl`
+- zero decorative elements — the typography is decoration
+- wide tracking on overlines (`tracking-widest`, mono, uppercase)
+- accent used only once per scroll viewport, as a highlight or underline
+
+Signature ideas:
+- full-section statement in `text-6xl` that spans 3–4 lines
+- scroll-triggered word reveal (each word appears sequentially)
+- single accent underline beneath the most important phrase per section
+- quote wall: alternating large and small quotes, dark and light backgrounds
+
+---
+
+### 2. Product Theater
+
+Use for:
+- SaaS marketing pages
+- developer tool launches
+- infrastructure products
+- API or platform announcements
+
+Feel:
+- premium
+- technical
+- precise
+- exciting — something important is happening
+
+Composition:
+- hero with oversized product screenshot or terminal output as the visual centerpiece
+- headline frames the product, not the other way around
+- feature sections use product shots as the primary visual — code blocks as decoration
+- dark background makes the product interface feel illuminated
+
+Visual cues:
+- dark near-black background with product UI "glowing" on top
+- subtle grid lines or dot-grid decorative elements
+- badge/chip accents in mono (`[v2.1.0]`, `[BETA]`, `[OPEN SOURCE]`)
+- metric counters that animate on scroll entry
+
+Signature ideas:
+- floating product frame with 1–2deg tilt and `shadow-glow`
+- code block used as a visual element (syntax-highlighted, framed in mono)
+- animated counter reveal for key metrics (e.g., "4,000ms → 120ms")
+- gradient radial centered on the product visual — subtle spotlight
+
+---
+
+### 3. Gallery Editorial
+
+Use for:
+- portfolios
+- creative agencies
+- fashion or lifestyle brands
+- architecture studios
+- photography platforms
+
+Feel:
+- curated
+- sophisticated
+- dramatic
+- confident silence — the work speaks
+
+Composition:
+- images occupy large portions; type acts as editorial annotation
+- grid breaks intentionally — asymmetric layouts, deliberate overlaps
+- alternating full-bleed and contained sections
+- hover reveals editorial metadata (year, category, client)
+
+Visual cues:
+- images in high-contrast, possibly treated to black-and-white with accent highlights
+- intentional typographic overlaps on images (caption over corner of image)
+- mono captions in small size — stark contrast against large imagery
+- accent color used only for link underlines or hover-reveal text
+
+Signature ideas:
+- image reveal on scroll entry (clip-path wipe from bottom to top, 800ms)
+- split-screen project showcase (image left, title + details right)
+- hover-tilt media cards with subtle perspective transform
+- project number counter in mono (`01 / 08`) as navigation
+
+---
+
+### 4. Data Story
+
+Use for:
+- annual reports
+- case study pages
+- research presentations
+- impact pages
+- before/after narrative
+
+Feel:
+- authoritative
+- intelligent
+- compelling
+- structured — the argument builds section by section
+
+Composition:
+- large statistical numbers as heroes for each section
+- charts integrated into the narrative (not after it)
+- horizontal scroll or sticky-section technique for timelines
+- prose and data interleaved — not separate blocks
+
+Visual cues:
+- display font for dramatic numbers (metric, counter, percentage)
+- mono font for all data labels, axis text, timestamps
+- accent color highlights single critical data point per chart
+- horizontal dividers as section transitions
+
+Signature ideas:
+- animated counter on scroll entry (0 → final value, 1200ms)
+- horizontal scroll data story with sticky headline
+- infographic section with subtle grid overlay
+- pull-out stat in `text-5xl` display font flanked by explanatory body
+
+---
+
+### 5. Cinematic Dark
+
+Use for:
+- gaming products
+- entertainment platforms
+- premium subscriptions
+- luxury products
+- streaming or media services
+
+Feel:
+- immersive
+- atmospheric
+- intense
+- cinematic — like entering a film
+
+Composition:
+- full-screen sections, video or image as background with overlay
+- minimal UI, maximal atmosphere
+- type floats over imagery with gradient masks
+- each section a scene, not a content block
+
+Visual cues:
+- gradient overlays using near-black (not pure black) — preserves depth in imagery
+- grain/noise texture at 3% opacity over everything
+- accent as flash or highlight — single word, CTA, one key object
+- typography ultra-bold, often all-caps for section titles
+- scroll reveals each section as a curtain rising
+
+Signature ideas:
+- video hero with text overlay and gradient mask at bottom (text legible, video atmospheric)
+- grain texture background applied globally at very low opacity
+- cinematic color grade feel — desaturated mid-tones, preserved highlights
+- section transitions as hard cuts (instant background swap, no fade)
+
+---
+
+## Signature Move Library
+
+Pick one and commit. Do not apply three weak gestures when one strong one would do.
+
+### Apps
+- stat counters in `text-4xl` display font — the number IS the content, not decoration
+- mono badge strips along the top of sections (`[LIVE]`, `[v1.0]`, `[2024]`)
+- dark command/search bar as primary interaction — keyboard-first, editorial
+
+### Dashboards
+- key metric in display font at `text-5xl` — one number that defines the page
+- horizontal metric strip with mono labels and no card borders — raw data aesthetic
+- accent used only on the single most important chart line or bar
+
+### Landing Pages
+- opening section with headline at `text-5xl` or larger, no accompanying image — the type is enough
+- alternating dark-and-light sections as cinematic scene cuts
+- metric counter strip that animates on scroll — numbers are the proof
+
+### Websites
+- quote or statement section in display italic at `text-2xl`+, no decoration needed
+- case study cards with image overlay + hover-reveal full title
+- footer as minimalist manifesto — a single closing statement in large type, then links
+
+Rule:
+- your signature move must appear in at least 5 concrete places, or it is not a real signature.
+
+---
+
+## Anti-Generic Tests
+
+Run these before presenting:
+
+### Swap Test
+If you replaced:
+- the display font with Inter or Roboto
+- the red-orange accent with generic blue
+- the near-black backgrounds with dark gray `#1F2937`
+
+and the page still felt mostly the same — the typography is not working hard enough. The font, the scale, and the contrast ARE the differentiator.
+
+### Squint Test
+Blur your eyes:
+- Is there one unmistakable typographic anchor per section?
+- Does the dark/light rhythm feel like a deliberate sequence?
+- Does any section feel generic without squinting?
+
+The editorial rhythm must be legible at blurred vision.
+
+### Signature Test
+Point to 5 exact places where the chosen signature appears.
+If you cannot name them, you do not have a signature.
+
+### Magazine Test (unique to Bold Editorial)
+If you printed this page, would it look compelling in a premium print magazine?
+- Is the type large and intentional enough?
+- Does the layout have editorial pacing — not everything the same size?
+- Would a creative director approve it?
+
+If no: the typographic scale is not aggressive enough. Push harder.
+
+### Drift Test
+Does any element feel like it belongs to Warm Craft (rounded, warm, soft) or Clean SaaS (neutral, gray, business)?
+- Check: rounded corners above `radius-xl` → reduce
+- Check: serif headings → replace with display font
+- Check: warm beige backgrounds → make them near-black or pure white
+- Check: soft blue accents → replace with red-orange
+
+---
+
+## Variation Rules By Surface Type
+
+### Apps
+- Dark shell, not warm shell. The app should feel like a professional tool, not a productivity diary.
+- Navigation: minimal chrome. Top bar transparent or near-transparent. Sidebar slim and labeled in mono.
+- Content area: generous, breathing, but not soft. Sharp edges, dark cards.
+
+### Dashboards
+- Stat numbers are the hero — `text-4xl` display font minimum, no decorative frames around them.
+- Charts: accent color highlights one line/bar. The rest in muted tones. No rainbow palettes.
+- Avoid equal-size KPI card rows — find the hero insight and give it disproportionate size.
+
+### Landing Pages
+- The hero headline must be uncomfortable to shrink. If reducing type size feels "fine," it's too small.
+- Section rhythm is non-negotiable: dense → white space → impact → pause. Never four identical sections.
+- No stock illustrations. No warm hand-drawn graphics. No blue. No rounded pill buttons everywhere.
+
+### Websites
+- Not every page needs to be dark. Light sections inside dark pages are the drama.
+- Institutional does not mean boring — extreme typography can make a boring subject feel significant.
+- Let typography and composition carry authority before reaching for photography or illustrations.
+
+---
+
+## Non-Negotiable Expression Rules
+
+1. One accent color, one expression mode, one signature move per page.
+2. Typography must establish hierarchy before layout does — if the type scale is weak, nothing fixes it.
+3. Every section must earn its existence: is this denser than the last? More spacious? More intense?
+4. The grid can break, but every break must be intentional. Random asymmetry is not editorial.
+5. If the design feels "good," push it until it feels "authored." Good is the enemy of editorial.
+6. Mono captions are the connective tissue — every overline, label, category, and metadata uses mono.