get-shit-pretty 0.6.2 → 0.6.3

package/gsp/skills/gsp-style/styles/sketch.yml

@@ -54,5 +54,91 @@ dark_mode:
     surface: "#2D2D48"
     on-background: "#FDFBF7"
 
+intensity:
+  variance: 8     # wobbly borders, random rotations, asymmetric radii, tape/tack decorations
+  motion: 4       # subtle jiggle hovers and bounce on decorations — motion is casual, not cinematic
+  density: 5      # layered but breathable — paper texture + dashed accents + scattered decorations
+
+patterns:
+  card:
+    border: "{shape.border-width} solid {shape.border-color}"
+    shadow: "{elevation.shadow-md} — hard offset, zero blur"
+    radius: "wobbly — border-radius: 255px 15px 225px 15px / 15px 225px 15px 255px"
+    background: "{color.surface}"
+    decoration: "tape (translucent gray bar, rotated) OR tack (red circle at top center) OR none"
+    variants: "post-it yellow (#fff9c4) for features, speech-bubble tail for testimonials"
+  button-primary:
+    background: "{color.surface}"
+    border: "border-[3px] solid {shape.border-color}"
+    shadow: "{elevation.shadow-md}"
+    text: "{color.on-background}, {typography.font-family-secondary}"
+    radius: "wobbly oval — custom irregular border-radius"
+    fill: "hover fills {color.accent}, text turns white"
+  button-secondary:
+    background: "muted (#e5e0d8)"
+    border: "border-[3px] solid {shape.border-color}"
+    shadow: "{elevation.shadow-sm}"
+    text: "{color.on-background}"
+    radius: "wobbly oval"
+    fill: "hover fills {color.secondary} (blue ballpoint)"
+  input:
+    border: "{shape.border-width} solid {shape.border-color}"
+    radius: "wobbly — irregular border-radius matching button aesthetic"
+    background: "{color.surface}"
+    focus: "border-{color.secondary}, ring-2 ring-{color.secondary}/20"
+    font: "{typography.font-family-secondary} — handwritten feel in inputs"
+  badge:
+    shape: "wobbly pill, {shape.border-width} dashed border"
+    text: "handwritten font, text-sm, accent or secondary color"
+    decoration: "rotate-2 to rotate-4, looks like a torn tag"
+  nav:
+    logo: "heading font (Kalam), bold, slight rotation"
+    links: "handwritten font, hover adds wavy underline SVG"
+    mobile: "doodled hamburger icon with wobbly circle background"
+  layout:
+    archetype: "sketchbook-collage"
+    max-width: "max-w-5xl — contained like a sketchbook"
+    section-spacing: "py-20 — consistent rhythm"
+    grid-gap: "gap-8"
+    asymmetry: "small rotations on cards (rotate-1, -rotate-2), overlapping avatar circles"
+    surfaces: "dot-grid paper texture (radial-gradient 24px spacing), dashed line dividers"
+    decoration: "hand-drawn SVG arrows, squiggly connectors, corner frame marks, tape strips"
+
+constraints:
+  never:
+    - "standard border-radius classes alone — always use irregular wobbly values"
+    - "soft blur shadows — only hard-offset shadows (zero blur)"
+    - "clean geometric shapes — everything organic, hand-drawn, imperfect"
+    - "sans-serif body fonts — handwritten fonts (Patrick Hand, Kalam) are mandatory"
+    - "pure black (#000000) — use soft pencil black (#2D2D2D or #2D3748)"
+    - "corporate or sterile feel — every element should look sketched"
+    - "neon or saturated technology colors — pencil blacks, paper whites, correction red, ballpoint blue"
+    - "smooth transitions above 200ms — interactions should feel snappy and casual"
+  always:
+    - "wobbly irregular border-radius on every container, button, and card"
+    - "hard-offset shadows (2-8px offset, zero blur) on elevated elements"
+    - "paper dot-grid texture (radial-gradient) on page background"
+    - "handwritten fonts for all visible text (Kalam headings, Patrick Hand body)"
+    - "at least one tape strip, thumbtack, or hand-drawn arrow decoration per page"
+    - "dashed borders on secondary elements and dividers"
+    - "thick borders (border-2 minimum, border-3 or border-4 for emphasis)"
+
+effects:
+  interaction-vocabulary: [jiggle-nudge, press-flat, scribble-reveal, doodle-fill]
+  hover:
+    card: "jiggle-nudge — rotate(1deg) or rotate(-1deg), slight lift"
+    button: "doodle-fill — background fills {color.accent}, shadow reduces to 2px 2px"
+    link: "scribble-reveal — wavy underline SVG appears beneath text"
+    badge: "jiggle-nudge — rotation increases, slight bounce"
+  active:
+    button: "press-flat — shadow disappears, translate(4px, 4px) — pressed into paper"
+  focus:
+    input: "border-{color.secondary}, ring-2 ring-{color.secondary}/20 — subtle blue glow"
+    general: "border-{color.accent} — border-based focus, maintains wobbly shape"
+  transition: "duration-100 to duration-200, ease — fast and casual"
+  ambient:
+    - "gentle-bounce — decorative elements (tacks, arrows) bob subtly (3s ease-in-out)"
+    - "pencil-wobble — wobbly borders shimmer slightly on idle (optional, reduced motion aware)"
+
 compatibility: [organic, playful-geometric]
 clashes: [professional, enterprise, modern-dark]

