Frontend Prompts

# React State Management taste
- Start with local useState and lift state only when two siblings truly need it. Confidence: 0.95
- Treat server data as a cache and manage it with TanStack Query instead of a global store. Confidence: 0.90
- Keep URL-worthy state such as filters, tabs and pagination in search params. Confidence: 0.90
- Reach for Zustand when shared client state outgrows a single component tree. Confidence: 0.80
- Avoid Redux for new projects unless the team already depends on its devtools and middleware. Confidence: 0.70
- Use React Context for rarely changing values like theme, locale and the current user, not for fast-changing data. Confidence: 0.90
- Derive values during render instead of syncing them into extra state with useEffect. Confidence: 0.95
- Model complex local state with useReducer and a discriminated union of actions. Confidence: 0.80
- Represent async status as one union like idle, loading, success and error rather than several booleans. Confidence: 0.85
- Keep form state in React Hook Form with a zod schema instead of hand-rolled useState per field. Confidence: 0.80
- Select the smallest slice of a store in each component to avoid needless re-renders. Confidence: 0.85
- Store ids in state and look up the full objects, instead of duplicating nested data. Confidence: 0.80
- Use optimistic updates for quick user actions and roll back on error. Confidence: 0.75
- Never mutate state objects in place; return new objects or use Immer for deep updates. Confidence: 0.90
- Keep persisted state small and versioned when saving it to localStorage. Confidence: 0.75
- Reset component state by changing its key instead of writing reset effects. Confidence: 0.80
- Colocate stores with the feature that owns them rather than in one global store folder. Confidence: 0.75
- Type every store and context value explicitly and avoid any in state shapes. Confidence: 0.90

# CSS taste of a design-minded frontend developer
- Use Tailwind CSS utility classes for component styling in application code. Confidence: 0.80
- Define colors, spacing, radii and fonts as design tokens in CSS custom properties. Confidence: 0.90
- Never hardcode hex colors inside components; always reference a token. Confidence: 0.85
- Build layouts with flexbox and grid, with gap for spacing instead of margins between siblings. Confidence: 0.90
- Design mobile first and add min-width breakpoints for larger screens. Confidence: 0.85
- Use container queries for components that live in containers of different widths. Confidence: 0.75
- Use rem for font sizes and spacing, and px only for hairline borders. Confidence: 0.80
- Use clamp() for fluid typography instead of many breakpoint overrides. Confidence: 0.75
- Keep specificity flat: single class selectors, no IDs, and no !important outside utilities. Confidence: 0.90
- Use cascade layers to order reset, base, components and utilities. Confidence: 0.70
- Support dark mode with prefers-color-scheme plus tokens, not duplicated component styles. Confidence: 0.85
- Respect prefers-reduced-motion and disable non-essential animation when it is set. Confidence: 0.90
- Never remove focus outlines; style them with :focus-visible instead. Confidence: 0.95
- Meet WCAG AA contrast for all text and interactive elements. Confidence: 0.90
- Animate only transform and opacity for smooth, cheap transitions. Confidence: 0.85
- Use logical properties such as margin-inline so layouts work in right-to-left languages. Confidence: 0.75
- Use the system font stack or self-hosted variable fonts with font-display: swap. Confidence: 0.80
- Set aspect-ratio and width and height on media to prevent layout shift. Confidence: 0.85
- Use native CSS nesting sparingly and never more than two levels deep. Confidence: 0.70
- Sort Tailwind classes automatically with the Prettier plugin. Confidence: 0.80
- Extract a component when the same long class list repeats, not an @apply class. Confidence: 0.75
- Make sure nothing scrolls horizontally at a 320px viewport width. Confidence: 0.85

