@harness-engineering/cli 1.6.1 → 1.7.0

package/dist/agents/skills/shared/design-knowledge/anti-patterns/layout.yaml

@@ -0,0 +1,109 @@
+description: "Layout anti-patterns — common mistakes in spacing, composition, and responsive design"
+
+patterns:
+  - name: "Inconsistent spacing values"
+    severity: warning
+    scope: all
+    detect:
+      method: "Check for margin/padding values that don't align with the spacing scale defined in tokens.json"
+      context: "Custom pixel values like 13px, 7px, 22px that don't match the 4px/8px grid or token scale"
+    reason: "Arbitrary spacing values create visual noise. Elements that are 'almost aligned' feel more wrong than elements that are clearly different."
+    instead: "Use spacing tokens from the design system scale (e.g., 4, 8, 12, 16, 24, 32, 48, 64). Every spacing value should reference a token."
+    strictness:
+      permissive: info
+      standard: warn
+      strict: warn
+
+  - name: "Content wider than 80ch for reading"
+    severity: warning
+    scope: web
+    detect:
+      method: "Check max-width of text content containers"
+      threshold: "> 80ch or > 720px without max-width constraint"
+      context: "Applies to prose/article content, not dashboards or data tables"
+    reason: "Lines longer than 65-80 characters are hard to track from the end of one line to the beginning of the next. Reading speed and comprehension drop significantly."
+    instead: "Set max-width: 65ch to 75ch for prose content. Use wider layouts only for data-dense views like dashboards and tables."
+    strictness:
+      permissive: info
+      standard: warn
+      strict: warn
+
+  - name: "Fixed pixel widths on containers"
+    severity: warning
+    scope: web
+    detect:
+      css_properties: ["width"]
+      values: ["px values on layout containers"]
+      exclude: ["max-width", "min-width", "icons", "avatars"]
+    reason: "Fixed-width containers break on screen sizes they weren't designed for. A 1200px container is unusable on a 1024px laptop."
+    instead: "Use relative units (%, rem, ch) or max-width constraints. Let containers be fluid within min/max bounds."
+    strictness:
+      permissive: info
+      standard: warn
+      strict: warn
+
+  - name: "Missing touch targets on mobile"
+    severity: error
+    scope: mobile
+    detect:
+      method: "Check interactive element dimensions"
+      threshold: "< 44x44px (iOS) or < 48x48dp (Android)"
+      context: "Buttons, links, toggles, checkboxes, and other tappable elements"
+    reason: "Small touch targets cause mis-taps, frustration, and accessibility failures. WCAG 2.5.8 requires minimum 24x24 CSS pixels, but platform guidelines recommend 44-48px."
+    instead: "Ensure all interactive elements have a minimum tappable area of 44x44px (iOS) or 48x48dp (Android). Use padding to increase hit area without changing visual size."
+    strictness:
+      permissive: info
+      standard: warn
+      strict: error
+
+  - name: "Horizontal scrolling on mobile"
+    severity: error
+    scope: all
+    detect:
+      method: "Check for content overflow causing horizontal scroll on viewports < 375px"
+      context: "Excludes intentional horizontal scroll components like carousels and code blocks"
+    reason: "Unintended horizontal scroll breaks the vertical reading flow and confuses users. It often indicates a layout bug."
+    instead: "Use overflow-x: hidden on the body, ensure all images have max-width: 100%, and test layouts at 320px minimum viewport width."
+    strictness:
+      permissive: info
+      standard: warn
+      strict: error
+
+  - name: "Z-index escalation"
+    severity: warning
+    scope: web
+    detect:
+      method: "Check for z-index values"
+      threshold: "> 100 or more than 10 distinct z-index values in the codebase"
+    reason: "Z-index wars create unpredictable stacking. When values escalate to 9999, every new overlay needs 99999, and the system becomes unmaintainable."
+    instead: "Define a z-index scale in tokens (e.g., base: 0, dropdown: 10, sticky: 20, modal: 30, toast: 40, tooltip: 50). Never use arbitrary values."
+    strictness:
+      permissive: info
+      standard: warn
+      strict: warn
+
+  - name: "Nested scroll containers"
+    severity: warning
+    scope: all
+    detect:
+      method: "Check for scrollable elements inside other scrollable elements"
+      context: "Especially problematic when both scroll in the same direction"
+    reason: "Nested scrolling creates confusing interaction — users don't know which container will scroll when they swipe. Trackpad momentum makes it worse."
+    instead: "Flatten the layout so only one element scrolls at a time. If nested scroll is unavoidable, ensure they scroll in different directions (e.g., vertical page + horizontal carousel)."
+    strictness:
+      permissive: info
+      standard: warn
+      strict: warn
+
+  - name: "Magic number breakpoints"
+    severity: info
+    scope: web
+    detect:
+      method: "Check for media query breakpoints that don't match standard device widths or design system breakpoints"
+      values: ["arbitrary values like 743px, 1023px, 867px"]
+    reason: "Non-standard breakpoints are hard to reason about and don't correspond to real device classes. They suggest the layout was 'fixed' at a specific size rather than designed responsively."
+    instead: "Use standard breakpoints (640, 768, 1024, 1280, 1536) or define custom breakpoints in the design system tokens and reuse them consistently."
+    strictness:
+      permissive: info
+      standard: info
+      strict: warn

