ccube-frontend-dev

---

About

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.

---

Plugins

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

---

Installation

Prerequisites

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.

---

Step 1 — Register this marketplace in VS Code

This step tells VS Code where to find the CCube plugins. You only need to do this once.

1. Open the Command Palette:
   • Mac: Cmd + Shift + P
2. Type Open User Settings JSON and press Enter
3. You will see a file with curly braces { }. 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"
     ]
   }
   

4. Save the file (Cmd + S)

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 ].

---

Step 2 — Install individual plugins

If you have never enabled agent plugins before, you need to turn the feature on first.

2. Open the Command Palette:
   • Mac: press Cmd + Shift + P
3. Type Open User Settings JSON and press Enter — a file called settings.json opens
4. Find the closing } 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
   

5. Save the file (Cmd + S on Mac, Ctrl + S on Windows)
6. Restart VS Code

Open the Extensions view (Cmd + Shift + X on Mac) You should now see an Agent Plugins section