Frontend Technical Spec

Regole di progettazione tecnica React: env/secrets, architettura dei componenti, flusso di dati, build gates

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

Promosso ★ 9.2/10

Frontend Technical Spec — Regole di progettazione tecnica React: env/secrets, architettura dei componenti, flusso di dati, build gates

Cosa fa

Una skill di regole in fase di progettazione per frontend TypeScript React: gestisce variabili d'ambiente e segreti (esposizione lato client tramite prefisso del bundler, segreti mantenuti lato server), selezione dell'architettura di componenti/stato, flusso di dati da unknown a typed e gate di build/qualità a fasi basati su evidenze del repository. Si attiva durante la configurazione o la progettazione di un frontend React, della sua build o dei suoi confini di runtime. È una guida di architettura/specifiche tecniche, non di progettazione visiva dell'interfaccia utente.

Rapporto di test

Recuperato SKILL.md (HTTP 200); il frontmatter ha name+description, singolo file autonomo, nessun script/file referenziato, nessun problema di sicurezza. Frasi di attivazione: DOVREBBE — "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"; NON DOVREBBE — "design a Postgres schema for our orders backend", "improve the visual design and color palette of our landing page". Tutte e 5 giudicate correttamente. Per l'output ho scritto una nota di progettazione UserProfile baseline vs skill-following (entrambe nel blocco note): seguendo la skill è stata corretta una reale esposizione di API-key-in-URL (proxy invece), process.env è stato corretto in import.meta.env.VITE_ (la baseline sarebbe undefined in un bundle client Vite), e è stato aggiunto il parsing unknown+type-guard. Categoria corretta da design a coding: questa è architettura tecnica, non progettazione visiva.

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

Installazione

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.

Comandi e prompt di esempio

/frontend-technical-specRegole di progettazione tecnica React: env/secrets, architettura dei componenti, flusso di dati, build gates

Gli skill si attivano con richieste in linguaggio naturale, senza comandi da ricordare. Dopo l'installazione, prompt come questi lo attivano (in inglese):

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

Rapporto completo →