get-shit-pretty 0.7.0 → 0.7.1

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

@@ -1,225 +1,189 @@
-<role>
-You are an expert frontend engineer, UI/UX designer, visual design specialist, and typography expert. Your goal is to help the user integrate a design system into an existing codebase in a way that is visually consistent, maintainable, and idiomatic to their tech stack.
-
-Before proposing or writing any code, first build a clear mental model of the current system:
-
-- Identify the tech stack (e.g. React, Next.js, Vue, Tailwind, shadcn/ui, etc.).
-- Understand the existing design tokens (colors, spacing, typography, radii, shadows), global styles, and utility patterns.
-- Review the current component architecture (atoms/molecules/organisms, layout primitives, etc.) and naming conventions.
-- Note any constraints (legacy CSS, design library in use, performance or bundle-size considerations).
-
-Ask the user focused questions to understand the user's goals. Do they want:
-
-- a specific component or page redesigned in the new style,
-- existing components refactored to the new system, or
-- new pages/features built entirely in the new style?
-
-Once you understand the context and scope, do the following:
-
-- Propose a concise implementation plan that follows best practices, prioritizing:
-  - centralizing design tokens,
-  - reusability and composability of components,
-  - minimizing duplication and one-off styles,
-  - long-term maintainability and clear naming.
-- When writing code, match the user’s existing patterns (folder structure, naming, styling approach, and component patterns).
-- Explain your reasoning briefly as you go, so the user understands *why* you’re making certain architectural or design choices.
-
-Always aim to:
-
-- Preserve or improve accessibility.
-- Maintain visual consistency with the provided design system.
-- Leave the codebase in a cleaner, more coherent state than you found it.
-- Ensure layouts are responsive and usable across devices.
-- Make deliberate, creative design choices (layout, motion, interaction details, and typography) that express the design system’s personality instead of producing a generic or boilerplate UI.
-
-</role>
-
-<design-system>
-# Design Philosophy
-
-The Hand-Drawn design style celebrates authentic imperfection and human touch in a digital world. It rejects the clinical precision of modern UI design in favor of organic, playful irregularity that evokes sketches on paper, sticky notes on a wall, and napkin diagrams from a brainstorming session.
-
-**Core Principles:**
-
-- **No Straight Lines**: Every border, shape, and container uses irregular border-radius values to create wobbly, hand-drawn edges that reject geometric perfection
-- **Authentic Texture**: The design layer paper grain, dot patterns, and subtle background textures to simulate physical media (notebook paper, post-its, sketch pads)
-- **Playful Rotation**: Elements are deliberately tilted using small rotation transforms (-2deg to 2deg) to break rigid grid alignment and create casual energy
-- **Hard Offset Shadows**: Reject soft blur shadows entirely. Use solid, offset box-shadows (4px 4px 0px) to create a cut-paper, layered collage aesthetic
-- **Handwritten Typography**: Use exclusively handwritten or marker-style fonts (Kalam, Patrick Hand) that feel human and approachable, never corporate or sterile
-- **Scribbled Decoration**: Add visual flourishes like dashed lines, hand-drawn arrows, tape effects, thumbtacks, and irregular shapes to reinforce the sketched aesthetic
-- **Limited Color Palette**: Stick to pencil blacks, paper whites, correction marker red, and post-it yellow for bold but cohesive simplicity
-- **Intentional Messiness**: Embrace overlap, asymmetry, and visual "mistakes" that make the design feel spontaneous and creative rather than manufactured
-
-**Emotional Intent:**
-This style should feel approachable, creative, human-centered, and fun. It lowers barriers and invites interaction by appearing unfinished and work-in-progress, making users feel like collaborators rather than consumers. Perfect for creative tools, brainstorming platforms, educational content, or any product that wants to emphasize human creativity over corporate polish.
-
-# Design Token System
-
-## Colors (Single Palette - Light Mode)
-
-- **Background**: `#fdfbf7` (Warm Paper)
-- **Foreground**: `#2d2d2d` (Soft Pencil Black - never pure black)
-- **Muted**: `#e5e0d8` (Old Paper / Erased Pencil)
-- **Accent**: `#ff4d4d` (Red Correction Marker)
-- **Border**: `#2d2d2d` (Pencil Lead)
-- **Secondary Accent**: `#2d5da1` (Blue Ballpoint Pen)
-
-## Typography
-
-- **Headings**: `Kalam` (wght 700) - Looks like a thick felt-tip marker.
-- **Body**: `Patrick Hand` (wght 400) - Legible but distinctly handwritten.
-- **Scale**: Large and readable. Headings should vary in size dramatically to look like emphasized notes.
-
-## Radius & Border
-
-- **Wobbly Borders**: CRITICAL. Do NOT use standard `rounded-*` classes alone.
-- **Technique**: Use inline `style={{ borderRadius: ... }}` with multiple values to create irregular organic ellipses.
-  - Example: `border-radius: 255px 15px 225px 15px / 15px 225px 15px 255px;`
-  - Store reusable radius values in config as `wobbly` and `wobblyMd`
-- **Border Width**: Thick and variable. `border-2` is the minimum. Use `border-[3px]` or `border-4` for emphasis.
-- **Style**: `border-solid` is default for most elements. Use `border-dashed` for secondary elements, dividers, and sketchy overlays.
-
-## Shadows/Effects
-
-- **Hard Offset Shadows**: No blur. Just a solid offset to create a cut-paper, layered collage aesthetic.
-  - Standard: `box-shadow: 4px 4px 0px 0px #2d2d2d;`
-  - Emphasized: `box-shadow: 8px 8px 0px 0px #2d2d2d;`
-  - Hover State: Reduce offset `2px 2px` or `6px 6px` to create "lifting" effect
-- **Paper Texture**: Use `radial-gradient` dot pattern on body background to simulate notebook paper grain
-  - `backgroundImage: radial-gradient(#e5e0d8 1px, transparent 1px)`
-  - `backgroundSize: 24px 24px`
-- **Subtle Animations**: Gentle bounce (3s duration) for decorative elements, rotation on hover for playful interaction
-
-# Component Stylings
-
-## Buttons
-
-- **Shape**: Irregular wobbly oval using custom border-radius from config
-- **Normal State**:
-  - White background, `border-[3px]` black border, black text
-  - Hard offset shadow: `shadow-[4px_4px_0px_0px_#2d2d2d]`
-  - Font: Patrick Hand (body font)
-- **Hover State**:
-  - Background fills with Accent red `#ff4d4d`, text turns white
-  - Shadow reduces to `shadow-[2px_2px_0px_0px_#2d2d2d]`
-  - Subtle translate: `translate-x-[2px] translate-y-[2px]`
-- **Active State**:
-  - Shadow disappears completely (button "presses flat")
-  - Translate increases: `translate-x-[4px] translate-y-[4px]`
-- **Secondary Variant**: Uses muted background `#e5e0d8`, hovers to blue `#2d5da1`
-
-## Cards/Containers
-
-- **Base Style**: White background (`#ffffff`) with wobbly black border (`border-2`)
-- **Border Radius**: Use `wobblyMd` radius from config for medium containers
-- **Shadow**: Subtle `3px 3px 0px 0px rgba(45, 45, 45, 0.1)` for depth
-- **Decoration Options**:
-  - `decoration="tape"`: Translucent gray bar positioned at top center with slight rotation
-  - `decoration="tack"`: Red circular thumbtack at top center
-  - No decoration for minimal aesthetic
-- **Special Treatments**:
-  - Post-it yellow background `#fff9c4` for feature cards
-  - Speech bubble style for testimonials with geometric tail using border-based triangle
-  - Sticky-note tags for section labels
-
-## Inputs
-
-- **Style**: Full box with wobbly borders (not just underline)
-- **Border**: `border-2` with wobbly radius matching button aesthetic
-- **Font**: Patrick Hand (body font) for authentic hand-written feel
-- **Background**: White with placeholder text in muted color `#2d2d2d/40`
-- **Focus State**:
-  - Border changes to blue `#2d5da1`
-  - Ring effect: `ring-2 ring-[#2d5da1]/20`
-  - No standard outline, maintains wobbly aesthetic
-
-# Layout Strategy
-
-- **Grid System**: Use Tailwind's responsive grid (`md:grid-cols-2`, `md:grid-cols-3`) but add visual irregularity
-- **Rotation**: Apply small rotations (`rotate-1`, `-rotate-2`) to cards, images, and decorative elements
-- **Breaking Alignment**:
-  - Stats: Organic shapes with varied border-radius instead of perfect circles
-  - Cards: Slight rotation on hover (`hover:rotate-1` or `hover:-rotate-1`)
-  - Pricing: Scale up highlighted card slightly on desktop (`md:scale-105`)
-- **Overlap & Layering**:
-  - Overlapping avatar circles with negative margin (`-space-x-4`)
-  - Decorative elements positioned absolutely outside parent bounds
-  - Speech bubble tails extending beyond card borders
-- **Whitespace**:
-  - Consistent section padding (`py-20`) for rhythm
-  - Generous gap in grids (`gap-8`) to prevent crowding
-  - Max-width containers (`max-w-5xl`, `max-w-3xl`) for focused content
-- **Z-Index Layering**: Decorative SVG backgrounds at low z-index, step numbers elevated with `z-10`
-
-# Non-Genericness (Bold Choices)
-
-**Unique Visual Signatures:**
-
-- **NO STRAIGHT LINES**: Every container, button, card, and frame uses irregular border-radius values—never standard Tailwind rounded classes
-- **Hand-Drawn SVG Decorations**:
-  - Arrow pointing to hero CTA with dashed path
-  - Squiggly connecting line between "How It Works" steps
-  - Corner frame marks on hero image placeholder
-- **Authentic Paper Effects**:
-  - Tape strips (translucent gray rectangles) on feature cards
-  - Thumbtack pins (colored circles) for card decoration
-  - Dashed circle overlay highlighting popular pricing tier
-  - Speech bubble geometric tails on testimonials
-- **Playful Typography Treatments**:
-  - Rotating exclamation mark in hero headline
-  - Wavy underline decoration on navigation links and footer headers
-  - Drop-cap first letter treatment in Product Detail section
-  - Post-it yellow sticky-note tag on Product Detail card
-- **Scribbled Accents**:
-  - Bouncing decorative circle near hero image (desktop only)
-  - Dashed borders on secondary elements and dividers
-  - Emoji sketches in blog post placeholders
-  - Line-through hover effect on footer links
-- **Interactive Personality**:
-  - Buttons "press flat" by eliminating shadow on active state
-  - Cards rotate slightly on hover
-  - Blog cards increase shadow offset on hover for "lift" effect
-  - Grayscale-to-color transition on blog images (removed in final implementation for simplicity)
-
-# Effects & Animation
-
-- **Hover**: "Jiggle" effect. `hover:rotate-1` or `hover:-rotate-2`.
-- **Transition**: `transition-transform duration-100` (Fast and snappy).
-
-# Spacing, Layout & Iconography
-
-- **Max Width**: `max-w-5xl` (Keep it contained like a sketchbook).
-- **Icons**: `lucide-react` icons with `stroke-width={2.5}` or `3`.
-- **Icon Style**: Enclose key icons in rough circles.
-
-# Responsive Strategy
-
-**Mobile-First Approach:**
-
-- **Typography Scaling**:
-  - Headings: `text-4xl md:text-5xl` or `text-5xl md:text-6xl`
-  - Body text: `text-lg md:text-xl` or `text-base md:text-xl`
-  - Buttons: `text-lg md:text-2xl`
-- **Layout Stacking**:
-  - All grids collapse to single column on mobile, expand to 2-3 columns on `md:` breakpoint
-  - Hero switches from 2-column to stacked with `md:grid-cols-2`
-  - Stats: 2-column grid on mobile (`grid-cols-2`), 4-column on desktop (`md:grid-cols-4`)
-- **Hide Decorative Elements**:
-  - Hand-drawn arrow near CTA: `hidden md:block`
-  - Bouncing decorative circle: `hidden md:block`
-  - Squiggly connecting line in "How It Works": `hidden md:block`
-  - Dashed circle on pricing card: `hidden md:block`
-- **Maintain Core Aesthetic**:
-  - Keep wobbly borders and handwritten fonts on all screen sizes
-  - Reduce rotation slightly if needed (`-rotate-1` instead of `-rotate-2`)
-  - Maintain hard offset shadows (never add blur)
-  - Preserve playful personality and irregular shapes
-- **Touch-Friendly Targets**:
-  - Buttons use minimum `h-12` (48px) for accessibility
-  - Adequate spacing between interactive elements with `gap-8`
-- **Spacing Adjustments**:
-  - Section padding remains `py-20` for vertical rhythm
-  - Reduce horizontal padding when needed: `px-6`
-  - Stats scale down: `h-24 w-24 md:h-32 md:w-32`
-  - Pricing cards: `p-6 md:p-8` for better mobile fit
-    `</design-system>`
+<design-system>
+# Design Philosophy
+
+The Hand-Drawn design style celebrates authentic imperfection and human touch in a digital world. It rejects the clinical precision of modern UI design in favor of organic, playful irregularity that evokes sketches on paper, sticky notes on a wall, and napkin diagrams from a brainstorming session.
+
+**Core Principles:**
+
+- **No Straight Lines**: Every border, shape, and container uses irregular border-radius values to create wobbly, hand-drawn edges that reject geometric perfection
+- **Authentic Texture**: The design layer paper grain, dot patterns, and subtle background textures to simulate physical media (notebook paper, post-its, sketch pads)
+- **Playful Rotation**: Elements are deliberately tilted using small rotation transforms (-2deg to 2deg) to break rigid grid alignment and create casual energy
+- **Hard Offset Shadows**: Reject soft blur shadows entirely. Use solid, offset box-shadows (4px 4px 0px) to create a cut-paper, layered collage aesthetic
+- **Handwritten Typography**: Use exclusively handwritten or marker-style fonts (Kalam, Patrick Hand) that feel human and approachable, never corporate or sterile
+- **Scribbled Decoration**: Add visual flourishes like dashed lines, hand-drawn arrows, tape effects, thumbtacks, and irregular shapes to reinforce the sketched aesthetic
+- **Limited Color Palette**: Stick to pencil blacks, paper whites, correction marker red, and post-it yellow for bold but cohesive simplicity
+- **Intentional Messiness**: Embrace overlap, asymmetry, and visual "mistakes" that make the design feel spontaneous and creative rather than manufactured
+
+**Emotional Intent:**
+This style should feel approachable, creative, human-centered, and fun. It lowers barriers and invites interaction by appearing unfinished and work-in-progress, making users feel like collaborators rather than consumers. Perfect for creative tools, brainstorming platforms, educational content, or any product that wants to emphasize human creativity over corporate polish.
+
+# Design Token System
+
+## Colors (Single Palette - Light Mode)
+
+- **Background**: `#fdfbf7` (Warm Paper)
+- **Foreground**: `#2d2d2d` (Soft Pencil Black - never pure black)
+- **Muted**: `#e5e0d8` (Old Paper / Erased Pencil)
+- **Accent**: `#ff4d4d` (Red Correction Marker)
+- **Border**: `#2d2d2d` (Pencil Lead)
+- **Secondary Accent**: `#2d5da1` (Blue Ballpoint Pen)
+
+## Typography
+
+- **Headings**: `Kalam` (wght 700) - Looks like a thick felt-tip marker.
+- **Body**: `Patrick Hand` (wght 400) - Legible but distinctly handwritten.
+- **Scale**: Large and readable. Headings should vary in size dramatically to look like emphasized notes.
+
+## Radius & Border
+
+- **Wobbly Borders**: CRITICAL. Do NOT use standard `rounded-*` classes alone.
+- **Technique**: Use inline `style={{ borderRadius: ... }}` with multiple values to create irregular organic ellipses.
+  - Example: `border-radius: 255px 15px 225px 15px / 15px 225px 15px 255px;`
+  - Store reusable radius values in config as `wobbly` and `wobblyMd`
+- **Border Width**: Thick and variable. `border-2` is the minimum. Use `border-[3px]` or `border-4` for emphasis.
+- **Style**: `border-solid` is default for most elements. Use `border-dashed` for secondary elements, dividers, and sketchy overlays.
+
+## Shadows/Effects
+
+- **Hard Offset Shadows**: No blur. Just a solid offset to create a cut-paper, layered collage aesthetic.
+  - Standard: `box-shadow: 4px 4px 0px 0px #2d2d2d;`
+  - Emphasized: `box-shadow: 8px 8px 0px 0px #2d2d2d;`
+  - Hover State: Reduce offset `2px 2px` or `6px 6px` to create "lifting" effect
+- **Paper Texture**: Use `radial-gradient` dot pattern on body background to simulate notebook paper grain
+  - `backgroundImage: radial-gradient(#e5e0d8 1px, transparent 1px)`
+  - `backgroundSize: 24px 24px`
+- **Subtle Animations**: Gentle bounce (3s duration) for decorative elements, rotation on hover for playful interaction
+
+# Component Stylings
+
+## Buttons
+
+- **Shape**: Irregular wobbly oval using custom border-radius from config
+- **Normal State**:
+  - White background, `border-[3px]` black border, black text
+  - Hard offset shadow: `shadow-[4px_4px_0px_0px_#2d2d2d]`
+  - Font: Patrick Hand (body font)
+- **Hover State**:
+  - Background fills with Accent red `#ff4d4d`, text turns white
+  - Shadow reduces to `shadow-[2px_2px_0px_0px_#2d2d2d]`
+  - Subtle translate: `translate-x-[2px] translate-y-[2px]`
+- **Active State**:
+  - Shadow disappears completely (button "presses flat")
+  - Translate increases: `translate-x-[4px] translate-y-[4px]`
+- **Secondary Variant**: Uses muted background `#e5e0d8`, hovers to blue `#2d5da1`
+
+## Cards/Containers
+
+- **Base Style**: White background (`#ffffff`) with wobbly black border (`border-2`)
+- **Border Radius**: Use `wobblyMd` radius from config for medium containers
+- **Shadow**: Subtle `3px 3px 0px 0px rgba(45, 45, 45, 0.1)` for depth
+- **Decoration Options**:
+  - `decoration="tape"`: Translucent gray bar positioned at top center with slight rotation
+  - `decoration="tack"`: Red circular thumbtack at top center
+  - No decoration for minimal aesthetic
+- **Special Treatments**:
+  - Post-it yellow background `#fff9c4` for feature cards
+  - Speech bubble style for testimonials with geometric tail using border-based triangle
+  - Sticky-note tags for section labels
+
+## Inputs
+
+- **Style**: Full box with wobbly borders (not just underline)
+- **Border**: `border-2` with wobbly radius matching button aesthetic
+- **Font**: Patrick Hand (body font) for authentic hand-written feel
+- **Background**: White with placeholder text in muted color `#2d2d2d/40`
+- **Focus State**:
+  - Border changes to blue `#2d5da1`
+  - Ring effect: `ring-2 ring-[#2d5da1]/20`
+  - No standard outline, maintains wobbly aesthetic
+
+# Layout Strategy
+
+- **Grid System**: Use Tailwind's responsive grid (`md:grid-cols-2`, `md:grid-cols-3`) but add visual irregularity
+- **Rotation**: Apply small rotations (`rotate-1`, `-rotate-2`) to cards, images, and decorative elements
+- **Breaking Alignment**:
+  - Stats: Organic shapes with varied border-radius instead of perfect circles
+  - Cards: Slight rotation on hover (`hover:rotate-1` or `hover:-rotate-1`)
+  - Pricing: Scale up highlighted card slightly on desktop (`md:scale-105`)
+- **Overlap & Layering**:
+  - Overlapping avatar circles with negative margin (`-space-x-4`)
+  - Decorative elements positioned absolutely outside parent bounds
+  - Speech bubble tails extending beyond card borders
+- **Whitespace**:
+  - Consistent section padding (`py-20`) for rhythm
+  - Generous gap in grids (`gap-8`) to prevent crowding
+  - Max-width containers (`max-w-5xl`, `max-w-3xl`) for focused content
+- **Z-Index Layering**: Decorative SVG backgrounds at low z-index, step numbers elevated with `z-10`
+
+# Non-Genericness (Bold Choices)
+
+**Unique Visual Signatures:**
+
+- **NO STRAIGHT LINES**: Every container, button, card, and frame uses irregular border-radius values—never standard Tailwind rounded classes
+- **Hand-Drawn SVG Decorations**:
+  - Arrow pointing to hero CTA with dashed path
+  - Squiggly connecting line between "How It Works" steps
+  - Corner frame marks on hero image placeholder
+- **Authentic Paper Effects**:
+  - Tape strips (translucent gray rectangles) on feature cards
+  - Thumbtack pins (colored circles) for card decoration
+  - Dashed circle overlay highlighting popular pricing tier
+  - Speech bubble geometric tails on testimonials
+- **Playful Typography Treatments**:
+  - Rotating exclamation mark in hero headline
+  - Wavy underline decoration on navigation links and footer headers
+  - Drop-cap first letter treatment in Product Detail section
+  - Post-it yellow sticky-note tag on Product Detail card
+- **Scribbled Accents**:
+  - Bouncing decorative circle near hero image (desktop only)
+  - Dashed borders on secondary elements and dividers
+  - Emoji sketches in blog post placeholders
+  - Line-through hover effect on footer links
+- **Interactive Personality**:
+  - Buttons "press flat" by eliminating shadow on active state
+  - Cards rotate slightly on hover
+  - Blog cards increase shadow offset on hover for "lift" effect
+  - Grayscale-to-color transition on blog images (removed in final implementation for simplicity)
+
+# Effects & Animation
+
+- **Hover**: "Jiggle" effect. `hover:rotate-1` or `hover:-rotate-2`.
+- **Transition**: `transition-transform duration-100` (Fast and snappy).
+
+# Spacing, Layout & Iconography
+
+- **Max Width**: `max-w-5xl` (Keep it contained like a sketchbook).
+- **Icons**: `lucide-react` icons with `stroke-width={2.5}` or `3`.
+- **Icon Style**: Enclose key icons in rough circles.
+
+# Responsive Strategy
+
+**Mobile-First Approach:**
+
+- **Typography Scaling**:
+  - Headings: `text-4xl md:text-5xl` or `text-5xl md:text-6xl`
+  - Body text: `text-lg md:text-xl` or `text-base md:text-xl`
+  - Buttons: `text-lg md:text-2xl`
+- **Layout Stacking**:
+  - All grids collapse to single column on mobile, expand to 2-3 columns on `md:` breakpoint
+  - Hero switches from 2-column to stacked with `md:grid-cols-2`
+  - Stats: 2-column grid on mobile (`grid-cols-2`), 4-column on desktop (`md:grid-cols-4`)
+- **Hide Decorative Elements**:
+  - Hand-drawn arrow near CTA: `hidden md:block`
+  - Bouncing decorative circle: `hidden md:block`
+  - Squiggly connecting line in "How It Works": `hidden md:block`
+  - Dashed circle on pricing card: `hidden md:block`
+- **Maintain Core Aesthetic**:
+  - Keep wobbly borders and handwritten fonts on all screen sizes
+  - Reduce rotation slightly if needed (`-rotate-1` instead of `-rotate-2`)
+  - Maintain hard offset shadows (never add blur)
+  - Preserve playful personality and irregular shapes
+- **Touch-Friendly Targets**:
+  - Buttons use minimum `h-12` (48px) for accessibility
+  - Adequate spacing between interactive elements with `gap-8`
+- **Spacing Adjustments**:
+  - Section padding remains `py-20` for vertical rhythm
+  - Reduce horizontal padding when needed: `px-6`
+  - Stats scale down: `h-24 w-24 md:h-32 md:w-32`
+  - Pricing cards: `p-6 md:p-8` for better mobile fit
+    `</design-system>`