package/dist/agents/skills/shared/design-knowledge/anti-patterns/motion.yaml

@@ -0,0 +1,109 @@
+description: "Motion and animation anti-patterns — common mistakes in transitions, animations, and interactive feedback"
+
+patterns:
+  - name: "Animation without prefers-reduced-motion"
+    severity: error
+    scope: all
+    detect:
+      method: "Check for CSS animations or transitions without a @media (prefers-reduced-motion: reduce) override"
+      context: "Applies to all non-essential animations. Essential animations (progress indicators, loading states) should reduce, not remove."
+    reason: "Motion can trigger vestibular disorders, migraines, and seizures. WCAG 2.3.3 requires respecting user motion preferences."
+    instead: "Wrap animations in a motion-safe media query or provide a prefers-reduced-motion: reduce override that disables or minimizes the animation."
+    strictness:
+      permissive: info
+      standard: warn
+      strict: error
+
+  - name: "Animations longer than 500ms"
+    severity: warning
+    scope: all
+    detect:
+      css_properties: ["animation-duration", "transition-duration"]
+      threshold: "> 500ms"
+      exclude: ["page transitions", "skeleton loaders", "progress bars"]
+    reason: "Long animations feel sluggish and block user interaction. Users perceive delays over 400ms as 'slow'. Interface animations should feel instant and responsive."
+    instead: "Keep UI transitions between 150-300ms. Use 200ms as the default. Reserve longer durations (300-500ms) for complex multi-element orchestrations."
+    strictness:
+      permissive: info
+      standard: warn
+      strict: warn
+
+  - name: "Linear easing on UI transitions"
+    severity: info
+    scope: all
+    detect:
+      css_properties: ["transition-timing-function", "animation-timing-function"]
+      values: ["linear"]
+      context: "Flagged for UI element transitions, not progress bars or loading animations"
+    reason: "Linear motion feels mechanical and unnatural. Real objects accelerate and decelerate — interfaces should too."
+    instead: "Use ease-out for entrances (elements arriving), ease-in for exits (elements leaving), and ease-in-out for state changes. Default: cubic-bezier(0.4, 0, 0.2, 1)."
+    strictness:
+      permissive: info
+      standard: info
+      strict: warn
+
+  - name: "Auto-playing animation loops"
+    severity: warning
+    scope: all
+    detect:
+      css_properties: ["animation-iteration-count"]
+      values: ["infinite"]
+      context: "Excludes loading spinners and progress indicators that are temporary"
+    reason: "Infinite animation loops are distracting, increase CPU/GPU usage, and can trigger motion sensitivity issues. They compete with content for attention."
+    instead: "Play animations once on entrance, or limit to 3 iterations. If continuous animation is needed, provide a pause control and respect prefers-reduced-motion."
+    strictness:
+      permissive: info
+      standard: warn
+      strict: error
+
+  - name: "Scroll-jacking"
+    severity: error
+    scope: web
+    detect:
+      method: "Check for JavaScript that overrides native scroll behavior (custom scroll speed, snap-to-section, parallax scroll hijacking)"
+      exclude: ["scroll-snap-type CSS (native)", "smooth-scroll for anchor links"]
+    reason: "Overriding native scroll breaks user expectations, disables accessibility features (keyboard scroll, screen reader navigation), and creates motion sickness. It is the single most complained-about UX pattern."
+    instead: "Use native CSS scroll-snap for section snapping. For parallax, use CSS transform with will-change, not scroll event listeners. Never change scroll speed or direction."
+    strictness:
+      permissive: warn
+      standard: error
+      strict: error
+
+  - name: "Flash or strobe effects"
+    severity: error
+    scope: all
+    detect:
+      method: "Check for elements that flash more than 3 times per second"
+      threshold: "> 3 flashes per second"
+    reason: "Flashing content can cause seizures in people with photosensitive epilepsy. WCAG 2.3.1 requires no more than 3 flashes per second."
+    instead: "Avoid flashing entirely. If attention is needed, use a subtle pulse (opacity 0.8-1.0) at no more than 2 cycles per second."
+    strictness:
+      permissive: warn
+      standard: error
+      strict: error
+
+  - name: "Entrance animations on above-the-fold content"
+    severity: warning
+    scope: web
+    detect:
+      method: "Check for fade-in, slide-in, or scale animations on elements visible in the initial viewport"
+      context: "Hero sections, navigation, primary CTAs"
+    reason: "Animating content that should be immediately visible delays the user's ability to orient and act. It adds perceived load time to an already-loaded page."
+    instead: "Show above-the-fold content immediately. Reserve entrance animations for below-the-fold content revealed on scroll (intersection observer pattern)."
+    strictness:
+      permissive: info
+      standard: warn
+      strict: warn
+
+  - name: "Transition on color-scheme change"
+    severity: info
+    scope: web
+    detect:
+      method: "Check for transitions applied during dark/light mode toggle that affect all elements"
+      context: "Global transition: all on :root or body during theme switch"
+    reason: "Transitioning every element's colors during theme change causes a jarring ripple effect and high paint cost. Individual element transitions compound into visual chaos."
+    instead: "Apply transition only to background-color and color on specific containers (body, main sections), not globally. Or use instant switch with no transition."
+    strictness:
+      permissive: info
+      standard: info
+      strict: info