package/gsp/skills/gsp-style/styles/swiss-minimalist.yml

@@ -55,5 +55,74 @@ dark_mode:
     border-color: "#333333"
     muted: "#9CA3AF"
 
+intensity:
+  variance: 2     # strict grid law, asymmetric but mathematically precise
+  motion: 2       # instant mechanical snaps, no fluidity
+  density: 3      # generous negative space as active structural element
+
+patterns:
+  card:
+    border: "{shape.border-width} solid {shape.border-color}"
+    shadow: "none — depth from texture overlay only"
+    radius: "0px"
+    background: "{color.surface} or {color.background}"
+    padding: "p-8 to p-12 — generous and uniform"
+  button-primary:
+    background: "{color.primary}"
+    border: "none"
+    text: "uppercase, weight {typography.font-weight-heading}, tracking-wide"
+    radius: "0px"
+  button-secondary:
+    background: "transparent"
+    border: "2px solid {color.primary}"
+    text: "uppercase, weight {typography.font-weight-heading}, tracking-wide"
+    radius: "0px"
+  input:
+    border: "border-b 2px solid {shape.border-color}"
+    radius: "0px"
+    background: "{color.background}"
+    focus: "border-color shifts to {color.secondary} — no glow, no ring"
+  badge:
+    shape: "0px radius, {shape.border-width} border"
+    text: "uppercase, tracking-widest, text-xs, font-medium"
+  nav:
+    style: "clean horizontal with visible border-bottom separator"
+    links: "uppercase tracking-wider, hover shifts to {color.secondary}"
+  layout:
+    archetype: "asymmetric-grid"
+    max-width: "max-w-7xl"
+    section-spacing: "py-16 to py-32"
+    grid-gap: "gap-6 to gap-8"
+    surfaces: "grid pattern (24px) and dot matrix at 3-4% opacity — structure visible"
+    decoration: "numbered section labels in {color.secondary}, geometric Bauhaus shapes"
+
+constraints:
+  never:
+    - "rounded corners of any size — 0px radius everywhere"
+    - "gradient backgrounds — solid color blocks only"
+    - "drop shadows — depth from pattern and typography only"
+    - "center-aligned body text — flush-left ragged-right always"
+    - "decorative imagery competing with type — typography is the interface"
+    - "ease-in-out or spring easing — mechanical linear or ease-out only"
+    - "more than one accent color — monochrome plus {color.secondary} signal only"
+  always:
+    - "visible grid structure through borders and texture patterns"
+    - "uppercase on headings, labels, and buttons"
+    - "extreme type scale contrast between headline and body"
+    - "flush-left text alignment to grid"
+    - "active negative space framing content"
+    - "texture overlays (grid, dots, noise) on backgrounds for tactile depth"
+
+effects:
+  interaction-vocabulary: [color-invert, snap-fill, scale-lift, icon-rotate]
+  hover:
+    card: "color-invert — background snaps to {color.primary} or {color.secondary}, text inverts"
+    button: "color-invert — black/white swap or shift to {color.secondary}"
+  active:
+    button: "scale-lift — translate-y-[-1px], instant mechanical press"
+  focus:
+    general: "ring-2 ring-{color.secondary} ring-offset-2 — high contrast"
+  transition: "duration-100 to duration-200, ease-out or linear"
+
 compatibility: [bento-grid]
 clashes: [neubrutalism, cyberpunk, vaporwave]

