From ccube-fds-web-app-builder
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.
How this skill is triggered — by the user, by Claude, or both
Slash command
/ccube-fds-web-app-builder:cc-vite-react-dsThe summary Claude sees in its skill listing — used to decide when to auto-load this skill
This skill automates the creation of a new frontend web application using:
This skill automates the creation of a new frontend web application using:
Use this skill when:
Do NOT use when:
node -v before executing.Before executing, gather the following. If any required input is missing, ask the user — collect all missing fields in a single message before proceeding.
my-app."/Users/username/projects). If you want to
use your home directory, I will resolve it to its absolute path
for you."~, resolve it to an absolute path before
proceeding: run echo $HOME in terminal and use the output.Monorepo setup is out of scope for this skill. If the user explicitly requests a monorepo integration, advise them to scaffold the standalone project first using this skill, then integrate it manually into their workspace.
This skill creates standalone Vite + React apps only. Monorepo integration is out of scope — see Required Information above.
The initialization script performs ALL steps automatically. This is the recommended approach.
Script Location: scripts/init-vite-react-project.sh
Before running: Verify Node.js is available by running node -v in
terminal. If the command fails, install Node.js 18+ from nodejs.org
before proceeding.
CRITICAL — run as background process: This script runs multiple
npm installsteps that can take 2-5 minutes. You MUST launch it withisBackground: true. After starting it, poll withget_terminal_outputevery 30 seconds until the output contains✅ Project created successfully!. Do NOT run it as a foreground command — it will be killed before completion.
Finding the script: The script is co-located with this skill.
Replace SKILL.md at the end of this skill's path (from the skills
index) with scripts/init-vite-react-project.sh to get the absolute
script path. Do NOT use file search to locate it — the script is
outside the workspace and will not be found that way.
Usage (background — required):
bash "<absolute-path-to-script>" "<project-name>" "<target-directory>"
Launch with isBackground: true. Then poll get_terminal_output until
you see ✅ Project created successfully!.
Example (derive your actual path as described above):
bash "<absolute-path-to-skill-dir>/scripts/init-vite-react-project.sh" "my-chatbot-app" "/Users/username/projects"
What the script does automatically:
The script intentionally does NOT generate ThemeProvider, main.tsx,
or App.tsx. You MUST create those files after the script completes
— see File Setup (Post-Script) below.
After script completes (confirmed via get_terminal_output showing
✅ Project created successfully!), proceed to File Setup below.
After the script completes, you MUST create the following files. Use your knowledge of the installed FDS version to write correct imports — check the FDS Storybook or FDS docs if you are unsure of the current API.
src/providers/ThemeProvider.tsx and src/main.tsxRead resources/theme-setup.md from the cc-design-system skill and
follow Installation Step 3 exactly — it creates both the wrapper
file and updates main.tsx to import it.
src/App.tsxReplace the default Vite App with a minimal FDS-styled layout using
Layout and Text components from @lifesg/react-design-system.
README.mdCreate a project README documenting the stack, npm run dev,
npm run build, and links to the FDS documentation.
Verification: After creating these files, run npm run dev in the
project directory and confirm:
If the automated script cannot be located or fails, execute these steps manually. Steps 1-3 replace the script; steps 4-6 are the same file creation steps as the File Setup (Post-Script) section above and should use the current FDS API.
cd "<target-directory>"
npm create vite@latest "<project-name>" -- --template react-ts
cd "<project-name>"
npm install
# Pinned to ^3 — v4 is alpha and has breaking ThemeProvider API changes.
# Remove the @^3 pin once v4 reaches stable and resources-v4/ is populated.
npm install @lifesg/react-design-system@^3 @lifesg/react-icons styled-components
npm install -D @types/styled-components
mkdir -p src/components src/pages src/providers src/utils
Read resources/theme-setup.md from the cc-design-system skill and
follow Installation Step 3 exactly. Wire DSThemeProvider directly
in src/main.tsx — no separate wrapper file is needed unless the
project requires a runtime theme toggle.
Replace src/App.tsx:
import { Layout } from '@lifesg/react-design-system/layout';
import { Text } from '@lifesg/react-design-system/text';
function App() {
return (
<Layout.Container>
<Layout.Content>
<Text.H1>Welcome to Your App</Text.H1>
<Text.Body>Built with Flagship Design System</Text.Body>
</Layout.Content>
</Layout.Container>
);
}
export default App;
Create README.md:
# [Project Name]
Frontend web application built with:
- Vite + React 18 + TypeScript
- Flagship Design System (@lifesg/react-design-system)
## Getting Started
\`\`\`bash
npm install
npm run dev
\`\`\`
## Build
\`\`\`bash
npm run build
\`\`\`
## Design System
This project uses LifeSG's Flagship Design System. See:
- [Component Documentation](https://designsystem.life.gov.sg/)
- [Storybook](https://react.designsystem.life.gov.sg/)
After project creation, verify:
npm install completes without errorsnpm run dev starts development serverError: "npm: command not found" or "node: command not found"
Error: "Target directory does not exist"
mkdir -p "<target-directory>", then retryError: "Directory already exists"
Error: npm create vite fails with network error
Error: FDS installation fails
Error: Script exits mid-execution
Error: Script not found (path does not exist after derivation)
Issue: Styled-components version mismatch
npm install styled-components@^6.0.0
Issue: TypeScript errors with styled-components
npm install -D @types/styled-components
Issue: Theme not applied
main.tsxIssue: Module not found: @lifesg/react-design-system
npm install in the project directoryThe created project follows this structure:
<project-name>/
├── src/
│ ├── components/ # Reusable UI components
│ ├── pages/ # Page components
│ ├── providers/ # Context providers (Theme, etc.)
│ ├── utils/ # Utility functions
│ ├── App.tsx # Root component
│ └── main.tsx # Entry point
├── public/ # Static assets
├── package.json
├── vite.config.ts
├── tsconfig.json
└── README.md
This skill is typically used as the FIRST step in the Figma-to-DS workflow:
After successful execution, report:
✅ Project created: <project-name>
📁 Location: <absolute-path>
📦 Installed packages:
- @lifesg/react-design-system
- @lifesg/react-icons
- styled-components
🚀 Next steps:
1. cd <target-directory>/<project-name>
2. npm run dev
3. Open browser to http://localhost:5173
scripts/init-vite-react-project.shHandles the slow, non-deterministic operations: npm create vite,
npm install, and mkdir. Does NOT generate ThemeProvider or app
files — those are created by Copilot in the File Setup step. Derive
the absolute path by replacing SKILL.md in this skill's path with
scripts/init-vite-react-project.sh. Usage:
bash "<absolute-path-to-script>" "<project-name>" "<target-directory>"
Creates, edits, and optimizes skills for Claude Code, including drafting, evaluating with test prompts, iterating on performance, and improving skill descriptions for better triggering accuracy.
npx claudepluginhub lifesg/ccube-agent-plugin-marketplace --plugin ccube-fds-web-app-builder