package/dist/agents/skills/shared/design-knowledge/anti-patterns/typography.yaml

@@ -0,0 +1,112 @@
+description: "Typography anti-patterns — common mistakes that degrade readability, hierarchy, and brand consistency"
+
+patterns:
+  - name: "System font in user-facing UI"
+    severity: warning
+    scope: all
+    detect:
+      css_properties: ["font-family"]
+      values: ["system-ui", "-apple-system", "BlinkMacSystemFont", "Segoe UI", "sans-serif", "serif", "monospace"]
+      context: "Only flagged when used as the sole font-family without a branded font preceding it in the stack"
+    reason: "System fonts vary across platforms, creating inconsistent brand identity. Users on Windows see Segoe UI while macOS users see SF Pro — the product looks different on every device."
+    instead: "Declare a branded font first in the stack with system fonts as fallbacks: `font-family: 'Inter', system-ui, sans-serif`"
+    strictness:
+      permissive: info
+      standard: warn
+      strict: warn
+
+  - name: "More than 3 font families on a single page"
+    severity: warning
+    scope: all
+    detect:
+      method: "Count distinct font-family values in rendered page"
+      threshold: 3
+    reason: "Multiple typefaces create visual noise and weaken typographic hierarchy. Each additional font competes for attention."
+    instead: "Use a single font family with weight/size variation for hierarchy, or a deliberate display + body pairing (max 2-3 families including monospace)."
+    strictness:
+      permissive: info
+      standard: warn
+      strict: warn
+
+  - name: "Body text below 14px / 0.875rem"
+    severity: error
+    scope: all
+    detect:
+      css_properties: ["font-size"]
+      threshold: "< 14px or < 0.875rem"
+      context: "Applies to body/paragraph text, not labels or captions"
+    reason: "Text below 14px is difficult to read on mobile devices and fails accessibility guidelines for users with low vision."
+    instead: "Use 16px (1rem) as the body text baseline. Use 14px only for secondary labels and metadata."
+    strictness:
+      permissive: info
+      standard: warn
+      strict: error
+
+  - name: "Line height below 1.4 for body text"
+    severity: warning
+    scope: all
+    detect:
+      css_properties: ["line-height"]
+      threshold: "< 1.4"
+      context: "Applies to body/paragraph text with font-size >= 14px"
+    reason: "Tight line height reduces readability, especially for longer passages. Users with dyslexia or cognitive disabilities are disproportionately affected."
+    instead: "Use line-height 1.5-1.6 for body text. Display headings can use tighter spacing (1.1-1.2)."
+    strictness:
+      permissive: info
+      standard: warn
+      strict: warn
+
+  - name: "All-caps body text"
+    severity: warning
+    scope: all
+    detect:
+      css_properties: ["text-transform"]
+      values: ["uppercase"]
+      context: "Flagged when applied to paragraphs or text blocks longer than 50 characters"
+    reason: "ALL CAPS reduces reading speed by 10-20% because word shapes become uniform rectangles. Acceptable for short labels and headings, not for body content."
+    instead: "Reserve text-transform: uppercase for buttons, labels, and section headers under 30 characters."
+    strictness:
+      permissive: info
+      standard: warn
+      strict: warn
+
+  - name: "Insufficient heading size contrast"
+    severity: warning
+    scope: all
+    detect:
+      method: "Compare h1-h6 font sizes — flag when adjacent heading levels differ by less than 20%"
+      threshold: "< 1.2x ratio between adjacent levels"
+    reason: "When heading sizes are too similar, the visual hierarchy collapses. Users cannot scan the page structure at a glance."
+    instead: "Use a consistent type scale ratio (1.2 minor third, 1.25 major third, or 1.333 perfect fourth) to ensure clear size differentiation."
+    strictness:
+      permissive: info
+      standard: warn
+      strict: warn
+
+  - name: "Justified text without hyphenation"
+    severity: info
+    scope: web
+    detect:
+      css_properties: ["text-align"]
+      values: ["justify"]
+      absent: ["hyphens: auto"]
+    reason: "Justified text without hyphenation creates uneven word spacing ('rivers of white') that disrupts reading flow, especially in narrow columns."
+    instead: "Use text-align: left for most content. If justified text is required, enable CSS hyphens: auto and ensure column width is at least 45 characters."
+    strictness:
+      permissive: info
+      standard: info
+      strict: warn
+
+  - name: "Font weight below 400 for body text"
+    severity: warning
+    scope: all
+    detect:
+      css_properties: ["font-weight"]
+      threshold: "< 400"
+      context: "Applies to body/paragraph text"
+    reason: "Light and thin font weights (100-300) reduce legibility on low-resolution screens and for users with vision impairments."
+    instead: "Use font-weight 400 (regular) as the minimum for body text. Light weights are acceptable only for large display text (24px+)."
+    strictness:
+      permissive: info
+      standard: warn
+      strict: error

