---

name: ui-cycle category: collaboration-communication/automation version: 1.0.0 description: Execute autonomous UI development changes through a rigorous 6-phase cycle author: obra/superpowers verified: true tags: [ui, automation, testing, deployment, visual-regression, accessibility]

Skill: UI Adaptive Development Cycle

Each UI change is baseline-captured, tested, validated, and deployed with full artifact trails.

<capabilities_required>

• Chrome DevTools MCP (screenshots, console, navigation)
• Playwright MCP (automated testing, visual regression)
• Serena MCP (code analysis, component search)
• Filesystem MCP (artifact management)
• Git operations (commit, push, branch) </capabilities_required>

<inputs_to_collect>

• Task Description: What UI change to make (one line)
• Target URL: Where to test the change (e.g., localhost:3000, https://example.com)
• Component Name: Which component to modify (e.g., LoginButton.tsx)
• Change Type: color | layout | text | spacing | component | other </inputs_to_collect>

<artifacts_produced>

Copy.runs/ui-cycle-{timestamp}/
├── artifacts/
│   ├── success-criteria.md          # Success checklist
│   ├── acceptance.test.ts            # Automated test
│   ├── verification-report.md        # Test results
│   └── *.backup                      # File backups
├── screenshots/
│   ├── before/                       # Baseline (mobile, tablet, desktop)
│   ├── after/                        # Post-change
│   └── production.png                # Live verification
├── logs/
│   ├── before-console.json           # Baseline console
│   ├── after-console.json            # Post-change console
│   ├── test-results.json             # Playwright results
│   ├── accessibility.json            # A11y audit
│   └── performance-*.json            # Metrics
├── cycle.json                        # Cycle metadata
├── git-commit-sha.txt                # Commit reference
└── deployment-url.txt                # Live URL

</artifacts_produced>

for (const vp of viewports) { await page.setViewportSize(vp); await page.screenshot({ path: ${RUN_DIR}/screenshots/before/${vp.name}.png, fullPage: true }); }

page.on('console', msg => { consoleLogs.push({ type: msg.type(), text: msg.text(), location: msg.location() }); });

fs.writeFileSync( ${RUN_DIR}/logs/before-console.json, JSON.stringify(consoleLogs, null, 2) );

fs.writeFileSync( ${RUN_DIR}/logs/before-performance.json, JSON.stringify(perfMetrics, null, 2) );

Must-Have (Blocking Failures)

• No console errors after changes
• No visual regressions on mobile/desktop
• ${COMPONENT_NAME} renders correctly
• Existing functionality preserved

Should-Have (Quality Gates)

• Accessibility score > 90
• Touch targets >= 44x44px (mobile)
• Text contrast >= WCAG AA
• Performance within 10% of baseline

Test Approach

• Navigate to: ${TARGET_URL}
• Find element: ${SELECTOR}
• Verify: ${VERIFICATION}

test.describe('${TASK_DESCRIPTION}', () => { const viewports = [ { name: 'mobile', width: 375, height: 667 }, { name: 'desktop', width: 1920, height: 1080 } ];

viewports.forEach(vp => { test.use({ viewport: vp.width, viewportHeight: vp.height });

Copytest(`validates on ${vp.name}`, async ({ page }) => {
  await page.goto('${TARGET_URL}');
  // TODO: Add specific assertions
});

}); });

Lint

npm run lint 2>&1 | tee ${RUN_DIR}/logs/lint.log

Build

npm run build 2>&1 | tee ${RUN_DIR}/logs/build.log

<loop_behavior> If any gate fails → Fix → Retry (max 2 build loops) Track loops: build_loops = current + 1 </loop_behavior>

TEST_EXIT=$? cp test-results/*.json ${RUN_DIR}/logs/test-results.json

if (diffRatio > 0.05) { throw new Error(Visual regression ${diffRatio * 100}% > 5% threshold); }

if (errors.length > 0) { throw new Error(Console has ${errors.length} errors); }

if (score < 90) { throw new Error(Accessibility score ${score} below threshold 90); }

if (perfDiff > 0.10) { throw new Error(Performance degraded by ${perfDiff * 100}%); }

<loop_behavior> If any gate fails → Loop back to BUILD phase Max 2 verify loops If still failing after 2 loops → Escalate to human </loop_behavior>

git commit -m "feat(${COMPONENT_NAME}): ${TASK_DESCRIPTION}

• Made specific changes to ${COMPONENT_NAME}
• Added acceptance tests
• Verified on mobile and desktop
• Accessibility score: ${A11Y_SCORE}
• Performance: ${PERF_METRIC}

Co-Authored-By: UI-Adaptive-Cycle cycle@blackbox.ai"

COMMIT_SHA=$(git rev-parse HEAD) echo "${COMMIT_SHA}" > ${RUN_DIR}/git-commit-sha.txt

gh pr create
--title "UI Cycle: ${TASK_DESCRIPTION}"
--body "Automated UI change via UI Adaptive Cycle

Changes: ${TASK_DESCRIPTION} Tests: All passing Screenshots: See artifacts Cycle ID: ${TIMESTAMP}"
|| true

OR Vercel

DEPLOY_URL=$(vercel --prod 2>&1 | grep -o 'https://.*.vercel.app')

OR Netlify

DEPLOY_URL=$(netlify deploy --prod 2>&1 | grep -o 'https://.*.netlify.app')

echo "${DEPLOY_URL}" > ${RUN_DIR}/deployment-url.txt

const prodErrors = await page.evaluate(() => { return window.__consoleLogs?.filter(l => l.type === 'error') || []; });

if (prodErrors.length > 0) { await exec('git revert HEAD'); await exec('git push origin main'); throw new Error('Production deployment failed - rolled back'); }

await page.screenshot({ path: ${RUN_DIR}/screenshots/production.png, fullPage: true });

Cycle Details

• Cycle ID: ${TIMESTAMP}
• Task: ${TASK_DESCRIPTION}
• Component: ${COMPONENT_NAME}
• Duration: ${DURATION_MINUTES} minutes
• Status: ✅ Success / ❌ Failed

Artifacts

• Before Screenshots: ${RUN_DIR}/screenshots/before/
• After Screenshots: ${RUN_DIR}/screenshots/after/
• Test Results: ${RUN_DIR}/logs/test-results.json
• Console Logs: ${RUN_DIR}/logs/console-*.json

Verification Summary

• Tests: ${TEST_STATUS}
• Console: ${CONSOLE_STATUS}
• Visual: ${VISUAL_STATUS}
• Accessibility: ${A11Y_SCORE}/100
• Performance: ${PERF_CHANGE}%

Deployment

• Commit: ${COMMIT_SHA}
• URL: ${DEPLOY_URL}

Next Steps

• Monitor production for 24h
• Check analytics for user impact
• Schedule follow-up if needed

echo "${TIMESTAMP}|${TASK_DESCRIPTION}|${STATUS}|${DEPLOY_URL}" >>
/archive/ui-cycles/index.csv

rm -rf "${RUN_DIR}"

<success_criteria>

<loop_limits> <track_loops> build: 0/2 verify: 0/2 </track_loops>

<escalate_when>

• Build loops reach 2
• Verify loops reach 2
• Total time exceeds 90 minutes
• Production deployment fails </escalate_when>

<escalation_template>

🚨 UI Cycle Escalation

Cycle ID: ${TIMESTAMP} Task: ${TASK_DESCRIPTION} Phase: ${CURRENT_PHASE} Loop Count: ${LOOP_COUNT}/2

What Happened

${STEPS_TAKEN}

Specific Error

${ERROR_MESSAGE}

What I Tried

${ATTEMPTS}

Artifacts for Review

• ${RUN_DIR}/screenshots/before/
• ${RUN_DIR}/screenshots/after/
• ${RUN_DIR}/logs/

Suggested Actions

${SUGGESTIONS} </escalation_template> </loop_limits>

<done_checklist>

• All 6 phases completed
• All verification gates passed
• Production deployed and verified
• Cycle report generated
• Artifacts archived
• Index updated
• Local directory cleaned </done_checklist>