AI-assisted Coding
Frontend

Frontend

Functional Requirements

User Authentication & Authorization

  • ✅ Allow login via email/password or OAuth2 providers (Google, GitHub).
  • ✅ Display user profile (name, avatar, email) after successful login.
  • ✅ Provide logout functionality with token/session invalidation.
  • ✅ Conditionally render UI elements based on user roles (e.g., Admin, User).
  • ✅ Redirect unauthenticated users to /login when accessing protected routes.

Dashboard & Navigation

  • ✅ Display responsive sidebar or top navigation with collapsible menus.
  • ✅ Show real-time summary cards (e.g., total users, pending tasks, revenue).
  • ✅ Support deep linking — URLs must reflect current view (e.g., /users/123/edit).

Data Management (CRUD Operations)

  • ✅ Display paginated, sortable, and searchable data tables.
  • ✅ Create new records via modal or dedicated form page.
  • ✅ Edit records inline or via form with validation.
  • ✅ Delete records with confirmation dialog; support undo/soft-delete.
  • ✅ Export table data to CSV or PDF format.

Notifications & Feedback

  • ✅ Show toast/snackbar notifications for success, error, or info messages.
  • ✅ Display loading indicators (spinners, skeletons) during async operations.
  • ✅ Validate form inputs in real-time or on submit with clear error messages.

Search & Filtering

  • ✅ Global search bar to filter across multiple datasets.
  • ✅ Advanced filtering by date range, status, category, etc., with “Reset Filters” option.
  • ✅ Persist user’s filter/sort preferences (via localStorage or backend).

Non-Functional Requirements

Performance

  • ⏱️ Initial load time ≤ 2s on 3G network (Lighthouse metric).
  • ⏱️ Route transitions ≤ 500ms.
  • 🖼️ Lazy-load components, routes, and images.
  • 💾 Cache API responses (e.g., React Query, SWR, Apollo Client).

Accessibility (a11y)

  • ♿ Comply with WCAG 2.1 Level AA.
  • ♿ Full keyboard navigation and screen reader support.
  • ♿ Sufficient color contrast (≥ 4.5:1) and visible focus states.
  • ♿ Semantic HTML and ARIA attributes where appropriate.

Browser & Device Support

  • 🌐 Support latest versions of Chrome, Firefox, Safari, Edge.
  • 📱 Fully responsive — mobile-first design, works on all viewports.
  • 🖥️ Retina/HiDPI display compatible.

Security

  • 🔐 Store tokens in memory or httpOnly cookies — never localStorage.
  • 🔐 Sanitize user inputs to prevent XSS attacks.
  • 🔐 Enforce HTTPS in production environments.
  • 🔐 Implement CSRF tokens if using cookie-based sessions.

SEO (if public-facing)

  • 🕸️ Dynamic meta tags per route (React Helmet, Vue Meta).
  • 🤖 Support SSR or pre-rendering for crawlers (Next.js, Nuxt, SvelteKit).
  • 🗺️ Generate and serve sitemap.xml dynamically.

Frontend - Technical Requirements

Web Development Standards

  • WD-1 (MUST) Follow semantic HTML principles and ensure proper accessibility attributes.
  • WD-2 (MUST) Implement responsive design patterns that work across devices.
  • WD-3 (SHOULD) Optimize for Core Web Vitals (LCP, FID, CLS) from the start.
  • WD-4 (SHOULD) Use progressive enhancement principles - ensure basic functionality works without JavaScript.
  • WD-5 (MUST) Validate all user inputs on both client and server side.
  • WD-6 (SHOULD) Implement proper error boundaries and graceful degradation.
  • WD-7 (CONSIDER) Use CSS-in-JS or utility-first CSS frameworks for consistent styling.

Code Quality & Architecture

  • CQ-1 (MUST) Follow TDD: component scaffold → failing test → implementation → refactor.
  • CQ-2 (MUST) Name functions, components, and variables using established domain vocabulary.
  • CQ-3 (SHOULD NOT) Create classes when functional components and hooks suffice.
  • CQ-4 (SHOULD) Prefer composition over inheritance, pure functions over side effects.
  • CQ-5 (MUST) Use strict TypeScript with branded types for domain IDs:
  • CQ-6 (MUST) Use import type { … } for type-only imports.
  • CQ-7 (SHOULD NOT) Add comments except for critical business logic caveats; prefer self-documenting code.
  • CQ-8 (SHOULD) Default to type over interface; use interface only for extensibility or declaration merging.
  • CQ-9 (SHOULD NOT) Extract functions/components unless: reused elsewhere, enables isolated testing, or significantly improves readability.
  • CQ-10 (MUST) Handle loading, error, and empty states for all async operations.

