frontend

Plugin frontend from marketplace kaizen-plugins in kaizenanalytix/kaizen-claude-plugins. Commands read from the repo's manifest — 1 month ago.

Skills (18)

• angular-architecture

  Thin architecture-routing adapter for Angular applications — confirms the project is genuinely Angular, routes greenfield vs. existing work to the right entry point, and applies the framework-neutral three-zone UI model (core/modules/shared) in Angular's own vocabulary. Deliberately thin: no Angular

• frontend-architecture

  Translates the framework-neutral UI architecture (core/modules/shared) into React-specific vocabulary and routes to the right React specialist skill in this plugin. Use when the user says things like "structure my frontend", "where does this UI code belong", "set up the app architecture", "how shoul

• react-best-practices

  Reviews a React component against a concrete, opinionated checklist — hooks rules, purity, memoization, keys, derived state, error boundaries, and accessibility. Use when the user says things like "review this component", "is this good React", "React best practices", "why is this re-rendering", "why

• react-component-composition

  Decides when domain/composite components should share code at all, and which mechanism to use when they should — composition via `children`, a custom hook, or (rarely) a render prop. Use when the user says things like "should I extract this into a component", "this looks duplicated", "DRY this up",

• react-component-library

  Standardizes on shadcn/ui (Radix primitives + Tailwind CSS, copy-paste owned source) for generic UI components in `shared/components/ui/`, and adapts to whatever primitive layer a project already owns. Use when the user says things like "add a UI component", "install a component", "add a button", "a

• react-data-layer

  Establishes the server-state vs. client/UI-state split in a React module, composed by a custom hook the page consumes. Defaults to RTK Query and a Redux slice but adapts to whatever the project already uses (TanStack Query, Zustand, Context). Use when the user says things like "call the API", "fetch

• react-module-context

  Applies the props vs. module-context vs. store decision rule and provides a safe, memoized module-scoped React Context factory. Use when the user says things like "share state across the module", "avoid prop drilling", "module-scoped context", "Context vs store", or "this component needs data from w

• react-module-scaffold

  Scaffolds a new business-domain module in a React app — the seven-folder skeleton (components/pages/hooks/services/store/context/types) — and wires it into the app's store and router. Use when the user says things like "add a module", "new feature/domain", "scaffold the X module", or "create a new d

• react-naming-conventions

  Applies a concrete file- and identifier-naming standard for a React module's components/pages/hooks/services/store/context/types. Use when the user says things like "what should I name this file", "naming convention", "file naming", "how do I name this component/hook", or "what case should this be".

• react-project-bootstrap

  Stands up a greenfield Vite + React + TypeScript project pre-configured for the three-zone architecture, RTK Query, typed routing, and the full test pyramid. Use when the user says things like "new React project", "set up the project", "configure vite/tsconfig", or "start a new frontend from scratch

• react-routing

  Sets up lazy-loaded, typed, auth-protected React Router routes with path constants instead of string literals. Use when the user says things like "add a route", "set up routing", "protect a page", "lazy-load pages", or "wire this page into the router".

• react-testing

  Implements the base of the test pyramid with React tooling — Vitest unit tests and RTL+MSW integration tests. Does not cover browser-driven tests at all; a sibling e2e-testing plugin owns every Playwright/browser-driven test in this marketplace, regardless of scope or depth. Always lists the intende

• vite-build-output

  Explains what vite build produces in dist/, how content-hashed asset names enable caching, and how the base config option controls the URL prefix for subpath deployments. Use when the user says things like "what does vite build produce", "deploy the vite build", "vite build base path", or "dist fold

• vite-config-basics

  Explains the shape of vite.config.ts — the plugins array, resolve.alias path aliases, and the server block — independent of which UI framework sits on top of Vite. Use when the user says things like "set up vite.config", "configure vite", "add a path alias", or "vite dev server port".

• vite-dev-proxy

  Explains Vite's server.proxy option for forwarding local API requests to a backend during development, and why it's a dev-only convenience, not a substitute for real CORS/gateway configuration. Use when the user says things like "proxy API calls in vite", "CORS in local dev", "connect frontend to ba

• vite-env-variables

  Explains Vite's .env file convention, mode-based loading, the VITE_ prefix rule for client exposure, and typing import.meta.env for TypeScript. Use when the user says things like "environment variables in vite", ".env files", "config for dev/qa/prod", or "import.meta.env".

• vite-plugins

  Provides a decision framework for whether a task actually needs a Vite plugin versus just a regular npm dependency, and lists common plugin categories without committing to specific packages. Use when the user says things like "do I need a vite plugin for this", "add SVG support", "vite plugin for X

• vue-architecture

  Thin architecture-routing adapter for Vue.js applications — confirms the project is genuinely Vue, routes greenfield vs. existing work to the right entry point, and applies the framework-neutral three-zone UI model (core/modules/shared) in Vue's own vocabulary. Deliberately thin: no Vue naming-conve

Similar plugins