spec-frontend-web

Orchestrates end-to-end frontend web delivery from requirements to tested screens.

1|Updated Jul 7, 2026
One-click install
npx skills add https://github.com/codjeremias-cell/Orquestrador-fable --skill spec-frontend-web-codjeremias-cell
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: spec-frontend-web
Source: https://github.com/codjeremias-cell/Orquestrador-fable/tree/main/skills/spec-frontend-web
Command: npx skills add https://github.com/codjeremias-cell/Orquestrador-fable --skill spec-frontend-web-codjeremias-cell

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Building a complete web frontend involves many disconnected decisions — stack choice, design tokens, accessible components, data layer, and testing — that are easy to do inconsistently or out of order. This Skill orchestrates the entire frontend web workflow against an existing backend REST contract, enforcing deterministic gates at each stage so nothing ships unvalidated. ## Core Features & Use Cases - Deterministic pipeline: Runs discovery, mockup-first design, stack decision (ADR), design tokens, accessible components, typed data layer, and real Playwright + axe tests in a fixed order with pass/fail gates. - Boundary-aware routing: Recognizes when a request belongs elsewhere — full-system builds go to spec-projeto-completo, backend features to spec-springboot-crud-feature, and isolated steps to web-component or design-tokens-gen. - Quality enforcement: Iterates with a review committee until a score of at least 9, then closes with a readiness audit and an evidence-based final report. - Use Case: Given a Spring Boot REST API for an enrollment dashboard, use this Skill to drive the frontend from requirements through approved mockups, Tailwind v4 tokens, accessible components, a Zod-validated data layer, and Playwright + axe test reports. ## Quick Start Use spec-frontend-web to build the complete web frontend for this feature, consuming the existing backend REST API, from requirements to tested screens.

Frequently Asked Questions about spec-frontend-web

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I build a complete frontend web app from an existing backend API?▼

Run the orchestrated pipeline: requirements discovery, mockup-first design, stack decision recorded as an ADR, design tokens, accessible components, a typed data layer, and Playwright plus axe tests. Each stage has a gate that must pass before the next begins.

When should I use this orchestrator instead of a single component generator?▼

Use it only when the work spans the whole frontend from requirements to tested screens. For an isolated step like one accessible component or just design tokens, route directly to web-component or design-tokens-gen instead.

Does this skill build the backend or consume an existing API?▼

It consumes an existing backend REST/JSON contract and never rewrites it. If the request covers backend, frontend, and deploy together, it redirects to the full-system orchestrator spec-projeto-completo.

How are accessibility and testing enforced in the frontend pipeline?▼

Components must pass axe with no violations and full keyboard support, and end-to-end flows are executed with Playwright plus axe producing a dated report. A critical test failure blocks progression to the final audit.

What happens if a pipeline gate fails or the backend contract is unclear?▼

Execution stops with a mandatory halt condition: unresolved gate failures, unapproved mockups, ambiguous backend contracts, or a committee score below 9 all block delivery until resolved.