@geraldmaron/construct 1.0.0

package/skills/frameworks/react.md

@@ -0,0 +1,132 @@
+<!--
+skills/frameworks/react.md — React — By default, components are **Server Components** — they run on the server, have
+
+## Component Design ### Server vs Client Components (React 19 / Next.js App Router)
+-->
+# React
+
+## Component Design
+
+### Server vs Client Components (React 19 / Next.js App Router)
+
+By default, components are **Server Components** — they run on the server, have no state, and can fetch data directly. Add `'use client'` only when you need interactivity, browser APIs, or hooks.
+
+```tsx
+// Server Component — no directive needed
+async function ItemList() {
+  const items = await db.items.findMany();   // direct DB access fine here
+  return <ul>{items.map(i => <Item key={i.id} {...i} />)}</ul>;
+}
+
+// Client Component — needs browser or state
+'use client';
+export function SearchBar({ onSearch }: { onSearch: (q: string) => void }) {
+  const [query, setQuery] = useState('');
+  ...
+}
+```
+
+Push the `'use client'` boundary as far down the tree as possible.
+
+### Composition over configuration
+
+Prefer children and render props over proliferating boolean props:
+
+```tsx
+// Avoid: <Modal showHeader closeButton title="..." />
+// Prefer:
+<Modal>
+  <Modal.Header onClose={close}>Title</Modal.Header>
+  <Modal.Body>...</Modal.Body>
+</Modal>
+```
+
+## State Management
+
+See decision matrix:
+
+| Concern | Tool |
+|---|---|
+| Server state (fetching, caching) | TanStack Query / SWR |
+| Global UI state | Zustand / Jotai |
+| Form state | React Hook Form + Zod |
+| URL state | `useSearchParams` / router |
+| Component-local state | `useState` / `useReducer` |
+
+Do not put server data in a client store — TanStack Query is the cache. Derive don't duplicate.
+
+## Performance
+
+### Memoization discipline
+
+`useMemo` and `useCallback` add overhead if misapplied. Measure first:
+
+```tsx
+// Justified: expensive computation, stable deps
+const sorted = useMemo(() => expensiveSort(items), [items]);
+
+// Unjustified: not expensive, adds indirection for nothing
+const label = useMemo(() => `Hello ${name}`, [name]);
+```
+
+### Concurrent features
+
+- `useTransition` for non-urgent state updates (e.g., search filter)
+- `useDeferredValue` to deprioritize expensive re-renders while keeping input responsive
+- `<Suspense>` boundaries for async data; pair with streaming in App Router
+
+### Code splitting
+
+```tsx
+const HeavyChart = lazy(() => import('./HeavyChart'));
+<Suspense fallback={<Spinner />}><HeavyChart /></Suspense>
+```
+
+## Patterns
+
+### Custom hooks extract logic, not JSX
+
+```ts
+// Good: encapsulates fetch + error + loading
+export function useItems() {
+  return useQuery({ queryKey: ['items'], queryFn: fetchItems });
+}
+```
+
+### Controlled vs uncontrolled
+
+- Controlled: React owns value via `state` — use for forms with validation, derived fields
+- Uncontrolled: DOM owns value via `ref` — use for file inputs and simple browser-owned fields
+
+## Testing
+
+```tsx
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+
+test('submits search query', async () => {
+  const onSearch = vi.fn();
+  render(<SearchBar onSearch={onSearch} />);
+  await userEvent.type(screen.getByRole('searchbox'), 'react');
+  await userEvent.keyboard('{Enter}');
+  expect(onSearch).toHaveBeenCalledWith('react');
+});
+```
+
+- Use `@testing-library/react` — test behavior, not implementation
+- `userEvent` over `fireEvent` — simulates real user interactions
+- Mock at the network boundary (`msw`) not the component boundary
+
+## Tooling
+
+- **Vite** for non-Next apps; fast HMR, native ESM
+- **Biome** for lint + format in a single fast tool (replaces ESLint + Prettier)
+- **TypeScript strict mode** — enables `noUncheckedIndexedAccess`, `strictNullChecks`, etc.
+- React DevTools Profiler for recomposition analysis
+
+## Common Pitfalls
+
+- Stale closures in `useEffect` — include all reactive values in the dependency array or use `useEffectEvent` (React 19)
+- `useEffect` for data fetching — use TanStack Query instead
+- Direct DOM mutation inside render — causes tearing with concurrent mode
+- Key prop as array index — breaks reconciliation on reorder/insert

