Refactor UXAuditor.tsx to use Box primitives instead of raw Tailwind

[google-labs-jules]

This PR refactors src/pages/UXAuditor.tsx to align with the repository's design system policies (AGENTS.md rules 1 and 3).

Key changes:

• Converted raw flex, items-center, and justify-center classes to semantic Box props (display, align, justify).
• Migrated manual border, radius, shadow, and surface styling to their respective Primitive props.
• Standardized input field backgrounds using the surface="bg" design token.
• Refactored severity indicators to use semantic surface tokens (error/warning) instead of raw background classes.
• Ensured all layout-related styling is handled by Primitives, removing violations detected by the anti-pattern audit.

Validation:

• pnpm run audit passes with zero detections.
• pnpm run build succeeds.
• python3 dev-tools/td_cli.py gh pre-submit passed.
• Frontend verification performed via Playwright to ensure layout integrity.

Fixes #2531

---

PR created automatically by Jules for task 12931662890978750239 started by @arii

[google-labs-jules]

👋 Jules, reporting for duty! I'm here to lend a hand with this pull request.

When you start a review, I'll add a 👀 emoji to each comment to let you know I've read it. I'll focus on feedback directed at me and will do my best to stay out of conversations between you and other bots or reviewers to keep the noise down.

I'll push a commit with your requested changes shortly after. Please note there might be a delay between these steps, but rest assured I'm on the job!

For more direct control, you can switch me to Reactive Mode. When this mode is on, I will only act on comments where you specifically mention me with @jules. You can find this option in the Pull Request section of your global Jules UI settings. You can always switch back!

New to Jules? Learn more at jules.google/docs.

---

For security, I will only act on instructions from the user who triggered this task.

[github-actions]

🚀 Deployment Details (Last updated: Jun 19, 2026, 12:44 PM PST)

🚀 Pushed to gh-pages; publish in progress

• Preview URL: https://arii.github.io/tech-dancer/fix/ux-auditor-raw-tailwind-cleanup-12931662890978750239/
• Preview Dashboard: https://arii.github.io/tech-dancer/previews/index.html
• Commit SHA: b97f1ba
• Marker File: verify here

[github-actions]

🚀 Impact Analysis Details (Last updated: Jun 18, 2026, 4:33 PM PST)

✅ Impact Analysis Complete

• Commit SHA: 0de2110
• Link to artifacts

Deployment Review

Summary

Impact Level: MEDIUM

📝 Changed Files (2)

• src/features/ux-auditor/useUXAuditor.ts
• src/pages/UXAuditor.tsx

Routes Reviewed

/ux-auditor (Visual Diff: 0.07%)

Severity: LOW
Review Required: No

DOM Changes:
None

Artifacts:

• Before screenshot: artifacts/visual-review/ux-auditor/before.png
• After screenshot: artifacts/visual-review/ux-auditor/after.png
• Visual diff: artifacts/visual-review/ux-auditor/diff.png
• Before (cropped): artifacts/visual-review/ux-auditor/cropped/before.png
• After (cropped): artifacts/visual-review/ux-auditor/cropped/after.png
• Visual diff (cropped): artifacts/visual-review/ux-auditor/cropped/diff.png
• DOM diff: artifacts/dom-review/ux-auditor/diff.txt

[github-actions]

🐙 GitHub Models Code Review

Powered by GitHub Models

Reviewing: PR #2547

Code Review Feedback

HIGH SEVERITY REVIEW

1. Incorrect Box Prop Usage — minWidth={0} vs minWidth="0"

Evidence:

• In ViewportAnalysisCard, the diff changes:

  <Box className={cardVariants({ overflow: "hidden" })} minWidth="0">

  and elsewhere:

  <Stack gap={6} padding={8} flex={1} minWidth="0" overflow="hidden">

  and:

  <Stack direction={{ base: 'col', sm: 'row' }} align="start" gap={2} minWidth="0">

  and:

  <Box flex={1} minWidth="0" overflow="hidden">

Analysis:

