Skip to main content

Frontend merge-request checklist

Use this list before requesting review to ensure new code follows current guidelines and remains easy to migrate when we upgrade the stack (SCSS → CSS, Mix → Vite, Livewire 2 → 3, Alpine 2 → 3, Tailwind 3 → 4).

General​

  • MR description includes a link to the corresponding ticket and briefly explains what changes and why. If the change is visual, add screenshots or a short recording as a comment (optional but recommended).
  • Follows naming & style rules from @style-guide-and-naming.
  • No inline styles; uses Tailwind utilities or component classes.
  • All new strings are translated in all language files; ARIA text in accessibility.php.
  • Accessibility verified (semantic HTML, ARIA, keyboard navigation).

CSS & design system​

  • Prefer Tailwind utilities; avoid adding new SCSS. If SCSS is unavoidable, add a comment explaining why and plan to replace with Tailwind.
  • No new Bootstrap classes; if you touch Bootstrap markup, consider refactoring to Tailwind.
  • Component spacing/sizing uses tw-* tokens (see Tailwind config).

JavaScript behavior​

  • Alpine components include x-data root and use x-on: (no @click).
  • Avoid x-for when Vue is on the page; loop in Blade/Livewire instead.
  • Livewire components expose computed properties; Blade stays presentation-only.

Build tooling awareness​

  • Assets loaded through asset_from_cdn() (Mix) or @vite() if the file already lives in Vite pipeline.
  • If you add new compiled assets, note whether they will need changes when we drop Mix.

Forward-compatibility strategy​

  • New Blade/Alpine code should compile without SCSS—so it can run on Tailwind v4.
  • If you create helper functions or JS modules, ensure the API will still be valid under Alpine 3 (example: viewportPortalComponent migrates to viewportPortal with no template changes).
  • Components follow the single source, multiple targets pattern (see Viewport portal & target) when you need breakpoint-dependent placement.

Tests & docs​

  • Updated or added Pest/Livewire tests where applicable.
  • Added/updated documentation in docs/engineering/frontend/ or component README.

Last updated: 2025-07-14

X

Graph View