# Web performance taste of a frontend engineer
- Measure Core Web Vitals (LCP, INP, CLS) from real users, not only from lab Lighthouse runs. Confidence: 0.90
- Set a performance budget for JavaScript size and LCP, and fail CI when a change breaks it. Confidence: 0.80
- Render the first view on the server or statically; do not ship a blank page that waits for JavaScript. Confidence: 0.90
- Ship less JavaScript before optimizing the JavaScript you ship. Confidence: 0.90
- Split code by route and lazy-load heavy widgets such as editors, charts, and maps. Confidence: 0.85
- Check the bundle analyzer before adding a dependency, and prefer small, tree-shakable libraries. Confidence: 0.80
- Serve images in AVIF or WebP with responsive srcset and explicit width and height. Confidence: 0.90
- Mark the LCP image with fetchpriority="high" and never lazy-load it. Confidence: 0.85
- Lazy-load below-the-fold images and iframes with loading="lazy". Confidence: 0.85
- Self-host fonts, subset them, preload the main one, and use font-display: swap. Confidence: 0.80
- Reserve space for ads, embeds, and late content so the layout does not shift. Confidence: 0.85
- Break up long tasks over 50 ms and yield to the main thread to keep INP low. Confidence: 0.80
- Load third-party scripts with defer or after interaction, and audit each one for real value. Confidence: 0.85
- Cache hashed static assets with Cache-Control: immutable for a year. Confidence: 0.90
- Serve everything over HTTP/2 or HTTP/3 from a CDN with Brotli compression. Confidence: 0.85
- Preconnect only to the one or two origins needed for the first render. Confidence: 0.70
- Inline critical CSS for the first view and load the rest without blocking render. Confidence: 0.65
- Virtualize long lists instead of rendering thousands of DOM nodes. Confidence: 0.80
- Animate only transform and opacity, and respect prefers-reduced-motion. Confidence: 0.85
- Avoid layout thrashing: batch DOM reads before DOM writes. Confidence: 0.75
- Test on a mid-range Android phone with a throttled network, not only on a developer laptop. Confidence: 0.90
- Treat a performance regression like a bug, with an owner and a fix date. Confidence: 0.80

# Web Accessibility taste of a frontend engineer
- Use semantic HTML first (button, a, nav, main, label); add ARIA only when no native element fits. Confidence: 0.95
- Never put click handlers on div or span; if it acts like a button, it is a button. Confidence: 0.95
- Links navigate and buttons perform actions; do not swap them for styling reasons. Confidence: 0.90
- Every form input has a visible, programmatically associated label; placeholders are not labels. Confidence: 0.95
- Keep one h1 per page and never skip heading levels for visual size; style with CSS instead. Confidence: 0.80
- Write alt text that describes the purpose of the image, and use alt="" for purely decorative images. Confidence: 0.90
- Keep a visible focus indicator on every interactive element; use :focus-visible rather than removing outlines. Confidence: 0.95
- Every feature must work with the keyboard alone, in a logical tab order, with no keyboard traps. Confidence: 0.95
- Avoid positive tabindex values; fix the DOM order instead. Confidence: 0.90
- Meet WCAG AA contrast: 4.5:1 for body text and 3:1 for large text and UI components. Confidence: 0.90
- Never convey meaning by color alone; pair it with text, an icon or a pattern. Confidence: 0.90
- Use the native dialog element (or a well-tested library) for modals, trap focus while open and return focus to the trigger on close. Confidence: 0.85
- Announce async status and errors with an aria-live region or role="alert", and move focus to the error summary after a failed submit. Confidence: 0.80
- Honor prefers-reduced-motion and avoid autoplaying motion longer than five seconds. Confidence: 0.85
- Make touch targets at least 24x24 CSS pixels, ideally 44x44. Confidence: 0.75
- Size text in rem and make sure the layout survives 200% zoom and 320px width without horizontal scrolling. Confidence: 0.85
- Add a "Skip to main content" link as the first focusable element. Confidence: 0.80
- Set the lang attribute on html and on any inline passage in another language. Confidence: 0.85
- Run axe or Lighthouse checks in CI, knowing they catch only about a third of issues. Confidence: 0.85
- Test critical flows manually with a screen reader (VoiceOver and NVDA) before each major release. Confidence: 0.80
- Lint JSX with eslint-plugin-jsx-a11y and treat its errors as build failures. Confidence: 0.75
- Prefer accessible component primitives (Radix, React Aria) over building comboboxes and menus from scratch. Confidence: 0.80