package/dist/agents/skills/shared/design-knowledge/industries/creative.yaml

@@ -0,0 +1,80 @@
+name: "Creative"
+description: "Expressive, editorial design with bold typography, intentional whitespace, and distinctive visual identity"
+
+styles:
+  primary: "Editorial layouts with strong typographic hierarchy and intentional use of whitespace as a design element"
+  secondary: "Portfolio-driven presentation with immersive imagery, grid-breaking layouts, and art-directed content"
+  avoid: ["Generic stock photography that undermines creative credibility", "Template-feeling layouts that contradict the creative message", "Overly uniform grids that feel corporate rather than curated", "Decorative effects without purpose (gratuitous parallax, unnecessary animation)"]
+
+palette:
+  primary:
+    - name: "Charcoal"
+      hex: "#1a1a1a"
+      usage: "Primary text, editorial headlines, strong contrast backgrounds"
+    - name: "Off-Black"
+      hex: "#2d2d2d"
+      usage: "Secondary surfaces, navigation backgrounds, card overlays"
+    - name: "Warm White"
+      hex: "#faf8f5"
+      usage: "Page backgrounds, content surfaces, breathing space"
+  accent:
+    - name: "Coral 500"
+      hex: "#f97066"
+      usage: "Primary accent, CTAs, highlighted portfolio items"
+    - name: "Electric Blue"
+      hex: "#3b82f6"
+      usage: "Links, interactive elements, secondary accent"
+    - name: "Saffron"
+      hex: "#e8a838"
+      usage: "Awards, featured work, premium tier indicators"
+  neutral:
+    - name: "Stone 800"
+      hex: "#292524"
+      usage: "Body text, primary readable content"
+    - name: "Stone 400"
+      hex: "#a8a29e"
+      usage: "Captions, metadata, subtle labels"
+    - name: "Stone 100"
+      hex: "#f5f5f4"
+      usage: "Section dividers, subtle background shifts"
+    - name: "White"
+      hex: "#ffffff"
+      usage: "Image framing, overlay text backgrounds, modal surfaces"
+  semantic:
+    success: "#22c55e"
+    warning: "#f59e0b"
+    error: "#ef4444"
+    info: "#6366f1"
+
+typography:
+  display:
+    families: ["Instrument Serif", "Playfair Display", "Fraunces"]
+    weights: [400, 700, 900]
+    characteristics: "Expressive serif typefaces with distinctive character for headlines. High contrast between thick and thin strokes creates visual drama at large sizes."
+  body:
+    families: ["Inter", "Geist", "DM Sans"]
+    weights: [400, 500]
+    characteristics: "Clean sans-serif paired with serif display creates editorial contrast. Body type should recede, letting display type and imagery lead."
+  mono:
+    families: ["Geist Mono", "Space Mono"]
+    usage: "Code examples in case studies, technical specifications, date stamps on editorial content"
+
+anti_patterns:
+  - pattern: "Using generic stock photography on a creative portfolio or agency site"
+    reason: "Stock imagery directly contradicts the message of original creative work; it signals inauthenticity"
+    instead: "Use original photography, custom illustrations, or carefully art-directed imagery that reflects actual creative capability"
+  - pattern: "Uniform grid layouts for all content types"
+    reason: "Creative sites should demonstrate design range; predictable grids feel template-driven and corporate"
+    instead: "Vary layout rhythm with full-bleed images, asymmetric grids, and intentional whitespace; let content dictate layout"
+  - pattern: "Autoplay background video on every page"
+    reason: "Overuse dilutes impact, increases load time, and creates accessibility issues; it becomes wallpaper rather than storytelling"
+    instead: "Use video intentionally for hero moments or case study intros; provide play controls and poster frames"
+  - pattern: "Cramming every project into the portfolio with equal weight"
+    reason: "Undifferentiated project lists signal lack of editorial judgment; the portfolio itself is a design artifact"
+    instead: "Curate 8-12 best projects with clear hierarchy; feature 2-3 as hero case studies with deeper storytelling"
+  - pattern: "Tiny body text to appear more 'design-forward'"
+    reason: "Sacrificing readability for aesthetics alienates users and fails accessibility standards"
+    instead: "Use generous body text (16px+) and let typographic hierarchy, spacing, and weight create sophistication"
+
+examples:
+  reference_sites: ["pentagram.com", "itsnicethat.com", "awwwards.com", "siteinspire.com", "creativeboom.com"]

