Frontend Technical Spec

Règles de conception technique React : env/secrets, architecture de composants, flux de données, portes de build

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

Testé · Fonctionne ★ 9.2/10

Frontend Technical Spec — Règles de conception technique React : env/secrets, architecture de composants, flux de données, portes de build

Ce que fait

Une compétence de règles de conception pour les frontends TypeScript React : elle gère les variables d'environnement et les secrets (exposition côté client via préfixe de bundler, secrets conservés côté serveur), la sélection de l'architecture de composants/état, le flux de données de inconnu à typé, et les portes de build/qualité phasées à partir des preuves du dépôt. Se déclenche lors de la configuration ou de la conception d'un frontend React, de sa construction ou de ses limites d'exécution. Il s'agit de conseils d'architecture/spécification technique, pas de conception visuelle d'interface utilisateur.

Rapport de test

SKILL.md récupéré (HTTP 200) ; le frontmatter contient name+description, fichier autonome unique, pas de scripts/fichiers référencés, pas de failles de sécurité. Formulations de déclenchement : DEVRAIT — "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" ; NE DEVRAIT PAS — "design a Postgres schema for our orders backend", "improve the visual design and color palette of our landing page". Les 5 jugées correctement. Pour la sortie, j'ai écrit une note de conception UserProfile de référence vs suivant la compétence (les deux dans le bloc-notes) : le suivi de la compétence a corrigé une exposition réelle de clé API dans l'URL (proxy à la place), a corrigé process.env en import.meta.env.VITE_ (la référence serait indéfinie dans un bundle client Vite), et a ajouté l'analyse unknown+type-guard. Catégorie corrigée de design à coding : il s'agit d'architecture technique, pas de design visuel.

Testé le: 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.

Commandes et exemples de prompts

/frontend-technical-specRègles de conception technique React : env/secrets, architecture de composants, flux de données, portes de build

Les skills se déclenchent sur des demandes en langage courant — aucune commande à retenir. Après installation, des prompts comme ceux-ci l'activent (en anglais) :

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

Rapport complet →