Component Architecture

  • CA-1 (SHOULD) Keep components small and focused on single responsibility.
  • CA-2 (MUST) Separate presentational components from container/logic components.
  • CA-3 (SHOULD) Use custom hooks to encapsulate complex stateful logic.
  • CA-4 (SHOULD) Implement proper prop validation and default values.
  • CA-5 (CONSIDER) Use render props or compound components for flexible, reusable UI patterns.
  • CA-6 (MUST) Implement proper key props for dynamic lists.
  • CA-7 (SHOULD) Use React.memo() judiciously for expensive re-renders, not by default.

State Management

  • SM-1 (SHOULD) Start with local state, lift up only when necessary.
  • SM-2 (SHOULD) Use context sparingly; prefer prop drilling for 2-3 levels.
  • SM-3 (CONSIDER) Implement global state management (Redux, Zustand) for complex apps with shared state.
  • SM-4 (MUST) Separate server state (React Query, SWR) from client state.
  • SM-5 (SHOULD) Use reducers for complex state transitions and business logic.

Testing

  • Unit test coverage ≥ 80% (Jest/Vitest + Testing Library).
  • E2E tests for critical user flows (Cypress, Playwright).
  • Accessibility audits via axe-core or Lighthouse CI.
  • TS-1 (MUST) Colocate unit tests in *.test.ts or tests folder next to source.
  • TS-2 (MUST) Write integration tests for critical user workflows in e2e/ or tests/integration/.
  • TS-3 (MUST) Separate pure logic tests from DOM/API integration tests.
  • TS-4 (SHOULD) Prefer integration and end-to-end tests over heavy mocking.
  • TS-5 (SHOULD) Unit-test complex algorithms, business logic, and utility functions thoroughly.
  • TS-6 (SHOULD) Test complete user interactions, not implementation details:
  • TS-7 (MUST) Test accessibility with screen reader simulation and keyboard navigation.
  • TS-8 (SHOULD) Include visual regression tests for critical UI components.

Architecture & Framework

  • 🧱 Framework: React 18 + TypeScript + Vite
  • 🧩 Component-based architecture with reusable, atomic components.
  • 🔄 State management: Redux Toolkit.
  • 📡 API client: Axios or fetch with interceptors for auth, errors, retries.

Routing

  • 🧭 Client-side routing with React Router / Vue Router.
  • 🚧 Custom 404 page for unmatched routes.
  • 🔐 Protected routes — redirect unauthorized users.

Internationalization (i18n)

  • 🌍 Support at least 2 languages (e.g., English, Chinese).
  • 📅 Localize dates, numbers, currencies based on user locale.
  • 🌐 Language switcher in UI with persistence (localStorage or user profile).

Performance & Optimization

  • PO-1 (MUST) Implement code splitting and lazy loading for routes and heavy components.
  • PO-2 (SHOULD) Optimize images with proper formats (WebP, AVIF) and responsive sizes.
  • PO-3 (SHOULD) Use virtual scrolling for large lists (1000+ items).
  • PO-4 (MUST) Implement proper caching strategies (browser cache, CDN, service worker).
  • PO-5 (SHOULD) Minimize bundle size - audit dependencies regularly.
  • PO-6 (CONSIDER) Use SSR/SSG for SEO-critical pages and initial load performance.

Data & API Management

  • API-1 (MUST) Type API responses and requests with strict schemas (Zod, TypeBox).
  • API-2 (SHOULD) Implement proper error handling with user-friendly messages.
  • API-3 (MUST) Handle network failures gracefully with retry logic and offline support.
  • API-4 (SHOULD) Use optimistic updates for better perceived performance.
  • API-5 (MUST) Implement proper data validation on both client and server.
  • API-6 (CONSIDER) Use GraphQL for complex data requirements, REST for simple CRUD.

Security & Privacy

  • SP-1 (MUST) Sanitize all user inputs to prevent XSS attacks.
  • SP-2 (MUST) Implement Content Security Policy (CSP) headers.
  • SP-3 (MUST) Use HTTPS everywhere, implement proper CORS policies.
  • SP-4 (SHOULD) Implement proper authentication and authorization patterns.
  • SP-5 (MUST) Never expose sensitive data in client-side code or logs.
  • SP-6 (SHOULD) Implement rate limiting and input validation on all endpoints.

Tooling & Quality Gates

  • TQ-1 (MUST) prettier --check passes on all files.
  • TQ-2 (MUST) eslint --fix passes with zero warnings.
  • TQ-3 (MUST) tsc --noEmit passes with strict TypeScript checks.
  • TQ-4 (SHOULD) Use pre-commit hooks to enforce quality gates.
  • TQ-5 (SHOULD) Run bundle analysis and performance audits in CI.

UI/UX Requirements

Design System

  • Follow design system or component library (MUI, Ant Design, Tailwind UI
DeploymentGuidelines