package/dist/agents/skills/shared/design-knowledge/industries/ecommerce.yaml

@@ -0,0 +1,80 @@
+name: "E-Commerce"
+description: "Conversion-focused design with bold CTAs, clear product hierarchy, and friction-minimized purchase flows"
+
+styles:
+  primary: "Conversion-optimized layouts with clear visual hierarchy driving users toward purchase decisions"
+  secondary: "Editorial product storytelling with immersive imagery and aspirational lifestyle positioning"
+  avoid: ["Overwhelming product grids without filtering or visual breathing room", "Hidden or ambiguous pricing that erodes buyer confidence", "Aggressive pop-ups that interrupt the shopping flow", "Cluttered product pages with competing calls-to-action"]
+
+palette:
+  primary:
+    - name: "Orange 600"
+      hex: "#ea580c"
+      usage: "Primary CTAs (Add to Cart, Buy Now), urgency indicators"
+    - name: "Orange 700"
+      hex: "#c2410c"
+      usage: "Hover states on primary actions, active button states"
+    - name: "Orange 50"
+      hex: "#fff7ed"
+      usage: "Sale banners, promotional section backgrounds"
+  accent:
+    - name: "Rose 500"
+      hex: "#f43f5e"
+      usage: "Sale badges, discount indicators, wishlist hearts"
+    - name: "Amber 400"
+      hex: "#fbbf24"
+      usage: "Star ratings, featured product highlights, best-seller badges"
+    - name: "Emerald 500"
+      hex: "#10b981"
+      usage: "In-stock indicators, free shipping badges, trust seals"
+  neutral:
+    - name: "Zinc 900"
+      hex: "#18181b"
+      usage: "Product titles, prices, primary text"
+    - name: "Zinc 500"
+      hex: "#71717a"
+      usage: "Product descriptions, secondary information, metadata"
+    - name: "Zinc 100"
+      hex: "#f4f4f5"
+      usage: "Category backgrounds, filter panels, page surfaces"
+    - name: "White"
+      hex: "#ffffff"
+      usage: "Product cards, checkout forms, content backgrounds"
+  semantic:
+    success: "#16a34a"
+    warning: "#eab308"
+    error: "#dc2626"
+    info: "#0284c7"
+
+typography:
+  display:
+    families: ["DM Sans", "Plus Jakarta Sans"]
+    weights: [600, 700, 800]
+    characteristics: "Bold geometric sans-serifs that command attention for hero sections, sale headers, and category titles. Strong at large sizes."
+  body:
+    families: ["Inter", "DM Sans", "system-ui"]
+    weights: [400, 500]
+    characteristics: "Highly legible at small sizes for product specs, reviews, and policy text. Clear distinction between regular and medium weights for scannability."
+  mono:
+    families: ["JetBrains Mono", "SF Mono"]
+    usage: "Order numbers, tracking codes, promo codes, SKU references"
+
+anti_patterns:
+  - pattern: "Hiding the total price until checkout"
+    reason: "Price surprises at checkout are the #1 cause of cart abandonment (48% of users cite unexpected costs)"
+    instead: "Show running total including estimated tax and shipping on the cart page; surface free-shipping thresholds early"
+  - pattern: "Requiring account creation before purchase"
+    reason: "Forced registration causes 24% of shoppers to abandon; it adds friction at the highest-intent moment"
+    instead: "Offer guest checkout as the default path; invite account creation after purchase with order-tracking incentive"
+  - pattern: "Product images that don't zoom or show only one angle"
+    reason: "Users cannot evaluate products they can't inspect; lack of imagery increases return rates"
+    instead: "Provide 4+ images per product with zoom, multiple angles, lifestyle context, and size reference"
+  - pattern: "Infinite scroll on product listing pages without pagination controls"
+    reason: "Users lose their place, cannot bookmark results, and experience scroll fatigue; footer content becomes unreachable"
+    instead: "Use paginated results with 'Load more' option; preserve scroll position on back navigation"
+  - pattern: "Using carousel sliders for critical product information"
+    reason: "Users interact with fewer than 1% of carousel slides past the first; important products get buried"
+    instead: "Use static grids or curated featured sections; if using carousels, show partial next-slide indicators"
+
+examples:
+  reference_sites: ["shopify.com/themes", "everlane.com", "apple.com/shop", "allbirds.com", "glossier.com"]

