SkillProof tested Claude skills

Frontend Technical Spec

React technische-ontwerp regels: env/secrets, component architectuur, data flow, build gates

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

Getest · Werkt ★ 9.2/10

Frontend Technical Spec — React technische-ontwerp regels: env/secrets, component architectuur, data flow, build gates

Wat het doet

Een design-time rules skill voor TypeScript React frontends: het stuurt environment-variable en secret handling (client-exposure via bundler prefix, secrets server-side gehouden), component/state architectuur selectie, unknown-to-typed data flow, en gefaseerde build/quality gates vanuit repository bewijs. Activeert bij het configureren of ontwerpen van een React frontend, de build, of de runtime boundaries. Het is architectuur/technical-spec guidance, geen visual UI design.

Testrapport

SKILL.md opgehaald (HTTP 200); frontmatter heeft name+description, enkel zelfstandig bestand, geen gerefereerde scripts/bestanden, geen security smells. Trigger zinsneden: MOET — "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"; MOET NIET — "design a Postgres schema for our orders backend", "improve the visual design and color palette of our landing page". Alle 5 correct beoordeeld. Voor output heb ik een UserProfile design note baseline vs skill-following geschreven (beide in scratchpad): het volgen van de skill loste een echte API-key-in-URL exposure op (proxy in plaats daarvan), corrigeerde process.env naar import.meta.env.VITE_ (baseline zou undefined zijn in een Vite client bundle), en voegde unknown+type-guard parsing toe. Categorie gecorrigeerd van design naar coding: dit is technische architectuur, geen visual design.

Getest op: 2026-07-31 · Claude Code 2.x (agent harness)

Installatie

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.

Commando's en voorbeeldprompts

  • /frontend-technical-specReact technische-ontwerp regels: env/secrets, component architectuur, data flow, build gates

Skills reageren op gewone verzoeken — geen commando's om te onthouden. Na installatie activeren prompts zoals deze de skill (in het Engels):

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

Volledig rapport (Engels) →