package/gsp/skills/gsp-style/styles/terminal.yml

@@ -60,5 +60,88 @@ dark_mode:
     background: "#010409"
     surface: "#0D1117"
 
+intensity:
+  variance: 3     # rigid character grid, tmux-like splits, uniform pane structure
+  motion: 4       # cursor blink, typewriter effect, subtle glitch — no cinematic movement
+  density: 7      # dense pane layout, tight monospace text, information-heavy
+
+patterns:
+  card:
+    border: "{shape.border-width} solid {shape.border-color}"
+    shadow: "none — flat panes, no elevation illusion"
+    radius: "{shape.border-radius-sm}"
+    background: "{color.surface}"
+    header: "title bar with ASCII decoration (+--- TITLE ---+) or solid inverted bar"
+  button-primary:
+    background: "{color.primary}"
+    border: "{shape.border-width} solid {color.primary}"
+    shadow: "none"
+    text: "uppercase, monospace, {color.on-primary}, bracketed ([ INITIATE ])"
+    radius: "{shape.border-radius-sm}"
+  button-secondary:
+    background: "transparent"
+    border: "{shape.border-width} solid {shape.border-color}"
+    shadow: "none"
+    text: "uppercase, monospace, {color.on-background}"
+    radius: "{shape.border-radius-sm}"
+  input:
+    border: "none — prompt-style (user@host:~$ prefix before input)"
+    radius: "0px"
+    background: "transparent"
+    focus: "blinking block cursor, no ring, no outline"
+    font: "monospace always"
+  badge:
+    shape: "0px radius, bordered"
+    text: "monospace uppercase, status codes ([OK], [ERR], [WARN])"
+    decoration: "color matches status — green success, red error, amber warning"
+  nav:
+    style: "terminal tab bar with active/inactive pane indicators"
+    background: "{color.background}"
+    border: "border-b {shape.border-width} {shape.border-color}"
+    links: "monospace, green text, > prefix on hover"
+  layout:
+    archetype: "terminal-panes"
+    max-width: "max-w-6xl"
+    section-spacing: "py-16 to py-24"
+    grid-gap: "gap-4 to gap-6"
+    surfaces: "CRT scanline overlay (faint, 3-4px repeating), text phosphor glow"
+    decoration: "ASCII art for logos, progress bars ([||||||.....]), shell prompt prefixes"
+    dividers: "ASCII rules (===============, ----------------) between sections"
+
+constraints:
+  never:
+    - "non-monospace fonts — every character must be monospaced, no exceptions"
+    - "border-radius above 8px — tight mechanical edges only"
+    - "soft or colored shadows — no drop shadows, no elevation illusion"
+    - "background images or photos — text and ASCII only"
+    - "gradient backgrounds — solid dark colors only"
+    - "smooth organic easing — instant or linear transitions"
+    - "rounded pill buttons — bracketed text or inverted blocks only"
+    - "light mode — dark terminal background is mandatory"
+  always:
+    - "monospace font on every element (JetBrains Mono, Fira Code, or VT323)"
+    - "terminal green ({color.primary}) as primary text and accent color"
+    - "phosphor text glow (text-shadow: 0 0 5px rgba(green, 0.5))"
+    - "ASCII decorations for dividers, logos, and structural elements"
+    - "shell prompt prefixes (>, $, ~) on interactive elements"
+    - "status code badges ([OK], [ERR]) for state indication"
+    - "CRT scanline overlay for atmosphere"
+
+effects:
+  interaction-vocabulary: [video-invert, cursor-blink, type-reveal, glitch-offset]
+  hover:
+    card: "border color brightens to {color.primary}"
+    button: "video-invert — background fills {color.primary}, text becomes {color.on-primary}"
+    link: "> prefix appears, color shifts to {color.primary}, no underline decoration"
+  active:
+    button: "translate-y-[1px], brief rapid blink"
+  focus:
+    general: "no ring — blinking cursor and inverted-video focus indication"
+  transition: "duration-0 to duration-100, linear — instant digital response"
+  ambient:
+    - "cursor-blink — block cursor blinks 1s step-end infinite"
+    - "type-reveal — hero text appears character-by-character"
+    - "scanline-hum — CRT overlay at constant low opacity"
+
 compatibility: [bento-grid, micro-interactions]
 clashes: [glassmorphism, liquid-glass, vaporwave]

package/gsp/skills/gsp-style/styles/vaporwave.yml

@@ -57,5 +57,89 @@ dark_mode:
     background: "#0D0019"
     surface: "#1A0533"
 
+intensity:
+  variance: 7     # skewed buttons, rotated icon diamonds, perspective grids, alternating timelines
+  motion: 7       # glow amplification, un-skew transforms, CRT ambient, continuous orb drift
+  density: 5      # balanced — neon effects need breathing room to read against dark void
+
+patterns:
+  card:
+    border: "1px solid {color.primary}/30, border-t-2 {color.secondary} accent laser"
+    shadow: "{elevation.shadow-md}"
+    radius: "{shape.border-radius-sm}"
+    background: "{color.surface}/80 with backdrop-blur-md"
+    header: "cyan title with drop-shadow glow, monospace description"
+  button-primary:
+    background: "transparent"
+    border: "2px solid {color.secondary}"
+    shadow: "none resting, 0 0 20px {color.secondary} on hover"
+    text: "uppercase, tracking-wider, font-mono, {color.secondary}"
+    radius: "0px"
+    shape: "-skew-x-12 transform, inner content counter-skewed"
+  button-secondary:
+    background: "{color.primary}"
+    border: "2px solid {color.primary}"
+    shadow: "none"
+    text: "uppercase, tracking-wider, white"
+    radius: "0px"
+    shape: "-skew-x-12 transform"
+  input:
+    border: "border-b-2 {color.primary} — underline only"
+    radius: "0px"
+    background: "black"
+    focus: "border shifts to {color.secondary}, glow shadow appears"
+    font: "monospace, {color.secondary} text"
+  badge:
+    shape: "-skew-x-12, 0px radius, neon border"
+    text: "uppercase tracking-widest text-xs font-mono"
+    decoration: "neon glow shadow matching border color"
+  nav:
+    style: "terminal window chrome with colored dots (magenta, cyan, orange)"
+    background: "dark glass with backdrop-blur"
+    links: "monospace uppercase tracking-wider, glow on hover"
+  layout:
+    archetype: "neon-void"
+    max-width: "max-w-7xl"
+    section-spacing: "py-20 to py-32"
+    grid-gap: "gap-8 to gap-12"
+    surfaces: "CRT scanlines overlay (4px repeating), perspective grid floor, floating sun orb"
+    decoration: "RGB chromatic aberration, dot patterns (magenta 1px), gradient text fills"
+    depth: "z-layered — grid z-0, sun z-1, content z-10, scanlines z-50"
+
+constraints:
+  never:
+    - "light backgrounds — dark void ({color.background}) is mandatory"
+    - "subtle or muted colors — all accents at maximum saturation"
+    - "organic easing curves — linear or instant for digital feel"
+    - "minimalist or sparse layouts — dense with effects, borders, and overlays"
+    - "removing CRT scanline overlay — always present for atmosphere"
+    - "soft diffused shadows — all shadows are colored neon glows"
+    - "serif fonts — geometric sans (Orbitron) and monospace (Share Tech Mono) only"
+  always:
+    - "CRT scanline overlay fixed across entire viewport"
+    - "perspective grid background in at least one section"
+    - "gradient text fill (sunset: orange via magenta to cyan) on hero headline"
+    - "skewed buttons with -skew-x-12 transform"
+    - "neon glow shadows (colored, not black) on interactive elements"
+    - "terminal/window chrome with colored dots on at least one container"
+    - "IRC-style angle bracket formatting on testimonials"
+
+effects:
+  interaction-vocabulary: [un-skew, glow-explode, diamond-spin, neon-border-shift]
+  hover:
+    card: "neon-border-shift — border opacity increases, -translate-y-2, shadow deepens"
+    button: "un-skew — skew returns to 0, bg fills neon, text inverts to black, glow explodes 2-3x"
+    icon: "diamond-spin — rotate-45 container spins to rotate-90"
+    link: "neon-border-shift — underline appears, color shifts, glow added"
+  active:
+    button: "scale-95, glow dims slightly"
+  focus:
+    general: "ring-2 ring-{color.secondary} with ambient glow"
+  transition: "duration-200, ease-linear — fast, digital, unnatural"
+  ambient:
+    - "orb-drift — floating sun gradient (600px, blur-100px) slow drift"
+    - "scanline-flicker — CRT overlay at constant opacity"
+    - "icon-pulse — animate-pulse on placeholder icons"
+
 compatibility: [kinetic-typography, aurora-gradients]
 clashes: [swiss-minimalist, professional, terminal]

