frontend-suite-orchestratorlisted

Orchestrates a 5-stage frontend build chain over a Next.js project: App Router scaffold, Tailwind responsive/dark-mode styling, zod-backed progressive forms, and the Zustand + TanStack Query state/query pipeline, followed by a build validation gate that runs `npm run build` / `next build`, verifies the component tree and routes exist, and consolidates everything into a FRONTEND_SUITE_REPORT.md. Supports full_run, include_steps, skip_steps, fail_fast, and artifact_dir customization so teams can re-materialize any subset of the scaffolding chain. The final report captures the scaffolded file-tree summary, the validation build exit code, and open items for follow-up.
RMAzrim/opencode-artes · ★ 2 · Web & Frontend · score 76

Install: claude install-skill RMAzrim/opencode-artes

# Frontend Suite Orchestrator ## 1. System Overview & Target Sub-Skills The Frontend Suite Orchestrator is a deterministic DAG runner that materializes a full modern Next.js 15 App Router application in four blueprint stages, then gated by a real production build (and route/component existence checks) writes one consolidated handoff document. It is invoked when the project needs an opinionated, reproducible frontend baseline: page tree and server actions first, then theming, then validated forms, then server-state plumbing — ordered so later blueprint files overwrite earlier placeholders in the same `app/` tree. Each stage "executes" its sub-skill by reading the sub-skill's Section 3 reference implementation (`# FILE: <path>` markers) and writing every documented artifact under the project root. Invoked sub-skills and what each produces: 1. `skills/nextjs-app-router-scaffolder/nextjs-app-router-scaffolder.md` — writes `package.json`, `tsconfig.json`, `app/layout.tsx`, `app/page.tsx`, `app/error.tsx`, `app/loading.tsx`, `app/not-found.tsx`, `app/globals.css`, `app/actions/schema.ts` (zod + `ServerActionResponse<T>`), `app/actions/user.ts` (`"use server"` actions), and `app/components/UserForm.tsx`. 2. `skills/tailwind-responsive-darkmode-styler/tailwind-responsive-darkmode-styler.md` — writes `tailwind.config.js`, `postcss.config.js`, `app/globals.css`, `components/ResponsiveNavbar.tsx`, `components/Card.tsx`, `components/ThemeToggle.tsx`, `app/layout.tsx` (ThemeProvider wi