• The Box primitive (and Stack) likely expects minWidth={0} (number) or minWidth="0px" (string with unit), not minWidth="0". Passing "0" as a string without a unit is not valid CSS and will not be interpreted correctly by most style engines or CSS-in-JS libraries.
• This is a blocking bug: the layout will break in browsers that require units for numeric CSS values, and the design system's primitives will not apply the intended style.

Fix:

• Change all minWidth="0" to minWidth={0} or minWidth="0px".

---

2. Severity Indicator — Incorrect Surface Token

Evidence:

• In the severity indicator:

  <Box
    width={2}
    height={2}
    radius="full"
    surface={imp.severity > 7 ? 'error' : 'warning'}
    shadow="sm"
  />

• The previous code used:

  className={imp.severity > 7 ? 'bg-error shadow-sm' : 'bg-accent-purple shadow-sm'}

Analysis:

• The refactor changes the "warning" color from 'bg-accent-purple' to 'warning'. Unless the design system explicitly maps 'warning' to the same color as 'bg-accent-purple', this is a semantic mismatch. However, this is not a blocking bug unless the surface prop does not accept 'warning' as a value.
• If the Box primitive does not support 'warning' as a valid surface token, this will throw a runtime error or silently fail to apply the intended color.

Verification:

• If surface="warning" is not a valid token for Box, this is a blocking bug. If it is valid, this is a nitpick.

Action:

• If surface="warning" is not valid: Change to the correct token (e.g., surface="accent-purple" or whatever the design system expects).
• If valid: No action needed.

---

3. border={true} Usage

Evidence:

• Multiple places use border={true}:

  <Box surface="default" radius="xl" shadow="2xl" border={true}>

  and:

  <Box surface="alt" padding={5} border={true} radius="lg">

  and:

  <Box surface="muted" padding={3} radius="lg" border={true}>

Analysis:

• If the Box primitive expects border to be a string (e.g., "b" for border-bottom, "all" for full border), passing true will not work and will not render a border.
• If border={true} is not supported, this is a blocking bug.

Verification:

• If border={true} is not valid for Box, this is a blocking bug.

Action:

• Change border={true} to the correct value, e.g., border="all" or border="b" as appropriate.

---

4. minHeight={400}

Evidence:

• In:

  <Box ... minHeight={400} ...>

Analysis:

• If Box expects a string with units (e.g., "400px"), passing 400 (number) will not work. If it accepts numbers and converts to px, this is fine. If not, this is a blocking bug.

Verification:

• If minHeight={400} is not valid, change to minHeight="400px".

---

5. width={{ base: 'full', md: '41.666%' }}

Evidence:

• In:

  <Box ... width={{ base: 'full',

---

Generated by github-models-code-review

[arii]

ANTI-AI-SLOP\n\n\n## FINDINGS\n

\n\n## FINAL RECOMMENDATION\n<Approved | Approved with Minor Changes | Not Approved>\n\n

Inline Comments (Fallback due to Github line resolution errors)

• :1:

[arii]

ANTI-AI-SLOP\n\n\n## FINDINGS\n

\n\n## FINAL RECOMMENDATION\n<Approved | Approved with Minor Changes | Not Approved>\n\n

Inline Comments (Fallback due to Github line resolution errors)

• :1:

[arii]

Automated Review for PR #2547

CI Status: Failing checks detected.

Failing Checks:

• Deployment Impact Analysis

Recommendation: Please review the failing CI logs and apply fixes.

FINAL RECOMMENDATION

Not Approved

[arii]

Automated Review for PR #2547

CI Status: Failing checks detected.

Failing Checks:

• Deployment Impact Analysis

Recommendation: Please review the failing CI logs and apply fixes.

FINAL RECOMMENDATION

Not Approved

[arii]

Comprehensive Review for PR #2547

CI Status: Failing checks detected.

Failing Checks:

• Deployment Impact Analysis

Recommendation: Please review the failing CI logs and apply fixes before requesting another review.

FINAL RECOMMENDATION

Not Approved