package/gsp/skills/gsp-style/styles/web3.yml

@@ -61,5 +61,87 @@ dark_mode:
     surface: "#0F1115"
     on-background: "#FFFFFF"
 
+intensity:
+  variance: 5     # asymmetric pricing scale, corner border accents, but grid-disciplined overall
+  motion: 7       # spinning orbitals, floating cards, pulsing indicators, glow intensification
+  density: 5      # spacious — generous py-24 sections, but data-heavy stat displays
+
+patterns:
+  card:
+    border: "{shape.border-width} solid rgba(255,255,255,0.10)"
+    shadow: "none resting, {elevation.shadow-md} on hover"
+    radius: "{shape.border-radius-md}"
+    background: "{color.surface}"
+    hover: "border shifts to {color.primary}/50, orange glow shadow appears, -translate-y-1"
+  button-primary:
+    background: "gradient from {color.secondary} to {color.primary}"
+    border: "none"
+    shadow: "{glow.primary}"
+    text: "white, bold, uppercase, tracking-wider"
+    radius: "{shape.border-radius-lg}"
+  button-secondary:
+    background: "transparent"
+    border: "2px solid rgba(255,255,255,0.20)"
+    shadow: "none"
+    text: "white, medium weight"
+    radius: "{shape.border-radius-lg}"
+  input:
+    border: "border-b-2 rgba(255,255,255,0.20) — bottom border only"
+    radius: "0px"
+    background: "rgba(0,0,0,0.50)"
+    focus: "border shifts to {color.primary}, orange glow shadow below, no outline"
+    font: "monospace for data precision"
+  badge:
+    shape: "rounded-lg or rounded-full, orange-tinted glass"
+    text: "monospace uppercase tracking-widest text-xs"
+    decoration: "animate-ping dot for live status indicators"
+  nav:
+    style: "minimal dark bar with pill CTA"
+    background: "transparent or glass (backdrop-blur-lg + bg-black/40)"
+    links: "monospace, muted white, hover shifts to {color.primary}"
+  layout:
+    archetype: "blockchain-grid"
+    max-width: "max-w-7xl"
+    section-spacing: "py-24"
+    grid-gap: "gap-8 to gap-12"
+    surfaces: "grid pattern (50px cells, fading vignette mask) — void is never flat"
+    decoration: "spinning orbital rings, gradient text fills (orange to gold), corner border accents"
+    depth: "radial gradient blurs ({color.primary} at 5-10% opacity, blur-[120px]) for ambient glow"
+
+constraints:
+  never:
+    - "light backgrounds — true void ({color.background}) is mandatory"
+    - "pure black shadows — all shadows use orange/gold tints"
+    - "flat dark backgrounds without grid or radial texture — void must breathe"
+    - "serif fonts — geometric sans (Space Grotesk) and monospace (JetBrains Mono) only"
+    - "hard-line section dividers (<hr>) — spacing and background alternation separate sections"
+    - "muted or desaturated orange — Bitcoin orange at full intensity always"
+  always:
+    - "colored glow shadows (orange/gold tinted) on all interactive elements"
+    - "gradient text fill (orange to gold) on hero headline keywords"
+    - "grid pattern background on at least one section"
+    - "radial blur blobs for ambient background glow"
+    - "pill-shaped (rounded-full) primary buttons"
+    - "monospace font on stats, prices, badges, and technical labels"
+    - "corner border accents on at least one card type"
+
+effects:
+  interaction-vocabulary: [glow-intensify, scale-lift, pulse-ping, orbital-spin]
+  hover:
+    card: "glow-intensify — border shifts orange/50, orange glow shadow appears, -translate-y-1"
+    button: "scale-lift — scale-105, glow radius and opacity increase"
+    image: "scale-lift — scale-110 + contrast-125"
+    icon-container: "glow-intensify — glow shadow appears (0 0 20px rgba(234,88,12,0.4))"
+  active:
+    button: "scale-95, glow dims"
+  focus:
+    general: "ring-2 ring-{color.primary} focus-visible"
+  transition: "duration-200 to duration-300, cubic-bezier(0.4, 0, 0.2, 1)"
+  ambient:
+    - "orbital-spin — outer ring 10s linear infinite, inner ring 15s reverse"
+    - "pulse-ping — animate-ping on status dots for live network feel"
+    - "card-float — floating stat cards animate-bounce with staggered delays (3-4s)"
+    - "orb-drift — hero 3D orb floats translateY(-20px) over 8s ease-in-out infinite"
+
 compatibility: [cyberpunk, modern-dark]
 clashes: [botanical, retro, sketch]

