ccube-agent-plugin-marketplace

Playwright E2E test setup and authoring for any web application. Plan-first: when asked to write or generate E2E tests, draft a markdown test plan (Overview, Seed, TC-numbered scenarios with Steps + Expected Results) and confirm scope with the user BEFORE writing any .spec.ts. Inspired by Playwright Test Agents (planner → generator → healer): plan, generate from the plan, then run + heal once before declaring done. Use this skill any time the user wants to create, set up, fix, scaffold, or migrate browser-level tests for a web application — whether or not they mention Playwright by name. Typical asks: "write a test for [page/route/flow]", "add e2e coverage for [feature I just shipped]", "generate an e2e test plan", "set up Playwright in [repo]", "fix our broken Playwright setup", "migrate Cypress to Playwright", "add a page object for [X]", "create a fixture that composes with authedPage", "switch our auth helper from token-bypass to real Cognito/SSO/Singpass", "wire up storageState/JWT/session cookies/mol-to

GCC deployment via Rabbit Deploy — initialize a local project with git, configure the Rabbit Deploy GitLab remote with a Project Access Token, and push to trigger automatic deployment. Use when a user wants to deploy their project to GCC using Rabbit Deploy, set up version control for the first time, or push code changes to trigger the CI/CD pipeline.

Enhancement Proposal (EP) creation — stepwise, KEP-style EP authoring with template discovery, parallel codebase research, and structured Part-1 / Part-2 / Part-3 generation. Use when creating or drafting an EP or feature design document.

Implementation plan generation — decomposes an EP or task description into a parallelised, phase-based workplan with a Mermaid dependency graph, critical path analysis, per-task agent prompts, and a parallel dispatch table. Use when creating an implementation plan for an EP or any task description.

React 18 patterns reference — concurrent rendering, automatic batching, transitions, Suspense, new hooks (useId, useTransition, useDeferredValue, useSyncExternalStore), streaming SSR, and TypeScript integration. Use when implementing, reviewing, or debugging React components in any React 18.x project.

React 19.2 modern patterns reference — hooks, Actions API, Server Components, concurrent rendering, TypeScript integration, and quality-of-life improvements. Use when implementing, reviewing, or debugging React components in any React 19+ project.

React beginner fundamentals — JSX, functional components, props, state, conditional rendering, list rendering, useEffect, data fetching, component composition, and common rookie mistakes. Use when implementing basic React features or when the user is new to React.

CSS fundamentals — box model, flexbox, grid, units, specificity, positioning, z-index, and responsive design. Library-agnostic. Use when writing, reviewing, or debugging styles in any web project regardless of CSS library or framework.

styled-components API patterns for React — basic components, pseudo-classes, props-based styling, extending, theming, TypeScript typed theme, global styles, keyframes, attrs, and common mistakes. Use when writing or reviewing component styles with styled-components in a React project.

Flagship Design System (FDS) knowledge for @lifesg/react-design-system — component catalogue, token reference, and Figma-to-FDS mapping heuristics. Use when implementing UI with FDS components or analysing which Figma elements can be fulfilled by FDS.

Atomic commit workflow — groups changed files into logical commits and produces Conventional Commit messages prefixed with branch name and author initials. Use when performing any git staging, committing, or when the user asks to save, commit, or push work.

Initialize a new Vite + React + TypeScript frontend project with Flagship Design System (@lifesg/react-design-system) pre-configured. Use when user wants to scaffold a new web application using FDS components.

Create or update a DESIGN.md file by browsing a design system's live online documentation (Storybook or equivalent) using the integrated browser. Use when the user asks to generate or update a DESIGN.md from a design system's documentation URL.

Markdown formatting rules: 80-character hard line wrap, heading hierarchy (no H1), fenced code blocks with language tags, table alignment, and YAML front matter conventions. Use when creating or editing any .md or markdown file.