package/dist/agents/skills/shared/design-knowledge/industries/emerging-tech.yaml

@@ -0,0 +1,83 @@
+name: "Emerging Tech"
+description: "Innovative, forward-looking design with dark themes, accent neons, and geometric precision for cutting-edge technology products"
+
+styles:
+  primary: "Dark-first interfaces with precise geometric layouts, neon accents, and futuristic visual language"
+  secondary: "Data-rich dashboards with real-time visualization, 3D elements, and immersive product experiences"
+  avoid: ["Retro-futurism cliches (chrome text, star fields, 80s synthwave aesthetics)", "Inaccessible contrast ratios from neon-on-dark combinations", "Overuse of 3D elements that slow performance and add no information", "Gratuitous particle effects and WebGL demos that distract from product value"]
+
+palette:
+  primary:
+    - name: "Deep Space"
+      hex: "#0a0a0f"
+      usage: "Primary background, immersive dark surfaces"
+    - name: "Dark Surface"
+      hex: "#141420"
+      usage: "Card backgrounds, elevated surfaces, modal backgrounds"
+    - name: "Midnight Blue"
+      hex: "#1a1a2e"
+      usage: "Secondary surfaces, sidebar backgrounds, section dividers"
+  accent:
+    - name: "Electric Cyan"
+      hex: "#00d4ff"
+      usage: "Primary interactive elements, data visualization highlights, key metrics"
+    - name: "Neon Green"
+      hex: "#00ff88"
+      usage: "Success states, active indicators, real-time status"
+    - name: "Electric Purple"
+      hex: "#a855f7"
+      usage: "Premium features, AI/ML indicators, secondary accent"
+    - name: "Hot Pink"
+      hex: "#ec4899"
+      usage: "Alerts, critical notifications, tertiary accent"
+  neutral:
+    - name: "Light Gray"
+      hex: "#e2e8f0"
+      usage: "Primary text on dark backgrounds"
+    - name: "Cool Gray"
+      hex: "#94a3b8"
+      usage: "Secondary text, labels, descriptions"
+    - name: "Dark Gray"
+      hex: "#334155"
+      usage: "Borders, dividers, inactive states"
+    - name: "Near Black"
+      hex: "#0f172a"
+      usage: "Deepest surface level, page background in ultra-dark mode"
+  semantic:
+    success: "#00ff88"
+    warning: "#fbbf24"
+    error: "#ef4444"
+    info: "#00d4ff"
+
+typography:
+  display:
+    families: ["Space Grotesk", "Outfit"]
+    weights: [500, 700]
+    characteristics: "Geometric sans-serifs with distinctive character at large sizes. Slightly technical feel without being cold -- conveys precision and innovation."
+  body:
+    families: ["Inter", "Space Grotesk", "system-ui"]
+    weights: [400, 500]
+    characteristics: "Clean and highly legible on dark backgrounds. Slightly increased letter-spacing (0.01em) for improved readability on dark surfaces."
+  mono:
+    families: ["JetBrains Mono", "Fira Code", "Geist Mono"]
+    usage: "Terminal output, API responses, blockchain addresses, configuration code, real-time data streams"
+
+anti_patterns:
+  - pattern: "Neon text on dark background without sufficient contrast ratio"
+    reason: "Many neon colors (cyan, green, pink) on near-black fail WCAG AA (4.5:1); vibrant does not mean readable"
+    instead: "Test all neon accent text against backgrounds; use brighter tints for text (e.g., lighten cyan to #67e8f9 for readability) or increase font size"
+  - pattern: "Using 3D renders and WebGL for purely decorative purposes"
+    reason: "Heavy 3D adds seconds to load time, drains mobile batteries, and often communicates nothing about the product"
+    instead: "Use 3D only when it serves understanding (product visualization, spatial data); offer 2D fallbacks for performance"
+  - pattern: "Retro-futurism aesthetics (chrome text, grid floors, star fields)"
+    reason: "Dated sci-fi visuals signal that the team's vision of the future is stuck in the past; it undermines credibility for genuinely novel technology"
+    instead: "Reference current cutting-edge design (spatial computing UI, ambient interfaces, adaptive layouts) rather than pop-culture futurism"
+  - pattern: "Auto-playing demos that consume resources without user initiation"
+    reason: "Real-time visualizations and simulations consume CPU/GPU; auto-playing them causes fan noise, battery drain, and poor first impressions"
+    instead: "Show a compelling static frame with a clear 'Run demo' CTA; respect the user's device and battery"
+  - pattern: "Dark mode only with no light mode option"
+    reason: "Some users have visual conditions that make dark interfaces harder to read; accessibility requires options"
+    instead: "Offer both dark and light modes; dark can be default but light must be available and well-designed"
+
+examples:
+  reference_sites: ["openai.com", "vercel.com", "linear.app", "github.com/features/copilot", "replit.com"]

