frontend-pipeline

Front-End Pipeline

A website (or storefront, lead page, admin panel, dashboard…) must solve a business problem, not just fill a page. This skill turns a front-end request into the same disciplined pipeline praxis applies to any change, with the design work made explicit instead of improvised:

RESEARCH → STRATEGY → WIREFRAMES → DESIGN SYSTEM → DEVELOPMENT → OPTIMIZATION → SHIP

It wraps the task-orchestrator, it does not replace it: the same spec/plan discipline, the same Stop gate, the same quality rubric, plus the design phases and two extra vertical auditors for UI surface. Consistency creates trust; the pipeline is how consistency survives the project.

Two references carry the depth; read them rather than reinventing their content inline:

• reference/playbook.md: question banks, narrative patterns, wireframe format, design-system checklist, per-niche adaptations, artifact templates. Read when executing Phases 1–4.
• reference/craft.md: the visual judgement the checklists cannot encode: the tells of generated UI and what to do instead, hierarchy, typography, space, colour, depth, motion, and the detail pass. Read it before writing any markup or styles, and again in Phase 5. The playbook makes an interface correct; craft.md is what makes it designed. Skipping it is how a system-compliant page still ships looking generic.

Both live under ${CLAUDE_PLUGIN_ROOT}/skills/frontend-pipeline/reference/.

---

When this skill runs (it is not a judgement call, and there is no command)

Any change that adds or alters user-facing surface runs this pipeline, whatever the request called it. The trigger is the surface, not the wording:

• markup and templates (.html, .jsx, .tsx, .vue, .svelte, .astro, .erb, .twig, and the rest);
• styles and design tokens (.css, .scss, tailwind.config.*, theme.*);
• anything under docs/design/.

"Fix the checkout bug", "make the empty state nicer", and "update src/components/Header.tsx" are all front-end work. The Stop gate resolves the same question from the changed file list and refuses a report that lacks accessibility=pass and design-consistency=pass, so a change routed here late pays for a second audit. Size the response with Phase 0; do not skip the pipeline because the request sounded small.