# Vue App taste of a frontend engineer
- Start new projects with Vite and Vue 3, or Nuxt when server rendering or file-based routing is needed. Confidence: 0.90
- Write components with script setup and the Composition API, not the Options API. Confidence: 0.90
- Use TypeScript everywhere and check templates with vue-tsc in CI. Confidence: 0.90
- Type props and emits with defineProps and defineEmits generics instead of runtime-only declarations. Confidence: 0.85
- Use Pinia for shared client state and keep stores small and focused on one domain. Confidence: 0.85
- Fetch server data with TanStack Query for Vue or Nuxt useFetch instead of hand-rolled loading flags in stores. Confidence: 0.80
- Extract reusable logic into composables named useSomething that return refs and functions. Confidence: 0.90
- Reach for VueUse before writing a custom composable for common browser APIs. Confidence: 0.75
- Prefer computed over watch, and use watch only for side effects. Confidence: 0.90
- Never mutate props; emit events or use defineModel for two-way binding. Confidence: 0.95
- Always give v-for items a stable key from the data, never the index. Confidence: 0.90
- Never combine v-if and v-for on the same element. Confidence: 0.90
- Keep components under about 200 lines and split them when the template gets hard to scan. Confidence: 0.70
- Use multi-word PascalCase component names and colocate components by feature, not by type. Confidence: 0.80
- Style with scoped CSS or Tailwind, and avoid global styles beyond a small reset and design tokens. Confidence: 0.75
- Lazy load route components with dynamic imports in Vue Router. Confidence: 0.85
- Test components with Vitest and Vue Testing Library, querying by role and text. Confidence: 0.85
- Lint with ESLint and eslint-plugin-vue using the recommended rules, and format with Prettier. Confidence: 0.85
- Avoid provide and inject for app state; use it only for component library internals and deep config. Confidence: 0.70
- Sanitize any HTML before using v-html, or better, avoid v-html altogether. Confidence: 0.95

# SvelteKit App taste of a full-stack web developer
- Start every project with the official sv create template, TypeScript enabled and strict mode on. Confidence: 0.90
- Use Svelte 5 runes ($state, $derived, $effect, $props) for all new components instead of legacy reactive statements. Confidence: 0.90
- Reach for $derived before $effect, and keep $effect for syncing with things outside Svelte like the DOM or third-party libraries. Confidence: 0.90
- Load data in +page.server.ts when it needs secrets or the database, and use universal +page.ts only for public fetches. Confidence: 0.90
- Handle mutations with form actions and use:enhance so forms work without JavaScript and get progressive enhancement for free. Confidence: 0.85
- Validate form and API input on the server with Zod or Valibot, and return fail() with field errors instead of throwing. Confidence: 0.90
- Keep server-only code in $lib/server so the build fails if it is ever imported into the client. Confidence: 0.95
- Read secrets from $env/static/private or $env/dynamic/private, never from public env modules. Confidence: 0.95
- Put authentication and session lookup in hooks.server.ts and expose the user through event.locals. Confidence: 0.90
- Never store per-request user data in module-level state, because it leaks between requests on the server. Confidence: 0.95
- Share client state through context or small rune-based modules in .svelte.ts files, not a global store for everything. Confidence: 0.80
- Use route groups like (app) and (marketing) to give sections different layouts without changing URLs. Confidence: 0.80
- Prerender static pages such as docs and marketing, and keep dynamic pages server-rendered. Confidence: 0.85
- Pick an explicit adapter (adapter-node, adapter-vercel, adapter-cloudflare) instead of relying on adapter-auto in production. Confidence: 0.80
- Return typed data from load functions and rely on the generated ./$types instead of writing prop types by hand. Confidence: 0.90
- Use +error.svelte pages and the error() helper for expected failures, and log unexpected ones in handleError. Confidence: 0.85
- Style with scoped component CSS by default and add Tailwind only when the team already uses it. Confidence: 0.70
- Keep components small and pass snippets for flexible content instead of many boolean props. Confidence: 0.80
- Test components with Vitest and @testing-library/svelte, and cover the main flows with Playwright. Confidence: 0.85
- Run svelte-check, ESLint and Prettier with the Svelte plugin in CI on every pull request. Confidence: 0.85

