@harness-engineering/cli 1.6.2 → 1.8.0

package/dist/agents/skills/shared/design-knowledge/platform-rules/web.yaml

@@ -0,0 +1,102 @@
+description: "Web platform design rules — CSS, Tailwind, React/Vue/Svelte component patterns and constraints"
+
+platform: web
+frameworks: ["React", "Vue", "Svelte", "vanilla"]
+styling: ["Tailwind CSS", "CSS Modules", "CSS-in-JS", "vanilla CSS"]
+
+token_binding:
+  description: "How design tokens map to web platform primitives"
+  methods:
+    - name: "CSS Custom Properties"
+      priority: 1
+      example: "var(--color-primary)"
+      usage: "Default binding — works in all CSS contexts"
+    - name: "Tailwind Theme Extension"
+      priority: 2
+      example: "text-primary, bg-surface"
+      usage: "When project uses Tailwind — extend tailwind.config with token values"
+    - name: "CSS-in-JS Theme Object"
+      priority: 3
+      example: "theme.colors.primary"
+      usage: "When project uses styled-components, Emotion, or similar"
+
+component_patterns:
+  - name: "Composition over configuration"
+    rule: "Prefer composable child components over prop-heavy monolithic components"
+    example: |
+      // Prefer:
+      <Card><CardHeader /><CardBody /><CardFooter /></Card>
+      // Over:
+      <Card header="..." body="..." footer="..." />
+    reason: "Composable components are more flexible, easier to test, and align with framework idioms"
+
+  - name: "Token-bound styling"
+    rule: "All visual properties must reference design tokens, never hardcoded values"
+    detect: "Grep for hex colors, px font sizes, and raw spacing values in component files"
+    example: |
+      // Correct:
+      className="text-primary bg-surface p-4"
+      // Wrong:
+      style={{ color: '#2563eb', padding: '16px' }}
+
+  - name: "Responsive-first"
+    rule: "Components must work at all breakpoints defined in the design system"
+    approach: "Mobile-first: base styles for mobile, progressive enhancement for larger screens"
+
+  - name: "Accessible by default"
+    rule: "Interactive components must include ARIA attributes, keyboard handlers, and focus management"
+    requirements:
+      - "All buttons and links have accessible names"
+      - "Focus is visible and follows a logical order"
+      - "Dynamic content changes are announced to screen readers"
+      - "Color is never the sole indicator of state"
+
+css_guidelines:
+  custom_properties:
+    rule: "Define all design tokens as CSS custom properties on :root"
+    example: |
+      :root {
+        --color-primary: #2563eb;
+        --color-surface: #f8fafc;
+        --font-display: 'Inter', system-ui, sans-serif;
+        --spacing-4: 1rem;
+      }
+
+  tailwind:
+    rule: "Extend Tailwind config with token values rather than using arbitrary values"
+    example: |
+      // tailwind.config.js
+      theme: {
+        extend: {
+          colors: {
+            primary: 'var(--color-primary)',
+            surface: 'var(--color-surface)',
+          }
+        }
+      }
+    avoid: "Arbitrary value syntax like bg-[#2563eb] when a token exists"
+
+  dark_mode:
+    rule: "Support dark mode via CSS custom property overrides, not duplicate stylesheets"
+    approach: "Redefine token values inside a [data-theme='dark'] or @media (prefers-color-scheme: dark) block"
+
+performance:
+  - rule: "Limit CSS bundle to 50KB gzipped"
+    reason: "CSS blocks rendering — large stylesheets delay first paint"
+  - rule: "Use content-visibility: auto for below-fold sections"
+    reason: "Reduces initial layout cost for long pages"
+  - rule: "Lazy-load web fonts with font-display: swap"
+    reason: "Prevents invisible text (FOIT) during font download"
+  - rule: "Prefer CSS transitions over JavaScript animations"
+    reason: "CSS animations run on the compositor thread, avoiding main thread jank"
+
+testing:
+  - type: "Visual regression"
+    tools: ["Chromatic", "Percy", "Playwright screenshots"]
+    rule: "All component variants must have visual regression coverage"
+  - type: "Accessibility"
+    tools: ["axe-core", "Lighthouse", "pa11y"]
+    rule: "Run axe-core in CI on all component stories"
+  - type: "Responsive"
+    tools: ["Playwright", "Cypress"]
+    rule: "Test at 320px, 768px, 1024px, and 1440px viewports minimum"

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

