Frontend Technical Spec

React tekniske designregler: env/secrets, komponentarkitektur, dataflyt, byggeporter

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

Bestått ★ 9.2/10

Frontend Technical Spec — React tekniske designregler: env/secrets, komponentarkitektur, dataflyt, byggeporter

Hva den gjør

En design-tids ferdighet for TypeScript React-frontender: den driver håndtering av miljøvariabler og hemmeligheter (klienteksponering via bundler-prefiks, hemmeligheter holdes server-side), valg av komponent-/tilstandsarkitektur, ukjent-til-typede dataflyt, og faserte bygge-/kvalitetskontroller fra repository-bevis. Utløses ved konfigurering eller design av en React-frontend, dens bygg, eller dens runtime-grenser. Det er arkitektur-/teknisk-spesifikasjonsveiledning, ikke visuell UI-design.

Testrapport

Hentet SKILL.md (HTTP 200); frontmatter har name+description, enkelt selvstendig fil, ingen refererte skript/filer, ingen sikkerhetsbrister. Utlø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 vurdert korrekt. For output skrev jeg en UserProfile design note baseline vs ferdighets-fulgt (begge i scratchpad): etter ferdigheten ble en reell API-key-i-URL-eksponering fikset (proxy i stedet), process.env korrigert til import.meta.env.VITE_ (baseline ville vært udefinert i en Vite klient-bundle), og ukjent+type-guard parsing lagt til. Korrigert kategori fra design til koding: dette er teknisk arkitektur, ikke visuell design.

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

Installer

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 tekniske designregler: env/secrets, komponentarkitektur, dataflyt, byggeporter

Skills utløses av vanlige forespørsler — ingen kommandoer å huske. Etter installasjonen 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

Full rapport →