# Browser Extension taste of a cross-browser extension developer
- Build on Manifest V3 and plan around service workers that can be stopped at any time. Confidence: 0.95
- Use a framework like WXT or Plasmo with TypeScript and Vite to handle builds, reloads and cross-browser manifests. Confidence: 0.80
- Request the fewest permissions possible, and prefer activeTab and optional_permissions over broad host access. Confidence: 0.95
- Never request the all_urls host permission unless the core feature truly needs every site. Confidence: 0.90
- Keep no important state in service worker globals and persist it with chrome.storage instead. Confidence: 0.95
- Use chrome.storage.session for temporary secrets and chrome.storage.local or sync for user settings, with a typed wrapper and defaults. Confidence: 0.85
- Use chrome.alarms for scheduled work instead of setInterval in the background. Confidence: 0.90
- Register all event listeners at the top level of the service worker so they survive restarts. Confidence: 0.90
- Keep content scripts small and inject them programmatically with chrome.scripting when possible. Confidence: 0.85
- Isolate injected UI in a Shadow DOM so page styles and extension styles cannot collide. Confidence: 0.90
- Treat every message from content scripts and web pages as untrusted and validate it with a schema. Confidence: 0.95
- Define message types in one shared module and use typed request and response helpers for runtime messaging. Confidence: 0.85
- Never inject remote code or use eval, and keep a strict Content Security Policy. Confidence: 0.95
- Use declarativeNetRequest for blocking or modifying requests instead of trying to intercept them in code. Confidence: 0.85
- Use the webextension-polyfill or a framework layer so the same code runs on Chrome, Firefox, Edge and Safari. Confidence: 0.80
- Collect as little user data as possible and explain clearly in the store listing what is stored and why. Confidence: 0.90
- Handle install and update events to migrate stored settings between versions. Confidence: 0.85
- Test popup and options pages as normal web UI, and run end-to-end tests with Playwright loading the unpacked extension. Confidence: 0.80
- Automate builds, version bumps and store uploads in CI, with one zip artifact per browser. Confidence: 0.80
- Keep the popup fast by loading heavy data lazily and showing cached state first. Confidence: 0.80
- Write a short permission justification for each permission before submitting to the store. Confidence: 0.85

# Flutter App taste of a pragmatic cross-platform mobile developer
- Start on the latest stable Flutter with null safety, strict analysis options and the official lints or very_good_analysis enforced in CI. Confidence: 0.90
- Organize code by feature folders, each with its own data, domain and presentation layers, instead of one giant widgets folder. Confidence: 0.85
- Use Riverpod or Bloc for state management and pick one for the whole app instead of mixing several. Confidence: 0.80
- Keep widgets small and composable, extracting a new widget class rather than a helper method that returns widgets. Confidence: 0.85
- Mark widgets and constructors const wherever possible to cut unnecessary rebuilds. Confidence: 0.90
- Keep business logic out of build methods and out of widgets entirely. Confidence: 0.90
- Use go_router for declarative navigation with typed routes and working deep links. Confidence: 0.80
- Model data with immutable classes generated by freezed and json_serializable instead of hand-written copyWith and fromJson. Confidence: 0.80
- Wrap API access in repository classes and return typed results or exceptions, never raw response maps, to the UI. Confidence: 0.85
- Build the theme once with ThemeData and ColorScheme from Material 3, and never hard-code colors or text styles inside widgets. Confidence: 0.85
- Support dark mode, dynamic text scaling and screen readers from the first release. Confidence: 0.85
- Use flutter_localizations with ARB files for every user-facing string from day one. Confidence: 0.80
- Run heavy parsing or image work in an isolate with compute or Isolate.run so the UI thread stays smooth. Confidence: 0.85
- Profile with DevTools in profile mode on a real low-end device before calling a screen fast. Confidence: 0.85
- Use ListView.builder or slivers for long lists and never build hundreds of children eagerly. Confidence: 0.90
- Store tokens with flutter_secure_storage and keep simple settings in shared_preferences. Confidence: 0.90
- Write unit tests for logic, widget tests for screens and a few integration tests for critical flows. Confidence: 0.80
- Use golden tests for design-system widgets that must stay pixel-stable. Confidence: 0.70
- Pin dependency versions, review new packages for maintenance and platform support, and keep the list short. Confidence: 0.80
- Define flavors for development, staging and production with separate app IDs and config. Confidence: 0.85
- Build and ship releases with Fastlane or Codemagic from CI, never from a developer laptop. Confidence: 0.80
- Wire up Crashlytics or Sentry with obfuscated builds and uploaded symbol files. Confidence: 0.80

