Frontend AI Guide

AI Developer Guide - Technical Decision Criteria and Anti-pattern Collection (Frontend)

Value-First Engineering

Inspect until the evidence identifies the lowest-total-complexity solution that delivers the required user or maintainer value while keeping the UI correct and maintainable.

• Resolve verified problems within confirmed scope or dependencies required for the outcome; report other findings with their owning boundary and evidence without expanding the active change.
• Introduce state, props, variants, abstractions, or speculative edge-case handling when a current outcome, verified constraint, or evidence-backed material risk requires them.
• Treat behavior-preserving maintenance inside the confirmed responsibility as current maintainer value when repository evidence shows it reduces change ambiguity, duplicate ownership, defect risk, or future implementation and verification cost without expanding observable product scope.

Judge total complexity across every activated user decision, prop, state, variant, concept, output, persistent state, and component or hook path, together with its UX, runtime, implementation, testing, documentation, and maintenance cost. Compare only dimensions that differ between viable approaches. Prefer reuse or no new mechanism when it delivers the same confirmed value and proof at lower total complexity.

Technical Anti-patterns (Red Flag Patterns)

Pause the affected decision and review the design when detecting the following patterns:

Code Quality Anti-patterns

1. Duplicating one UI responsibility across independently maintained components - Review whether the duplicated behavior or contract should have one owner
2. Multiple responsibilities mixed in a single component - Violates Single Responsibility Principle (SRP)
3. Defining same content in multiple components - Violates DRY principle
4. Making changes without checking dependencies - Potential for unexpected impacts
5. Disabling code with comments - Should use version control
6. Error suppression - Hiding problems creates technical debt
7. Type assertions standing in for a guarantee - Declaring a type established by neither a check nor an existing contract
8. Pass-through prop chains that obscure state ownership - Use composition, Context, or the project's state layer when intermediate components only forward values and a broader owner is clearer; retain explicit props when they preserve local ownership and broader state ownership would add coordination while responsibility remains local
9. Components mixing independently changing responsibilities - Split when rendering, state/data ownership, or reusable/testable behavior forms an independent responsibility; retain cohesive components when splitting would add avoidable prop/state synchronization

Design Anti-patterns

• "Make it work for now" thinking - Accumulation of technical debt
• Patchwork implementation - Unplanned additions to existing components
• Optimistic implementation of uncertain technology - Designing unknown elements assuming "it'll probably work"
• Symptomatic fixes - Surface-level fixes that don't solve root causes
• Unplanned large-scale changes - Lack of incremental approach

Fallback Design Principles

Core Principle: Fail-Fast

Design philosophy that prioritizes improving primary code reliability over fallback implementations.

Criteria for Fallback Implementation

• Fallback rule: Implement a fallback when an accepted requirement, boundary contract, project policy, or Design Doc defines the degraded outcome and recovery owner
• Layer Responsibilities:
  • Rendering failure in a child component subtree, including a hook that throws during render: Use the project's Error Boundary
  • Event handlers, ordinary async callbacks, SSR, and hook/API operations outside rendering: Handle them at the owning event, hook, API, or server boundary using its error contract

Detection of Excessive Fallbacks

• Require design review when adding a catch that duplicates or fragments an existing recovery responsibility; retain it for a distinct failure mode with a documented recovery owner and visible UI outcome
• Require design review when the same failure is caught at multiple component/hook/API layers without one recovery owner, or when nested handlers obscure the visible UI state
• Identify the accepted recovery contract before implementing a fallback
• Make fallback activation observable through one existing UI, log, or metric channel at the boundary that owns diagnosis or recovery; add a new channel only when an operational requirement or project policy requires it

Criteria for Code Duplication

Keep concrete implementations separate while their similarity is accidental or their UI ownership differs. Consolidate when repository evidence shows one shared interaction, validation rule, visual contract, or coordinated change responsibility.

Criteria for Commonalization

Cases for Commonalization

• Business logic duplication
• Complex processing algorithms
• Component patterns (form fields, cards, etc.)
• Custom hooks
• Validation rules

Cases to Avoid Commonalization

• Accidental matches (coincidentally same code)
• Possibility of evolving in different directions
• Significant readability decrease from commonalization
• Simple helpers in test code

Common Failure Patterns and Avoidance Methods

Pattern 1: Error Fix Chain

Symptom: Fixing one error causes new errors Cause: Surface-level fixes without understanding root cause Avoidance: Identify root cause with 5 Whys before fixing

Pattern 2: Circumventing Type Guarantees

Symptom: any or as declares a type that no check or contract establishes Cause: Impulse to avoid type errors Avoidance: Back the declared type with a check or an existing contract that guarantees it, at the boundary where that guarantee holds

Pattern 3: Implementation Without Sufficient Testing

Symptom: Many bugs after implementation Cause: Ignoring Red-Green-Refactor process Avoidance: Start new or changed behavior and reproducible bug fixes with a failing test. For behavior-preserving refactors, confirm existing or characterization tests pass before and after the change

Pattern 4: Ignoring Technical Uncertainty

Symptom: Frequent unexpected errors when introducing new technology Cause: Assuming "it should work according to official documentation" without prior investigation Avoidance:

• Record certainty where it controls implementation or verification decisions

  Certainty: low (Reason: new experimental feature with limited production examples)
  Exploratory implementation: true
  Fallback: use established patterns

• For low certainty cases, create minimal verification code first