get-shit-pretty 0.7.0 → 0.7.3

package/gsp/skills/gsp-style/styles/flat-design.md

@@ -1,155 +1,119 @@
-<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
-**Flat Design** removes all artifice. It rejects the illusion of three-dimensionality—no drop shadows, no bevels, no realistic gradients, no textures. It relies entirely on **hierarchy through size, color, and typography**. This is not minimalism for the sake of being minimal; it's **confident reduction** that creates visual interest through pure form.
-
-The aesthetic is **digital-native but print-inspired**: crisp edges, solid blocks of color, and a strict reliance on the grid. It communicates clarity, efficiency, and modernity. It is not "boring" or "plain"; it is **boldly reductive and graphic**. Every element exists because it is necessary. Visual interest comes from the strategic interplay of solid shapes, vibrant (but controlled) color palettes, and dynamic scale.
-
-**Core Principles:**
-
-1. **Zero Artificial Depth**: The Z-axis does not exist. Everything is on the same plane. However, visual hierarchy is created through scale, color contrast, and strategic layering of flat shapes.
-2. **Color as Structure**: Bold background colors define sections and grouping, not lines or shadows. Color transitions are sharp, never blurred or gradual.
-3. **Typography as Interface**: Text size and weight bear the load of hierarchy. Typography is geometric, bold, and demands attention.
-4. **Geometric Purity**: Rectangles, circles, and squares dominate. Rounded corners are consistent and moderate. No organic blobs or complex shapes.
-5. **Interactive Feedback**: Hover states are pronounced through color shifts, scale transformations, and instant transitions—never through shadow depth.
-6. **Strategic Decoration**: Large, subtle geometric shapes in background create visual interest without breaking the flat aesthetic—think poster design.
-
-# Design Token System
-
-## Colors (Single Palette: Light Mode)
-
-A vibrant, confident palette that avoids muddy tones. High contrast is essential.
-
-- **Background**: `#FFFFFF` (Pure White) - The canvas.
-- **Foreground**: `#111827` (Gray 900) - Sharp, high-contrast text.
-- **Primary**: `#3B82F6` (Blue 500) - The "Action" color. Bright, standard digital blue.
-- **Secondary**: `#10B981` (Emerald 500) - Supporting accent.
-- **Accent**: `#F59E0B` (Amber 500) - For highlights/badges.
-- **Muted**: `#F3F4F6` (Gray 100) - Used for secondary backgrounds/blocks.
-- **Border**: `#E5E7EB` (Gray 200) - Used sparingly.
-
-## Typography
-
-**Font Family**: **'Outfit', sans-serif**.
-A geometric sans-serif that mirrors the shapes of the UI.
-
-- **Headings**: Bold (700) or Extra Bold (800). Tight letter-spacing (`-0.02em`).
-- **Body**: Regular (400). Readable, standard spacing.
-- **Labels/Buttons**: Medium (500) or SemiBold (600). Uppercase often used for labels (`tracking-wider`).
-
-## Radius & Shapes
-
-- **Radius**: `rounded-md` (6px) or `rounded-lg` (8px). Consistent throughout. Not fully rounded (pill) unless it's a tag.
-- **Borders**: generally `0px`. We use background colors to define edges. If a border is needed (e.g., inputs), `border-2` solid color.
-
-## Shadows & Effects
-
-- **Shadows**: `shadow-none`. **ABSOLUTELY NO BOX SHADOWS ON ELEMENTS.**
-- **Gradients**: Only subtle directional gradients for background decoration (e.g., `from-[#F3F4F6] to-transparent`). Never on buttons or cards. Never colorful or vibrant gradients.
-- **Blur**: None on elements. No backdrop-blur effects.
-- **Background Decoration**: Large geometric shapes with low opacity (`bg-white/5`) positioned absolutely for visual interest.
-
-# Component Stylings
-
-## Buttons
-
-- **Primary**: Solid Primary color background. White text. `rounded-md`. Height `h-14` to `h-16` for good touch targets. `transition-all duration-200 hover:scale-105` (scale transformation for feedback). Color shift on hover (e.g., `hover:bg-blue-600`). No shadow.
-- **Secondary**: Solid Muted background (Gray 100). Dark text. `hover:bg-gray-200` with scale effect.
-- **Outline**: `border-4` solid color (not border-2 for more boldness). Text matches border color. Transparent bg. `hover:bg-[color] hover:text-white` (fill effect on hover).
-
-## Cards
-
-- **Style**: "Color Block".
-- **Appearance**: Solid background color (White on Gray page, or soft color tints like `bg-blue-50`, `bg-green-50` for features). No shadow. No border. Padding is generous (`p-6` or `p-8`). Rounded corners `rounded-lg`.
-- **Interaction**: `group cursor-pointer transition-all duration-200 hover:scale-[1.02]` (subtle scale). For colored backgrounds, add `hover:bg-[color]-100` for intensification. Icons within cards can have `group-hover:scale-110`.
-
-## Inputs
-
-- **Normal**: Gray 100 background (`bg-gray-100`). No border. Text Gray 900. `rounded-md`.
-- **Focus**: White background. `border-2` solid Primary. No focus ring glow, just the hard border.
-
-## Section Stylings
-
-- **Alternating Backgrounds**: Use White vs. Gray 100 (`#F3F4F6`) vs. Bold accent colors (Primary Blue, Emerald, Amber) to distinguish page sections. Sharp color transitions between sections.
-- **Dividers**: No thin line dividers between sections. Use whitespace or color blocks. Exception: FAQ uses thick `border-2` between items for structure.
-- **Background Decoration**: Use `absolute` positioned geometric shapes with low opacity or subtle gradients for visual interest. Examples: large circles (`rounded-full`), rotated squares, gradient overlays (`from-[color] to-transparent`).
-
-# Iconography
-
-- **Library**: `lucide-react`.
-- **Style**: Standard to bold stroke (2px to 2.5px for emphasis).
-- **Treatment**: Often placed inside a solid colored circle (white circle with colored icon like `bg-white text-blue-600`). Circle size `h-14 w-14` or `h-16 w-16`.
-- **Animation**: `transition-transform duration-200 group-hover:scale-110` for icons within cards. Simple color intensity shifts on hover.
-
-# Layout & Spacing
-
-- **Container**: `max-w-7xl`.
-- **Grid**: Rigid. 12-column base. Elements align perfectly.
-- **Spacing**: Comfortable but structured. Multiples of 4 (Tailwind default).
-- **Density**: Medium. Not too airy, not too dense. "Functional".
-
-# Motion
-
-- **Vibe**: "Digital", "Snappy", "Direct".
-- **Transitions**: `transition-all duration-200` for most interactions. `duration-300` for larger transformations.
-- **Hover**: Immediate visual feedback through:
-  - Scale transformations (`hover:scale-105` for buttons, `hover:scale-[1.02]` for cards)
-  - Color shifts (darkening or lightening)
-  - Color fills (outline buttons filling with color)
-  - Icon scaling within cards (`group-hover:scale-110`)
-
-# Accessibility
-
-- **Focus Rings**: Since we have no shadows, focus states must use high-contrast `ring-2 ring-offset-2 ring-blue-500` or similar solid outlines.
-- **Contrast**: Text on colored backgrounds must pass WCAG AA (e.g., White text on Blue 500 is okay, but check carefully with lighter accents).
-
-# Non-Genericness / "The Bold Factor"
-
-- **Avoid**: "Material Design" floating cards, generic Bootstrap layouts, subtle pastels everywhere.
-- **Emphasize**: The "Poster" look. Treat every section like a flat graphic poster with bold color blocking.
-- **Bold Choices Implemented**:
-  - **Large decorative geometric shapes** in hero background (circles, rotated squares with low opacity)
-  - **Vibrant full-section color blocks** (Blue hero, Emerald benefits, Amber CTA, Dark gray How It Works & Footer)
-  - **Dramatic scale effects** on pricing cards (popular tier starts larger and scales more)
-  - **Multi-color stat numbers** (each stat uses a different accent color)
-  - **Abstract geometric compositions** (overlapping shapes in hero illustration and benefits section)
-  - **Pronounced hover states** (scale, color intensification, fills)
-  - **Bold typography** with tight leading and strong weight contrast
-  - **Thick borders** (border-4 on outline buttons, border-2 on FAQ items)
-- **Visual Interest Without Depth**: Achieved through color contrast, geometric layering, and scale—never shadows or gradients.
-  `</design-system>`
+<design-system>
+# Design Philosophy
+**Flat Design** removes all artifice. It rejects the illusion of three-dimensionality—no drop shadows, no bevels, no realistic gradients, no textures. It relies entirely on **hierarchy through size, color, and typography**. This is not minimalism for the sake of being minimal; it's **confident reduction** that creates visual interest through pure form.
+
+The aesthetic is **digital-native but print-inspired**: crisp edges, solid blocks of color, and a strict reliance on the grid. It communicates clarity, efficiency, and modernity. It is not "boring" or "plain"; it is **boldly reductive and graphic**. Every element exists because it is necessary. Visual interest comes from the strategic interplay of solid shapes, vibrant (but controlled) color palettes, and dynamic scale.
+
+**Core Principles:**
+
+1. **Zero Artificial Depth**: The Z-axis does not exist. Everything is on the same plane. However, visual hierarchy is created through scale, color contrast, and strategic layering of flat shapes.
+2. **Color as Structure**: Bold background colors define sections and grouping, not lines or shadows. Color transitions are sharp, never blurred or gradual.
+3. **Typography as Interface**: Text size and weight bear the load of hierarchy. Typography is geometric, bold, and demands attention.
+4. **Geometric Purity**: Rectangles, circles, and squares dominate. Rounded corners are consistent and moderate. No organic blobs or complex shapes.
+5. **Interactive Feedback**: Hover states are pronounced through color shifts, scale transformations, and instant transitions—never through shadow depth.
+6. **Strategic Decoration**: Large, subtle geometric shapes in background create visual interest without breaking the flat aesthetic—think poster design.
+
+# Design Token System
+
+## Colors (Single Palette: Light Mode)
+
+A vibrant, confident palette that avoids muddy tones. High contrast is essential.
+
+- **Background**: `#FFFFFF` (Pure White) - The canvas.
+- **Foreground**: `#111827` (Gray 900) - Sharp, high-contrast text.
+- **Primary**: `#3B82F6` (Blue 500) - The "Action" color. Bright, standard digital blue.
+- **Secondary**: `#10B981` (Emerald 500) - Supporting accent.
+- **Accent**: `#F59E0B` (Amber 500) - For highlights/badges.
+- **Muted**: `#F3F4F6` (Gray 100) - Used for secondary backgrounds/blocks.
+- **Border**: `#E5E7EB` (Gray 200) - Used sparingly.
+
+## Typography
+
+**Font Family**: **'Outfit', sans-serif**.
+A geometric sans-serif that mirrors the shapes of the UI.
+
+- **Headings**: Bold (700) or Extra Bold (800). Tight letter-spacing (`-0.02em`).
+- **Body**: Regular (400). Readable, standard spacing.
+- **Labels/Buttons**: Medium (500) or SemiBold (600). Uppercase often used for labels (`tracking-wider`).
+
+## Radius & Shapes
+
+- **Radius**: `rounded-md` (6px) or `rounded-lg` (8px). Consistent throughout. Not fully rounded (pill) unless it's a tag.
+- **Borders**: generally `0px`. We use background colors to define edges. If a border is needed (e.g., inputs), `border-2` solid color.
+
+## Shadows & Effects
+
+- **Shadows**: `shadow-none`. **ABSOLUTELY NO BOX SHADOWS ON ELEMENTS.**
+- **Gradients**: Only subtle directional gradients for background decoration (e.g., `from-[#F3F4F6] to-transparent`). Never on buttons or cards. Never colorful or vibrant gradients.
+- **Blur**: None on elements. No backdrop-blur effects.
+- **Background Decoration**: Large geometric shapes with low opacity (`bg-white/5`) positioned absolutely for visual interest.
+
+# Component Stylings
+
+## Buttons
+
+- **Primary**: Solid Primary color background. White text. `rounded-md`. Height `h-14` to `h-16` for good touch targets. `transition-all duration-200 hover:scale-105` (scale transformation for feedback). Color shift on hover (e.g., `hover:bg-blue-600`). No shadow.
+- **Secondary**: Solid Muted background (Gray 100). Dark text. `hover:bg-gray-200` with scale effect.
+- **Outline**: `border-4` solid color (not border-2 for more boldness). Text matches border color. Transparent bg. `hover:bg-[color] hover:text-white` (fill effect on hover).
+
+## Cards
+
+- **Style**: "Color Block".
+- **Appearance**: Solid background color (White on Gray page, or soft color tints like `bg-blue-50`, `bg-green-50` for features). No shadow. No border. Padding is generous (`p-6` or `p-8`). Rounded corners `rounded-lg`.
+- **Interaction**: `group cursor-pointer transition-all duration-200 hover:scale-[1.02]` (subtle scale). For colored backgrounds, add `hover:bg-[color]-100` for intensification. Icons within cards can have `group-hover:scale-110`.
+
+## Inputs
+
+- **Normal**: Gray 100 background (`bg-gray-100`). No border. Text Gray 900. `rounded-md`.
+- **Focus**: White background. `border-2` solid Primary. No focus ring glow, just the hard border.
+
+## Section Stylings
+
+- **Alternating Backgrounds**: Use White vs. Gray 100 (`#F3F4F6`) vs. Bold accent colors (Primary Blue, Emerald, Amber) to distinguish page sections. Sharp color transitions between sections.
+- **Dividers**: No thin line dividers between sections. Use whitespace or color blocks. Exception: FAQ uses thick `border-2` between items for structure.
+- **Background Decoration**: Use `absolute` positioned geometric shapes with low opacity or subtle gradients for visual interest. Examples: large circles (`rounded-full`), rotated squares, gradient overlays (`from-[color] to-transparent`).
+
+# Iconography
+
+- **Library**: `lucide-react`.
+- **Style**: Standard to bold stroke (2px to 2.5px for emphasis).
+- **Treatment**: Often placed inside a solid colored circle (white circle with colored icon like `bg-white text-blue-600`). Circle size `h-14 w-14` or `h-16 w-16`.
+- **Animation**: `transition-transform duration-200 group-hover:scale-110` for icons within cards. Simple color intensity shifts on hover.
+
+# Layout & Spacing
+
+- **Container**: `max-w-7xl`.
+- **Grid**: Rigid. 12-column base. Elements align perfectly.
+- **Spacing**: Comfortable but structured. Multiples of 4 (Tailwind default).
+- **Density**: Medium. Not too airy, not too dense. "Functional".
+
+# Motion
+
+- **Vibe**: "Digital", "Snappy", "Direct".
+- **Transitions**: `transition-all duration-200` for most interactions. `duration-300` for larger transformations.
+- **Hover**: Immediate visual feedback through:
+  - Scale transformations (`hover:scale-105` for buttons, `hover:scale-[1.02]` for cards)
+  - Color shifts (darkening or lightening)
+  - Color fills (outline buttons filling with color)
+  - Icon scaling within cards (`group-hover:scale-110`)
+
+# Accessibility
+
+- **Focus Rings**: Since we have no shadows, focus states must use high-contrast `ring-2 ring-offset-2 ring-blue-500` or similar solid outlines.
+- **Contrast**: Text on colored backgrounds must pass WCAG AA (e.g., White text on Blue 500 is okay, but check carefully with lighter accents).
+
+# Non-Genericness / "The Bold Factor"
+
+- **Avoid**: "Material Design" floating cards, generic Bootstrap layouts, subtle pastels everywhere.
+- **Emphasize**: The "Poster" look. Treat every section like a flat graphic poster with bold color blocking.
+- **Bold Choices Implemented**:
+  - **Large decorative geometric shapes** in hero background (circles, rotated squares with low opacity)
+  - **Vibrant full-section color blocks** (Blue hero, Emerald benefits, Amber CTA, Dark gray How It Works & Footer)
+  - **Dramatic scale effects** on pricing cards (popular tier starts larger and scales more)
+  - **Multi-color stat numbers** (each stat uses a different accent color)
+  - **Abstract geometric compositions** (overlapping shapes in hero illustration and benefits section)
+  - **Pronounced hover states** (scale, color intensification, fills)
+  - **Bold typography** with tight leading and strong weight contrast
+  - **Thick borders** (border-4 on outline buttons, border-2 on FAQ items)
+- **Visual Interest Without Depth**: Achieved through color contrast, geometric layering, and scale—never shadows or gradients.
+  `</design-system>`

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

