AI Rules for Frontend Teams

Frontend: Where Users Meet the Code

Frontend code runs in the browser — the most constrained and variable environment in software. Every user has a different device (phone, tablet, desktop), different screen size, different network speed, different browser, and different accessibility needs. Frontend AI rules must account for this variability: components must be responsive (work on all screen sizes), performant (fast on slow devices and networks), accessible (usable by people with disabilities), and consistent (follow the design system).

The frontend stack in 2026: React (still dominant), Next.js (React framework), Vue/Nuxt, Svelte/SvelteKit, and Astro for content-heavy sites. Styling: Tailwind CSS (dominant), CSS Modules, styled-components. State: React Query/TanStack Query (server state), Zustand/Redux (client state). Testing: Vitest, Testing Library, Playwright. AI rule: 'Detect the frontend stack from package.json and existing code. Generate components using the project's framework, styling approach, and state management pattern.'

The frontend team's AI rules encode: component architecture (how components are organized, named, and composed), state management (where state lives, how it flows), performance standards (bundle size budgets, Core Web Vitals targets), accessibility requirements (WCAG 2.1 AA), and design system usage (use existing components, follow design tokens).

Component Architecture and Conventions

Component organization: AI rule: 'Components organized by feature or domain, not by type. Not: components/Button.tsx, components/Modal.tsx, components/UserCard.tsx. Instead: features/auth/LoginForm.tsx, features/dashboard/MetricCard.tsx. Shared UI primitives: components/ui/ (or from the design system library). Each component file: single responsibility, co-located with its tests and styles.'

Component naming: AI rule: 'PascalCase for component names (UserProfile, not userProfile or user-profile). File names match component names (UserProfile.tsx exports UserProfile). Props interface: ComponentNameProps (UserProfileProps). Descriptive names that indicate purpose: SubmitButton not Btn, UserAvatarDropdown not Dropdown.'

Component composition: AI rule: 'Prefer composition over configuration. Not: <Card variant="user" showAvatar showBio showActions />. Instead: <Card><Avatar /><Bio /><Actions /></Card>. Composition is more flexible, easier to customize, and easier for the AI to generate correctly. Avoid prop drilling (pass data through many levels) — use context or composition.'

State Management and Performance

State management: AI rule: 'Server state (data from APIs): TanStack Query / React Query. Handles caching, refetching, loading states, and optimistic updates. Client state (UI state, form state): useState for local, Zustand or Context for shared. Never use Redux/Zustand for server-fetched data — that is TanStack Query's job. The AI must detect the existing state management approach and use it consistently.'

Performance budgets: AI rule: 'Bundle size: total JavaScript < 200KB gzipped for initial load. Per-route: < 50KB gzipped (code-split by route). Images: WebP/AVIF format, responsive sizes (srcset), lazy-loaded below the fold. Fonts: preloaded, subset to used characters. The AI should generate lazy-loaded routes (React.lazy + Suspense), optimized images (next/image or equivalent), and avoid importing large libraries in client components.'

Core Web Vitals: AI rule: 'LCP (Largest Contentful Paint) < 2.5s: optimize the hero image or largest text block. CLS (Cumulative Layout Shift) < 0.1: set explicit dimensions on images, videos, and ad slots. INP (Interaction to Next Paint) < 200ms: minimize JavaScript on the main thread, use web workers for heavy computation. The AI generates performance-aware code: lazy loading, explicit dimensions, async operations.'

Accessibility and Design System

Accessibility (WCAG 2.1 AA): AI rule: 'Every interactive element: keyboard accessible (tab navigation, Enter/Space activation). Every image: alt text (descriptive for content images, empty alt="" for decorative). Every form: labels associated with inputs (htmlFor/id). Color contrast: 4.5:1 for normal text, 3:1 for large text. Focus indicators: visible (never outline: none without a custom focus style). Screen reader: proper ARIA roles, labels, and live regions for dynamic content.'

Design system integration: AI rule: 'Use the project's design system components before creating custom ones. Check components/ui/ or the design system package for existing Button, Input, Modal, Card, etc. Use design tokens (colors, spacing, typography from the Tailwind config or theme) instead of arbitrary values. The AI should not create a custom button when the design system already has one.'

Dark mode: AI rule: 'If the project supports dark mode: every new component must work in both light and dark themes. Tailwind: use dark: variants. CSS variables: use theme tokens that switch between themes. Never hardcode colors (text-gray-900 without dark:text-gray-100). Test both themes visually for every new component.'

Frontend AI Rules Summary

Summary of AI rules for frontend teams building user interfaces.

• Components: organized by feature, PascalCase names, composition over configuration
• State: TanStack Query for server state, Zustand/Context for client state. Never mix
• Performance: < 200KB JS initial, code-split routes, lazy images, preloaded fonts
• Core Web Vitals: LCP < 2.5s, CLS < 0.1, INP < 200ms. Explicit dimensions, lazy loading
• Accessibility: keyboard navigation, alt text, form labels, color contrast, focus indicators
• Design system: use existing components first. Design tokens for colors/spacing. No arbitrary values
• Dark mode: every component works in light and dark. Use theme variants. Test both
• Stack detection: React/Vue/Svelte from package.json. Match framework and styling approach