@@ -0,0 +1,274 @@
+description: "Curated font pairings with complete fallback stacks and usage guidance"
+
+pairings:
+  - name: "Modern Editorial"
+    tags: ["editorial", "creative", "premium"]
+    display:
+      family: "Instrument Serif"
+      fallback: "Georgia, 'Times New Roman', serif"
+      weights: [400, 700]
+      variable: false
+      source: "Google Fonts"
+    body:
+      family: "Geist"
+      fallback: "system-ui, -apple-system, sans-serif"
+      weights: [400, 500, 600]
+      variable: true
+      source: "Vercel"
+    mono:
+      family: "Geist Mono"
+      fallback: "'SF Mono', 'Fira Code', 'Cascadia Code', monospace"
+      weights: [400, 500]
+      source: "Vercel"
+    scale:
+      base: "1rem"
+      ratio: 1.25
+      sizes:
+        xs: "0.75rem"
+        sm: "0.875rem"
+        base: "1rem"
+        lg: "1.125rem"
+        xl: "1.25rem"
+        "2xl": "1.5rem"
+        "3xl": "1.875rem"
+        "4xl": "2.25rem"
+        "5xl": "3rem"
+    usage: "Best for editorial, blog, and content-heavy sites that want to feel premium and literary."
+
+  - name: "Clean Tech"
+    tags: ["tech", "saas", "dashboard", "modern"]
+    display:
+      family: "Inter"
+      fallback: "system-ui, -apple-system, 'Segoe UI', sans-serif"
+      weights: [500, 600, 700]
+      variable: true
+      source: "Google Fonts"
+    body:
+      family: "Inter"
+      fallback: "system-ui, -apple-system, 'Segoe UI', sans-serif"
+      weights: [400, 500, 600]
+      variable: true
+      source: "Google Fonts"
+    mono:
+      family: "JetBrains Mono"
+      fallback: "'SF Mono', 'Fira Code', 'Cascadia Code', monospace"
+      weights: [400, 500]
+      source: "Google Fonts"
+    scale:
+      base: "1rem"
+      ratio: 1.2
+      sizes:
+        xs: "0.75rem"
+        sm: "0.875rem"
+        base: "1rem"
+        lg: "1.125rem"
+        xl: "1.25rem"
+        "2xl": "1.5rem"
+        "3xl": "1.8rem"
+        "4xl": "2.16rem"
+        "5xl": "2.592rem"
+    usage: "Ideal for SaaS dashboards, developer tools, and data-heavy interfaces where clarity and density matter."
+
+  - name: "Traditional Pro"
+    tags: ["professional", "corporate", "legal", "finance"]
+    display:
+      family: "Playfair Display"
+      fallback: "Georgia, 'Times New Roman', 'Palatino Linotype', serif"
+      weights: [400, 700, 900]
+      variable: true
+      source: "Google Fonts"
+    body:
+      family: "Source Sans 3"
+      fallback: "'Segoe UI', 'Helvetica Neue', Arial, sans-serif"
+      weights: [400, 600, 700]
+      variable: true
+      source: "Google Fonts"
+    mono:
+      family: "Source Code Pro"
+      fallback: "'SF Mono', 'Courier New', monospace"
+      weights: [400, 500]
+      source: "Google Fonts"
+    scale:
+      base: "1rem"
+      ratio: 1.333
+      sizes:
+        xs: "0.75rem"
+        sm: "0.875rem"
+        base: "1rem"
+        lg: "1.125rem"
+        xl: "1.333rem"
+        "2xl": "1.777rem"
+        "3xl": "2.369rem"
+        "4xl": "3.157rem"
+        "5xl": "4.209rem"
+    usage: "Best for corporate sites, law firms, financial services, and publications that need gravitas and authority."
+
+  - name: "Friendly Rounded"
+    tags: ["friendly", "approachable", "lifestyle", "consumer"]
+    display:
+      family: "Nunito"
+      fallback: "'Varela Round', 'Helvetica Neue', Arial, sans-serif"
+      weights: [600, 700, 800]
+      variable: true
+      source: "Google Fonts"
+    body:
+      family: "DM Sans"
+      fallback: "'Helvetica Neue', Arial, sans-serif"
+      weights: [400, 500, 700]
+      variable: true
+      source: "Google Fonts"
+    mono:
+      family: "DM Mono"
+      fallback: "'SF Mono', 'Fira Code', monospace"
+      weights: [400, 500]
+      source: "Google Fonts"
+    scale:
+      base: "1rem"
+      ratio: 1.25
+      sizes:
+        xs: "0.75rem"
+        sm: "0.875rem"
+        base: "1rem"
+        lg: "1.125rem"
+        xl: "1.25rem"
+        "2xl": "1.5rem"
+        "3xl": "1.875rem"
+        "4xl": "2.25rem"
+        "5xl": "3rem"
+    usage: "Perfect for consumer apps, lifestyle brands, and friendly SaaS products that want to feel warm and approachable."
+
+  - name: "Geometric Minimal"
+    tags: ["minimal", "geometric", "startup", "clean"]
+    display:
+      family: "Space Grotesk"
+      fallback: "'Helvetica Neue', Arial, sans-serif"
+      weights: [500, 700]
+      variable: true
+      source: "Google Fonts"
+    body:
+      family: "Work Sans"
+      fallback: "'Helvetica Neue', Arial, sans-serif"
+      weights: [400, 500, 600]
+      variable: true
+      source: "Google Fonts"
+    mono:
+      family: "Space Mono"
+      fallback: "'SF Mono', 'Courier New', monospace"
+      weights: [400, 700]
+      source: "Google Fonts"
+    scale:
+      base: "1rem"
+      ratio: 1.2
+      sizes:
+        xs: "0.75rem"
+        sm: "0.875rem"
+        base: "1rem"
+        lg: "1.125rem"
+        xl: "1.25rem"
+        "2xl": "1.5rem"
+        "3xl": "1.8rem"
+        "4xl": "2.16rem"
+        "5xl": "2.592rem"
+    usage: "Great for startups, portfolios, and minimal landing pages that favor geometric precision over ornamentation."
+
+  - name: "Monospace Forward"
+    tags: ["developer", "technical", "code", "hacker"]
+    display:
+      family: "JetBrains Mono"
+      fallback: "'SF Mono', 'Fira Code', 'Cascadia Code', monospace"
+      weights: [500, 700, 800]
+      variable: true
+      source: "Google Fonts"
+    body:
+      family: "IBM Plex Sans"
+      fallback: "'Helvetica Neue', Arial, sans-serif"
+      weights: [400, 500, 600]
+      variable: false
+      source: "Google Fonts"
+    mono:
+      family: "JetBrains Mono"
+      fallback: "'SF Mono', 'Fira Code', 'Cascadia Code', monospace"
+      weights: [400, 500]
+      source: "Google Fonts"
+    scale:
+      base: "1rem"
+      ratio: 1.2
+      sizes:
+        xs: "0.75rem"
+        sm: "0.875rem"
+        base: "1rem"
+        lg: "1.125rem"
+        xl: "1.25rem"
+        "2xl": "1.5rem"
+        "3xl": "1.8rem"
+        "4xl": "2.16rem"
+        "5xl": "2.592rem"
+    usage: "Tailored for developer tools, documentation sites, and technical blogs where code is a first-class citizen."
+
+  - name: "High Contrast A11y"
+    tags: ["accessible", "healthcare", "government", "high-contrast"]
+    display:
+      family: "Atkinson Hyperlegible"
+      fallback: "Arial, 'Helvetica Neue', sans-serif"
+      weights: [400, 700]
+      variable: false
+      source: "Google Fonts"
+    body:
+      family: "Atkinson Hyperlegible"
+      fallback: "Arial, 'Helvetica Neue', sans-serif"
+      weights: [400, 700]
+      variable: false
+      source: "Google Fonts"
+    mono:
+      family: "Red Hat Mono"
+      fallback: "'SF Mono', 'Courier New', monospace"
+      weights: [400, 700]
+      source: "Google Fonts"
+    scale:
+      base: "1.125rem"
+      ratio: 1.25
+      sizes:
+        xs: "0.875rem"
+        sm: "1rem"
+        base: "1.125rem"
+        lg: "1.25rem"
+        xl: "1.5rem"
+        "2xl": "1.875rem"
+        "3xl": "2.25rem"
+        "4xl": "3rem"
+        "5xl": "3.75rem"
+    usage: "Designed for maximum legibility. Ideal for healthcare, government, education, and any context where accessibility is paramount."
+
+  - name: "System Native"
+    tags: ["system", "performance", "native", "zero-download"]
+    display:
+      family: "system-ui"
+      fallback: "-apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif"
+      weights: [500, 600, 700]
+      variable: false
+      source: "System"
+    body:
+      family: "system-ui"
+      fallback: "-apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif"
+      weights: [400, 500, 600]
+      variable: false
+      source: "System"
+    mono:
+      family: "ui-monospace"
+      fallback: "'SF Mono', 'Cascadia Code', 'Fira Code', 'JetBrains Mono', 'Courier New', monospace"
+      weights: [400, 500]
+      source: "System"
+    scale:
+      base: "1rem"
+      ratio: 1.25
+      sizes:
+        xs: "0.75rem"
+        sm: "0.875rem"
+        base: "1rem"
+        lg: "1.125rem"
+        xl: "1.25rem"
+        "2xl": "1.5rem"
+        "3xl": "1.875rem"
+        "4xl": "2.25rem"
+        "5xl": "3rem"
+    usage: "Zero font downloads, instant rendering. Best for performance-critical apps, internal tools, and native-feeling web applications."

