By LifeSG
VS Code agent plugin for frontend development knowledge — React 18/19 patterns, React fundamentals, CSS essentials, and styled-components best practices.
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.
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.
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.
Own this plugin?
Verify ownership to unlock analytics, metadata editing, and a verified badge. GitHub access is read-only (username + org membership).
Sign in to claimOwn this plugin?
Verify ownership to unlock analytics, metadata editing, and a verified badge. GitHub access is read-only (username + org membership).
Sign in to claimBased on adoption, maintenance, documentation, and repository signals. Not a security audit or endorsement.
A curated collection of GitHub Copilot agent plugins for the Singapore Government digital ecosystem
This repository is a marketplace of GitHub Copilot agent plugins. Each plugin ships a curated set of customization files — agents, instruction files, prompts, and skills — that are installed directly into a user's VS Code workspace.
Plugins are independent and self-contained. Install only the ones relevant to your project.
| Plugin | Description |
|---|---|
| ccube-fds-web-app-builder | Turns Copilot into an AI web app developer that builds React applications strictly following the Flagship Design System (FDS) |
| ccube-frontend-dev | VS Code agent plugin for frontend development knowledge — React 18/19 patterns, React fundamentals, CSS essentials, and styled-components best practices |
| ccube-software-craft | Brings principal-level software engineering knowledge into Copilot — architecture decisions, system design, clean code, git workflow, EP authoring, and markdown standards |
| ccube-ux-designers | Gives Copilot the knowledge to create validated DESIGN.md files by browsing live design system documentation directly in the integrated browser |
Do you work at GovTech?
If yes, you must complete the Copilot licence signup before continuing: Sign up for agentic AI coding tools (without MCP)
If you do not work at GovTech, skip this and go straight to Step 1.
This step tells VS Code where to find the CCube plugins. You only need to do this once.
Open User Settings JSON and press Enter{ }. Add the following block
inside the outermost { }. If the file already has other settings,
add a comma after the last existing entry before pasting this:
"chat.plugins.marketplaces": [
"https://github.com/LifeSG/ccube-agent-plugin-marketplace.git"
]
When done, the relevant part of your file should look like this:
{
.........
"some.existing.setting": true,
"chat.plugins.marketplaces": [
"https://github.com/LifeSG/ccube-agent-plugin-marketplace.git"
]
}
You should see no error highlighting in the file. If VS Code shows a
red underline, check that every line ends with a comma except the last
entry before a closing } or ].
If you have never enabled agent plugins before, you need to turn the feature on first.
Open User Settings JSON and press Enter — a file called
settings.json opens} at the very end of the file. Place your cursor
on the line just above it and add the following line. If the line
above already ends with } or ], add a comma first:
"chat.plugins.enabled": true
Open the Extensions view (Cmd + Shift + X on Mac) You should now see an Agent Plugins section

npx claudepluginhub lifesg/ccube-agent-plugin-marketplace --plugin ccube-frontend-devVS Code agent plugin for software engineering knowledge — SOLID principles, design patterns, clean code, architecture styles, git workflow, testing strategy, and debugging methodology.
VS Code agent plugin that builds web applications strictly following the Flagship Design System — enforces FDS components, tokens, and accessibility patterns across every Copilot suggestion.
VS Code agent plugin for UX designers — creates and validates DESIGN.md files by browsing live design system documentation directly in the integrated browser.
Next.js development expertise with skills for App Router, Server Components, Route Handlers, Server Actions, and authentication patterns
Comprehensive skill pack with 66 specialized skills for full-stack developers: 12 language experts (Python, TypeScript, Go, Rust, C++, Swift, Kotlin, C#, PHP, Java, SQL, JavaScript), 10 backend frameworks, 6 frontend/mobile, plus infrastructure, DevOps, security, and testing. Features progressive disclosure architecture for 50% faster loading.
Access thousands of AI prompts and skills directly in your AI coding assistant. Search prompts, discover skills, save your own, and improve prompts with AI.
Unity Development Toolkit - Expert agents for scripting/refactoring/optimization, script templates, and Agent Skills for Unity C# development
Design fluency for frontend development. 1 skill with 23 commands (/impeccable polish, /impeccable audit, /impeccable critique, etc.) and curated anti-pattern detection.
Behavioral guidelines to reduce common LLM coding mistakes, derived from Andrej Karpathy's observations on LLM coding pitfalls