SkillProof tested Claude skills

Frontend Technical Spec

Reglas de diseño técnico de React: env/secrets, arquitectura de componentes, flujo de datos, puertas de compilación

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

Probado · Funciona ★ 9.2/10

Frontend Technical Spec — Reglas de diseño técnico de React: env/secrets, arquitectura de componentes, flujo de datos, puertas de compilación

Qué hace

Una habilidad de reglas de tiempo de diseño para frontends de TypeScript React: impulsa el manejo de variables de entorno y secretos (exposición al cliente a través del prefijo del bundler, secretos mantenidos en el lado del servidor), selección de arquitectura de componentes/estado, flujo de datos de desconocido a tipado, y puertas de compilación/calidad por fases a partir de la evidencia del repositorio. Se activa al configurar o diseñar un frontend de React, su compilación o sus límites de tiempo de ejecución. Es una guía de arquitectura/especificación técnica, no de diseño visual de UI.

Informe de la prueba

Se obtuvo SKILL.md (HTTP 200); el frontmatter tiene name+description, archivo único autocontenido, sin scripts/archivos referenciados, sin problemas de seguridad. Frases de activación: DEBERÍA — "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"; NO DEBERÍA — "design a Postgres schema for our orders backend", "improve the visual design and color palette of our landing page". Las 5 juzgadas correctamente. Para la salida, escribí una nota de diseño de UserProfile de línea base vs siguiendo la habilidad (ambas en el bloc de notas): siguiendo la habilidad se corrigió una exposición real de API-key-in-URL (proxy en su lugar), se corrigió process.env a import.meta.env.VITE_ (la línea base sería indefinida en un bundle de cliente Vite), y se añadió el análisis unknown+type-guard. Categoría corregida de diseño a codificación: esto es arquitectura técnica, no diseño visual.

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

Instalación

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.

Comandos y prompts de ejemplo

  • /frontend-technical-specReglas de diseño técnico de React: env/secrets, arquitectura de componentes, flujo de datos, puertas de compilación

Los skills se activan con peticiones en lenguaje natural, sin comandos que memorizar. Tras instalarlo, prompts como estos lo activan (en inglés):

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

Informe completo →