package/skills/frameworks/spring-boot.md

@@ -0,0 +1,165 @@
+<!--
+skills/frameworks/spring-boot.md — Spring Boot — ```
+
+## Project Structure ```
+-->
+# Spring Boot
+
+## Project Structure
+
+```
+src/
+├── main/
+│   ├── kotlin/com/example/app/
+│   │   ├── Application.kt          ← @SpringBootApplication entry
+│   │   ├── config/                 ← @Configuration classes
+│   │   ├── domain/                 ← Entities, value objects
+│   │   ├── repository/             ← Spring Data repositories
+│   │   ├── service/                ← Business logic (@Service)
+│   │   ├── web/                    ← Controllers (@RestController)
+│   │   │   ├── dto/                ← Request/response DTOs
+│   │   │   └── advice/             ← @ControllerAdvice
+│   │   └── security/               ← Security config
+│   └── resources/
+│       ├── application.yml
+│       └── db/migration/           ← Flyway migrations
+└── test/
+```
+
+## Layered Architecture
+
+```
+@RestController → @Service → @Repository → DB
+```
+
+- **Controller**: validate input, delegate to service, map to DTO
+- **Service**: business logic; transaction boundary; no JPA entities exposed outside layer
+- **Repository**: data access only; query methods or `@Query`
+- **Domain**: pure entities with business behavior; no Spring dependencies
+
+Never inject repositories directly into controllers.
+
+## REST Controllers
+
+```kotlin
+@RestController
+@RequestMapping("/api/items")
+class ItemController(private val itemService: ItemService) {
+
+  @GetMapping("/{id}")
+  fun getItem(@PathVariable id: UUID): ResponseEntity<ItemDto> =
+    itemService.findById(id)
+      ?.let { ResponseEntity.ok(it.toDto()) }
+      ?: ResponseEntity.notFound().build()
+
+  @PostMapping
+  @ResponseStatus(HttpStatus.CREATED)
+  fun createItem(@Valid @RequestBody req: CreateItemRequest): ItemDto =
+    itemService.create(req).toDto()
+}
+```
+
+Use `@Valid` + Bean Validation (`@NotBlank`, `@Size`, etc.) for input validation. Handle `MethodArgumentNotValidException` in `@ControllerAdvice`.
+
+## JPA / Spring Data
+
+```kotlin
+@Entity
+@Table(name = "items")
+class Item(
+  @Id val id: UUID = UUID.randomUUID(),
+  @Column(nullable = false) var title: String,
+  @ManyToOne(fetch = FetchType.LAZY) @JoinColumn(name = "owner_id") val owner: User,
+)
+
+interface ItemRepository : JpaRepository<Item, UUID> {
+  fun findByOwnerAndStatus(owner: User, status: Status): List<Item>
+
+  @Query("SELECT i FROM Item i JOIN FETCH i.owner WHERE i.id = :id")
+  fun findByIdWithOwner(id: UUID): Item?
+}
+```
+
+- Default `FetchType.LAZY` for associations — never `EAGER`
+- Use `JOIN FETCH` in queries when you need the association
+- Enable `spring.jpa.open-in-view=false` — prevents lazy-loading in the web layer
+- Use Flyway or Liquibase for schema migrations; never `ddl-auto=update` in production
+
+## Transactions
+
+```kotlin
+@Service
+@Transactional(readOnly = true)   // default for the class
+class ItemService(private val repo: ItemRepository) {
+
+  @Transactional                  // write override
+  fun create(req: CreateItemRequest): Item {
+    val item = Item(title = req.title, owner = currentUser())
+    return repo.save(item)
+  }
+}
+```
+
+- `@Transactional` on service layer, not repository or controller
+- `readOnly = true` as class-level default; override on writes — signals no dirty-check needed
+- Do not call `@Transactional` methods via `this` — Spring proxy won't intercept it
+
+## Security (Spring Security 6)
+
+```kotlin
+@Configuration
+@EnableWebSecurity
+class SecurityConfig {
+  @Bean
+  fun securityFilterChain(http: HttpSecurity): SecurityFilterChain = http
+    .csrf { it.disable() }           // stateless JWT API
+    .sessionManagement { it.sessionCreationPolicy(STATELESS) }
+    .authorizeHttpRequests {
+      it.requestMatchers("/api/auth/**").permitAll()
+        .anyRequest().authenticated()
+    }
+    .addFilterBefore(jwtFilter, UsernamePasswordAuthenticationFilter::class.java)
+    .build()
+}
+```
+
+- JWT for stateless APIs; sessions for web apps with CSRF
+- `@PreAuthorize("hasRole('ADMIN')")` for method-level authorization
+- Never log authentication credentials or tokens
+
+## Testing
+
+```kotlin
+@SpringBootTest(webEnvironment = RANDOM_PORT)
+@AutoConfigureTestDatabase(replace = NONE)    // use Testcontainers
+class ItemControllerIT(@Autowired val restTemplate: TestRestTemplate) {
+
+  @Test
+  fun `POST items creates and returns 201`() {
+    val resp = restTemplate.postForEntity("/api/items",
+      CreateItemRequest(title = "Test"), ItemDto::class.java)
+    assertEquals(HttpStatus.CREATED, resp.statusCode)
+  }
+}
+```
+
+- `@WebMvcTest` for controller-only tests (fast, no DB)
+- `@DataJpaTest` for repository tests against a real embedded or Testcontainers DB
+- `@SpringBootTest` for integration tests — use Testcontainers for realistic DB
+- `MockMvc` + `@AutoConfigureMockMvc` for HTTP-layer testing without a real port
+
+## Performance
+
+- Connection pool: `HikariCP` (default) — tune `maximumPoolSize` based on load testing
+- N+1 queries: use `JOIN FETCH` or `@EntityGraph`; verify with `spring.jpa.show-sql=true` in dev
+- Caching: `@Cacheable` + Spring Cache with Redis (`spring-boot-starter-data-redis`)
+- Async: `@EnableAsync` + `@Async` on service methods for fire-and-forget; use `CompletableFuture<T>` return type
+- Virtual threads (Spring Boot 3.2+): `spring.threads.virtual.enabled=true` for high-concurrency blocking I/O
+
+## Common Pitfalls
+
+- `LazyInitializationException` after transaction closes — resolve with `JOIN FETCH` or DTO projection
+- `@Transactional` on private methods — Spring AOP proxy can't intercept; move to public
+- Bean cycle injection — restructure or use `@Lazy`
+- Returning JPA entities directly from controllers — exposes internal model; always map to DTOs
+- `findAll()` without pagination on large tables — always use `Pageable`