package/dist/agents/skills/shared/i18n-knowledge/accessibility/intersection.yaml

@@ -0,0 +1,142 @@
+description: "Rules at the intersection of i18n and accessibility — ensuring localized content remains accessible across languages, scripts, and text directions"
+
+rules:
+  - name: "lang attribute on html element"
+    category: "lang-tags"
+    wcag_criteria: ["3.1.1"]
+    description: "The <html> element must have a valid lang attribute matching the page's primary language"
+    detect:
+      method: "Check for lang attribute on <html> element; verify it matches a valid BCP 47 tag and corresponds to the page content language"
+    reason: "Screen readers use the lang attribute to select the correct pronunciation engine. Without it, an English screen reader will mispronounce French content."
+    fix: "Set <html lang='fr'> for French content, <html lang='ar' dir='rtl'> for Arabic, etc. Update dynamically when locale changes."
+    severity: error
+    strictness:
+      permissive: warn
+      standard: error
+      strict: error
+
+  - name: "lang attribute on inline language switches"
+    category: "lang-tags"
+    wcag_criteria: ["3.1.2"]
+    description: "Inline content in a different language must be wrapped with a lang attribute"
+    detect:
+      method: "Check for foreign-language words or phrases without a lang attribute on their container"
+    reason: "Screen readers will pronounce foreign words using the page's primary language rules, making them unintelligible."
+    fix: "Wrap language switches: <span lang='fr'>bonjour</span> within English content, <span lang='en'>API</span> within Japanese content."
+    severity: warning
+    strictness:
+      permissive: info
+      standard: warn
+      strict: error
+
+  - name: "dir attribute for RTL content"
+    category: "bidi-a11y"
+    wcag_criteria: ["1.3.2"]
+    description: "RTL content must have dir='rtl' set on the appropriate container element"
+    detect:
+      method: "Check for Arabic, Hebrew, or other RTL script content without a dir attribute on its container"
+    reason: "Without dir='rtl', screen readers may read RTL text in the wrong order, and visual rendering will be incorrect."
+    fix: "Set dir='rtl' on containers with RTL content. For the full page: <html lang='ar' dir='rtl'>. For inline: <span dir='rtl'>."
+    severity: error
+    strictness:
+      permissive: warn
+      standard: error
+      strict: error
+
+  - name: "dir=auto on user-generated content"
+    category: "bidi-a11y"
+    wcag_criteria: ["1.3.2"]
+    description: "User-generated content containers should use dir='auto' to detect text direction automatically"
+    detect:
+      method: "Check for user-generated content areas (comments, messages, reviews) without dir='auto'"
+    reason: "User content may be in any language. Without dir='auto', an Arabic comment in an English page will render incorrectly."
+    fix: "Set dir='auto' on elements that display user-generated content: <p dir='auto'>{userComment}</p>"
+    severity: warning
+    strictness:
+      permissive: info
+      standard: warn
+      strict: warn
+
+  - name: "Font size scaling for complex scripts"
+    category: "script-sizing"
+    wcag_criteria: ["1.4.4"]
+    description: "Complex scripts (Devanagari, Thai, Arabic, CJK) require larger minimum font sizes for legibility"
+    detect:
+      method: "Check minimum font sizes when content language uses complex scripts; flag sizes below recommended minimums"
+    reason: "Complex scripts have more visual detail per character. Arabic letters reshape by position. Thai stacks diacritics vertically. Below 12-14px, these become illegible."
+    fix: "Set minimum font sizes: 12px for CJK, 13px for Arabic, 14px for Devanagari and Thai. Increase line-height to 1.6-1.8 for scripts with stacking marks."
+    severity: warning
+    strictness:
+      permissive: info
+      standard: warn
+      strict: error
+
+  - name: "Screen reader pronunciation of numbers and dates"
+    category: "screen-readers"
+    wcag_criteria: ["1.3.1"]
+    description: "Numbers and dates must use semantic markup so screen readers pronounce them correctly per locale"
+    detect:
+      method: "Check for visually formatted numbers/dates that lack semantic markup (time element, appropriate ARIA)"
+    reason: "A screen reader seeing '03/04/2025' cannot determine if it is March 4 or April 3 without semantic context. '1.234' could be one-point-two-three-four or one-thousand-two-hundred-thirty-four."
+    fix: "Use <time datetime='2025-03-04'>March 4, 2025</time> for dates. Use aria-label for ambiguous number formats."
+    severity: warning
+    strictness:
+      permissive: info
+      standard: warn
+      strict: warn
+
+  - name: "ARIA labels must be translated"
+    category: "screen-readers"
+    wcag_criteria: ["4.1.2"]
+    description: "All ARIA labels, descriptions, and live region content must go through the translation pipeline"
+    detect:
+      method: "Check for hardcoded English strings in aria-label, aria-description, aria-roledescription attributes"
+    reason: "Untranslated ARIA labels make the interface inaccessible to screen reader users in non-English locales."
+    fix: "Wrap ARIA attributes in translation functions: aria-label={t('nav.menu')} instead of aria-label='Menu'"
+    severity: error
+    strictness:
+      permissive: warn
+      standard: error
+      strict: error
+
+  - name: "hreflang attribute on alternate-language links"
+    category: "lang-tags"
+    wcag_criteria: ["3.1.1"]
+    description: "Links to alternate-language versions of a page must have hreflang attributes"
+    detect:
+      method: "Check for <link rel='alternate'> elements without hreflang, or language switcher links without hreflang"
+    reason: "hreflang helps search engines serve the correct language version and assists screen readers in announcing the target language."
+    fix: "Add hreflang to all alternate links: <link rel='alternate' hreflang='es' href='/es/page'>. Include x-default for the default version."
+    severity: warning
+    strictness:
+      permissive: info
+      standard: warn
+      strict: warn
+
+  - name: "Translated alt text for images"
+    category: "screen-readers"
+    wcag_criteria: ["1.1.1"]
+    description: "Image alt text must be translated along with all other user-facing content"
+    detect:
+      method: "Check for img alt attributes containing English text when the page language is non-English"
+    reason: "Untranslated alt text is meaningless to screen reader users who do not speak the source language."
+    fix: "Include all alt attributes in the translation pipeline: <img alt={t('hero.alt')} /> instead of hardcoded text"
+    severity: error
+    strictness:
+      permissive: warn
+      standard: error
+      strict: error
+
+  - name: "Keyboard navigation in RTL layouts"
+    category: "bidi-a11y"
+    wcag_criteria: ["2.4.3"]
+    description: "Tab order must follow visual order in RTL layouts — right-to-left, top-to-bottom"
+    detect:
+      method: "Check tab order in RTL layouts; verify it matches the visual reading order (right to left)"
+    reason: "If tab order remains LTR in an RTL layout, keyboard users navigate against the visual flow, causing confusion."
+    fix: "Use CSS logical properties for layout; avoid manual tabindex that assumes LTR order; test tab navigation with RTL locale"
+    severity: error
+    strictness:
+      permissive: info
+      standard: warn
+      strict: error