package/gsp/skills/gsp-textures/SKILL.md

@@ -0,0 +1,132 @@
+---
+name: gsp-textures
+description: Design surface treatments — patterns, grain, gradients, background CSS recipes
+user-invocable: true
+model: sonnet
+allowed-tools:
+  - Read
+  - Write
+  - AskUserQuestion
+  - Glob
+  - Grep
+---
+<context>
+You are a GSP texture director. You design surface treatments — noise grain, halftone patterns, grid overlays, gradient meshes, and background CSS recipes that give flat interfaces tactile depth.
+
+This is a standalone composable skill. It works two ways:
+1. **Standalone** — user runs `/gsp-textures` directly for surface treatment exploration
+2. **As a building block** — the creative-director invokes `/gsp-textures --enrich` to add CSS texture recipes to creative direction
+
+Textures are what separate a generic flat UI from a design with presence. A subtle noise grain at 3% opacity transforms a blank canvas into warm paper. A halftone dot pattern turns a section break into a visual signature. These are the details that make a design feel crafted.
+</context>
+
+<objective>
+Define surface treatments and produce copy-paste CSS recipes.
+
+**Input:** Brand context (style constraints, surface philosophy) or user direction, OR `--enrich` mode
+**Output:** `textures.md` chunk with CSS recipes for each surface treatment
+**Agent:** None — inline skill with CSS generation
+</objective>
+
+<execution_context>
+@${CLAUDE_SKILL_DIR}/../../references/chunk-format.md
+</execution_context>
+
+<rules>
+- Always use `AskUserQuestion` for user interaction — never prompt via plain text
+- One decision per question — never batch multiple questions in a single message
+- Every texture must include copy-paste CSS (not just descriptions)
+- Textures must be applied via fixed pseudo-elements (pointer-events: none) — never on scrolling containers
+- Always specify opacity + blend mode — textures at wrong opacity ruin the design
+- Respect style constraints — if the brand `.yml` says "never: texture" then the answer is "clean surfaces"
+</rules>
+
+<process>
+## Step 0: Determine mode
+
+| Input | Mode |
+|-------|------|
+| `/gsp-textures --enrich` | Enrich existing imagery-style.md textures section |
+| `/gsp-textures` | Interactive — explore and build |
+
+## Step 1: Enrich mode (`--enrich`)
+
+Read existing `{BRAND_PATH}/identity/imagery-style.md` and `{BRAND_PATH}/patterns/{brand}.yml`.
+
+Check `.yml` constraints — if `never` includes texture/grain/pattern keywords, write a minimal textures section noting "clean surfaces per brand constraints."
+
+Otherwise, derive textures from the style's `layout.surfaces` field and the `.md` companion's texture descriptions. Produce CSS recipes for each texture.
+
+Update the Textures & Patterns section of `imagery-style.md`.
+
+## Step 2: Interactive mode
+
+One `AskUserQuestion` at a time:
+
+1. Surface feel — use `AskUserQuestion`:
+   - **Paper grain** — "subtle noise, warm, handmade feel"
+   - **Halftone dots** — "print/editorial, bold, graphic"
+   - **Grid overlay** — "technical, precise, graph-paper"
+   - **Gradient mesh** — "organic, flowing, modern"
+   - **Clean** — "no texture — flat surfaces are the aesthetic"
+   - **Multiple** — "I want to layer textures"
+2. If not "clean": placement — use `AskUserQuestion`:
+   - **Global** — "entire page background"
+   - **Sections** — "alternating textured/clean sections"
+   - **Cards only** — "texture inside card surfaces"
+   - **Decorative** — "only on decorative elements"
+
+## Step 3: Generate CSS recipes
+
+For each texture, produce:
+
+### Noise grain
+```css
+.grain {
+  position: fixed;
+  inset: 0;
+  z-index: 50;
+  pointer-events: none;
+  opacity: {0.03-0.05};
+  mix-blend-mode: multiply;
+  background-image: url("data:image/svg+xml,..."); /* feTurbulence */
+}
+```
+
+### Halftone dots
+```css
+.halftone {
+  background-image: radial-gradient(#000 {dot-size}, transparent {dot-size});
+  background-size: {grid-size} {grid-size};
+}
+```
+
+### Grid lines
+```css
+.grid-pattern {
+  background-size: {cell-size} {cell-size};
+  background-image:
+    linear-gradient(to right, rgba(0,0,0,{opacity}) 1px, transparent 1px),
+    linear-gradient(to bottom, rgba(0,0,0,{opacity}) 1px, transparent 1px);
+}
+```
+
+### Gradient mesh / blobs
+```css
+.blob {
+  position: absolute;
+  width: {size};
+  height: {size};
+  border-radius: {organic-radius};
+  background: {brand-color};
+  filter: blur({blur-radius});
+  opacity: {0.1-0.3};
+}
+```
+
+Customize values to match brand palette and style constraints.
+
+## Step 4: Write output + completion
+
+Write `textures.md` chunk or update Textures section of `imagery-style.md`. Target: 60-100 lines.
+</process>