package/skills/frontend-design/accessibility.md

@@ -0,0 +1,153 @@
+<!--
+skills/frontend-design/accessibility.md — Accessibility (WCAG 2.2 / Inclusive Design) — Target **WCAG 2.1 AA** as the minimum for any public-facing product. WCAG 2.2 AA
+
+## Compliance Baseline Target **WCAG 2.1 AA** as the minimum for any public-facing product. WCAG 2.2 AA is the current standard (published October 2023) and req
+-->
+# Accessibility (WCAG 2.2 / Inclusive Design)
+
+## Compliance Baseline
+
+Target **WCAG 2.1 AA** as the minimum for any public-facing product. WCAG 2.2 AA is the current standard (published October 2023) and required by many regulatory frameworks (EU Web Accessibility Directive, ADA, Section 508).
+
+## Semantic HTML First
+
+Use the right element before reaching for ARIA:
+
+```html
+<!-- Avoid: div soup -->
+<div class="btn" onclick="submit()">Submit</div>
+
+<!-- Correct: semantic button -->
+<button type="submit">Submit</button>
+```
+
+ARIA augments semantics it can't add natively; it cannot fix broken semantics.
+
+## ARIA Rules
+
+1. If a native HTML element provides the required semantics, use it — do not add ARIA to a `<div>` when `<button>` exists.
+2. Do not change native semantics: `<h2 role="button">` is invalid.
+3. All interactive ARIA widgets must be keyboard-operable.
+4. Do not hide focusable elements with `aria-hidden="true"`.
+5. Every interactive element must have an accessible name.
+
+Common patterns:
+
+```html
+<!-- Label associated via for/id -->
+<label for="email">Email</label>
+<input id="email" type="email" />
+
+<!-- Icon button with visually hidden label -->
+<button aria-label="Close dialog">
+  <svg aria-hidden="true">...</svg>
+</button>
+
+<!-- Live region for async updates -->
+<div aria-live="polite" aria-atomic="true" id="status"></div>
+```
+
+## Keyboard Navigation
+
+Every interactive element must be reachable and operable by keyboard:
+
+| Key | Expected behavior |
+|---|---|
+| `Tab` / `Shift+Tab` | Move focus forward / backward |
+| `Enter` | Activate links and buttons |
+| `Space` | Activate buttons, toggle checkboxes |
+| `Arrow keys` | Navigate within composite widgets (menus, tabs, sliders) |
+| `Escape` | Close modals, dismiss menus |
+
+Focus trap in modals:
+
+```ts
+// Lock focus inside the modal when open
+function trapFocus(modal: HTMLElement) {
+  const focusable = modal.querySelectorAll<HTMLElement>(
+    'a[href], button:not([disabled]), input, select, textarea, [tabindex]:not([tabindex="-1"])'
+  );
+  const first = focusable[0];
+  const last = focusable[focusable.length - 1];
+  modal.addEventListener('keydown', (e) => {
+    if (e.key === 'Tab') {
+      if (e.shiftKey && document.activeElement === first) { e.preventDefault(); last.focus(); }
+      else if (!e.shiftKey && document.activeElement === last) { e.preventDefault(); first.focus(); }
+    }
+  });
+}
+```
+
+## Color & Contrast
+
+| Text size | Minimum contrast (AA) | Enhanced (AAA) |
+|---|---|---|
+| Normal text (< 18pt / 14pt bold) | 4.5:1 | 7:1 |
+| Large text (≥ 18pt / 14pt bold) | 3:1 | 4.5:1 |
+| UI components / graphical objects | 3:1 | — |
+
+Tools: Figma Contrast plugin, axe DevTools, APCA calculator for sophisticated use cases.
+
+Do not convey information by color alone — add shape, pattern, or text.
+
+## Motion
+
+Respect `prefers-reduced-motion`:
+
+```css
+@media (prefers-reduced-motion: reduce) {
+  *, *::before, *::after {
+    animation-duration: 0.01ms !important;
+    transition-duration: 0.01ms !important;
+  }
+}
+```
+
+In JS animations (GSAP, Framer Motion):
+
+```ts
+const prefersReduced = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
+if (!prefersReduced) gsap.to(el, { y: -20, duration: 0.3 });
+```
+
+## Images & Media
+
+- Decorative images: `alt=""`
+- Informative images: concise alt text describing the content, not "image of"
+- Complex images (charts, diagrams): short alt + long description via `aria-describedby` or adjacent text
+- Video: captions for dialogue/audio content; audio description for visual-only information
+- Auto-playing media: provide pause control; do not autoplay with sound
+
+## Forms
+
+```html
+<fieldset>
+  <legend>Shipping address</legend>
+  <label for="street">Street <span aria-hidden="true">*</span></label>
+  <input id="street" name="street" required aria-required="true"
+         aria-describedby="street-error" />
+  <span id="street-error" role="alert"></span>
+</fieldset>
+```
+
+- Group related fields in `<fieldset>` with `<legend>`
+- Error messages: use `role="alert"` or `aria-live="assertive"` so screen readers announce them
+- Required fields: `required` + `aria-required="true"`; indicate requirement visually and in text
+
+## Testing Checklist
+
+- [ ] Run `axe` or `Lighthouse Accessibility` — fix all violations
+- [ ] Navigate entire flow with keyboard only
+- [ ] Test with VoiceOver (macOS/iOS) or NVDA/JAWS (Windows)
+- [ ] Verify color contrast meets 4.5:1 for body text
+- [ ] Test with browser zoom at 200% — no horizontal scroll, no content loss
+- [ ] Test with `prefers-reduced-motion: reduce` enabled
+- [ ] All form errors are announced by screen reader
+
+## Cognitive Load
+
+- Plain language: grade 8 reading level or below for public-facing copy
+- Consistent navigation: same elements in same place across pages
+- Timeouts: warn before session expiry; allow extension
+- Error recovery: clear error messages with actionable fix instructions
+- No flashing content: nothing flashing more than 3 times/second (seizure risk)