package/dist/agents/skills/shared/i18n-knowledge/anti-patterns/encoding.yaml

@@ -0,0 +1,67 @@
+description: "Encoding anti-patterns — common mistakes in character encoding, Unicode handling, and text measurement that break with non-ASCII content"
+
+patterns:
+  - name: "Assuming 1 character equals 1 byte"
+    severity: error
+    scope: all
+    detect:
+      method: "Check for buffer allocation or data storage sized by string.length for strings that may contain non-ASCII"
+      context: "Buffer.alloc(str.length) or database VARCHAR columns sized by character count for UTF-8 data"
+    reason: "UTF-8 encodes characters in 1-4 bytes. 'hello' is 5 bytes but 'こんにちは' is 15 bytes. Buffer overflow or truncation results."
+    instead: "Use Buffer.byteLength(str, 'utf8') for byte calculations; size database columns for byte length not character count"
+    strictness:
+      permissive: info
+      standard: warn
+      strict: error
+
+  - name: "String length not equal to visual width"
+    severity: warning
+    scope: all
+    detect:
+      method: "Check for string.length used to estimate visual display width"
+      context: "Layout calculations or column alignment using .length instead of visual width measurement"
+    reason: "CJK characters are double-width visually but .length counts them as 1. Emoji may be multiple code points but one visual glyph."
+    instead: "Use Intl.Segmenter for grapheme counting; use canvas.measureText() or terminal wcwidth for visual width"
+    strictness:
+      permissive: info
+      standard: warn
+      strict: warn
+
+  - name: "Missing UTF-8 BOM handling"
+    severity: warning
+    scope: all
+    detect:
+      method: "Check for file reading that does not strip BOM (U+FEFF) from the beginning of text files"
+      context: "Reading CSV, JSON, or translation files that may have been edited in Windows tools that add BOM"
+    reason: "BOM at the start of a file can break JSON parsing, CSV parsing, and string comparison. Windows Notepad adds BOM by default."
+    instead: "Strip BOM when reading files: content.replace(/^\\uFEFF/, '') or use a BOM-aware file reader"
+    strictness:
+      permissive: info
+      standard: warn
+      strict: warn
+
+  - name: "Emoji and ZWJ sequence handling"
+    severity: warning
+    scope: all
+    detect:
+      method: "Check for string operations that split or truncate without grapheme cluster awareness"
+      context: "Array.from(str) or str.split('') used to process strings containing emoji"
+    reason: "Family emoji (👨‍👩‍👦) is 5 code points joined by ZWJ. Splitting by code point produces broken fragments."
+    instead: "Use Intl.Segmenter(locale, { granularity: 'grapheme' }) to iterate over visual characters safely"
+    strictness:
+      permissive: info
+      standard: warn
+      strict: warn
+
+  - name: "Filename and URL encoding not handling non-ASCII"
+    severity: error
+    scope: all
+    detect:
+      method: "Check for file path or URL construction that does not encode non-ASCII characters"
+      context: "Path concatenation with user input or locale-specific filenames without encodeURIComponent"
+    reason: "Non-ASCII filenames and URL segments must be percent-encoded. Unencoded characters cause 404 errors and security issues."
+    instead: "Use encodeURIComponent() for URL segments; use encodeURI() for full URLs; normalize filenames to ASCII-safe slugs"
+    strictness:
+      permissive: warn
+      standard: error
+      strict: error