package/dist/agents/skills/shared/design-knowledge/industries/fintech.yaml

@@ -0,0 +1,80 @@
+name: "Fintech"
+description: "Trust-driven, precision-focused design conveying security, reliability, and financial expertise"
+
+styles:
+  primary: "Conservative elegance with precise data presentation and trust-building visual cues"
+  secondary: "Institutional authority balanced with modern approachability for consumer-facing products"
+  avoid: ["Playful or whimsical typography that undermines financial credibility", "Bright gradients or neon accents that feel unserious", "Overly complex data visualizations without progressive disclosure", "Gamification patterns that trivialize financial decisions"]
+
+palette:
+  primary:
+    - name: "Navy 800"
+      hex: "#1e3a5f"
+      usage: "Primary brand, navigation, headers conveying institutional trust"
+    - name: "Navy 900"
+      hex: "#0f2440"
+      usage: "Dark mode surfaces, footer backgrounds, high-emphasis text"
+    - name: "Navy 100"
+      hex: "#dbeafe"
+      usage: "Selected states, info banners, subtle highlights"
+  accent:
+    - name: "Emerald 600"
+      hex: "#059669"
+      usage: "Positive financial indicators, gains, completed transactions"
+    - name: "Teal 500"
+      hex: "#14b8a6"
+      usage: "Secondary actions, chart accents, interactive elements"
+    - name: "Gold 500"
+      hex: "#d4a853"
+      usage: "Premium tier indicators, high-value account badges"
+  neutral:
+    - name: "Gray 900"
+      hex: "#111827"
+      usage: "Primary text, financial figures, account balances"
+    - name: "Gray 600"
+      hex: "#4b5563"
+      usage: "Secondary text, transaction descriptions, timestamps"
+    - name: "Gray 100"
+      hex: "#f3f4f6"
+      usage: "Page backgrounds, table alternating rows"
+    - name: "White"
+      hex: "#ffffff"
+      usage: "Card surfaces, input fields, modal backgrounds"
+  semantic:
+    success: "#059669"
+    warning: "#d97706"
+    error: "#dc2626"
+    info: "#2563eb"
+
+typography:
+  display:
+    families: ["Inter", "SF Pro Display"]
+    weights: [500, 600, 700]
+    characteristics: "Clean sans-serifs with excellent tabular figures. Numeral clarity is paramount -- every digit must be unambiguous at any size."
+  body:
+    families: ["Inter", "SF Pro Text", "system-ui"]
+    weights: [400, 500]
+    characteristics: "High legibility at small sizes for transaction lists and account details. Tabular lining figures for aligned number columns."
+  mono:
+    families: ["SF Mono", "JetBrains Mono", "Fira Code"]
+    usage: "Account numbers, routing numbers, transaction IDs, API references, and any numerical data requiring exact alignment"
+
+anti_patterns:
+  - pattern: "Displaying financial amounts without proper locale formatting"
+    reason: "Misformatted currency (e.g., missing commas, wrong decimal separator) erodes trust and can cause costly user errors"
+    instead: "Use Intl.NumberFormat with the user's locale and currency; always show currency symbol and appropriate decimal places"
+  - pattern: "Using red and green as the only differentiator for gains and losses"
+    reason: "8% of men and 0.5% of women have red-green color blindness; financial data must be accessible to all users"
+    instead: "Pair color with icons (up/down arrows), text labels (+/-), or positional cues; never rely on color alone"
+  - pattern: "Auto-refreshing account balances without user consent"
+    reason: "Unexpected balance changes cause anxiety; users viewing their balance are in a sensitive emotional state"
+    instead: "Show a 'Balance updated' indicator with timestamp; let users pull-to-refresh or tap to update"
+  - pattern: "Placing transfer/send buttons where they can be accidentally tapped"
+    reason: "Accidental financial transactions create support burden and erode trust; money movement must be intentional"
+    instead: "Require confirmation for all financial actions; use adequate spacing and distinct visual treatment for destructive actions"
+  - pattern: "Hiding fees or exchange rates behind expandable sections"
+    reason: "Perceived fee hiding destroys trust and may violate financial transparency regulations"
+    instead: "Show total cost including all fees upfront; use clear breakdowns before any confirmation step"
+
+examples:
+  reference_sites: ["mercury.com", "wise.com", "stripe.com", "robinhood.com", "brex.com"]