package/skills/frontend-design/component-patterns.md

@@ -0,0 +1,111 @@
+<!--
+skills/frontend-design/component-patterns.md — Component Patterns — Use this skill when designing component architecture, building design systems, o
+
+Use this skill when designing component architecture, building design systems, or structuring reusable UI. ## Component Hierarchy
+-->
+# Component Patterns
+
+Use this skill when designing component architecture, building design systems, or structuring reusable UI.
+
+## Component Hierarchy
+
+### Atoms
+- Smallest meaningful UI elements: button, input, label, icon, badge
+- Self-contained: no dependencies on other components
+- Accept props for variants: size, color, disabled state
+- Fully accessible with ARIA attributes and keyboard support
+
+### Molecules
+- Combinations of atoms: search field (input + button), form group (label + input + error)
+- Encapsulate a single interaction pattern
+- Manage internal state for the interaction only
+
+### Organisms
+- Complex sections composed of molecules: navigation bar, card grid, data table
+- May connect to data sources or global state
+- Define layout and composition of their children
+
+### Templates and Pages
+- Templates define the layout structure without data
+- Pages are templates filled with real content and connected to routing
+
+## Composition Patterns
+
+### Compound Components
+- Related components share implicit state via context
+- Parent owns state; children consume and render
+- Gives consumers control over rendering while keeping logic centralized
+
+### Render Props / Slots
+- Component provides behavior; consumer provides rendering
+- Useful for headless components: dropdown logic without markup opinion
+- Keeps ARIA, keyboard, and focus management in the shared layer
+
+### Container / Presentational
+- Container: handles data fetching, state management, side effects
+- Presentational: receives props, renders UI, stays pure
+- Easier to test, reuse, and maintain
+
+### Polymorphic Components
+- `as` or `component` prop to render as different HTML elements
+- A `Button` that renders as `<a>` for link-style buttons
+- Preserves type safety with generics
+
+## Props Design
+
+- Required props: minimum needed for the component to function
+- Optional props with sensible defaults
+- Boolean props: avoid double negatives (`isDisabled` not `isNotEnabled`)
+- Event handlers: `on` prefix (`onClick`, `onChange`)
+- Children: use `children` prop or slots for composition
+- Avoid prop drilling beyond two levels; use context or composition
+
+## State Ownership
+
+| State Type | Where to Manage |
+|---|---|
+| UI state (open, focused, hovered) | Component-local |
+| Form state (values, validation, dirty) | Form library or parent component |
+| Server state (API data, cache) | Data fetching library (TanStack Query, SWR) |
+| URL state (filters, pagination, tab) | URL / router |
+| Global state (theme, user, preferences) | Context or lightweight store |
+
+- Lift state to the nearest common ancestor that needs it
+- Derive values instead of storing computed state
+- Single source of truth for each piece of state
+
+## Design System Tokens
+
+- **Color**: semantic names (text-primary, surface-elevated, border-subtle)
+- **Typography**: scale steps (text-sm, text-base, text-lg, text-xl)
+- **Spacing**: scale steps (space-1 through space-12)
+- **Radius**: small, medium, large, full
+- **Shadow**: elevation levels (shadow-sm, shadow-md, shadow-lg)
+- Implement as CSS custom properties or theme objects
+- Document every token with visual examples
+
+## Accessibility Checklist
+
+- [ ] Every interactive element is keyboard accessible
+- [ ] Focus order matches visual order
+- [ ] Focus indicators are visible
+- [ ] ARIA roles, labels, and states are correct
+- [ ] Color contrast meets WCAG AA
+- [ ] Animations respect `prefers-reduced-motion`
+- [ ] Screen reader announces state changes (live regions)
+
+## Testing Components
+
+- Unit test: logic, state transitions, prop handling
+- Interaction test: click, type, keyboard navigation
+- Visual regression: screenshot comparison at key breakpoints
+- Accessibility audit: automated scanning plus manual keyboard test
+- Storybook or equivalent for isolated component development and documentation
+
+## Anti-Patterns
+
+- God components that handle fetching, state, rendering, and styling
+- Prop drilling through more than two intermediate components
+- Tightly coupled components that cannot be used independently
+- Rebuilding browser-native behavior (scrolling, focus management) poorly
+- CSS leaking between components via global selectors

