arggon-harness 0.1.0

package/src/templates/design-hifi.yaml

@@ -0,0 +1,580 @@
+# High-Fidelity Design Template
+#
+# Instructions:
+# - Define the full design system specification
+# - Use hex format (#RRGGBB) for all color values
+# - Define a type scale covering h1-h6, body, body-small, caption
+# - Include component variants with interactive states
+# - Remove comment lines (starting with #) before saving
+# - Keep the structure intact
+
+id: <change-name>
+schema: <schema-name>
+
+agent:
+  context_files:
+    - <relevant files>
+  affected_paths:
+    - <paths affected>
+
+body:
+  # ── Color Palette ────────────────────────────────────────────────
+  # Defines the complete color system. Use hex values (#RRGGBB).
+  # Each color group has a base value plus interactive states.
+  color_palette:
+    primary:
+      base: "#3B82F6"
+      hover: "#2563EB"
+      active: "#1D4ED8"
+      disabled: "#93C5FD"
+      contrast: "#FFFFFF"
+    secondary:
+      base: "#8B5CF6"
+      hover: "#7C3AED"
+      active: "#6D28D9"
+      disabled: "#C4B5FD"
+      contrast: "#FFFFFF"
+    accent:
+      base: "#F59E0B"
+      hover: "#D97706"
+      active: "#B45309"
+      disabled: "#FCD34D"
+      contrast: "#1F2937"
+    neutral:
+      base: "#6B7280"
+      hover: "#4B5563"
+      active: "#374151"
+      disabled: "#D1D5DB"
+      contrast: "#FFFFFF"
+    semantic:
+      success: "#10B981"
+      warning: "#F59E0B"
+      error: "#EF4444"
+      info: "#3B82F6"
+    surfaces:
+      background: "#F9FAFB"
+      foreground: "#111827"
+      card: "#FFFFFF"
+      border: "#E5E7EB"
+      muted: "#F3F4F6"
+
+  # ── Typography ────────────────────────────────────────────────────
+  # Define font families and a modular type scale.
+  # Families: list font stacks for heading, body, and monospace roles.
+  # Scale: exhaustive list of every type size used in the system.
+  typography:
+    families:
+      - name: inter
+        stack: "'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif"
+        role: heading
+      - name: inter
+        stack: "'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif"
+        role: body
+      - name: jetbrains-mono
+        stack: "'JetBrains Mono', 'Fira Code', 'Cascadia Code', monospace"
+        role: monospace
+
+    scale:
+      - name: h1
+        size: "2.5rem"
+        weight: 700
+        line_height: 1.2
+        letter_spacing: "-0.025em"
+        role: h1
+      - name: h2
+        size: "2rem"
+        weight: 700
+        line_height: 1.25
+        letter_spacing: "-0.02em"
+        role: h2
+      - name: h3
+        size: "1.5rem"
+        weight: 600
+        line_height: 1.3
+        letter_spacing: "-0.015em"
+        role: h3
+      - name: h4
+        size: "1.25rem"
+        weight: 600
+        line_height: 1.35
+        letter_spacing: "-0.01em"
+        role: h4
+      - name: h5
+        size: "1.125rem"
+        weight: 600
+        line_height: 1.4
+        letter_spacing: "0em"
+        role: h5
+      - name: h6
+        size: "1rem"
+        weight: 600
+        line_height: 1.45
+        letter_spacing: "0em"
+        role: h6
+      - name: body
+        size: "1rem"
+        weight: 400
+        line_height: 1.6
+        letter_spacing: "0em"
+        role: body
+      - name: body-small
+        size: "0.875rem"
+        weight: 400
+        line_height: 1.5
+        letter_spacing: "0em"
+        role: body-small
+      - name: caption
+        size: "0.75rem"
+        weight: 400
+        line_height: 1.4
+        letter_spacing: "0.025em"
+        role: caption
+
+  # ── Spacing System ────────────────────────────────────────────────
+  # base_unit: the atomic spacing unit in pixels
+  # scale: array of multipliers applied to base_unit (0 = 0px, 1 = base_unit, etc.)
+  spacing:
+    base_unit: 4
+    scale:
+      - 0
+      - 1
+      - 2
+      - 3
+      - 4
+      - 6
+      - 8
+      - 12
+      - 16
+      - 24
+      - 32
+      - 48
+      - 64
+
+  # ── Component Library ────────────────────────────────────────────
+  # Define every interactive component with its variants and states.
+  # Each component variant lists visual properties and per-state overrides.
+  component_library:
+    button:
+      - name: primary
+        description: |
+          Primary call-to-action button. Used for the most important
+          action on a page or section.
+        properties:
+          background: "{color_palette.primary.base}"
+          color: "{color_palette.primary.contrast}"
+          border: none
+          border_radius: "0.375rem"
+          padding: "0.5rem 1rem"
+          font_size: "0.875rem"
+          font_weight: 500
+          cursor: pointer
+          transition: "all 150ms ease"
+        states:
+          - name: default
+            properties:
+              background: "{color_palette.primary.base}"
+          - name: hover
+            properties:
+              background: "{color_palette.primary.hover}"
+              box_shadow: "0 1px 3px rgba(0,0,0,0.15)"
+          - name: active
+            properties:
+              background: "{color_palette.primary.active}"
+              transform: "translateY(0.5px)"
+          - name: disabled
+            properties:
+              background: "{color_palette.primary.disabled}"
+              cursor: not-allowed
+              opacity: 0.6
+          - name: focus
+            properties:
+              outline: "2px solid {color_palette.primary.base}"
+              outline_offset: 2
+
+      - name: secondary
+        description: |
+          Secondary action button. Used for supporting actions
+          that are less prominent than primary.
+        properties:
+          background: "{color_palette.secondary.base}"
+          color: "{color_palette.secondary.contrast}"
+          border: none
+          border_radius: "0.375rem"
+          padding: "0.5rem 1rem"
+          font_size: "0.875rem"
+          font_weight: 500
+          cursor: pointer
+          transition: "all 150ms ease"
+        states:
+          - name: default
+            properties:
+              background: "{color_palette.secondary.base}"
+          - name: hover
+            properties:
+              background: "{color_palette.secondary.hover}"
+              box_shadow: "0 1px 3px rgba(0,0,0,0.15)"
+          - name: active
+            properties:
+              background: "{color_palette.secondary.active}"
+              transform: "translateY(0.5px)"
+          - name: disabled
+            properties:
+              background: "{color_palette.secondary.disabled}"
+              cursor: not-allowed
+              opacity: 0.6
+          - name: focus
+            properties:
+              outline: "2px solid {color_palette.secondary.base}"
+              outline_offset: 2
+
+      - name: ghost
+        description: |
+          Ghost button. Minimal visual weight; used for tertiary
+          actions, toolbar items, or close buttons.
+        properties:
+          background: transparent
+          color: "{color_palette.neutral.base}"
+          border: none
+          border_radius: "0.375rem"
+          padding: "0.5rem 1rem"
+          font_size: "0.875rem"
+          font_weight: 500
+          cursor: pointer
+          transition: "all 150ms ease"
+        states:
+          - name: default
+            properties:
+              background: transparent
+          - name: hover
+            properties:
+              background: "{color_palette.surfaces.muted}"
+          - name: active
+            properties:
+              background: "{color_palette.surfaces.border}"
+          - name: disabled
+            properties:
+              opacity: 0.4
+              cursor: not-allowed
+          - name: focus
+            properties:
+              outline: "2px solid {color_palette.primary.base}"
+              outline_offset: 2
+
+      - name: outline
+        description: |
+          Outline button. Borders but no background fill.
+          Used for secondary CTAs alongside primary buttons.
+        properties:
+          background: transparent
+          color: "{color_palette.primary.base}"
+          border: "1px solid {color_palette.primary.base}"
+          border_radius: "0.375rem"
+          padding: "0.5rem 1rem"
+          font_size: "0.875rem"
+          font_weight: 500
+          cursor: pointer
+          transition: "all 150ms ease"
+        states:
+          - name: default
+            properties:
+              background: transparent
+          - name: hover
+            properties:
+              background: "{color_palette.primary.base}"
+              color: "{color_palette.primary.contrast}"
+          - name: active
+            properties:
+              background: "{color_palette.primary.active}"
+              color: "{color_palette.primary.contrast}"
+          - name: disabled
+            properties:
+              opacity: 0.4
+              cursor: not-allowed
+              border_color: "{color_palette.neutral.disabled}"
+          - name: focus
+            properties:
+              outline: "2px solid {color_palette.primary.base}"
+              outline_offset: 2
+
+    card:
+      - name: default
+        description: |
+          Standard content card with rounded corners and shadow.
+          Used for dashboards, feature grids, and content listings.
+        properties:
+          background: "{color_palette.surfaces.card}"
+          border: "1px solid {color_palette.surfaces.border}"
+          border_radius: "0.5rem"
+          box_shadow: "0 1px 3px rgba(0,0,0,0.08)"
+          padding: "1.5rem"
+          transition: "all 200ms ease"
+        states:
+          - name: default
+            properties:
+              box_shadow: "0 1px 3px rgba(0,0,0,0.08)"
+          - name: hover
+            properties:
+              box_shadow: "0 4px 12px rgba(0,0,0,0.12)"
+              transform: "translateY(-2px)"
+          - name: focus
+            properties:
+              outline: "2px solid {color_palette.primary.base}"
+              outline_offset: 2
+
+      - name: elevated
+        description: |
+          Elevated card with stronger shadow. Used for modals,
+          dropdowns, and content that should float above the page.
+        properties:
+          background: "{color_palette.surfaces.card}"
+          border: "1px solid {color_palette.surfaces.border}"
+          border_radius: "0.5rem"
+          box_shadow: "0 8px 24px rgba(0,0,0,0.15)"
+          padding: "1.5rem"
+        states:
+          - name: default
+            properties:
+              box_shadow: "0 8px 24px rgba(0,0,0,0.15)"
+
+      - name: interactive
+        description: |
+          Clickable card with hover lift. Used for navigation cards,
+          selection grids, and gallery items.
+        properties:
+          background: "{color_palette.surfaces.card}"
+          border: "1px solid {color_palette.surfaces.border}"
+          border_radius: "0.5rem"
+          box_shadow: "0 1px 3px rgba(0,0,0,0.08)"
+          padding: "1.5rem"
+          cursor: pointer
+          transition: "all 200ms ease"
+        states:
+          - name: default
+            properties:
+              border_color: "{color_palette.surfaces.border}"
+          - name: hover
+            properties:
+              border_color: "{color_palette.primary.base}"
+              box_shadow: "0 4px 12px rgba(0,0,0,0.12)"
+              transform: "translateY(-2px)"
+          - name: selected
+            properties:
+              border_color: "{color_palette.primary.base}"
+              background: "{color_palette.primary.base}10"
+          - name: disabled
+            properties:
+              opacity: 0.5
+              cursor: not-allowed
+
+    input:
+      - name: default
+        description: |
+          Standard text input field. Used for forms, search bars,
+          and data entry across the application.
+        properties:
+          background: "{color_palette.surfaces.card}"
+          color: "{color_palette.surfaces.foreground}"
+          border: "1px solid {color_palette.surfaces.border}"
+          border_radius: "0.375rem"
+          padding: "0.5rem 0.75rem"
+          font_size: "0.875rem"
+          font_weight: 400
+          line_height: 1.5
+          transition: "all 150ms ease"
+          width: "100%"
+        states:
+          - name: default
+            properties:
+              border_color: "{color_palette.surfaces.border}"
+          - name: hover
+            properties:
+              border_color: "{color_palette.neutral.base}"
+          - name: focus
+            properties:
+              border_color: "{color_palette.primary.base}"
+              box_shadow: "0 0 0 3px {color_palette.primary.base}20"
+              outline: none
+          - name: disabled
+            properties:
+              background: "{color_palette.surfaces.muted}"
+              cursor: not-allowed
+              opacity: 0.6
+          - name: error
+            properties:
+              border_color: "{color_palette.semantic.error}"
+              box_shadow: "0 0 0 3px {color_palette.semantic.error}20"
+
+      - name: textarea
+        description: |
+          Multi-line text input. Used for longer form responses,
+          descriptions, and comment fields.
+        properties:
+          background: "{color_palette.surfaces.card}"
+          color: "{color_palette.surfaces.foreground}"
+          border: "1px solid {color_palette.surfaces.border}"
+          border_radius: "0.375rem"
+          padding: "0.75rem"
+          font_size: "0.875rem"
+          font_weight: 400
+          line_height: 1.5
+          resize: vertical
+          min_height: "6rem"
+          transition: "all 150ms ease"
+          width: "100%"
+        states:
+          - name: default
+            properties:
+              border_color: "{color_palette.surfaces.border}"
+          - name: focus
+            properties:
+              border_color: "{color_palette.primary.base}"
+              box_shadow: "0 0 0 3px {color_palette.primary.base}20"
+              outline: none
+          - name: disabled
+            properties:
+              background: "{color_palette.surfaces.muted}"
+              cursor: not-allowed
+              opacity: 0.6
+
+      - name: select
+        description: |
+          Dropdown select field. Used for choosing from a predefined
+          list of options.
+        properties:
+          background: "{color_palette.surfaces.card}"
+          color: "{color_palette.surfaces.foreground}"
+          border: "1px solid {color_palette.surfaces.border}"
+          border_radius: "0.375rem"
+          padding: "0.5rem 2rem 0.5rem 0.75rem"
+          font_size: "0.875rem"
+          font_weight: 400
+          cursor: pointer
+          transition: "all 150ms ease"
+          width: "100%"
+          appearance: none
+        states:
+          - name: default
+            properties:
+              border_color: "{color_palette.surfaces.border}"
+          - name: hover
+            properties:
+              border_color: "{color_palette.neutral.base}"
+          - name: focus
+            properties:
+              border_color: "{color_palette.primary.base}"
+              box_shadow: "0 0 0 3px {color_palette.primary.base}20"
+              outline: none
+
+    navigation:
+      - name: navbar
+        description: |
+          Top-level horizontal navigation bar. Used for the main
+          application header and primary page navigation.
+        properties:
+          background: "{color_palette.surfaces.card}"
+          border_bottom: "1px solid {color_palette.surfaces.border}"
+          height: "3.5rem"
+          padding: "0 1.5rem"
+          display: flex
+          align_items: center
+          gap: "1.5rem"
+        states:
+          - name: default
+            properties:
+              background: "{color_palette.surfaces.card}"
+
+      - name: sidebar
+        description: |
+          Vertical side navigation panel. Used for secondary
+          navigation, settings menus, and dashboard sidebars.
+        properties:
+          background: "{color_palette.surfaces.background}"
+          border_right: "1px solid {color_palette.surfaces.border}"
+          width: "16rem"
+          padding: "1rem"
+          display: flex
+          flex_direction: column
+          gap: "0.25rem"
+        states:
+          - name: default
+            properties:
+              background: "{color_palette.surfaces.background}"
+
+      - name: tabs
+        description: |
+          Tab-based navigation. Used for switching between
+          related content sections without page navigation.
+        properties:
+          display: flex
+          gap: 0
+          border_bottom: "1px solid {color_palette.surfaces.border}"
+        states:
+          - name: default
+            properties:
+              border_bottom: "1px solid {color_palette.surfaces.border}"
+          - name: active
+            properties:
+              color: "{color_palette.primary.base}"
+              border_bottom: "2px solid {color_palette.primary.base}"
+              font_weight: 600
+
+      - name: breadcrumb
+        description: |
+          Breadcrumb trail navigation. Used to show the user's
+          current location within a hierarchy.
+        properties:
+          display: flex
+          align_items: center
+          gap: "0.5rem"
+          font_size: "0.875rem"
+          color: "{color_palette.neutral.base}"
+        states:
+          - name: default
+            properties:
+              color: "{color_palette.neutral.base}"
+          - name: active
+            properties:
+              color: "{color_palette.surfaces.foreground}"
+              font_weight: 500
+
+  # ── Responsive Breakpoints ────────────────────────────────────────
+  # Define the responsive grid system breakpoints.
+  # Each breakpoint defines where it activates (min_width), the column
+  # count for that viewport, and any layout rules that apply.
+  breakpoints:
+    - name: mobile
+      min_width: 0
+      columns: 4
+      rules:
+        - "Single-column layouts"
+        - "Collapse sidebar to drawer overlay"
+        - "Stack navigation vertically"
+        - "Reduce padding to 1rem"
+
+    - name: tablet
+      min_width: 640
+      columns: 8
+      rules:
+        - "Two-column grid layouts"
+        - "Show sidebar as collapsed icon bar"
+        - "Maintain horizontal nav with reduced labels"
+        - "Padding: 1.5rem"
+
+    - name: desktop
+      min_width: 1024
+      columns: 12
+      rules:
+        - "Full grid system"
+        - "Expanded sidebar with labels"
+        - "Multi-column content layouts"
+        - "Padding: 2rem"
+        - "Max content width: 1200px"
+
+    - name: wide
+      min_width: 1440
+      columns: 12
+      rules:
+        - "All desktop rules apply"
+        - "Max content width: 1440px"
+        - "Optional sidebar pinned open"
+        - "Extra whitespace around content areas"

package/src/templates/design-tech.yaml

@@ -0,0 +1,42 @@
+# Design Template
+#
+# Instructions:
+# - Focus on HOW to implement
+# - Include alternatives considered
+# - Only create if change is complex enough
+
+id: <change-name>
+schema: <schema-name>
+
+agent:
+  context_files:
+    - <relevant files>
+  affected_paths:
+    - <paths affected>
+
+body:
+  context: |
+    <Background, current state, constraints>
+  
+  goals:
+    - <What this design achieves>
+    - <Another goal>
+  
+  non_goals:
+    - <What's explicitly out of scope>
+    - <Another non-goal>
+  
+  decisions:
+    - title: <decision title>
+      approach: |
+        <Chosen approach and rationale>
+      alternatives: |
+        <Alternatives considered and why not chosen>
+    
+    - title: <another decision>
+      approach: |
+        <approach>
+  
+  risks:
+    - <Risk and mitigation strategy>
+    - <Another risk>