@@ -1,34 +1,3 @@
-<role>
-You are an expert Frontend Engineer, UI/UX Architect, and Specialist in the Microsoft Fluent 2 Design System. Your goal is to help the user integrate the Fluent 2 web standards into an existing codebase (or build new interfaces) that are visually precise, accessible, and engineered for scale.
-
-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 CSS, fluent-ui, shadcn/ui customization, etc.).
-- Understand the existing design tokens (does the user currently use CSS variables, Tailwind utility classes, or a CSS-in-JS solution?).
-- Review component architecture and state management.
-- Note constraints (bundle size, legacy browser support, existing branding limitations).
-
-Ask the user focused questions to understand their goals. Do they want:
-- To implement the **core Fluent 2 primitives** (Buttons, Inputs, Cards),
-- To apply the **Fluent visual style** (Mica/Acrylic effects, Elevation, Typography) to existing views, or
-- To build a fully featured dashboard or application using the strict **Fluent 2 Web pattern library**?
-
-Once you understand the context and scope, do the following:
-- Propose an implementation plan that focuses on:
-  - **Token Abstraction:** Mapping semantic tokens (e.g., `colorBrandBackground`) rather than raw hex values.
-  - **Accessibility:** Ensuring strict adherence to APCA/WCAG standards (a core tenet of Fluent).
-  - **Component Density:** Supporting Standard vs. Compact densities if relevant.
-  - **Motion:** Implementing the "Connected" motion physics unique to Fluent.
-- Write code that fits the user’s tech stack, prioritizing cleaner abstractions and maintainability.
-- Explain your choices, referencing Fluent 2 design principles (Global, Personal, Connected).
-
-Always aim to:
-- Preserve accessibility (Focus indicators are non-negotiable).
-- Maintain the "Rest, Hover, Pressed, Disabled" interaction model.
-- Use the correct radius and elevation scaling (Shadows imply depth, not just decoration).
-- Leave the codebase coherent and system-driven.
-
-</role>
-
 <design-system>
 # Design Style: Microsoft Fluent 2 (Web)
 

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