package/skills/frontend-design/engineering.md

@@ -0,0 +1,122 @@
+<!--
+skills/frontend-design/engineering.md — Frontend Engineering — Use this skill when working on build tooling, bundling, rendering strategies, or
+
+Use this skill when working on build tooling, bundling, rendering strategies, or frontend infrastructure. ## Build Tools
+-->
+# Frontend Engineering
+
+Use this skill when working on build tooling, bundling, rendering strategies, or frontend infrastructure.
+
+## Build Tools
+
+| Tool | Strength |
+|---|---|
+| Vite | Fast dev server, ESM-native, good for most projects |
+| Turbopack | Next.js integrated, incremental compilation |
+| esbuild | Extremely fast bundling for libraries and tools |
+| Webpack | Mature ecosystem, complex configuration |
+| Rollup | Clean ESM output for libraries |
+| Rspack | Webpack-compatible with Rust-based speed |
+
+### Configuration Principles
+- Start with framework defaults; customize only when needed
+- Enable tree-shaking for unused code elimination
+- Code-split by route and by heavy dependency
+- Source maps in development; conditional in production (security vs debugging trade-off)
+- Hashed filenames for cache busting
+
+## Rendering Strategies
+
+### Static Site Generation (SSG)
+- Pre-render pages at build time
+- Best for: marketing pages, blogs, documentation
+- Fastest TTFB; cacheable at CDN edge
+- Rebuild on content change or use incremental regeneration
+
+### Server-Side Rendering (SSR)
+- Render on each request
+- Best for: dynamic content, personalized pages, SEO-critical content
+- Higher TTFB than SSG; requires server infrastructure
+- Hydration on the client for interactivity
+
+### Client-Side Rendering (CSR)
+- Render entirely in the browser
+- Best for: authenticated apps, dashboards, tools behind login
+- Fast after initial load; poor SEO without prerendering
+- Show skeleton during initial data fetch
+
+### Streaming SSR
+- Send HTML progressively as components resolve
+- Reduces TTFB by starting the response before all data is ready
+- Suspense boundaries define streaming chunks
+- Best for: pages with mixed fast and slow data sources
+
+### Islands Architecture
+- Static HTML with isolated interactive components (islands)
+- Minimal JavaScript shipped; only interactive parts hydrate
+- Best for: content-heavy sites with sparse interactivity
+- Frameworks: Astro, Fresh
+
+## Performance Budget
+
+| Page Type | JS (gzipped) | CSS (gzipped) | LCP |
+|---|---|---|---|
+| Landing | <150KB | <30KB | <2.5s |
+| App page | <300KB | <50KB | <3s |
+| Microsite | <80KB | <15KB | <2s |
+
+### Optimization Techniques
+- Dynamic imports for below-the-fold and conditional features
+- Preload critical resources: hero image, primary font
+- Defer non-critical CSS and JavaScript
+- Compress with Brotli (or gzip fallback)
+- Image optimization: AVIF/WebP, explicit dimensions, lazy loading
+
+## Module Federation
+
+- Share dependencies across independently deployed micro-frontends
+- Define clear ownership: one team per module
+- Version shared dependencies carefully
+- Fallback when a remote module is unavailable
+- Use for: large organizations with multiple teams on one product
+
+## Monorepo Patterns
+
+- Nx, Turborepo, or PNPM workspaces for multi-package management
+- Share configuration (ESLint, TypeScript, test setup) from root
+- Affected-based CI: only build/test changed packages and dependents
+- Consistent dependency versions across packages
+- Publish internal packages with workspace protocol
+
+## Developer Experience
+
+- Hot module replacement for fast iteration
+- TypeScript for type safety across the codebase
+- Storybook for isolated component development
+- Automated formatting and linting on save (Prettier, ESLint)
+- Preview deployments on pull requests
+
+## Testing Infrastructure
+
+- Unit: Vitest or Jest for logic and utilities
+- Component: Testing Library for interaction tests
+- Visual regression: Playwright screenshots at key breakpoints
+- E2E: Playwright or Cypress for critical user flows
+- Accessibility: axe-core in CI, manual keyboard testing
+- Run the full suite in CI; fast subset on pre-commit
+
+## Deployment
+
+- CDN for static assets with long-lived cache and content hashing
+- Edge functions for dynamic personalization at the CDN layer
+- Preview environments per pull request
+- Feature flags for progressive rollout
+- Rollback strategy: revert deploy or disable feature flag
+
+## Anti-Patterns
+
+- Bundling everything into one chunk (no code splitting)
+- Importing entire libraries when only a function is needed
+- Client-side rendering for SEO-critical pages
+- No performance budget (unconstrained growth)
+- Polyfilling for browsers no longer in the support matrix