Frontend Technical Spec

React technische Designregeln: env/secrets, Komponentenarchitektur, Datenfluss, Build-Gates

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

Getestet · Funktioniert ★ 9.2/10

Frontend Technical Spec — React technische Designregeln: env/secrets, Komponentenarchitektur, Datenfluss, Build-Gates

Was es kann

Ein Design-Zeit-Regel-Skill für TypeScript React Frontends: Er steuert die Handhabung von Umgebungsvariablen und Geheimnissen (Client-Exposition über Bundler-Präfix, Geheimnisse serverseitig gehalten), die Auswahl der Komponenten-/Zustandsarchitektur, den unbekannt-zu-typisierten Datenfluss und gestufte Build-/Qualitäts-Gates aus Repository-Beweisen. Wird ausgelöst beim Konfigurieren oder Entwerfen eines React Frontends, seines Builds oder seiner Laufzeitgrenzen. Es ist Architektur-/Technical-Spec-Anleitung, keine visuelle UI-Design.

Testbericht

SKILL.md abgerufen (HTTP 200); Frontmatter hat name+description, einzelne eigenständige Datei, keine referenzierten Skripte/Dateien, keine Sicherheitslücken. Trigger-Formulierungen: SOLLTE — „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“; SOLLTE NICHT — „design a Postgres schema for our orders backend“, „improve the visual design and color palette of our landing page“. Alle 5 korrekt beurteilt. Für den Output schrieb ich eine UserProfile-Designnotiz Baseline vs. Skill-gesteuert (beide im Scratchpad): Dem Skill folgend wurde eine reale API-Key-in-URL-Exposition behoben (Proxy stattdessen), process.env zu import.meta.env.VITE_ korrigiert (Baseline wäre in einem Vite-Client-Bundle undefiniert) und unknown+type-guard-Parsing hinzugefügt. Kategorie von Design zu Coding korrigiert: Dies ist technische Architektur, nicht visuelles Design.

Getestet am: 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.

Befehle & Beispiel-Prompts

/frontend-technical-specReact technische Designregeln: env/secrets, Komponentenarchitektur, Datenfluss, Build-Gates

Skills reagieren auf normale Anfragen — keine Slash-Befehle nötig. Nach der Installation aktivieren Prompts wie diese den Skill (auf Englisch):

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

Vollständiger Testbericht (Englisch) →