Frontend Implementation

Preserve context

Inspect the repository before changing frameworks, routing, styling strategy or component foundations. Extend the existing stack unless a change has a clear user/maintenance benefit.

Build order

1. semantic document and information hierarchy;
2. responsive layout primitives;
3. design-system tokens;
4. functional states/interactions;
5. imagery/media loading;
6. motion/creative enhancement;
7. QA instrumentation.

Engineering rules

• Prefer semantic HTML and native controls before recreating them.
• Keep component boundaries aligned to behavior/content responsibility, not every visual box.
• Use CSS Grid/Flex and fluid values before breakpoint proliferation.
• Reserve dimensions/aspect ratios for media to avoid layout shift.
• Subset/preload fonts intentionally; avoid loading families/weights not used.
• Keep server/client boundaries narrow in frameworks that support them.
• Lazy-load noncritical animation/3D code.
• Avoid global event listeners and per-frame React state updates for visual animation.
• Remove dead experimentation code and unused packages before release.

Visual fidelity

Do not “fix” a difficult art direction by reverting to standard cards. If a composition is hard to implement, solve the layout constraint or explicitly negotiate the tradeoff.