@harness-engineering/cli 1.23.2 → 1.24.1

package/dist/agents/skills/claude-code/a11y-color-contrast/SKILL.md

@@ -0,0 +1,156 @@
+# Color Contrast and Color Independence
+
+> Ensure sufficient color contrast ratios and never use color as the sole means of conveying information
+
+## When to Use
+
+- Choosing text and background color combinations
+- Designing UI states (error, success, warning) that rely on color
+- Building data visualizations, charts, or status indicators
+- Reviewing designs for WCAG 2.1 AA or AAA compliance
+- Supporting users with low vision or color vision deficiency
+
+## Instructions
+
+1. **Meet minimum contrast ratios.** WCAG 2.1 AA requires:
+   - **Normal text** (under 18pt / 24px, or under 14pt / 18.5px bold): **4.5:1** contrast ratio
+   - **Large text** (18pt+ or 14pt+ bold): **3:1** contrast ratio
+   - **Non-text UI components** (icons, borders, form controls): **3:1** against adjacent colors
+
+```css
+/* Good — #1a1a1a on #ffffff = 17.4:1 */
+.body-text {
+  color: #1a1a1a;
+  background: #ffffff;
+}
+
+/* Bad — #999999 on #ffffff = 2.8:1 (fails AA) */
+.muted-text {
+  color: #999999;
+  background: #ffffff;
+}
+
+/* Acceptable for large text — #767676 on #ffffff = 4.5:1 */
+.large-heading {
+  color: #767676;
+  font-size: 24px;
+  font-weight: bold;
+}
+```
+
+2. **Never use color alone to convey information.** Always pair color with a secondary indicator — text, icons, patterns, or underlines.
+
+```tsx
+// Bad — only color distinguishes error from success
+<span style={{ color: 'red' }}>Failed</span>
+<span style={{ color: 'green' }}>Passed</span>
+
+// Good — color + icon + text label
+<span style={{ color: '#d32f2f' }}>
+  <ErrorIcon aria-hidden="true" /> Failed
+</span>
+<span style={{ color: '#2e7d32' }}>
+  <CheckIcon aria-hidden="true" /> Passed
+</span>
+```
+
+3. **Test link visibility without relying on color alone.** Links within body text should have an underline or other non-color visual distinction. If you remove underlines, ensure a 3:1 contrast ratio between link color and surrounding text color.
+
+```css
+/* Safe — underline present */
+a {
+  color: #005fcc;
+  text-decoration: underline;
+}
+
+/* Also safe — 3:1 contrast between link color and body text color, plus underline on hover/focus */
+a {
+  color: #005fcc;
+  text-decoration: none;
+}
+a:hover,
+a:focus {
+  text-decoration: underline;
+}
+```
+
+4. **Design form validation with multiple cues.** Do not rely solely on a red border to indicate errors. Add an error message, an icon, or both.
+
+```tsx
+<div>
+  <label htmlFor="email">Email</label>
+  <input
+    id="email"
+    aria-invalid={!!error}
+    aria-describedby={error ? 'email-error' : undefined}
+    style={{ borderColor: error ? '#d32f2f' : '#ccc' }}
+  />
+  {error && (
+    <p id="email-error" role="alert" style={{ color: '#d32f2f' }}>
+      <ErrorIcon aria-hidden="true" /> {error}
+    </p>
+  )}
+</div>
+```
+
+5. **Use patterns, shapes, or labels in data visualizations.** Charts with color-coded series are unreadable for color-blind users. Add patterns, direct labels, or shape markers.
+
+6. **Check contrast for all interactive states.** Hover, focus, active, disabled, and selected states all need to meet contrast requirements against their backgrounds.
+
+7. **Test with simulated color vision deficiency.** Chrome DevTools > Rendering > Emulate vision deficiencies. Test with protanopia, deuteranopia, tritanopia, and achromatopsia.
+
+8. **Design high-contrast mode support.** Windows High Contrast Mode overrides your colors. Use `forced-colors` media query to ensure readability.
+
+```css
+@media (forced-colors: active) {
+  .custom-checkbox {
+    border: 2px solid ButtonText;
+  }
+}
+```
+
+## Details
+
+**WCAG contrast levels:**
+
+- **AA (minimum):** 4.5:1 for normal text, 3:1 for large text and UI components
+- **AAA (enhanced):** 7:1 for normal text, 4.5:1 for large text
+- Target AA for all projects; target AAA for government, healthcare, and financial applications
+
+**Contrast ratio formula:** Based on relative luminance of the two colors. Use tools to calculate — do not eyeball it.
+
+**Recommended tools:**
+
+- Browser DevTools: Hover over elements to see contrast ratio in the color picker
+- WebAIM Contrast Checker: https://webaim.org/resources/contrastchecker/
+- axe DevTools: Flags contrast violations automatically
+- Stark (Figma plugin): Check contrast during design
+
+**Color-blind-safe palettes:** Approximately 8% of males and 0.5% of females have color vision deficiency. Red-green is the most common. Avoid red/green as the only distinction. Blue/orange is generally safe across all types.
+
+**Common mistakes:**
+
+- Placeholder text with insufficient contrast (often fails AA)
+- Disabled states that are indistinguishable from enabled states
+- Focus indicators that disappear against the background
+- Charts using red, green, and yellow without patterns or labels
+
+## Source
+
+https://www.w3.org/WAI/WCAG21/Understanding/contrast-minimum
+
+## Process
+
+1. Read the instructions and examples in this document.
+2. Apply the patterns to your implementation, adapting to your specific context.
+3. Verify your implementation against the details and edge cases listed above.
+
+## Harness Integration
+
+- **Type:** knowledge — this skill is a reference document, not a procedural workflow.
+- **No tools or state** — consumed as context by other skills and agents.
+
+## Success Criteria
+
+- The patterns described in this document are applied correctly in the implementation.
+- Edge cases and anti-patterns listed in this document are avoided.

package/dist/agents/skills/claude-code/a11y-color-contrast/skill.yaml

@@ -0,0 +1,46 @@
+name: a11y-color-contrast
+version: '1.0.0'
+description: Ensure sufficient color contrast ratios and avoid color-only information conveyance
+stability: static
+cognitive_mode: advisory-guide
+type: knowledge
+tier: 3
+triggers:
+  - manual
+platforms:
+  - claude-code
+  - gemini-cli
+  - cursor
+  - codex
+tools: []
+paths:
+  - '**/*.tsx'
+  - '**/*.html'
+  - '**/*.vue'
+  - '**/*.svelte'
+  - '**/*.astro'
+  - '**/*.css'
+  - '**/*.scss'
+related_skills:
+  - a11y-semantic-html
+  - a11y-image-text-alt
+  - design-color-accessibility
+  - design-contrast-ratio
+stack_signals:
+  - accessibility
+  - react
+  - typescript
+keywords:
+  - contrast
+  - color
+  - wcag
+  - ratio
+  - low-vision
+  - color-blind
+metadata:
+  author: community
+  upstream: w3.org/WAI/WCAG21/Understanding/contrast-minimum
+state:
+  persistent: false
+  files: []
+depends_on: []

package/dist/agents/skills/claude-code/a11y-form-patterns/SKILL.md

