Frontend Technical Spec

React teknisk-design regler: env/secrets, komponentarkitektur, dataflow, build gates

Af shinpr · shinpr/ai-coding-project-boilerplate

Testet · Virker ★ 9.2/10

Frontend Technical Spec — React teknisk-design regler: env/secrets, komponentarkitektur, dataflow, build gates

Hvad det gør

En design-time regler færdighed for TypeScript React frontends: den driver miljøvariabel- og hemmelighedshåndtering (klient-eksponering via bundler-præfiks, hemmeligheder holdes server-side), valg af komponent-/state-arkitektur, ukendt-til-typed dataflow og faseinddelte build-/kvalitetsporte fra repository-beviser. Udløses ved konfiguration eller design af en React frontend, dens build eller dens runtime-grænser. Det er arkitektur/teknisk-spec vejledning, ikke visuelt UI-design.

Testrapport

Hentede SKILL.md (HTTP 200); frontmatter har name+description, enkelt selvstændig fil, ingen refererede scripts/filer, ingen sikkerhedsbrister. Udløserformuleringer: SKAL — "design the component architecture and state management for our React dashboard", "set up env var config and build verification for our Vite React app", "how should data flow between our API and React components"; SKAL IKKE — "design a Postgres schema for our orders backend", "improve the visual design and color palette of our landing page". Alle 5 bedømt korrekt. For output skrev jeg en UserProfile design note baseline vs skill-following (begge i scratchpad): efter færdigheden blev en reel API-key-in-URL eksponering rettet (proxy i stedet), process.env korrigeret til import.meta.env.VITE_ (baseline ville være undefined i et Vite client bundle), og ukendt+type-guard parsing blev tilføjet. Korrigeret kategori fra design til kodning: dette er teknisk arkitektur, ikke visuelt design.

Testet: 2026-07-31 · Claude Code 2.x (agent harness)

Installation

git clone --depth 1 https://github.com/shinpr/ai-coding-project-boilerplate.git /tmp/frontend-technical-spec-src
mkdir -p ~/.claude/skills
cp -R /tmp/frontend-technical-spec-src/.claude/skills-en/frontend-technical-spec ~/.claude/skills/frontend-technical-spec
# Single self-contained SKILL.md, no reference files, no scripts, no external deps.
# A Japanese-language twin exists at .claude/skills-ja/frontend-technical-spec/ if preferred.

Kommandoer og eksempelprompter

/frontend-technical-specReact teknisk-design regler: env/secrets, komponentarkitektur, dataflow, build gates

Skills udløses af almindelige forespørgsler — ingen kommandoer at huske. Efter installationen aktiverer prompter som disse skillen (på engelsk):

Set up environment variables for this React app
Design the data flow for this component
Write a technical spec for the frontend architecture

Læs hele rapporten →