# Astro Content Site taste of a performance-minded web developer
- Use Astro for content-heavy sites like docs, blogs and marketing pages, and pick a full app framework only when most pages are interactive. Confidence: 0.85
- Ship zero JavaScript by default and add islands only for the components that truly need interactivity. Confidence: 0.90
- Choose the lightest client directive that works, preferring client:visible or client:idle over client:load. Confidence: 0.85
- Define content collections with a schema so every Markdown or MDX file is validated and typed at build time. Confidence: 0.90
- Keep content in the repo as Markdown or MDX until editors really need a headless CMS. Confidence: 0.75
- Build pages statically by default, and switch individual routes to server rendering only when they need fresh or per-user data. Confidence: 0.85
- Use the built-in Image component with explicit widths and modern formats instead of plain img tags for local images. Confidence: 0.90
- Self-host fonts, subset them, and preload only the one or two files used above the fold. Confidence: 0.80
- Style with scoped component styles or a utility framework, and keep global CSS limited to tokens and resets. Confidence: 0.75
- Write layouts as nested components that set titles, meta descriptions, canonical URLs and Open Graph tags from props. Confidence: 0.90
- Generate a sitemap and RSS feed from the content collections instead of maintaining them by hand. Confidence: 0.85
- Keep URLs stable and add redirects in config whenever a slug changes, so old links never return 404. Confidence: 0.90
- Use semantic HTML with one h1 per page, real headings in order, and alt text required by the content schema for images. Confidence: 0.90
- Use View Transitions sparingly for page navigation and respect prefers-reduced-motion. Confidence: 0.70
- Load third-party scripts like analytics and chat widgets late, or move them off the main thread with Partytown. Confidence: 0.75
- Keep framework islands in one UI library per site rather than mixing React, Vue and Svelte without a reason. Confidence: 0.80
- Run astro check and TypeScript in strict mode in CI so broken frontmatter and props fail the build. Confidence: 0.85
- Check every pull request with link checking and Lighthouse budgets for performance, accessibility and SEO. Confidence: 0.80
- Deploy previews for each pull request so writers and reviewers can read changes before they merge. Confidence: 0.85
- Add search with a static index like Pagefind before reaching for a hosted search service. Confidence: 0.75
- Read secrets only in server code through typed environment variables, and never expose them with a public prefix. Confidence: 0.95

# WebAssembly Module taste of a performance-focused systems developer
- Reach for WebAssembly only for CPU-heavy, measurable hot paths like codecs, parsers or simulations, not for ordinary UI logic. Confidence: 0.90
- Benchmark against a well-optimized JavaScript version before shipping, and keep the Wasm path only if the gain is real on target devices. Confidence: 0.85
- Write browser modules in Rust with wasm-bindgen and wasm-pack as the default toolchain. Confidence: 0.80
- Keep the boundary between JavaScript and Wasm coarse: pass whole buffers in a few calls instead of crossing it per item. Confidence: 0.90
- Share large data through typed array views over Wasm memory rather than serializing to JSON or strings. Confidence: 0.85
- Never hold a typed array view across a call that may grow memory, because growth detaches the old buffer. Confidence: 0.85
- Build release modules with opt-level set for size or speed on purpose, enable LTO, and run wasm-opt in the pipeline. Confidence: 0.85
- Track the compressed .wasm size in CI and fail the build when it grows past an agreed budget. Confidence: 0.80
- Load modules with WebAssembly.instantiateStreaming and serve them with the application/wasm content type. Confidence: 0.85
- Run heavy Wasm work in a Web Worker so it never blocks the main thread. Confidence: 0.90
- Use threads and SharedArrayBuffer only when the page can stay cross-origin isolated with COOP and COEP headers. Confidence: 0.75
- Detect SIMD support at runtime and ship a fallback build, instead of assuming every browser has it. Confidence: 0.70
- Avoid panics crossing the boundary: return Result types and convert them to JavaScript errors with clear messages. Confidence: 0.85
- Install console_error_panic_hook in debug builds and strip it from release builds. Confidence: 0.75
- Keep the exported API small and typed, and publish the generated TypeScript definitions with the package. Confidence: 0.85
- Avoid pulling heavy crates like full regex or serde_json into browser builds unless the size cost is measured and accepted. Confidence: 0.75
- Target WASI and the component model for server-side or plugin use, and keep that build separate from the browser build. Confidence: 0.70
- Treat plugin modules from users as untrusted: run them in a sandboxed runtime like Wasmtime with fuel or time limits and no ambient file or network access. Confidence: 0.90
- Test the core logic as native code with cargo test and keep a smaller set of wasm-bindgen-test runs in a headless browser. Confidence: 0.80
- Keep a pure JavaScript fallback for environments where Wasm is blocked by policy or fails to load. Confidence: 0.65

