Phase 5: Final Cleanup & Documentation

Depends on: Phase 4 complete (all pages migrated)
Result: Zero Bulma/Vuero references remain. Documentation updated. Bundle size verified. Final visual audit passed.

Goal

Remove any leftover Bulma references, unused packages, and dead code. Update all project documentation to reflect the new Tailwind + shadcn-vue design system. Perform a complete visual audit.

Tasks

1. Audit for remaining Bulma references

• [ ] Run audit commands and fix any remaining references

# Bulma utility classes
grep -r "is-flex\|is-align\|is-justify\|has-text-\|is-size-\|columns\|is-active\|is-loading\|is-hidden-\|is-fullwidth\|is-gap-\|has-background" front-end/src/ --include="*.vue"

# Bulma component class names
grep -r "\.box\|\.hero\|\.section\|\.navbar\|\.field\|\.control\b" front-end/src/ --include="*.vue" --include="*.css"

# Old SCSS imports
grep -r "scss\|bulma" front-end/src/ --include="*.ts" --include="*.vue"

# Vuero references
grep -r "vuero\|Vuero" front-end/src/ --include="*.ts" --include="*.vue"

2. Remove unused packages

• [ ] Evaluate and remove if no longer used:
  • focus-trap-vue — shadcn Dialog handles focus trapping via Radix
  • bootstrap — was a Summernote dependency; check if still needed
  • @vueform/multiselect — if replaced with shadcn Command/Combobox
  • Any other Bulma-adjacent packages

cd front-end && pnpm remove focus-trap-vue  # if confirmed unused

3. Clean up composables

• [ ] src/composables/theme-colors.ts — update to read from new shadcn/Tailwind CSS variable names, or remove if unused
• [ ] src/composables/vuero-context.ts — review if still needed; rename or remove
• [ ] src/composables/notyf.ts — verify color references work with new CSS variables

4. Rename VueroApp.vue

• [ ] Rename src/VueroApp.vue → src/App.vue
• [ ] Update import in src/main.ts

5. Update Playwright E2E tests

• [ ] Review tests/e2e/*.spec.ts for selectors referencing Bulma classes (.box, .card, .button, .field, .is-active)
• [ ] Update selectors to use data-testid attributes or shadcn component structure
• [ ] Verify all E2E tests pass

6. Update unit tests

• [ ] Review tests/unit/ for:
  • Component mount tests referencing Vuero components
  • Snapshot tests that need updating
  • Class assertion tests with Bulma classes
• [ ] Update and re-run: pnpm test:unit

7. Update documentation

.github/copilot-instructions.md:

• [ ] Replace all Bulma references with Tailwind
• [ ] Replace VCard/VCardAdvanced convention with shadcn Card pattern
• [ ] Update CSS/Styling section: Bulma → Tailwind + shadcn-vue
• [ ] Remove build:update-bulma-colors from commands
• [ ] Update component naming conventions
• [ ] Replace the "never use <div class="box">" rule with new equivalent
• [ ] Update form patterns to show shadcn FormField usage
• [ ] Update imports section (auto-imports for shadcn components)

front-end/README.md:

• [ ] Update tech stack description
• [ ] Update setup instructions
• [ ] Remove Bulma-specific notes

8. Bundle size comparison

• [ ] Build and compare with pre-migration size (recorded in Phase 1)

cd front-end && pnpm build
du -sh dist/
# Pre-migration: ____________
# Post-migration: ____________

9. Final visual audit

• [ ] Run full visual test suite across all viewports

pnpm playwright test visual-migration \
  --project=chromium-light --project=chromium-dark \
  --project=mobile-light --project=mobile-dark

• [ ] Generate report for AI review: pnpm test:visual:report

Screenshot every page in both light and dark mode:

• [ ] Landing page
• [ ] Login
• [ ] Signup
• [ ] Profile
• [ ] 404
• [ ] Dashboard
• [ ] Client list
• [ ] Client overview
• [ ] Client settings
• [ ] Client integrations
• [ ] Client review posts
• [ ] Posts list
• [ ] Post editor
• [ ] Campaign detail
• [ ] New campaign
• [ ] Client campaigns
• [ ] Analytics
• [ ] Settings
• [ ] Admin

Files Modified

Files Deleted

Checklist

• [ ] Zero grep hits for Bulma classes/imports in src/
• [ ] Zero grep hits for "Vuero" / "bulma" / "scss" in config files
• [ ] Unused packages removed
• [ ] Composables cleaned up (theme-colors, vuero-context, notyf)
• [ ] VueroApp.vue renamed to App.vue
• [ ] E2E test selectors updated
• [ ] Unit tests updated and passing
• [ ] .github/copilot-instructions.md fully updated
• [ ] front-end/README.md updated
• [ ] pnpm build succeeds — clean build, no warnings
• [ ] pnpm test:tsc passes
• [ ] pnpm test:unit passes
• [ ] pnpm test:e2e passes
• [ ] pnpm test:visual passes
• [ ] Bundle size documented (before/after)
• [ ] All 22 pages visually verified in light + dark mode
• [ ] Mobile responsive verified on key pages

Migration Complete! 🎉

When all checkboxes above are checked, the migration from Vuero/Bulma to shadcn-vue + Tailwind CSS is complete.