Migration drafts

Rebuilds of the production app's most-used surfaces in the new design system, with placeholder data only. The look is locked here so the actual migration of each component is "swap the markup template" — not "design and migrate at the same time." Wiring (composables, real data, click handlers) lands in a follow-up unit.

OverviewATS scoreBuilder headerPicker barExtraction

ATS score · Variant A — compact chip in a card

Production source: src/components/ats-checker/AtsScoreDisplay.vue (inline use). Used in lists and at-a-glance rows: a DSCard with a flex row containing a DSAtsMark plus a label. Three rows here render the strong / fair / low color tiers from the same component.

ATS88
Acme Robotics — Senior PD
Last checked 2 days ago
Review
ATS54
Northbeam — Staff FE
Last checked 7 hours ago
Review
ATS28
Kilovolt — EM
Last checked 3 weeks ago
Review

ATS score · Variant B — full panel

Production source: src/components/resume-builder/AtsScorePanel.vue (right-rail use). Centered DSScoreRing, divider, and a sub-score breakdown via DSProgressList. Three panels side-by-side cover all tier colors — the ring auto-derives its color from the value, the breakdown rows from per-row state.

A
ATS readiness
88/100
ATS readiness
Strong
  • Keyword match
    92%
  • Format clarity
    95%
  • Section coverage
    Missing volunteering
    76%
A
ATS readiness
54/100
ATS readiness
Fair
  • Keyword match
    4 of 12 target terms missing
    65%
  • Format clarity
    Two-column layout flagged by parsers
    58%
  • Section coverage
    No projects section
    40%
A
ATS readiness
28/100
ATS readiness
Needs attention
  • Keyword match
    9 of 12 target terms missing
    22%
  • Format clarity
    Tables and graphics block parsing
    30%
  • Section coverage
    No work history detected
    32%