# Design System taste of a pragmatic design systems engineer
- Define design tokens for color, spacing, typography, radius and motion in one source file, and generate CSS variables and platform outputs from it. Confidence: 0.90
- Name tokens by purpose, such as color-text-muted or space-inset-md, not by raw value like gray-500 or 16px. Confidence: 0.85
- Support light and dark themes by swapping semantic token values, never by overriding individual component styles. Confidence: 0.90
- Build components on accessible headless primitives such as Radix UI or React Aria instead of re-implementing focus and keyboard logic. Confidence: 0.85
- Meet WCAG 2.2 AA contrast for every token pairing and check it automatically when tokens change. Confidence: 0.90
- Keep the component API small: a few well-named variants and sizes beat dozens of boolean props. Confidence: 0.85
- Prefer composition with slots or children over configuration objects for complex components like dialogs and menus. Confidence: 0.80
- Forward refs and spread remaining props onto the root element so components work with forms, tooltips and tests. Confidence: 0.85
- Never hard-code colors, spacing or font sizes inside components; lint for raw values with Stylelint or an ESLint rule. Confidence: 0.85
- Document every component in Storybook with usage guidance, do and don't examples, and live controls. Confidence: 0.85
- Run visual regression tests with Chromatic or Playwright screenshots on every pull request. Confidence: 0.80
- Run automated accessibility checks with axe in component tests, and still test keyboard and screen reader flows by hand before release. Confidence: 0.85
- Publish the library as a versioned package with semantic versioning and a changelog generated by Changesets. Confidence: 0.90
- Treat a renamed prop or removed variant as a breaking change, and ship codemods for large migrations. Confidence: 0.75
- Deprecate before removing: mark the old API, log a development-only warning, and remove it in the next major version. Confidence: 0.85
- Ship ESM with tree-shakeable per-component entry points and mark CSS files as side effects correctly. Confidence: 0.80
- Respect prefers-reduced-motion and keep motion tokens short and purposeful. Confidence: 0.80
- Keep icons as a separate package of optimized SVG components with consistent size and stroke tokens. Confidence: 0.75
- Use logical CSS properties like margin-inline-start so components work in right-to-left layouts. Confidence: 0.75
- Keep Figma components and code components in sync by sharing token names and reviewing drift every release. Confidence: 0.70
- Measure adoption by scanning product repositories for library imports and one-off overrides. Confidence: 0.65
- Accept contributions through a short proposal template that covers the use case, API and accessibility before any code. Confidence: 0.70

# Data Visualization taste of a clarity-first data visualization developer
- Start from the question the chart must answer, and write that question as the chart title or subtitle. Confidence: 0.90
- Choose the chart by the comparison: bars for categories, lines for trends over time, scatter plots for relationships. Confidence: 0.90
- Start bar chart value axes at zero; line charts may use a tighter range when the change is what matters. Confidence: 0.90
- Avoid pie charts with more than three slices, and never use 3D charts. Confidence: 0.85
- Sort categorical bars by value unless the categories have a natural order like months or ratings. Confidence: 0.85
- Label lines and series directly at the end of the line instead of making readers match colors with a legend. Confidence: 0.80
- Use a sequential palette for ordered data, a diverging palette around a meaningful midpoint, and a categorical palette for groups. Confidence: 0.85
- Keep categorical palettes to about seven colors and check them with a color-blindness simulator. Confidence: 0.85
- Never encode meaning with color alone; add labels, patterns, shapes or positions as well. Confidence: 0.90
- Remove chart junk: heavy gridlines, borders, shadows and decorative backgrounds. Confidence: 0.85
- Format numbers for humans with thousands separators, sensible rounding and units such as 1.2M or 35 percent. Confidence: 0.85
- Show uncertainty with confidence bands or error bars when the data comes from samples or forecasts. Confidence: 0.75
- Use a declarative library such as Vega-Lite, Observable Plot or ECharts for standard charts, and reach for D3 only for custom visuals. Confidence: 0.80
- Render with SVG for small and medium datasets, and switch to Canvas or WebGL above roughly ten thousand marks. Confidence: 0.75
- Make charts responsive by redesigning for small screens, for example fewer ticks or a horizontal bar layout, not just scaling down. Confidence: 0.80
- Provide a text summary and an accessible data table for every important chart. Confidence: 0.85
- Make tooltips keyboard accessible, and never hide key information only in hover states. Confidence: 0.80
- Aggregate or sample data on the server before sending it to the browser, rather than plotting millions of raw points. Confidence: 0.85
- Keep the same color for the same category across every chart in a dashboard. Confidence: 0.90
- Annotate notable events, like a release or an outage, directly on time series charts. Confidence: 0.75
- Show the data source and the last refresh time under each chart. Confidence: 0.85
- Test charts with real and edge-case data: empty series, single points, very long labels and negative values. Confidence: 0.80