package/gsp/skills/gsp-typescale/SKILL.md

@@ -1,5 +1,5 @@
 ---
-name: typescale
+name: gsp-typescale
 description: Generate a mathematical type scale — standalone or as a building block for identity
 user-invocable: true
 model: sonnet
@@ -11,10 +11,10 @@ allowed-tools:
   - WebSearch
 ---
 <context>
-You are a GSP type scale generator. You produce a complete typography system from a base size, ratio, and font family — including fluid responsive sizing, vertical rhythm, Tailwind/shadcn integration, and accessibility-compliant defaults. Downstream agents (identity-designer, system-architect, builder) consume the output files.
+You are a GSP type scale generator. You produce a complete typography system from a base size, ratio, and font family — including fluid responsive sizing, vertical rhythm, Tailwind/shadcn integration, and accessibility-compliant defaults. Downstream agents (creative-director, system-architect, builder) consume the output files.
 
 This is a standalone composable skill. It works two ways:
-1. **Standalone** — user runs `/gsp:typescale "Inter" --ratio 1.25` directly, gets a production-ready type system
+1. **Standalone** — user runs `/gsp-typescale "Inter" --ratio 1.25` directly, gets a production-ready type system
 2. **As a building block** — identity phase detects existing typography files and reuses them
 
 Visual companion: https://typescale.com/ — users can preview ratios interactively there, then feed the values here.