@@ -1,39 +1,3 @@
-<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>
 # Glassmorphism Design System
 

package/gsp/skills/gsp-style/styles/humanist-literary.md

@@ -1,31 +1,3 @@
-<role>
-You are an expert frontend engineer, UI/UX designer, and typography specialist. Your goal is to help the user integrate a "Humanist Literary" design system (resembling the Claude.ai interface) into their codebase.
-
-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, Framer Motion).
-- Understand existing design tokens (warm neutrals, serif typography usage, spacing, radii).
-- Review current component architecture.
-- Note any constraints (legacy CSS, bundle size, etc.).
-
-Ask the user focused questions:
-- Do they want to refactor a specific chat interface?
-- Are they building a documentation site or a blog?
-- Do they need the specific component interactions (like the pill selectors)?
-
-Once you understand context and scope:
-- Propose an implementation plan prioritizing:
-  - Global font configurations (Serif/Sans split).
-  - A variable-based color system for the subtle warm tones.
-  - Component compositions that favor text-rendering quality.
-- Write code that matches their patterns.
-- Explain your reasoning.
-
-Always aim to:
-- Preserve the "warm" and "calm" vibe of the aesthetic.
-- Ensure accessibility (contrast on warm backgrounds).
-- Make deliberate typographic choices.
-</role>
-
 <design-system>
 # Design Style: Humanist Literary (The "Claude" Aesthetic)