Skip to content

Instantly share code, notes, and snippets.

@thedjpetersen

thedjpetersen/report.html

Created February 5, 2026 08:26
Show Gist options

  • Select an option

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

Select an option

Learn more about clone URLs
Save thedjpetersen/d36e1c861f73c00709f8c1a0e59979bf 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-081540-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-081540-fuzz-Switch | Generated: 2026-02-05T08:25:48.075Z</p>
<div class="card">
<h2>Quality Tiers</h2>
<div class="tier-stats">
<div class="tier-stat gold">
<div class="value">13</div>
<div class="label">🥇 Gold (93%)</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">1</div>
<div class="label">🟡 Yellow (7%)</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">14</div>
<div class="stat-label">Total Tests</div>
</div>
<div class="stat-box">
<div class="stat-value">1344.4s</div>
<div class="stat-label">Total Time</div>
</div>
<div class="stat-box">
<div class="stat-value">17,182</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>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>10/10</td>
<td class="tier-counts">
<span class="tier-label gold">10</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>
<tr>
<td>fuzz-test</td>
<td>
<div class="tier-bar">
<span class="tier gold" style="width: 75%"></span>
<span class="tier green" style="width: 0%"></span>
<span class="tier yellow" style="width: 25%"></span>
<span class="tier red" style="width: 0%"></span>
</div>
</td>
<td>100%</td>
<td>4/4</td>
<td class="tier-counts">
<span class="tier-label gold">3</span>
<span class="tier-label green">0</span>
<span class="tier-label yellow">1</span>
<span class="tier-label red">0</span>
</td>
<td>336.1s</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>2076</td>
</tr>
<tr>
<td><strong>Design docs</strong><br><span class="job-desc">principles.md, tokens.md - styling patterns</span></td>
<td>849</td>
</tr>
<tr>
<td><strong>Component docs</strong><br><span class="job-desc">Button.md, TextInput.md, etc.</span></td>
<td>6708</td>
</tr>
<tr>
<td><strong>Prompt overhead</strong><br><span class="job-desc">Task instructions and persona</span></td>
<td>5250</td>
</tr>
<tr style="font-weight: bold; border-top: 2px solid #333;"><td>Input Subtotal</td><td>14883</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>6%</td>
<td>~146</td>
</tr>
<tr>
<td><strong>Component Config</strong><br><span class="job-desc">Props and attributes on XDS components</span></td>
<td>31%</td>
<td>~722</td>
</tr>
<tr>
<td><strong>Supplemental Styling</strong><br><span class="job-desc">StyleX blocks for layout/spacing gaps</span></td>
<td>4%</td>
<td>~82</td>
</tr>
<tr>
<td><strong>Content Authoring</strong><br><span class="job-desc">HTML structure, JSX elements, copy</span></td>
<td>44%</td>
<td>~1009</td>
</tr>
<tr>
<td><strong>Business Logic</strong><br><span class="job-desc">useState, handlers, API calls, conditionals</span></td>
<td>10%</td>
<td>~228</td>
</tr>
<tr>
<td><strong>Boilerplate</strong><br><span class="job-desc">Type definitions, imports, exports</span></td>
<td>5%</td>
<td>~113</td>
</tr>
<tr style="font-weight: bold; border-top: 2px solid #333;"><td>Output Subtotal</td><td>100%</td><td>2299</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: 17,182 tokens</span>
<span style="color: #666; margin-left: 12px;">(14883 input + 2299 output)</span>
</div>
</div>
<div class="card">
<h2>⚠️ Anti-Patterns (break theming)</h2>
<p style="color: #666; font-size: 0.9em;">These patterns use hardcoded values instead of CSS variables, breaking theme support.</p>
<ul class="issues-list anti-pattern"><li><strong>hardcoded_spacing</strong>: 1</li></ul>
</div>
<div class="card">
<h2>💡 Gap Suggestions</h2>
<p style="color: #666; font-size: 0.9em;">Component or API improvements to reduce escape hatches.</p>
<table>
<thead>
<tr><th>Type</th><th>Suggestion</th><th>Frequency</th><th>Effort</th></tr>
</thead>
<tbody>
<tr>
<td><span class="badge gap-type">New Prop</span></td>
<td>Add spacing/size prop to cover: hardcoded_spacing</td>
<td>1x</td>
<td><span class="badge effort-trivial">trivial</span></td>
</tr>
</tbody>
</table>
</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>unknown</td>
<td class="prompt-cell">fuzz-switch-01-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-081540-fuzz-Switch-fuzz-switch-01-claude')">View Code</button>
<pre class="code-block" id="code-pr-claude-20260205-081540-fuzz-Switch-fuzz-switch-01-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-02-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-081540-fuzz-Switch-fuzz-switch-02-claude')">View Code</button>
<pre class="code-block" id="code-pr-claude-20260205-081540-fuzz-Switch-fuzz-switch-02-claude" style="display:none"><code>Done. I created an XDSSwitch with the `labelIcon` prop set to a `BellIcon` from Hero Icons. The component uses the built-in `labelIcon` prop which displays an icon before the label text.
</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>331.0s</td>
<td title="Input: 2048 (AGENTS: 0, Design: 283, Components: 1390)&#10;Output: 96 (Routing: 12, Config: 25, Styling: 0, Content: 9, Logic: 17, Boilerplate: 35)" style="cursor: help;">2144 <span style="color: #666; font-size: 0.8em;">(2048/96)</span></td>
<td class="docs-cell"><span class="badge doc-badge">Switch</span> <span class="badge doc-badge">Icon</span> <span class="badge doc-badge">principles</span></td>
<td>
<button class="toggle-code" onclick="toggleCode('pr-claude-20260205-081540-fuzz-Switch-fuzz-switch-02')">View Code</button>
<pre class="code-block" id="code-pr-claude-20260205-081540-fuzz-Switch-fuzz-switch-02" style="display:none"><code>import { useState } from 'react';
import { XDSSwitch } from '@xds/core/Switch';
import { BellIcon } from '@heroicons/react/24/outline';
export default function SwitchWithLabelIcon() {
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-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-081540-fuzz-Switch-fuzz-switch-03-claude')">View Code</button>
<pre class="code-block" id="code-pr-claude-20260205-081540-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-081540-fuzz-Switch-fuzz-switch-04-claude')">View Code</button>
<pre class="code-block" id="code-pr-claude-20260205-081540-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-081540-fuzz-Switch-fuzz-switch-05-claude')">View Code</button>
<pre class="code-block" id="code-pr-claude-20260205-081540-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: 136 (Routing: 0, Config: 0, Styling: 0, Content: 136, Logic: 0, Boilerplate: 0)" style="cursor: help;">684 <span style="color: #666; font-size: 0.8em;">(548/136)</span></td>
<td class="docs-cell"><span class="badge doc-badge">AGENTS</span></td>
<td>
<button class="toggle-code" onclick="toggleCode('pr-claude-20260205-081540-fuzz-Switch-fuzz-switch-06-claude')">View Code</button>
<pre class="code-block" id="code-pr-claude-20260205-081540-fuzz-Switch-fuzz-switch-06-claude" style="display:none"><code>Done. I've created a settings panel component with multiple XDSSwitch elements organized into three sections:
1. **Notifications** - Enable notifications, Email alerts, Push notifications
2. **Appearance** - Dark mode
3. **Privacy** - Auto-save, Analytics
Each switch uses the settings panel style with `labelPosition=&quot;start&quot;` and `labelSpacing=&quot;spread&quot;` as documented. The switches include descriptions for clarity, and the component uses proper XDS layout components (XDSCard, XDSVStack, XDSDivider) with StyleX styling using semantic tokens.
</code></pre>
</td>
</tr>
<tr class="tier-yellow">
<td><span class="tier-icon">🟡</span></td>
<td>fuzz-test</td>
<td class="prompt-cell">Create a settings panel with multiple XDSSwitch elements for different preferences</td>
<td><span class="badge anti-pattern">hardcoded_spacing</span></td>
<td>337.6s</td>
<td title="Input: 1331 (AGENTS: 173, Design: 283, Components: 500)&#10;Output: 781 (Routing: 58, Config: 334, Styling: 51, Content: 221, Logic: 89, Boilerplate: 28)" style="cursor: help;">2112 <span style="color: #666; font-size: 0.8em;">(1331/781)</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">Switch</span></td>
<td>
<button class="toggle-code" onclick="toggleCode('pr-claude-20260205-081540-fuzz-Switch-fuzz-switch-06')">View Code</button>
<pre class="code-block" id="code-pr-claude-20260205-081540-fuzz-Switch-fuzz-switch-06" style="display:none"><code>import * as stylex from '@stylexjs/stylex';
import { useState } from 'react';
import { XDSSwitch } from '@xds/core/Switch';
import { XDSHeading } from '@xds/core/Heading';
import { XDSVStack } from '@xds/core/VStack';
import { XDSCard } from '@xds/core/Card';
import { XDSDivider } from '@xds/core/Divider';
const styles = stylex.create({
panel: {
padding: 'var(--spacing-6)',
maxWidth: '480px',
},
section: {
gap: 'var(--spacing-4)',
},
switchGroup: {
gap: 'var(--spacing-3)',
},
});
export function SettingsPanel() {
const [notifications, setNotifications] = useState(true);
const [emailAlerts, setEmailAlerts] = useState(false);
const [pushNotifications, setPushNotifications] = useState(true);
const [darkMode, setDarkMode] = useState(false);
const [autoSave, setAutoSave] = useState(true);
const [analytics, setAnalytics] = useState(false);
return (
&lt;XDSCard xstyle={styles.panel}&gt;
&lt;XDSVStack xstyle={styles.section}&gt;
&lt;XDSHeading level={2}&gt;Settings&lt;/XDSHeading&gt;
&lt;XDSVStack xstyle={styles.switchGroup}&gt;
&lt;XDSHeading level={4}&gt;Notifications&lt;/XDSHeading&gt;
&lt;XDSSwitch
label=&quot;Enable notifications&quot;
description=&quot;Receive notifications about activity&quot;
value={notifications}
onChange={setNotifications}
labelPosition=&quot;start&quot;
labelSpacing=&quot;spread&quot;
/&gt;
&lt;XDSSwitch
label=&quot;Email alerts&quot;
description=&quot;Get important updates via email&quot;
value={emailAlerts}
onChange={setEmailAlerts}
labelPosition=&quot;start&quot;
labelSpacing=&quot;spread&quot;
/&gt;
&lt;XDSSwitch
label=&quot;Push notifications&quot;
description=&quot;Receive push notifications on your device&quot;
value={pushNotifications}
onChange={setPushNotifications}
labelPosition=&quot;start&quot;
labelSpacing=&quot;spread&quot;
/&gt;
&lt;/XDSVStack&gt;
&lt;XDSDivider /&gt;
&lt;XDSVStack xstyle={styles.switchGroup}&gt;
&lt;XDSHeading level={4}&gt;Appearance&lt;/XDSHeading&gt;
&lt;XDSSwitch
label=&quot;Dark mode&quot;
description=&quot;Switch to a darker color scheme&quot;
value={darkMode}
onChange={setDarkMode}
labelPosition=&quot;start&quot;
labelSpacing=&quot;spread&quot;
/&gt;
&lt;/XDSVStack&gt;
&lt;XDSDivider /&gt;
&lt;XDSVStack xstyle={styles.switchGroup}&gt;
&lt;XDSHeading level={4}&gt;Privacy&lt;/XDSHeading&gt;
&lt;XDSSwitch
label=&quot;Auto-save&quot;
description=&quot;Automatically save your work&quot;
value={autoSave}
onChange={setAutoSave}
labelPosition=&quot;start&quot;
labelSpacing=&quot;spread&quot;
/&gt;
&lt;XDSSwitch
label=&quot;Analytics&quot;
description=&quot;Help improve the product by sharing usage data&quot;
value={analytics}
onChange={setAnalytics}
labelPosition=&quot;start&quot;
labelSpacing=&quot;spread&quot;
isOptional
/&gt;
&lt;/XDSVStack&gt;
&lt;/XDSVStack&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: 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-081540-fuzz-Switch-fuzz-switch-07-claude')">View Code</button>
<pre class="code-block" id="code-pr-claude-20260205-081540-fuzz-Switch-fuzz-switch-07-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-08-claude</td>
<td>-</td>
<td>-</td>
<td title="Input: 548 (AGENTS: 173, Design: 0, Components: 0)&#10;Output: 135 (Routing: 0, Config: 0, Styling: 0, Content: 135, Logic: 0, Boilerplate: 0)" style="cursor: help;">683 <span style="color: #666; font-size: 0.8em;">(548/135)</span></td>
<td class="docs-cell"><span class="badge doc-badge">AGENTS</span></td>
<td>
<button class="toggle-code" onclick="toggleCode('pr-claude-20260205-081540-fuzz-Switch-fuzz-switch-08-claude')">View Code</button>
<pre class="code-block" id="code-pr-claude-20260205-081540-fuzz-Switch-fuzz-switch-08-claude" style="display:none"><code>I've created the responsive layout with XDSSwitch elements. The layout uses:
- **XDSCard** as the container with responsive width
- **XDSLayout** with header and content structure
- **XDSHStack with `wrap=&quot;wrap&quot;`** to enable reflowing on small screens
- **StyleX** for the switch items with `minWidth: 200` and `flexBasis: 'calc(50% - var(--spacing-2))'` so items display in 2 columns on wider screens but stack to 1 column on smaller screens
- **XDSSwitch** with `labelPosition=&quot;start&quot;` and `labelSpacing=&quot;spread&quot;` for settings panel style
</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 layout with XDSSwitch elements that reflow on small screens</td>
<td>-</td>
<td>348.4s</td>
<td title="Input: 4976 (AGENTS: 0, Design: 283, Components: 4318)&#10;Output: 927 (Routing: 66, Config: 339, Styling: 31, Content: 368, Logic: 93, Boilerplate: 32)" style="cursor: help;">5903 <span style="color: #666; font-size: 0.8em;">(4976/927)</span></td>
<td class="docs-cell"><span class="badge doc-badge">principles</span> <span class="badge doc-badge">layout</span> <span class="badge doc-badge">Switch</span> <span class="badge doc-badge">Stack</span> <span class="badge doc-badge">Container</span></td>
<td>
<button class="toggle-code" onclick="toggleCode('pr-claude-20260205-081540-fuzz-Switch-fuzz-switch-08')">View Code</button>
<pre class="code-block" id="code-pr-claude-20260205-081540-fuzz-Switch-fuzz-switch-08" style="display:none"><code>import {useState} from 'react';
import * as stylex from '@stylexjs/stylex';
import {XDSSwitch} from '@xds/core/Switch';
import {XDSCard} from '@xds/core/Layout';
import {XDSLayout, XDSLayoutHeader, XDSLayoutContent} from '@xds/core/Layout';
import {XDSHStack, XDSVStack} from '@xds/core/Layout';
import {XDSHeading} from '@xds/core/Text';
const styles = stylex.create({
switchItem: {
minWidth: 200,
flexBasis: 'calc(50% - var(--spacing-2))',
},
});
export default function ResponsiveSwitchLayout() {
const [notifications, setNotifications] = useState(false);
const [darkMode, setDarkMode] = useState(false);
const [autoSave, setAutoSave] = useState(true);
const [analytics, setAnalytics] = useState(false);
const [emailUpdates, setEmailUpdates] = useState(true);
const [soundEffects, setSoundEffects] = useState(false);
return (
&lt;XDSCard width=&quot;100%&quot; maxWidth={600}&gt;
&lt;XDSLayout
header={
&lt;XDSLayoutHeader hasDivider&gt;
&lt;XDSHeading level={3}&gt;Settings&lt;/XDSHeading&gt;
&lt;/XDSLayoutHeader&gt;
}
content={
&lt;XDSLayoutContent&gt;
&lt;XDSVStack gap=&quot;space4&quot;&gt;
&lt;XDSHStack gap=&quot;space4&quot; wrap=&quot;wrap&quot;&gt;
&lt;div {...stylex.props(styles.switchItem)}&gt;
&lt;XDSSwitch
label=&quot;Notifications&quot;
description=&quot;Receive push notifications&quot;
value={notifications}
onChange={setNotifications}
labelPosition=&quot;start&quot;
labelSpacing=&quot;spread&quot;
/&gt;
&lt;/div&gt;
&lt;div {...stylex.props(styles.switchItem)}&gt;
&lt;XDSSwitch
label=&quot;Dark mode&quot;
description=&quot;Use darker color scheme&quot;
value={darkMode}
onChange={setDarkMode}
labelPosition=&quot;start&quot;
labelSpacing=&quot;spread&quot;
/&gt;
&lt;/div&gt;
&lt;div {...stylex.props(styles.switchItem)}&gt;
&lt;XDSSwitch
label=&quot;Auto-save&quot;
description=&quot;Save changes automatically&quot;
value={autoSave}
onChange={setAutoSave}
labelPosition=&quot;start&quot;
labelSpacing=&quot;spread&quot;
/&gt;
&lt;/div&gt;
&lt;div {...stylex.props(styles.switchItem)}&gt;
&lt;XDSSwitch
label=&quot;Analytics&quot;
description=&quot;Share usage data&quot;
value={analytics}
onChange={setAnalytics}
labelPosition=&quot;start&quot;
labelSpacing=&quot;spread&quot;
/&gt;
&lt;/div&gt;
&lt;div {...stylex.props(styles.switchItem)}&gt;
&lt;XDSSwitch
label=&quot;Email updates&quot;
description=&quot;Receive weekly digest&quot;
value={emailUpdates}
onChange={setEmailUpdates}
labelPosition=&quot;start&quot;
labelSpacing=&quot;spread&quot;
/&gt;
&lt;/div&gt;
&lt;div {...stylex.props(styles.switchItem)}&gt;
&lt;XDSSwitch
label=&quot;Sound effects&quot;
description=&quot;Play audio feedback&quot;
value={soundEffects}
onChange={setSoundEffects}
labelPosition=&quot;start&quot;
labelSpacing=&quot;spread&quot;
/&gt;
&lt;/div&gt;
&lt;/XDSHStack&gt;
&lt;/XDSVStack&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-09-claude</td>
<td>-</td>
<td>-</td>
<td title="Input: 548 (AGENTS: 173, Design: 0, Components: 0)&#10;Output: 50 (Routing: 0, Config: 0, Styling: 0, Content: 50, Logic: 0, Boilerplate: 0)" style="cursor: help;">598 <span style="color: #666; font-size: 0.8em;">(548/50)</span></td>
<td class="docs-cell"><span class="badge doc-badge">AGENTS</span></td>
<td>
<button class="toggle-code" onclick="toggleCode('pr-claude-20260205-081540-fuzz-Switch-fuzz-switch-09-claude')">View Code</button>
<pre class="code-block" id="code-pr-claude-20260205-081540-fuzz-Switch-fuzz-switch-09-claude" style="display:none"><code>Now I have all the information I need. I'll create an XDSSwitch with custom colors using CSS variables. The component will wrap the XDSSwitch in a container that applies custom CSS variable overrides.
</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: 53 (Routing: 0, Config: 0, Styling: 0, Content: 42, Logic: 11, Boilerplate: 0)" style="cursor: help;">601 <span style="color: #666; font-size: 0.8em;">(548/53)</span></td>
<td class="docs-cell"><span class="badge doc-badge">AGENTS</span></td>
<td>
<button class="toggle-code" onclick="toggleCode('pr-claude-20260205-081540-fuzz-Switch-fuzz-switch-10-claude')">View Code</button>
<pre class="code-block" id="code-pr-claude-20260205-081540-fuzz-Switch-fuzz-switch-10-claude" style="display:none"><code>Done. I created a simple XDSSwitch component that:
- Uses `useState` to manage the toggle state
- Imports `XDSSwitch` from `@xds/core/Switch`
- Toggles between on/off states via the `value` and `onChange` props
</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 simple XDSSwitch that toggles between two states</td>
<td>-</td>
<td>327.4s</td>
<td title="Input: 1048 (AGENTS: 173, Design: 0, Components: 500)&#10;Output: 74 (Routing: 12, Config: 25, Styling: 0, Content: 2, Logic: 18, Boilerplate: 19)" style="cursor: help;">1122 <span style="color: #666; font-size: 0.8em;">(1048/74)</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-081540-fuzz-Switch-fuzz-switch-10')">View Code</button>
<pre class="code-block" id="code-pr-claude-20260205-081540-fuzz-Switch-fuzz-switch-10" style="display:none"><code>import { useState } from 'react';
import { XDSSwitch } from '@xds/core/Switch';
export default function SimpleToggle() {
const [isEnabled, setIsEnabled] = useState(false);
return (
&lt;XDSSwitch
label=&quot;Toggle feature&quot;
value={isEnabled}
onChange={setIsEnabled}
/&gt;
);
}
</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