Skip to content

Instantly share code, notes, and snippets.

@thedjpetersen

thedjpetersen/report.html

Created February 5, 2026 08:04
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save thedjpetersen/ce43c3b8cd78226f9167911134e3506f to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save thedjpetersen/ce43c3b8cd78226f9167911134e3506f to your computer and use it in GitHub Desktop.
Download ZIP
XDS Vibe Tests - XDSSwitch
Raw
report.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vibe Test Results - pr-claude-20260205-075248-fuzz-Switch</title>
<style>
* { box-sizing: border-box; }
body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
max-width: 1400px;
margin: 0 auto;
padding: 20px;
background: #f5f5f5;
}
h1, h2, h3 { color: #333; }
.card {
background: white;
border-radius: 8px;
padding: 20px;
margin-bottom: 20px;
box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}
.stats-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
gap: 16px;
margin-bottom: 20px;
}
.stat-box {
text-align: center;
padding: 16px;
background: #f8f9fa;
border-radius: 6px;
}
.stat-value { font-size: 1.8em; font-weight: bold; color: #333; }
.stat-label { color: #666; font-size: 0.85em; }
.tier-stats { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.tier-stat { text-align: center; padding: 12px 16px; border-radius: 6px; }
.tier-stat.gold { background: #fef3c7; }
.tier-stat.green { background: #dcfce7; }
.tier-stat.yellow { background: #fef9c3; }
.tier-stat.red { background: #fee2e2; }
.tier-stat .value { font-size: 1.5em; font-weight: bold; }
.tier-stat .label { font-size: 0.8em; color: #666; }
table { width: 100%; border-collapse: collapse; }
th, td { padding: 12px; text-align: left; border-bottom: 1px solid #eee; }
th { background: #f8f9fa; font-weight: 600; }
.tier-bar {
display: flex;
width: 100px;
height: 8px;
border-radius: 4px;
overflow: hidden;
}
.tier-bar .tier { height: 100%; }
.tier-bar .tier.gold { background: #f59e0b; }
.tier-bar .tier.green { background: #22c55e; }
.tier-bar .tier.yellow { background: #eab308; }
.tier-bar .tier.red { background: #ef4444; }
.tier-counts { white-space: nowrap; }
.tier-label { display: inline-block; width: 20px; text-align: center; font-size: 0.8em; padding: 2px 4px; border-radius: 4px; margin: 0 1px; }
.tier-label.gold { background: #fef3c7; }
.tier-label.green { background: #dcfce7; }
.tier-label.yellow { background: #fef9c3; }
.tier-label.red { background: #fee2e2; }
.badge {
display: inline-block;
padding: 2px 8px;
border-radius: 12px;
font-size: 0.75em;
margin: 2px;
}
.badge.critical { background: #fee2e2; color: #dc2626; }
.badge.anti-pattern { background: #fef9c3; color: #ca8a04; }
.badge.acceptable { background: #e0f2fe; color: #0369a1; }
.badge.doc-badge { background: #f3f4f6; color: #374151; font-size: 0.75em; }
.badge.gap-type { background: #e0e7ff; color: #4338ca; }
.badge.effort-trivial { background: #dcfce7; color: #16a34a; }
.badge.effort-moderate { background: #fef3c7; color: #d97706; }
.badge.effort-significant { background: #fee2e2; color: #dc2626; }
.docs-cell { max-width: 200px; }
.job-desc { font-size: 0.8em; color: #666; font-weight: normal; }
tr.tier-gold { background: #fffbeb; }
tr.tier-green { background: #f0fdf4; }
tr.tier-yellow { background: #fefce8; }
tr.tier-red { background: #fef2f2; }
.tier-icon { font-size: 1.2em; }
.prompt-cell { max-width: 300px; }
.toggle-code {
background: #e5e7eb;
border: none;
padding: 4px 8px;
border-radius: 4px;
cursor: pointer;
font-size: 0.85em;
}
.toggle-code:hover { background: #d1d5db; }
.code-block {
margin-top: 8px;
padding: 12px;
background: #1e293b;
color: #e2e8f0;
border-radius: 6px;
overflow-x: auto;
max-height: 400px;
font-size: 0.85em;
}
.issues-list { list-style: none; padding: 0; }
.issues-list li { padding: 4px 0; }
.issues-list.critical li { color: #dc2626; }
.issues-list.anti-pattern li { color: #ca8a04; }
.timestamp { color: #666; font-size: 0.9em; }
</style>
</head>
<body>
<h1>Vibe Test Results</h1>
<p class="timestamp">Iteration: pr-claude-20260205-075248-fuzz-Switch | Generated: 2026-02-05T08:03:58.259Z</p>
<div class="card">
<h2>Quality Tiers</h2>
<div class="tier-stats">
<div class="tier-stat gold">
<div class="value">17</div>
<div class="label">🥇 Gold (100%)</div>
</div>
<div class="tier-stat green">
<div class="value">0</div>
<div class="label">🟢 Green (0%)</div>
</div>
<div class="tier-stat yellow">
<div class="value">0</div>
<div class="label">🟡 Yellow (0%)</div>
</div>
<div class="tier-stat red">
<div class="value">0</div>
<div class="label">🔴 Red (0%)</div>
</div>
</div>
<p style="text-align: center; color: #666; margin-top: 12px; font-size: 0.85em;">
Gold = Pure XDS | Green = Acceptable escape hatches | Yellow = Anti-patterns (break theming) | Red = Critical failures
</p>
</div>
<div class="stats-grid">
<div class="stat-box">
<div class="stat-value" style="color: #22c55e">100%</div>
<div class="stat-label">Success Rate</div>
</div>
<div class="stat-box">
<div class="stat-value">17</div>
<div class="stat-label">Total Tests</div>
</div>
<div class="stat-box">
<div class="stat-value">3266.7s</div>
<div class="stat-label">Total Time</div>
</div>
<div class="stat-box">
<div class="stat-value">18,336</div>
<div class="stat-label">Total Tokens</div>
</div>
</div>
<div class="card">
<h2>Results by Category</h2>
<table>
<thead>
<tr><th>Category</th><th>Tiers</th><th>Rate</th><th>Count</th><th>Breakdown</th><th>Avg Time</th></tr>
</thead>
<tbody>
<tr>
<td>fuzz-test</td>
<td>
<div class="tier-bar">
<span class="tier gold" style="width: 100%"></span>
<span class="tier green" style="width: 0%"></span>
<span class="tier yellow" style="width: 0%"></span>
<span class="tier red" style="width: 0%"></span>
</div>
</td>
<td>100%</td>
<td>5/5</td>
<td class="tier-counts">
<span class="tier-label gold">5</span>
<span class="tier-label green">0</span>
<span class="tier-label yellow">0</span>
<span class="tier-label red">0</span>
</td>
<td>653.3s</td>
</tr>
<tr>
<td>unknown</td>
<td>
<div class="tier-bar">
<span class="tier gold" style="width: 100%"></span>
<span class="tier green" style="width: 0%"></span>
<span class="tier yellow" style="width: 0%"></span>
<span class="tier red" style="width: 0%"></span>
</div>
</td>
<td>100%</td>
<td>12/12</td>
<td class="tier-counts">
<span class="tier-label gold">12</span>
<span class="tier-label green">0</span>
<span class="tier-label yellow">0</span>
<span class="tier-label red">0</span>
</td>
<td>-</td>
</tr>
</tbody>
</table>
</div>
<div class="card">
<h2>📊 Token Usage Breakdown</h2>
<div style="display: grid; grid-template-columns: 1fr 1fr; gap: 20px;">
<div>
<h3 style="margin-top: 0;">Input Tokens (estimated)</h3>
<table>
<thead><tr><th>Source</th><th>Tokens</th></tr></thead>
<tbody>
<tr>
<td><strong>AGENTS.md</strong><br><span class="job-desc">Component catalog and XDS guidance</span></td>
<td>2768</td>
</tr>
<tr>
<td><strong>Design docs</strong><br><span class="job-desc">principles.md, tokens.md - styling patterns</span></td>
<td>2360</td>
</tr>
<tr>
<td><strong>Component docs</strong><br><span class="job-desc">Button.md, TextInput.md, etc.</span></td>
<td>5724</td>
</tr>
<tr>
<td><strong>Prompt overhead</strong><br><span class="job-desc">Task instructions and persona</span></td>
<td>6375</td>
</tr>
<tr style="font-weight: bold; border-top: 2px solid #333;"><td>Input Subtotal</td><td>17227</td></tr>
</tbody>
</table>
</div>
<div>
<h3 style="margin-top: 0;">Output Tokens (by job)</h3>
<table>
<thead><tr><th>Job</th><th>%</th><th>Tokens</th></tr></thead>
<tbody>
<tr>
<td><strong>Component Routing</strong><br><span class="job-desc">Import statements for XDS components</span></td>
<td>7%</td>
<td>~74</td>
</tr>
<tr>
<td><strong>Component Config</strong><br><span class="job-desc">Props and attributes on XDS components</span></td>
<td>23%</td>
<td>~255</td>
</tr>
<tr>
<td><strong>Supplemental Styling</strong><br><span class="job-desc">StyleX blocks for layout/spacing gaps</span></td>
<td>5%</td>
<td>~60</td>
</tr>
<tr>
<td><strong>Content Authoring</strong><br><span class="job-desc">HTML structure, JSX elements, copy</span></td>
<td>43%</td>
<td>~481</td>
</tr>
<tr>
<td><strong>Business Logic</strong><br><span class="job-desc">useState, handlers, API calls, conditionals</span></td>
<td>11%</td>
<td>~117</td>
</tr>
<tr>
<td><strong>Boilerplate</strong><br><span class="job-desc">Type definitions, imports, exports</span></td>
<td>11%</td>
<td>~122</td>
</tr>
<tr style="font-weight: bold; border-top: 2px solid #333;"><td>Output Subtotal</td><td>100%</td><td>1109</td></tr>
</tbody>
</table>
</div>
</div>
<div style="text-align: center; margin-top: 16px; padding: 12px; background: #f0f9ff; border-radius: 8px;">
<span style="font-size: 1.2em; font-weight: bold;">Total: 18,336 tokens</span>
<span style="color: #666; margin-left: 12px;">(17227 input + 1109 output)</span>
</div>
</div>
<div class="card">
<h2>Individual Test Results</h2>
<table>
<thead>
<tr>
<th>Tier</th>
<th>Category</th>
<th>Prompt</th>
<th>Escape Hatches</th>
<th>Time</th>
<th>Tokens (in/out)</th>
<th>Docs Read</th>
<th>Response</th>
</tr>
</thead>
<tbody>
<tr class="tier-gold">
<td><span class="tier-icon">🥇</span></td>
<td>fuzz-test</td>
<td class="prompt-cell">Make a XDSSwitch with touch-friendly sizing for mobile</td>
<td>-</td>
<td>657.1s</td>
<td title="Input: 2228 (AGENTS: 173, Design: 1180, Components: 500)&#10;Output: 178 (Routing: 11, Config: 27, Styling: 60, Content: 32, Logic: 19, Boilerplate: 29)" style="cursor: help;">2406 <span style="color: #666; font-size: 0.8em;">(2228/178)</span></td>
<td class="docs-cell"><span class="badge doc-badge">AGENTS</span> <span class="badge doc-badge">principles</span> <span class="badge doc-badge">tokens</span> <span class="badge doc-badge">Switch</span></td>
<td>
<button class="toggle-code" onclick="toggleCode('pr-claude-20260205-075248-fuzz-Switch-fuzz-switch-01')">View Code</button>
<pre class="code-block" id="code-pr-claude-20260205-075248-fuzz-Switch-fuzz-switch-01" style="display:none"><code>import * as React from 'react';
import * as stylex from '@stylexjs/stylex';
import {XDSSwitch} from '@xds/core/Switch';
const styles = stylex.create({
touchWrapper: {
// Minimum touch target of 44x44px for mobile accessibility
minHeight: 44,
minWidth: 44,
display: 'flex',
alignItems: 'center',
padding: 'var(--spacing-2)',
},
});
export function TouchFriendlySwitch() {
const [isEnabled, setIsEnabled] = React.useState(false);
return (
&lt;div {...stylex.props(styles.touchWrapper)}&gt;
&lt;XDSSwitch
label=&quot;Enable feature&quot;
value={isEnabled}
onChange={setIsEnabled}
labelPosition=&quot;start&quot;
labelSpacing=&quot;spread&quot;
/&gt;
&lt;/div&gt;
);
}
</code></pre>
</td>
</tr>
<tr class="tier-gold">
<td><span class="tier-icon">🥇</span></td>
<td>unknown</td>
<td class="prompt-cell">fuzz-switch-02-claude</td>
<td>-</td>
<td>-</td>
<td title="Input: 548 (AGENTS: 173, Design: 0, Components: 0)&#10;Output: 0 (Routing: 0, Config: 0, Styling: 0, Content: 0, Logic: 0, Boilerplate: 0)" style="cursor: help;">548 <span style="color: #666; font-size: 0.8em;">(548/0)</span></td>
<td class="docs-cell"><span class="badge doc-badge">AGENTS</span></td>
<td>
<button class="toggle-code" onclick="toggleCode('pr-claude-20260205-075248-fuzz-Switch-fuzz-switch-02-claude')">View Code</button>
<pre class="code-block" id="code-pr-claude-20260205-075248-fuzz-Switch-fuzz-switch-02-claude" style="display:none"><code></code></pre>
</td>
</tr>
<tr class="tier-gold">
<td><span class="tier-icon">🥇</span></td>
<td>unknown</td>
<td class="prompt-cell">fuzz-switch-03-claude</td>
<td>-</td>
<td>-</td>
<td title="Input: 548 (AGENTS: 173, Design: 0, Components: 0)&#10;Output: 0 (Routing: 0, Config: 0, Styling: 0, Content: 0, Logic: 0, Boilerplate: 0)" style="cursor: help;">548 <span style="color: #666; font-size: 0.8em;">(548/0)</span></td>
<td class="docs-cell"><span class="badge doc-badge">AGENTS</span></td>
<td>
<button class="toggle-code" onclick="toggleCode('pr-claude-20260205-075248-fuzz-Switch-fuzz-switch-03-claude')">View Code</button>
<pre class="code-block" id="code-pr-claude-20260205-075248-fuzz-Switch-fuzz-switch-03-claude" style="display:none"><code></code></pre>
</td>
</tr>
<tr class="tier-gold">
<td><span class="tier-icon">🥇</span></td>
<td>unknown</td>
<td class="prompt-cell">fuzz-switch-04-claude</td>
<td>-</td>
<td>-</td>
<td title="Input: 548 (AGENTS: 173, Design: 0, Components: 0)&#10;Output: 0 (Routing: 0, Config: 0, Styling: 0, Content: 0, Logic: 0, Boilerplate: 0)" style="cursor: help;">548 <span style="color: #666; font-size: 0.8em;">(548/0)</span></td>
<td class="docs-cell"><span class="badge doc-badge">AGENTS</span></td>
<td>
<button class="toggle-code" onclick="toggleCode('pr-claude-20260205-075248-fuzz-Switch-fuzz-switch-04-claude')">View Code</button>
<pre class="code-block" id="code-pr-claude-20260205-075248-fuzz-Switch-fuzz-switch-04-claude" style="display:none"><code></code></pre>
</td>
</tr>
<tr class="tier-gold">
<td><span class="tier-icon">🥇</span></td>
<td>unknown</td>
<td class="prompt-cell">fuzz-switch-05-claude</td>
<td>-</td>
<td>-</td>
<td title="Input: 548 (AGENTS: 173, Design: 0, Components: 0)&#10;Output: 0 (Routing: 0, Config: 0, Styling: 0, Content: 0, Logic: 0, Boilerplate: 0)" style="cursor: help;">548 <span style="color: #666; font-size: 0.8em;">(548/0)</span></td>
<td class="docs-cell"><span class="badge doc-badge">AGENTS</span></td>
<td>
<button class="toggle-code" onclick="toggleCode('pr-claude-20260205-075248-fuzz-Switch-fuzz-switch-05-claude')">View Code</button>
<pre class="code-block" id="code-pr-claude-20260205-075248-fuzz-Switch-fuzz-switch-05-claude" style="display:none"><code></code></pre>
</td>
</tr>
<tr class="tier-gold">
<td><span class="tier-icon">🥇</span></td>
<td>unknown</td>
<td class="prompt-cell">fuzz-switch-06-claude</td>
<td>-</td>
<td>-</td>
<td title="Input: 548 (AGENTS: 173, Design: 0, Components: 0)&#10;Output: 78 (Routing: 0, Config: 0, Styling: 0, Content: 78, Logic: 0, Boilerplate: 0)" style="cursor: help;">626 <span style="color: #666; font-size: 0.8em;">(548/78)</span></td>
<td class="docs-cell"><span class="badge doc-badge">AGENTS</span></td>
<td>
<button class="toggle-code" onclick="toggleCode('pr-claude-20260205-075248-fuzz-Switch-fuzz-switch-06-claude')">View Code</button>
<pre class="code-block" id="code-pr-claude-20260205-075248-fuzz-Switch-fuzz-switch-06-claude" style="display:none"><code>Done. I created:
1. `fuzz-switch-06.tsx` - An XDSSwitch inside an XDSCard with proper spacing using XDSLayout and XDSLayoutContent. The card has a fixed width of 400px, and the switch is controlled with React state.
2. `fuzz-switch-06.meta.json` - Lists all the documentation files I read to generate the code.
</code></pre>
</td>
</tr>
<tr class="tier-gold">
<td><span class="tier-icon">🥇</span></td>
<td>fuzz-test</td>
<td class="prompt-cell">Build a XDSSwitch inside a card with proper spacing</td>
<td>-</td>
<td>653.8s</td>
<td title="Input: 5452 (AGENTS: 173, Design: 1180, Components: 3724)&#10;Output: 139 (Routing: 29, Config: 67, Styling: 0, Content: 6, Logic: 19, Boilerplate: 18)" style="cursor: help;">5591 <span style="color: #666; font-size: 0.8em;">(5452/139)</span></td>
<td class="docs-cell"><span class="badge doc-badge">AGENTS</span> <span class="badge doc-badge">Switch</span> <span class="badge doc-badge">Container</span> <span class="badge doc-badge">tokens</span> <span class="badge doc-badge">principles</span> <span class="badge doc-badge">Layout</span></td>
<td>
<button class="toggle-code" onclick="toggleCode('pr-claude-20260205-075248-fuzz-Switch-fuzz-switch-06')">View Code</button>
<pre class="code-block" id="code-pr-claude-20260205-075248-fuzz-Switch-fuzz-switch-06" style="display:none"><code>import {useState} from 'react';
import {XDSCard, XDSLayout, XDSLayoutContent} from '@xds/core/Layout';
import {XDSSwitch} from '@xds/core/Switch';
export default function SwitchInCard() {
const [enabled, setEnabled] = useState(false);
return (
&lt;XDSCard width={400}&gt;
&lt;XDSLayout
content={
&lt;XDSLayoutContent&gt;
&lt;XDSSwitch
label=&quot;Enable notifications&quot;
value={enabled}
onChange={setEnabled}
/&gt;
&lt;/XDSLayoutContent&gt;
}
/&gt;
&lt;/XDSCard&gt;
);
}
</code></pre>
</td>
</tr>
<tr class="tier-gold">
<td><span class="tier-icon">🥇</span></td>
<td>unknown</td>
<td class="prompt-cell">fuzz-switch-07-claude</td>
<td>-</td>
<td>-</td>
<td title="Input: 548 (AGENTS: 173, Design: 0, Components: 0)&#10;Output: 48 (Routing: 0, Config: 0, Styling: 0, Content: 48, Logic: 0, Boilerplate: 0)" style="cursor: help;">596 <span style="color: #666; font-size: 0.8em;">(548/48)</span></td>
<td class="docs-cell"><span class="badge doc-badge">AGENTS</span></td>
<td>
<button class="toggle-code" onclick="toggleCode('pr-claude-20260205-075248-fuzz-Switch-fuzz-switch-07-claude')">View Code</button>
<pre class="code-block" id="code-pr-claude-20260205-075248-fuzz-Switch-fuzz-switch-07-claude" style="display:none"><code>Done. I created an XDSSwitch component with a `BellIcon` next to the label using the `labelIcon` prop. The component is a simple toggle for enabling notifications with proper state management.
</code></pre>
</td>
</tr>
<tr class="tier-gold">
<td><span class="tier-icon">🥇</span></td>
<td>fuzz-test</td>
<td class="prompt-cell">Create a XDSSwitch with an icon next to the label</td>
<td>-</td>
<td>646.4s</td>
<td title="Input: 875 (AGENTS: 0, Design: 0, Components: 500)&#10;Output: 95 (Routing: 12, Config: 25, Styling: 0, Content: 9, Logic: 17, Boilerplate: 33)" style="cursor: help;">970 <span style="color: #666; font-size: 0.8em;">(875/95)</span></td>
<td class="docs-cell"><span class="badge doc-badge">Switch</span></td>
<td>
<button class="toggle-code" onclick="toggleCode('pr-claude-20260205-075248-fuzz-Switch-fuzz-switch-07')">View Code</button>
<pre class="code-block" id="code-pr-claude-20260205-075248-fuzz-Switch-fuzz-switch-07" style="display:none"><code>import { XDSSwitch } from '@xds/core/Switch';
import { BellIcon } from '@heroicons/react/24/outline';
import { useState } from 'react';
export default function SwitchWithIcon() {
const [enabled, setEnabled] = useState(false);
return (
&lt;XDSSwitch
label=&quot;Enable notifications&quot;
labelIcon={BellIcon}
value={enabled}
onChange={setEnabled}
/&gt;
);
}
</code></pre>
</td>
</tr>
<tr class="tier-gold">
<td><span class="tier-icon">🥇</span></td>
<td>unknown</td>
<td class="prompt-cell">fuzz-switch-08-claude</td>
<td>-</td>
<td>-</td>
<td title="Input: 548 (AGENTS: 173, Design: 0, Components: 0)&#10;Output: 138 (Routing: 0, Config: 0, Styling: 0, Content: 138, Logic: 0, Boilerplate: 0)" style="cursor: help;">686 <span style="color: #666; font-size: 0.8em;">(548/138)</span></td>
<td class="docs-cell"><span class="badge doc-badge">AGENTS</span></td>
<td>
<button class="toggle-code" onclick="toggleCode('pr-claude-20260205-075248-fuzz-Switch-fuzz-switch-08-claude')">View Code</button>
<pre class="code-block" id="code-pr-claude-20260205-075248-fuzz-Switch-fuzz-switch-08-claude" style="display:none"><code>Done. I created an accessible XDSSwitch component that demonstrates:
1. **Basic switch** with an accessible label (required by XDSSwitch)
2. **Switch with description** providing additional context for users
3. **Required switch with labelTooltip** offering help text accessible via an info icon
4. **Switch with isLabelHidden** - visually hides the label while keeping it accessible to screen readers
The XDSSwitch component has built-in accessibility features - it uses a native checkbox with `role=&quot;switch&quot;` and proper ARIA attributes as documented.
</code></pre>
</td>
</tr>
<tr class="tier-gold">
<td><span class="tier-icon">🥇</span></td>
<td>fuzz-test</td>
<td class="prompt-cell">Build an accessible XDSSwitch with proper ARIA labels</td>
<td>-</td>
<td>656.6s</td>
<td title="Input: 1048 (AGENTS: 173, Design: 0, Components: 500)&#10;Output: 310 (Routing: 12, Config: 112, Styling: 0, Content: 122, Logic: 45, Boilerplate: 20)" style="cursor: help;">1358 <span style="color: #666; font-size: 0.8em;">(1048/310)</span></td>
<td class="docs-cell"><span class="badge doc-badge">AGENTS</span> <span class="badge doc-badge">Switch</span></td>
<td>
<button class="toggle-code" onclick="toggleCode('pr-claude-20260205-075248-fuzz-Switch-fuzz-switch-08')">View Code</button>
<pre class="code-block" id="code-pr-claude-20260205-075248-fuzz-Switch-fuzz-switch-08" style="display:none"><code>import { useState } from 'react';
import { XDSSwitch } from '@xds/core/Switch';
export default function AccessibleSwitch() {
const [notifications, setNotifications] = useState(false);
const [darkMode, setDarkMode] = useState(false);
const [autoSave, setAutoSave] = useState(true);
return (
&lt;div&gt;
{/* Basic switch with accessible label */}
&lt;XDSSwitch
label=&quot;Enable notifications&quot;
value={notifications}
onChange={setNotifications}
/&gt;
{/* Switch with description for additional context */}
&lt;XDSSwitch
label=&quot;Dark mode&quot;
description=&quot;Switch to a darker color scheme for reduced eye strain&quot;
value={darkMode}
onChange={setDarkMode}
/&gt;
{/* Required switch with tooltip for help text */}
&lt;XDSSwitch
label=&quot;Auto-save&quot;
labelTooltip=&quot;Your work will be saved automatically every few seconds&quot;
value={autoSave}
onChange={setAutoSave}
isRequired
/&gt;
{/* Switch with visually hidden label (still accessible to screen readers) */}
&lt;XDSSwitch
label=&quot;Toggle sidebar visibility&quot;
isLabelHidden
value={false}
onChange={() =&gt; {}}
/&gt;
&lt;/div&gt;
);
}
</code></pre>
</td>
</tr>
<tr class="tier-gold">
<td><span class="tier-icon">🥇</span></td>
<td>unknown</td>
<td class="prompt-cell">fuzz-switch-09-claude</td>
<td>-</td>
<td>-</td>
<td title="Input: 548 (AGENTS: 173, Design: 0, Components: 0)&#10;Output: 47 (Routing: 0, Config: 0, Styling: 0, Content: 47, Logic: 0, Boilerplate: 0)" style="cursor: help;">595 <span style="color: #666; font-size: 0.8em;">(548/47)</span></td>
<td class="docs-cell"><span class="badge doc-badge">AGENTS</span></td>
<td>
<button class="toggle-code" onclick="toggleCode('pr-claude-20260205-075248-fuzz-Switch-fuzz-switch-09-claude')">View Code</button>
<pre class="code-block" id="code-pr-claude-20260205-075248-fuzz-Switch-fuzz-switch-09-claude" style="display:none"><code>Done. I created an XDSSwitch component with the label &quot;Enable notifications&quot; using React state to manage the toggle value. The code follows the XDS documentation patterns from Switch.md.
</code></pre>
</td>
</tr>
<tr class="tier-gold">
<td><span class="tier-icon">🥇</span></td>
<td>fuzz-test</td>
<td class="prompt-cell">Make a XDSSwitch with a label that says &quot;Enable notifications&quot;</td>
<td>-</td>
<td>652.9s</td>
<td title="Input: 1048 (AGENTS: 173, Design: 0, Components: 500)&#10;Output: 77 (Routing: 12, Config: 25, Styling: 0, Content: 2, Logic: 17, Boilerplate: 22)" style="cursor: help;">1125 <span style="color: #666; font-size: 0.8em;">(1048/77)</span></td>
<td class="docs-cell"><span class="badge doc-badge">AGENTS</span> <span class="badge doc-badge">Switch</span></td>
<td>
<button class="toggle-code" onclick="toggleCode('pr-claude-20260205-075248-fuzz-Switch-fuzz-switch-09')">View Code</button>
<pre class="code-block" id="code-pr-claude-20260205-075248-fuzz-Switch-fuzz-switch-09" style="display:none"><code>import { XDSSwitch } from '@xds/core/Switch';
import { useState } from 'react';
export default function EnableNotificationsSwitch() {
const [enabled, setEnabled] = useState(false);
return (
&lt;XDSSwitch
label=&quot;Enable notifications&quot;
value={enabled}
onChange={setEnabled}
/&gt;
);
}
</code></pre>
</td>
</tr>
<tr class="tier-gold">
<td><span class="tier-icon">🥇</span></td>
<td>unknown</td>
<td class="prompt-cell">fuzz-switch-10-claude</td>
<td>-</td>
<td>-</td>
<td title="Input: 548 (AGENTS: 173, Design: 0, Components: 0)&#10;Output: 0 (Routing: 0, Config: 0, Styling: 0, Content: 0, Logic: 0, Boilerplate: 0)" style="cursor: help;">548 <span style="color: #666; font-size: 0.8em;">(548/0)</span></td>
<td class="docs-cell"><span class="badge doc-badge">AGENTS</span></td>
<td>
<button class="toggle-code" onclick="toggleCode('pr-claude-20260205-075248-fuzz-Switch-fuzz-switch-10-claude')">View Code</button>
<pre class="code-block" id="code-pr-claude-20260205-075248-fuzz-Switch-fuzz-switch-10-claude" style="display:none"><code></code></pre>
</td>
</tr>
<tr class="tier-gold">
<td><span class="tier-icon">🥇</span></td>
<td>unknown</td>
<td class="prompt-cell">fuzz-switch-11-claude</td>
<td>-</td>
<td>-</td>
<td title="Input: 548 (AGENTS: 173, Design: 0, Components: 0)&#10;Output: 0 (Routing: 0, Config: 0, Styling: 0, Content: 0, Logic: 0, Boilerplate: 0)" style="cursor: help;">548 <span style="color: #666; font-size: 0.8em;">(548/0)</span></td>
<td class="docs-cell"><span class="badge doc-badge">AGENTS</span></td>
<td>
<button class="toggle-code" onclick="toggleCode('pr-claude-20260205-075248-fuzz-Switch-fuzz-switch-11-claude')">View Code</button>
<pre class="code-block" id="code-pr-claude-20260205-075248-fuzz-Switch-fuzz-switch-11-claude" style="display:none"><code></code></pre>
</td>
</tr>
<tr class="tier-gold">
<td><span class="tier-icon">🥇</span></td>
<td>unknown</td>
<td class="prompt-cell">fuzz-switch-13-claude</td>
<td>-</td>
<td>-</td>
<td title="Input: 548 (AGENTS: 173, Design: 0, Components: 0)&#10;Output: 0 (Routing: 0, Config: 0, Styling: 0, Content: 0, Logic: 0, Boilerplate: 0)" style="cursor: help;">548 <span style="color: #666; font-size: 0.8em;">(548/0)</span></td>
<td class="docs-cell"><span class="badge doc-badge">AGENTS</span></td>
<td>
<button class="toggle-code" onclick="toggleCode('pr-claude-20260205-075248-fuzz-Switch-fuzz-switch-13-claude')">View Code</button>
<pre class="code-block" id="code-pr-claude-20260205-075248-fuzz-Switch-fuzz-switch-13-claude" style="display:none"><code></code></pre>
</td>
</tr>
<tr class="tier-gold">
<td><span class="tier-icon">🥇</span></td>
<td>unknown</td>
<td class="prompt-cell">fuzz-switch-14-claude</td>
<td>-</td>
<td>-</td>
<td title="Input: 548 (AGENTS: 173, Design: 0, Components: 0)&#10;Output: 0 (Routing: 0, Config: 0, Styling: 0, Content: 0, Logic: 0, Boilerplate: 0)" style="cursor: help;">548 <span style="color: #666; font-size: 0.8em;">(548/0)</span></td>
<td class="docs-cell"><span class="badge doc-badge">AGENTS</span></td>
<td>
<button class="toggle-code" onclick="toggleCode('pr-claude-20260205-075248-fuzz-Switch-fuzz-switch-14-claude')">View Code</button>
<pre class="code-block" id="code-pr-claude-20260205-075248-fuzz-Switch-fuzz-switch-14-claude" style="display:none"><code></code></pre>
</td>
</tr>
</tbody>
</table>
</div>
<script>
function toggleCode(id) {
const el = document.getElementById('code-' + id);
el.style.display = el.style.display === 'none' ? 'block' : 'none';
}
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment