Design System Migration: Vuero/Bulma → shadcn-vue + Tailwind CSS

Approach

Full replacement — no backwards compatibility, no adapters, no CSS prefix, no coexistence period. Each phase removes Bulma usage and replaces with Tailwind + shadcn-vue directly.

Phases

Phase	Name	Description	Depends on
Phase T	Visual Test Suite	Expand Playwright visual tests to all 22 pages, capture pre-migration baselines	—
Phase 1	Setup	Remove Bulma, install Tailwind + shadcn-vue, map theming	Phase T
Phase 2	Components	Replace all 68 Vuero base components with shadcn-vue	Phase 1
Phase 3	Layouts	Migrate sidebar, navbar, mobile, auth, landing layouts	Phase 2
Phase 4	Pages	Migrate all 22 pages + ~50 shared components in 4 batches	Phase 3
Phase 5	Cleanup	Remove dead code, update docs, final visual audit	Phase 4

Execution Flow

Phase T (baselines) → Phase 1 → Phase 2 → Phase 3
  → Phase 4 Batch 1 → run T → Batch 2 → run T → Batch 3 → run T → Batch 4 → run T
  → Phase 5 → run T final

Phase T runs first to capture pre-migration baselines, then re-runs after each Phase 4 batch and after Phase 5 for final verification.

Scope Summary

Metric	Count
Vue files to modify	~176
Vuero base components to replace	68
Layout components to migrate	~20
Pages to migrate	22
Shared page components to migrate	~50
SCSS files to delete	~30
shadcn-vue components to add	~25
Custom components to rebuild	~10

Key Commands

# Visual test baselines
cd front-end && pnpm test:visual:update

# Visual test comparison
pnpm test:visual

# Visual test report (for AI review)
pnpm test:visual:report

# Type check
pnpm test:tsc

# Build
pnpm build

# Unit tests
pnpm test:unit

# All E2E tests
pnpm test:e2e

Progress Tracker

[ ] Phase T — Visual test suite & baselines
[x] Phase 1 — Setup complete
[ ] Phase 2 — Components replaced
[ ] Phase 3 — Layouts migrated
[ ] Phase 4 Batch 1 — Auth + simple pages
[ ] Phase 4 Batch 2 — List/CRUD pages
[ ] Phase 4 Batch 3 — Client detail pages
[ ] Phase 4 Batch 4 — Complex pages
[ ] Phase 5 — Cleanup & documentation