From frontend-pipeline
Mandatory agent pipeline enforcement for frontend development. Activates when the user asks to create, build, or implement any React/MUI UI component, form, page, table, dashboard, or interface. Triggers on: (EN) 'create a component', 'build a form', 'create a page', 'add a table', 'implement', 'build', 'fix React', '/chain'; (IT) 'crea un componente', 'crea una pagina', 'aggiungi una tabella', 'implementa', 'costruisci'; (Technical) 'MUI', 'Material UI', 'React', 'DataGrid', 'header', 'form', 'dialog', 'dashboard', 'wizard', 'stepper', 'carousel', 'sidebar', 'layout'. Also activates when the user provides a multi-component implementation plan or requests any frontend feature development.
How this skill is triggered — by the user, by Claude, or both
Slash command
/frontend-pipeline:chain-enforcementThe summary Claude sees in its skill listing — used to decide when to auto-load this skill
When this skill is active, it is **FORBIDDEN** to implement React code directly in the main conversation. EVERY frontend implementation task MUST go through the specialized agent chain using the `Task` tool.
When this skill is active, it is FORBIDDEN to implement React code directly in the main conversation. EVERY frontend implementation task MUST go through the specialized agent chain using the Task tool.
This skill accepts the user's implementation request (via $ARGUMENTS if invoked as /chain-enforcement, or from the conversation context when auto-triggered).
Workflow:
If the user provides a multi-component plan (e.g., "Implementa UserTable, UserForm e UserDetail"), decompose it into individual components and process each through the complete chain before moving to the next.
For every component/task, execute this sequence:
1. frontend-architect -> Creates the component (design + implementation)
2. frontend-reviewer -> Code review with numeric score (MANDATORY)
3. frontend-debugger -> IF score < 80 OR CRITICAL/HIGH issues -> automatic fix
4. frontend-refactorer -> IF LOC > 150 OR maintainability < 15/25 -> decomposition
5. frontend-reviewer -> Re-validation after debugger/refactorer (max 2 cycles)
Task tool with subagent_type matching the agent namemui-react-development, page-header-generator) -- do NOT repeat their content in promptsfrontend-debugger automaticallyfrontend-refactorer automaticallyfrontend-reviewer for verification (max 2 cycles)After each agent completes, report:
Phase N - [component name]
Agent: [agent name] -> Completed
Result: [brief summary]
Score: [if reviewer: N/100]
Next: [next agent name or "Component N+1"]
The pipeline agents have technical skills preloaded at startup:
| Agent | Preloaded Skills |
|---|---|
frontend-architect | mui-react-development, page-header-generator |
frontend-reviewer | mui-react-development, page-header-generator |
frontend-debugger | mui-react-development |
frontend-refactorer | mui-react-development |
These skills provide MUI v7 patterns, React best practices, and Rete page standards directly to agents -- you do not need to include this knowledge in agent prompts.
Process the following plan respecting ALL rules above:
$ARGUMENTS
npx claudepluginhub dotcreativeagency/claude-plugins --plugin frontend-pipelineImplements UI components and frontend architecture. Breaks down designs into component trees, manages state, integrates with backend APIs, ensures accessibility and responsive behavior.
Builds React/Next.js web frontends: components, pages, design systems, state management, typed API clients. Uses structured phases and engagement modes.
Enforces Suspense-first data fetching, feature-based code organization, and strict TypeScript discipline for React applications. Use when creating components, pages, adding features, or fetching data.