Frontend Technical Spec

Technická pravidla návrhu Reactu: env/secrets, architektura komponent, tok dat, build gates

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

Otestováno · Funguje ★ 9.2/10

Frontend Technical Spec — Technická pravidla návrhu Reactu: env/secrets, architektura komponent, tok dat, build gates

Co umí

Dovednost pravidel pro návrh TypeScript React frontendů: řídí zpracování proměnných prostředí a tajemství (expozice na straně klienta přes prefix bundleru, tajemství uchovávána na straně serveru), výběr architektury komponent/stavu, tok dat z neznámých na typované a fázované build/quality gates z důkazů v repozitáři. Spouští se při konfiguraci nebo návrhu React frontendu, jeho buildu nebo jeho runtime hranic. Jedná se o architektonické/technické specifikace, nikoli vizuální UI design.

Testovací report

Načten SKILL.md (HTTP 200); frontmatter má name+description, jeden soběstačný soubor, žádné odkazované skripty/soubory, žádné bezpečnostní problémy. Spouštěcí fráze: MĚLO BY — "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"; NEMĚLO BY — "design a Postgres schema for our orders backend", "improve the visual design and color palette of our landing page". Všech 5 posouzeno správně. Pro výstup jsem napsal návrhovou poznámku UserProfile baseline vs skill-following (obě ve scratchpadu): dodržení dovednosti opravilo skutečnou expozici API klíče v URL (místo toho proxy), opravilo process.env na import.meta.env.VITE_ (základní verze by byla nedefinovaná v Vite client bundle) a přidalo parsování unknown+type-guard. Opravena kategorie z design na coding: jedná se o technickou architekturu, nikoli vizuální design.

Testováno: 2026-07-31 · Claude Code 2.x (agent harness)

Instalace

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.

Příkazy a ukázkové prompty

/frontend-technical-specTechnická pravidla návrhu Reactu: env/secrets, architektura komponent, tok dat, build gates

Skilly se spouštějí běžnými požadavky — žádné příkazy k zapamatování. Po instalaci ho aktivují prompty jako tyto (anglicky):

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

Kompletní testovací report (anglicky) →