Frontend Technical Spec

React tekniska designregler: env/secrets, komponentarkitektur, dataflöde, bygggrindar

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

Testad · Fungerar ★ 9.2/10

Frontend Technical Spec — React tekniska designregler: env/secrets, komponentarkitektur, dataflöde, bygggrindar

Vad den gör

En design-tidsregelfärdighet för TypeScript React-frontendar: den driver hantering av miljövariabler och hemligheter (klientexponering via bundler-prefix, hemligheter hålls server-side), val av komponent-/tillståndsarkitektur, okänt-till-typifierat dataflöde, och fasade bygg-/kvalitetsgrindar från repository-bevis. Utlöses vid konfigurering eller design av en React-frontend, dess byggnad, eller dess körtidsgränser. Det är arkitektur-/teknisk-spec-vägledning, inte visuell UI-design.

Testrapport

Hämtade SKILL.md (HTTP 200); frontmatter har name+description, en enda självständig fil, inga refererade skript/filer, inga säkerhetsbrister. Utlösarfraser: SKA — "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"; SKA INTE — "design a Postgres schema for our orders backend", "improve the visual design and color palette of our landing page". Alla 5 bedömdes korrekt. För utdata skrev jag en UserProfile designanteckning baslinje vs färdighetsföljande (båda i scratchpad): att följa färdigheten fixade en verklig API-key-in-URL-exponering (proxy istället), korrigerade process.env till import.meta.env.VITE_ (baslinjen skulle vara odefinierad i en Vite klientbundle), och lade till unknown+type-guard-parsning. Korrigerade kategori från design till kodning: detta är teknisk arkitektur, inte visuell design.

Testad: 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.

Kommandon och exempelprompter

/frontend-technical-specReact tekniska designregler: env/secrets, komponentarkitektur, dataflöde, bygggrindar

Skills triggas av vanliga förfrågningar — inga kommandon att memorera. Efter installationen aktiverar prompter som dessa skillen (på engelska):

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 hela rapporten →