# Next.js App taste of an App Router pragmatist
- Use the App Router with the `app/` directory; do not start new features in the Pages Router. Confidence: 0.95
- Default every page and layout to a Server Component, and add `"use client"` only where interactivity, browser APIs or React state require it. Confidence: 0.95
- Colocate route files as `page.tsx`, `layout.tsx`, `loading.tsx`, `error.tsx` and `not-found.tsx` next to the segment they own. Confidence: 0.90
- Fetch data in Server Components with `fetch` and set an explicit `cache` or `next.revalidate` policy; never leave caching accidental. Confidence: 0.90
- Put shared UI in `components/` and keep route folders free of unrelated helpers. Confidence: 0.85
- Use Route Handlers under `app/api` only for webhooks, auth callbacks and thin BFF endpoints, not as a second application layer. Confidence: 0.85
- Validate all searchParams, route params and form bodies with Zod before they reach business logic. Confidence: 0.90
- Prefer Server Actions for mutations that stay on your origin, and return typed results the UI can handle without guessing. Confidence: 0.85
- Keep environment secrets out of `NEXT_PUBLIC_*`; expose only values that are safe in the browser. Confidence: 0.95
- Use `next/image` for every raster image and set width, height or `fill` plus sizes so CLS stays near zero. Confidence: 0.90
- Configure absolute imports with `@/` in `tsconfig.json` and ban deep relative paths like `../../../`. Confidence: 0.85
- Split marketing, app and admin into route groups such as `(marketing)` and `(app)` when they need different layouts. Confidence: 0.80
- Stream slow sections with `<Suspense>` boundaries and dedicated `loading.tsx` files instead of blocking the whole page. Confidence: 0.85
- Pin Node and package-manager versions in `package.json` engines and a lockfile, and run the same versions in CI and production. Confidence: 0.85
- Turn on ESLint with `eslint-config-next` and TypeScript `strict`, and fail CI on new errors. Confidence: 0.90
- Prefer the Metadata API (`generateMetadata`, `metadata`) over manual `<head>` tags for titles, Open Graph and robots. Confidence: 0.85
- Use middleware only for rewrites, redirects and light auth gates; keep heavy logic in Server Components or Route Handlers. Confidence: 0.80
- Ship one design-system entry for buttons, inputs and typography, and avoid one-off Tailwind class piles in every page. Confidence: 0.75
- Measure Core Web Vitals in production and treat a regression on LCP or INP as a release blocker. Confidence: 0.80
- Prefer incremental Static and ISR for public pages; reserve fully dynamic rendering for authenticated or highly personalized views. Confidence: 0.85