@@ -51,11 +51,11 @@ Read the user's input to determine the mode:
 
 | Input | Mode |
 |-------|------|
-| `/gsp:typescale "Inter" --ratio 1.25` | Direct — font and ratio from args |
-| `/gsp:typescale --from-style cyberpunk` | From style — extract typography from a preset |
-| `/gsp:typescale` | Interactive — ask for inputs |
-| `/gsp:typescale --list-ratios` | List — show available ratios |
-| `/gsp:typescale --preview "Inter" --ratio 1.25` | Preview — show scale without writing files |
+| `/gsp-typescale "Inter" --ratio 1.25` | Direct — font and ratio from args |
+| `/gsp-typescale --from-style cyberpunk` | From style — extract typography from a preset |
+| `/gsp-typescale` | Interactive — ask for inputs |
+| `/gsp-typescale --list-ratios` | List — show available ratios |
+| `/gsp-typescale --preview "Inter" --ratio 1.25` | Preview — show scale without writing files |
 
 Additional flags (combinable with any mode):
 - **--vanilla** — output plain CSS custom properties instead of Tailwind format
@@ -68,7 +68,7 @@ Additional flags (combinable with any mode):
 If `--list-ratios`, display the built-in ratios with practical context:
 
 ```
-  /gsp:typescale — ratios
+  /gsp-typescale — ratios
   ═══════════════════════════════════════
 
   Name                Ratio    Character                Best for
@@ -83,7 +83,7 @@ If `--list-ratios`, display the built-in ratios with practical context:
   golden-ratio        1.618    Maximum drama            Art, luxury, display-heavy
 
   ──────────────────────────────────────────────────────────────────
-  Usage: /gsp:typescale "Inter" --ratio 1.25
+  Usage: /gsp-typescale "Inter" --ratio 1.25
   Preview interactively: https://typescale.com/
 ```
 
@@ -230,5 +230,5 @@ Write `{OUTPUT_PATH}/typescale.css` instead — plain CSS custom properties (no
 
 ## Step 8: Completion output
 
-Show: header (`/gsp:typescale — {font} @ {ratio}`), file tree (typography.md + CSS file), scale summary (ratio, range, levels, fluid, grid). Then `AskUserQuestion`: Generate palette → `/gsp:palette`, Apply a full style → `/gsp:style`, Continue to identity → `/gsp:brand-identity`, Done.
+Show: header (`/gsp-typescale — {font} @ {ratio}`), file tree (typography.md + CSS file), scale summary (ratio, range, levels, fluid, grid). Then `AskUserQuestion`: Generate palette → `/gsp-palette`, Apply a full style → `/gsp-style`, Continue to identity → `/gsp-brand-identity`, Done.
 </process>