@@ -0,0 +1,147 @@
+# Accessible Form Patterns
+
+> Build accessible forms with proper labeling, grouped controls, inline validation, and clear error communication
+
+## When to Use
+
+- Creating any form — login, registration, checkout, settings
+- Adding validation feedback that assistive technology can perceive
+- Grouping related form controls (address fields, payment details)
+- Implementing multi-step forms or wizards
+- Reviewing existing forms for accessibility compliance
+
+## Instructions
+
+1. **Associate every input with a visible `<label>`.** Use `htmlFor` (React) or `for` (HTML) to link the label to the input. Clicking the label should focus the input.
+
+```tsx
+<label htmlFor="email">Email address</label>
+<input id="email" type="email" name="email" />
+```
+
+Never use placeholder text as a substitute for a label — it disappears when the user starts typing and has poor contrast.
+
+2. **Use `<fieldset>` and `<legend>` to group related controls.** Screen readers announce the legend as context for each control within the group.
+
+```html
+<fieldset>
+  <legend>Shipping Address</legend>
+  <label for="street">Street</label>
+  <input id="street" name="street" />
+  <label for="city">City</label>
+  <input id="city" name="city" />
+</fieldset>
+
+<fieldset>
+  <legend>Payment method</legend>
+  <label><input type="radio" name="payment" value="card" /> Credit card</label>
+  <label><input type="radio" name="payment" value="paypal" /> PayPal</label>
+</fieldset>
+```
+
+3. **Mark required fields explicitly.** Use the `required` attribute for native validation and `aria-required="true"` for custom validation. Include a visible indicator (asterisk with explanation).
+
+```tsx
+<label htmlFor="name">
+  Full name <span aria-hidden="true">*</span>
+</label>
+<input id="name" required aria-required="true" />
+<p className="form-note">Fields marked with * are required.</p>
+```
+
+4. **Provide inline validation errors linked to the input.** Use `aria-invalid` to mark the field and `aria-describedby` or `aria-errormessage` to point to the error text.
+
+```tsx
+<label htmlFor="password">Password</label>
+<input
+  id="password"
+  type="password"
+  aria-invalid={!!errors.password}
+  aria-describedby={errors.password ? 'password-error' : 'password-hint'}
+/>
+<p id="password-hint">Must be at least 8 characters.</p>
+{errors.password && (
+  <p id="password-error" role="alert" className="error">
+    {errors.password}
+  </p>
+)}
+```
+
+5. **Use `aria-live` or `role="alert"` for dynamic validation messages.** When errors appear after form submission or as the user types, screen readers must be notified.
+
+6. **Provide an error summary at the top of the form on submission failure.** List all errors with links to the corresponding fields. Move focus to the summary.
+
+```tsx
+{
+  errors.length > 0 && (
+    <div role="alert" tabIndex={-1} ref={errorSummaryRef}>
+      <h2>There are {errors.length} errors in this form</h2>
+      <ul>
+        {errors.map((err) => (
+          <li key={err.field}>
+            <a href={`#${err.field}`}>{err.message}</a>
+          </li>
+        ))}
+      </ul>
+    </div>
+  );
+}
+```
+
+7. **Use `autocomplete` attributes for common fields.** This enables browser autofill and password managers, which benefit users with motor and cognitive disabilities.
+
+```html
+<input name="name" autocomplete="name" />
+<input name="email" autocomplete="email" />
+<input name="tel" autocomplete="tel" />
+<input name="address" autocomplete="street-address" />
+<input name="cc-number" autocomplete="cc-number" />
+```
+
+8. **Do not disable the submit button while the form is incomplete.** Disabled buttons are not focusable and provide no feedback about what is wrong. Instead, allow submission and show validation errors.
+
+9. **Support keyboard submission.** Forms should submit when the user presses Enter in a text input. Use `<form>` with a `<button type="submit">` — do not rely on JavaScript click handlers alone.
+
+10. **Use `inputmode` and `type` to show the right keyboard on mobile.** `type="email"` shows an email keyboard, `inputmode="numeric"` shows a number pad.
+
+## Details
+
+**Label association methods (in order of preference):**
+
+1. `<label for="id">` — explicit association, most reliable
+2. `<label>` wrapping the input — implicit association, works in all browsers
+3. `aria-label` — invisible label, use only when no visible label is possible
+4. `aria-labelledby` — references another element as the label
+5. `title` attribute — last resort, announced inconsistently
+
+**Multi-step forms:** Indicate progress with a step indicator using `aria-current="step"`. Announce step transitions with `aria-live`. Allow backward navigation without losing data.
+
+**Custom select/dropdown:** Native `<select>` is fully accessible. Custom dropdowns must implement the combobox or listbox pattern with full keyboard support and ARIA attributes. Consider whether the customization is worth the complexity.
+
+**Common mistakes:**
+
+- Using `placeholder` instead of `<label>` (disappears, poor contrast)
+- Disabling paste on password fields (breaks password managers)
+- Time-limited forms without extension options (WCAG 2.2.1)
+- Validation that only uses color (red border without error text)
+- CAPTCHAs without accessible alternatives
+
+## Source
+
+https://www.w3.org/WAI/tutorials/forms/
+
+## Process
+
+1. Read the instructions and examples in this document.
+2. Apply the patterns to your implementation, adapting to your specific context.
+3. Verify your implementation against the details and edge cases listed above.
+
+## Harness Integration
+
+- **Type:** knowledge — this skill is a reference document, not a procedural workflow.
+- **No tools or state** — consumed as context by other skills and agents.
+
+## Success Criteria
+
+- The patterns described in this document are applied correctly in the implementation.
+- Edge cases and anti-patterns listed in this document are avoided.

package/dist/agents/skills/claude-code/a11y-form-patterns/skill.yaml

@@ -0,0 +1,47 @@
+name: a11y-form-patterns
+version: '1.0.0'
+description: Build accessible forms with proper labeling, validation, and error handling
+stability: static
+cognitive_mode: advisory-guide
+type: knowledge
+tier: 3
+triggers:
+  - manual
+platforms:
+  - claude-code
+  - gemini-cli
+  - cursor
+  - codex
+tools: []
+paths:
+  - '**/*.tsx'
+  - '**/*.html'
+  - '**/*.vue'
+  - '**/*.svelte'
+  - '**/*.astro'
+related_skills:
+  - a11y-semantic-html
+  - a11y-keyboard-navigation
+  - a11y-aria-patterns
+  - design-form-ux
+  - design-readability
+  - ux-form-labels
+stack_signals:
+  - accessibility
+  - react
+  - typescript
+keywords:
+  - forms
+  - labels
+  - validation
+  - error-messages
+  - fieldset
+  - autocomplete
+  - required
+metadata:
+  author: community
+  upstream: w3.org/WAI/tutorials/forms
+state:
+  persistent: false
+  files: []
+depends_on: []

package/dist/agents/skills/claude-code/a11y-image-text-alt/SKILL.md

@@ -0,0 +1,159 @@
+# Image and Text Alternatives
+
+> Write effective alt text for images and provide text alternatives for all non-text content
+
+## When to Use
+
+- Adding images to any web page or component
+- Using icons as buttons or links
+- Embedding charts, diagrams, or infographics
+- Building image galleries or product image displays
+- Using SVGs for icons or illustrations
+
+## Instructions
+
+1. **Every `<img>` must have an `alt` attribute.** There are no exceptions — even decorative images need `alt=""` (empty string) to tell screen readers to skip them.
+
+```tsx
+// Informative image — describe what is shown
+<img src="chart-q3.png" alt="Q3 revenue grew 23% to $4.2M, exceeding the $3.8M target" />
+
+// Decorative image — empty alt to skip
+<img src="decorative-wave.svg" alt="" />
+
+// Functional image (linked/button) — describe the action
+<a href="/home"><img src="logo.svg" alt="Acme Corp — go to homepage" /></a>
+```
+
+2. **Write alt text that conveys the image's purpose, not its appearance.** Ask: "If I replaced this image with text, what would I write?"
+
+```tsx
+// Bad — describes appearance
+<img alt="A person sitting at a desk with a laptop" />
+
+// Good — describes purpose in context
+<img alt="Customer using the dashboard to track orders" />
+
+// Bad — redundant with surrounding text
+<h2>Meet Our Team</h2>
+<img alt="Photo of our team" />  // The heading already says this
+
+// Good — adds information
+<h2>Meet Our Team</h2>
+<img alt="The 12-person engineering team at the 2026 offsite in Portland" />
+```
+
+3. **Use `<figure>` and `<figcaption>` for images with visible captions.** The caption complements the alt text — they should not be identical.
+
+```html
+<figure>
+  <img
+    src="architecture.png"
+    alt="System architecture showing three microservices connected via message queue"
+  />
+  <figcaption>Figure 1: High-level architecture of the order processing system</figcaption>
+</figure>
+```
+
+4. **Make SVG icons accessible based on their role:**
+
+```tsx
+// Decorative icon (next to text label) — hide from screen readers
+<button>
+  <SearchIcon aria-hidden="true" />
+  <span>Search</span>
+</button>
+
+// Standalone icon button — provide accessible name
+<button aria-label="Search">
+  <SearchIcon aria-hidden="true" />
+</button>
+
+// Informative SVG — use role="img" and title
+<svg role="img" aria-labelledby="chart-title">
+  <title id="chart-title">Monthly sales trend showing 15% growth</title>
+  {/* chart paths */}
+</svg>
+```
+
+5. **Provide text alternatives for complex images.** Charts, diagrams, and infographics need extended descriptions. Use one of these approaches:
+
+```tsx
+// Approach 1: Adjacent text description
+<img src="org-chart.png" alt="Organization chart" aria-describedby="org-desc" />
+<div id="org-desc">
+  <p>The CEO reports to the board. Three VPs report to the CEO: VP Engineering, VP Sales, VP Operations...</p>
+</div>
+
+// Approach 2: Link to full description
+<figure>
+  <img src="data-flow.png" alt="Data flow diagram for the ETL pipeline" />
+  <figcaption>
+    Data flow diagram. <a href="/docs/etl-diagram-description">Full text description</a>
+  </figcaption>
+</figure>
+```
+
+6. **Handle image loading states.** When images fail to load, the alt text becomes the visible content. Write alt text that makes sense visually too.
+
+7. **Use `role="presentation"` or `alt=""` for purely decorative images.** Background images in CSS do not need alt text (they are invisible to screen readers). Inline decorative images need `alt=""`.
+
+8. **For image-based buttons and links, the alt text describes the action, not the image.**
+
+```tsx
+// Social media link — describe the destination, not the icon
+<a href="https://twitter.com/company">
+  <img src="twitter-icon.svg" alt="Follow us on Twitter" />
+</a>
+
+// Image link in a product card
+<a href="/products/widget">
+  <img src="widget.jpg" alt="Blue Widget Pro — view product details" />
+</a>
+```
+
+## Details
+
+**Decision tree for alt text:**
+
+1. Is the image purely decorative? → `alt=""`
+2. Is the image a functional element (link, button)? → Alt describes the function/destination
+3. Is the image informative? → Alt conveys the same information as the image
+4. Is the image complex (chart, diagram)? → Short alt + long description elsewhere
+5. Is the image redundant with adjacent text? → `alt=""` (avoid repetition)
+
+**Alt text guidelines:**
+
+- Keep it concise — typically under 125 characters (screen readers may truncate longer text)
+- Do not start with "Image of" or "Photo of" — screen readers already announce the `img` role
+- Include text that appears in the image (logos with text, screenshots with UI labels)
+- Consider context — the same image may need different alt text on different pages
+
+**CMS and user-generated content:** Require alt text in image upload forms. Provide guidance to content editors. Use AI-generated alt text as a starting point, but always have a human review it.
+
+**Common mistakes:**
+
+- Missing `alt` attribute entirely (screen readers read the filename: "IMG_20260407_12345.jpg")
+- Alt text that says "image" or "photo" (redundant with the element role)
+- Same alt text for multiple images ("product image" on every product photo)
+- Decorative images with descriptive alt text (adds noise for screen reader users)
+
+## Source
+
+https://www.w3.org/WAI/tutorials/images/
+
+## Process
+
+1. Read the instructions and examples in this document.
+2. Apply the patterns to your implementation, adapting to your specific context.
+3. Verify your implementation against the details and edge cases listed above.
+
+## Harness Integration
+
+- **Type:** knowledge — this skill is a reference document, not a procedural workflow.
+- **No tools or state** — consumed as context by other skills and agents.
+
+## Success Criteria
+
+- The patterns described in this document are applied correctly in the implementation.
+- Edge cases and anti-patterns listed in this document are avoided.

package/dist/agents/skills/claude-code/a11y-image-text-alt/skill.yaml

@@ -0,0 +1,44 @@
+name: a11y-image-text-alt
+version: '1.0.0'
+description: Write effective alt text for images and provide text alternatives for non-text content
+stability: static
+cognitive_mode: advisory-guide
+type: knowledge
+tier: 3
+triggers:
+  - manual
+platforms:
+  - claude-code
+  - gemini-cli
+  - cursor
+  - codex
+tools: []
+paths:
+  - '**/*.tsx'
+  - '**/*.html'
+  - '**/*.vue'
+  - '**/*.svelte'
+  - '**/*.astro'
+related_skills:
+  - a11y-semantic-html
+  - a11y-aria-patterns
+  - a11y-color-contrast
+stack_signals:
+  - accessibility
+  - react
+  - typescript
+keywords:
+  - alt-text
+  - images
+  - decorative
+  - svg
+  - icons
+  - figure
+  - caption
+metadata:
+  author: community
+  upstream: w3.org/WAI/tutorials/images
+state:
+  persistent: false
+  files: []
+depends_on: []