# Vite Frontend Tooling taste of a fast-feedback web developer
- Start new single-page apps and component playgrounds on Vite with the official framework plugin instead of a custom webpack setup. Confidence: 0.85
- Keep `vite.config.ts` in TypeScript with `defineConfig`, and keep it short enough to read in one screen. Confidence: 0.80
- Run type checking separately with `tsc --noEmit` in CI and in a watcher, since Vite only strips types and never checks them. Confidence: 0.95
- Use path aliases sparingly, define them once in `tsconfig.json`, and mirror them in Vite with a plugin such as `vite-tsconfig-paths`. Confidence: 0.75
- Expose only `VITE_`-prefixed environment variables to client code and never put secrets in them. Confidence: 0.95
- Type `import.meta.env` in a `vite-env.d.ts` file so missing or misspelled variables fail at compile time. Confidence: 0.80
- Configure the dev server proxy for backend APIs instead of enabling permissive CORS on the backend just for local development. Confidence: 0.85
- Use Vitest for unit and component tests so tests share the same config, transforms and aliases as the app. Confidence: 0.90
- Lazy-load routes and heavy widgets with dynamic `import()` and let Rollup split chunks, rather than hand-tuning `manualChunks` early. Confidence: 0.80
- Inspect bundle size with `rollup-plugin-visualizer` before releases and treat a large new dependency as a review topic. Confidence: 0.75
- Import assets through the module graph so they get hashed file names, keeping `public/` for files that need fixed URLs like `robots.txt`. Confidence: 0.85
- Set an explicit `build.target` that matches the browsers you support, instead of relying on the default. Confidence: 0.70
- Generate source maps for production builds and upload them to your error tracker rather than serving them publicly. Confidence: 0.80
- Prefer native CSS features and CSS modules or Tailwind over heavy CSS-in-JS runtimes in Vite projects. Confidence: 0.70
- Keep the plugin list small and remove plugins that duplicate built-in features such as JSON imports or CSS handling. Confidence: 0.80
- Use `vite preview` to smoke-test the production build locally before deploying, since dev and build use different pipelines. Confidence: 0.85
- Pin Vite and plugin versions in the lockfile and upgrade them together, reading the migration guide for major versions. Confidence: 0.85
- Use library mode with `vite build --lib` plus a declaration generator when publishing a component package, and mark peer dependencies as external. Confidence: 0.75
- Fix slow cold starts by checking `optimizeDeps` and large barrel files before blaming Vite itself. Confidence: 0.70
- Fail CI on build warnings about circular imports or missing exports instead of letting them pile up. Confidence: 0.65

# Tailwind CSS taste of a utility-first UI engineer
- Configure design tokens (colors, spacing, radii, fonts) once in the Tailwind theme and never hardcode hex values or arbitrary pixel sizes in markup. Confidence: 0.90
- Prefer theme-scale utilities over arbitrary values like `w-[437px]`; treat each arbitrary value as a missing token to add or a design to question. Confidence: 0.85
- Extract repeated utility groups into components (React, Vue, Svelte) rather than `@apply` classes in CSS files. Confidence: 0.85
- Reserve `@apply` for styling third-party markup or CMS content you cannot add classes to. Confidence: 0.75
- Use `prettier-plugin-tailwindcss` so class order is automatic and never argued about in review. Confidence: 0.95
- Build class names from complete static strings; never concatenate fragments like `text-color-500`, because the scanner cannot see them. Confidence: 0.95
- Use `clsx` plus `tailwind-merge` (or a `cn()` helper) so component props can override default classes without conflicts. Confidence: 0.85
- Model component variants with a typed variant helper such as `cva` instead of long ternary chains in `className`. Confidence: 0.80
- Write mobile-first: unprefixed utilities are the base and `sm:`, `md:`, `lg:` only add changes for wider screens. Confidence: 0.90
- Use container queries (`@container`, `@md:`) for reusable components whose layout depends on their slot, not the viewport. Confidence: 0.70
- Implement dark mode with CSS variables behind semantic color names like `bg-surface` and `text-muted`, rather than sprinkling `dark:` on every element. Confidence: 0.80
- Always style keyboard focus with `focus-visible:` rings and never remove outlines without a visible replacement. Confidence: 0.95
- Use the `typography` plugin's `prose` classes for long-form rendered Markdown instead of hand-styling every tag. Confidence: 0.80
- Keep `content`/source paths tight so builds stay fast and unused utilities never ship. Confidence: 0.85
- Use `group-*` and `peer-*` variants for parent and sibling state instead of adding JavaScript for hover or checked styles. Confidence: 0.75
- Respect `motion-reduce:` for animations and keep transitions short, around 150 to 200 ms. Confidence: 0.80
- Split a class list over several lines or into a variant object once it passes roughly 10 to 12 utilities. Confidence: 0.65
- Keep spacing on a consistent scale and use `gap-*` on flex and grid parents instead of margins on children. Confidence: 0.85
- Avoid `!important` modifiers except to override third-party styles you cannot change. Confidence: 0.80
- Document the token palette and the core components in Storybook or a styleguide page so designers and developers share one vocabulary. Confidence: 0.70