docs: implement comprehensive design system and auto-update protocol

.junie/guidelines.md

@@ -1,4 +1,37 @@
 <laravel-boost-guidelines>
+=== .ai/design-system rules ===
+
+# Design System (CRITICAL — Auto-Read Required)
+
+
+This project has a comprehensive Design System documented in `DESIGN.md` at the project root.
+
+
+## Before Any UI/UX Work
+
+
+**BEFORE** making ANY frontend, UI, UX, styling, component, animation, Blade template, or Tailwind-related change, you MUST read `DESIGN.md` using your file reading tool to understand the established:
+- Design tokens and color system
+- Typography scale and font conventions
+- Component patterns (toasts, modals, buttons, indicators)
+- Spacing constants and layout architecture
+- Animation and transition conventions
+- Responsive breakpoint rules
+
+This applies to: Blade views, CSS files, Alpine.js interactions, GSAP animations, Livewire component UI, toast notifications, modals, buttons, indicators, and any other visual element.
+
+
+## After Completing UI/UX Work
+
+
+**AFTER** completing any UI/UX change, you MUST update `DESIGN.md` per its Section 15 (Maintenance Protocol):
+- Add a new entry to Section 14 (Iteration History) using the provided template.
+- Update Section 9 (Component Library) if a component was created or modified.
+- Update Sections 5/6/7 if design tokens, fonts, or colors were added/changed.
+- Bump the version number and "Last updated" date at the top of the file.
+
+Failure to read and follow `DESIGN.md` will result in inconsistent UI, visual regressions, and wasted iteration cycles.
+
 === foundation rules ===
 
 # Laravel Boost Guidelines
@@ -27,6 +60,7 @@ This application is a Laravel application and its main Laravel ecosystems packag
 - phpunit/phpunit (PHPUNIT) - v11
 - rector/rector (RECTOR) - v2
 - tailwindcss (TAILWINDCSS) - v4
+- laravel-echo (ECHO) - v2
 
 ## Skills Activation