Frontend Technical Spec

Zasady projektowania technicznego React: env/secrets, architektura komponentów, przepływ danych, bramki kompilacji

Autor: shinpr · shinpr/ai-coding-project-boilerplate

Testowano · Działa ★ 9.2/10

Frontend Technical Spec — Zasady projektowania technicznego React: env/secrets, architektura komponentów, przepływ danych, bramki kompilacji

Co robi ten skill

Umiejętność zasad projektowania dla frontendów TypeScript React: steruje obsługą zmiennych środowiskowych i sekretów (client-exposure via bundler prefix, secrets przechowywane po stronie serwera), wyborem architektury komponentów/stanu, przepływem danych unknown-to-typed oraz fazowymi bramkami build/quality na podstawie dowodów z repozytorium. Uruchamia się podczas konfigurowania lub projektowania frontendu React, jego kompilacji lub jego granic runtime. Jest to wskazówka dotycząca architektury/technical-spec, a nie projektowania wizualnego UI.

Raport z testu

Pobrano SKILL.md (HTTP 200); frontmatter ma name+description, pojedynczy samodzielny plik, brak referencyjnych scripts/files, brak security smells. Frazy wyzwalające: POWINNO — "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"; NIE POWINNO — "design a Postgres schema for our orders backend", "improve the visual design and color palette of our landing page". Wszystkie 5 oceniono poprawnie. Dla output napisałem notatkę projektową UserProfile baseline vs skill-following (obie w scratchpad): przestrzeganie umiejętności naprawiło rzeczywiste API-key-in-URL exposure (zamiast tego proxy), poprawiło process.env na import.meta.env.VITE_ (baseline byłby undefined w Vite client bundle) i dodało parsowanie unknown+type-guard. Poprawiono kategorię z design na coding: to jest architektura techniczna, nie projekt wizualny.

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

Instalacja

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.

Komendy i przykładowe prompty

/frontend-technical-specZasady projektowania technicznego React: env/secrets, architektura komponentów, przepływ danych, bramki kompilacji

Skille uruchamiają się na zwykłe polecenia — bez komend do zapamiętania. Po instalacji aktywują go prompty takie jak te (po angielsku):

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

Pełny raport →