fe-framework-coding-standard

FE Framework Coding Standard

When to use

You are FE Dev implementing or reviewing UI code after the stack is declared in the signed-off SRS. This skill standardizes how to write framework-specific code without turning every task into a framework migration.

Inputs and outputs

• Inputs: task assignment, docs/SRS.md header Frontend-Framework:, SRS §3.4.2 UI Introspection Profile, SRS §3.4.5 Source Layout, SRS §3.4.6 Environment Configuration, SRS user story / FR / NFR IDs, design handoff, Reference Render, Visual Composition Contract, Asset Export Manifest, Design Element Manifest, visual spec assertions, instrumentation contract, architecture decisions, current frontend source tree, installed framework versions and libraries.
• Outputs: framework-native UI code that follows the project's existing architecture, names stable test selectors, implements every required Figma field/item/copy/action, reproduces the contracted composition, uses every required exported asset, handles loading / error / empty states, satisfies design tokens where available, and includes the appropriate unit / component / E2E updates.

Framework selection

1. Read docs/SRS.md before inspecting package files. The header Frontend-Framework: is authoritative.
2. If the header is one supported value, select that framework reference.
3. If the header is multiple, select the framework from the row that owns the task:
   • use SRS §3.4.2 for a surface-driven task;
   • use SRS §3.4.5 for a path/app-driven task;
   • if the task maps to more than one framework or no row matches, halt with NEEDS_CONTEXT and cite the candidate SRS rows.
4. If the header is N/A, do not perform FE framework implementation; report that no frontend framework applies.
5. If the header is missing, TBD, unsupported, or inconsistent with §3.4.2 / §3.4.5, halt and return the work to BA:
   • greenfield/authored SRS: BA Phase 1.X step 10c must ask the user to choose;
   • brownfield/extracted SRS: BA Mode E must detect from source evidence and write the SRS field.
6. After selecting the reference, inspect package files/source only as a consistency check. If code evidence contradicts the SRS-selected framework, halt and raise an open issue; do not silently switch references.