Use when starting any new project from scratch. Asks for project identity (name, GitHub org, Cloudflare account), detects project type, sets up design system, staging+production, i18n from day 1, SEO foundation, AGENTS.md manifest, test infrastructure, 8-gate deploy pipeline, and disciplined development workflows. Prevents wrong deploys, redundant repos, and technical debt from day 0.
From cmnpx claudepluginhub tody-agent/codymaster --plugin cmThis skill uses the workspace's default tool permissions.
templates/AGENTS.mdtemplates/frontend-safety.test.jstemplates/i18n-sync.test.jstemplates/pr-template.mdtemplates/project-identity.jsontemplates/vitest.config.jsProvides UI/UX resources: 50+ styles, color palettes, font pairings, guidelines, charts for web/mobile across React, Next.js, Vue, Svelte, Tailwind, React Native, Flutter. Aids planning, building, reviewing interfaces.
Fetches up-to-date documentation from Context7 for libraries and frameworks like React, Next.js, Prisma. Use for setup questions, API references, and code examples.
Implements distributed tracing with Jaeger/Tempo for microservices, including Kubernetes/Docker setup and OpenTelemetry instrumentation (Python/Flask). Use for debugging latency, dependencies, and request flows.
Every project starts here. No exceptions. Inspired by best practices from Amp, Claude Code, Cursor, Lovable, and Manus agents.
ASK FIRST. BUILD SECOND. NEVER ASSUME IDENTITY.
STAGING IS MANDATORY. PRODUCTION IS EARNED.
I18N FROM DAY 1. NOT "LATER."
DESIGN SYSTEM BEFORE COMPONENTS. TOKENS BEFORE PIXELS.
SEO IS NOT AN AFTERTHOUGHT. IT'S INFRASTRUCTURE.
EVERY PROJECT GETS AN AGENTS.MD. NO EXCEPTIONS.
Phase 0: Identity Lock — WHO are you deploying as?
Phase 0.5: Security Foundation — HOW do we prevent secret leaks?
Phase 1: Project Type Detection — WHAT kind of project?
Phase 2: Repository & Environments — WHERE does code live?
Phase 3: Design System Foundation — HOW does it look?
Phase 4: i18n From Day 1 — WHICH languages?
Phase 5: SEO Foundation — HOW will people find it?
Phase 6: AGENTS.md + Git Safety — HOW do agents collaborate?
Phase 7: Test Infrastructure — HOW do we catch bugs?
Phase 8: Deploy Pipeline (8 Gates) — HOW does code ship?
Phase 9: Development Workflow — HOW do we work daily?
MANDATORY. Cannot proceed without this. Values are NOT hardcoded — check history, suggest, let user confirm.
Before asking anything, check if ~/.cm-identity-history.json exists.
If it does, load previous identities and suggest the most recently used values.
// ~/.cm-identity-history.json — Auto-maintained across projects
{
"lastUsed": "2026-03-17",
"identities": [
{
"github": { "org": "my-work-org" },
"cloudflare": { "accountId": "abc123def456ghi789jkl012mno345pqr" },
"i18n": { "primary": "en", "targets": ["es", "fr", "de"] },
"usedCount": 5,
"lastProject": "my-awesome-project",
"lastUsed": "2026-03-17"
}
]
}
Present the 6 questions, pre-filling from history where available. User only needs to confirm or change:
📋 NEW PROJECT — Identity Setup
(Values from your last project shown as suggestions)
1. Project name (kebab-case): ___________
2. GitHub org [my-work-org]: → Enter to keep, or type new
3. Cloudflare ID [abc12...5pqr]: → Enter to keep, or type new
4. Domain: ___________
5. Primary language [en]: → Enter to keep, or type new
6. Target languages [es, fr, de]: → Enter to keep, or type new
RULE: Never assume. Always show. Let user confirm. If no history exists, ask all 6 from scratch.
⚠️ BEFORE PROCEEDING — CONFIRM:
🔐 GitHub Org: {org}
☁️ Cloudflare: {accountId}
🌐 Domain: {domain}
🗣️ Languages: {primary} (primary), {targets}
✅ Correct? → proceed
❌ Wrong? → fix before continuing
.project-identity.json{
"projectName": "{name}",
"github": {
"org": "{org}",
"repo": "{name}"
},
"cloudflare": {
"accountId": "{accountId}",
"projectName": "{name}",
"productionBranch": "production"
},
"domain": {
"production": "{domain}",
"staging": "staging.{domain}"
},
"i18n": {
"primary": "{primary}",
"targets": ["{targets}"]
},
"createdAt": "{date}",
"bootstrapVersion": "2.0"
}
After creating .project-identity.json, update ~/.cm-identity-history.json:
usedCountlastProject and lastUsedCall
cm-identity-guardto verify git config matches the GitHub org BEFORE any git push.
NEW — Defense-in-depth from day 0. Secrets leak at project start when security is "later." Calls
cm-secret-shieldfor setup.
.gitleaks.tomlCreate project-level Gitleaks configuration:
# .gitleaks.toml — Secret Shield Config
title = "CM Secret Shield"
[extend]
useDefault = true
[[rules]]
id = "supabase-service-key"
description = "Supabase Service Role Key"
regex = '''eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9\.[a-zA-Z0-9_-]+\.[a-zA-Z0-9_-]+'''
tags = ["supabase", "jwt"]
[[rules]]
id = "generic-high-entropy"
description = "High entropy string that may be a secret"
regex = '''(?i)(api[_-]?key|secret[_-]?key|access[_-]?token|private[_-]?key|auth[_-]?token)\s*[=:]\s*['"][a-zA-Z0-9/+=]{20,}['"]'''
tags = ["generic"]
[allowlist]
paths = ['''\.gitleaks\.toml$''', '''\.dev\.vars\.example$''', '''node_modules/''', '''dist/''']
# Install git pre-commit hook for secret scanning
mkdir -p .git/hooks
cat > .git/hooks/pre-commit << 'EOF'
#!/bin/sh
echo "🛡️ Secret Shield: scanning staged files..."
if command -v gitleaks &> /dev/null; then
gitleaks git --pre-commit --staged --verbose
if [ $? -ne 0 ]; then
echo "❌ SECRET DETECTED! Commit blocked."
exit 1
fi
echo "✅ No secrets detected"
else
echo "⚠️ Gitleaks not installed. Running basic checks..."
STAGED=$(git diff --cached --name-only --diff-filter=ACM)
PATTERNS="SERVICE_KEY|ANON_KEY|PRIVATE_KEY|DB_PASSWORD|SECRET_KEY|sk-[a-zA-Z0-9]{20,}"
for file in $STAGED; do
if echo "$file" | grep -qE '\.(js|ts|json|toml|yaml|env)$'; then
if git diff --cached "$file" | grep -qE "$PATTERNS"; then
echo "❌ Potential secret in: $file"
exit 1
fi
fi
done
echo "✅ Basic check passed"
fi
EOF
chmod +x .git/hooks/pre-commit
Add to package.json:
{
"scripts": {
"security:scan": "node scripts/security-scan.js || echo 'Create scripts/security-scan.js from cm-secret-shield'"
}
}
.dev.vars.example# .dev.vars.example — Template for local secrets (committed to repo)
# Copy to .dev.vars and fill in real values
SUPABASE_URL=https://YOUR_PROJECT.supabase.co
SUPABASE_SERVICE_KEY=your_service_key_here
SUPABASE_ANON_KEY=your_anon_key_here
RULE:
.dev.vars= real secrets (gitignored)..dev.vars.example= template (committed).
Detect project type → auto-select the right stack. Default UI: shadcn/ui + Tailwind. Default layout: Mobile-first. Unless user explicitly requests otherwise.
Present these options to the user:
| Type | When to use | Stack |
|---|---|---|
| A. Static Website | Docs, landing pages, portfolios | HTML + vanilla JS + CSS |
| B. SPA (Vite) | Dashboards, apps with client routing | Vite + React + TypeScript + shadcn/ui |
| C. Cloudflare Workers | APIs, backends, serverless functions | Hono + wrangler + TypeScript |
| D. Fullstack (Workers + SPA) | Complete apps with API + frontend | Hono + Vite + React + shadcn/ui |
| E. Content Site (Astro) | Blogs, docs, content-heavy sites | Astro + MDX |
🎨 DEFAULT UI LIBRARY: shadcn/ui + Tailwind CSS
📱 DEFAULT LAYOUT: Mobile-first responsive
These defaults apply UNLESS user explicitly says otherwise.
Examples of overrides:
- "Use Ant Design" → switch to Ant Design
- "No mobile needed" → skip mobile optimization
- "Desktop only" → desktop-first layout
If user says nothing about UI → use shadcn/ui + mobile-first.
mkdir -p public/static/{css,js,img} src tests/unit docs
touch public/index.html public/static/css/design-tokens.css public/static/css/style.css public/static/js/app.js
# Check available options first
npx -y create-vite@latest --help
# Scaffold React + TypeScript
npx -y create-vite@latest ./ --template react-ts
# Install Tailwind CSS
npm install -D tailwindcss @tailwindcss/vite
# Install and init shadcn/ui
npx -y shadcn@latest init
npm init -y
npm install hono wrangler --save-dev
mkdir -p src tests/unit
touch src/index.ts wrangler.jsonc
# Workers backend + Vite frontend in one repo
mkdir -p api/src frontend/src tests/{unit,integration}
npm init -y
npm install hono wrangler --save-dev
cd frontend && npx -y create-vite@latest ./ --template react-ts
npm install -D tailwindcss @tailwindcss/vite
npx -y shadcn@latest init
npx -y create-astro@latest --help
npx -y create-astro@latest ./ --template blog --typescript strict
For ALL project types:
npm install --save-dev vitest
For ALL projects with UI, enforce mobile-first from scaffold:
/* Mobile-first media queries — ALWAYS start from mobile */
/* Default styles = mobile (< 640px) */
/* sm: 640px+ */
@media (min-width: 640px) { }
/* md: 768px+ */
@media (min-width: 768px) { }
/* lg: 1024px+ */
@media (min-width: 1024px) { }
/* xl: 1280px+ */
@media (min-width: 1280px) { }
📱 MOBILE-FIRST RULES:
1. Default CSS = mobile layout (no media query needed)
2. Add complexity with min-width media queries
3. Touch targets minimum 44x44px
4. Test on 375px width (iPhone SE) as baseline
5. Navigation: bottom nav or hamburger on mobile
6. Tables: horizontal scroll or card layout on mobile
7. Forms: single column, full width inputs on mobile
git init
git checkout -b main
# main = staging (default)
# production = production only
git checkout -b production
git checkout main
npx wrangler pages project create PROJECT_NAME --production-branch production
{
"scripts": {
"deploy:staging": "npx wrangler pages deploy ./public --project-name=PROJECT_NAME --branch=main",
"deploy:production": "npx wrangler pages deploy ./public --project-name=PROJECT_NAME --branch=production",
"test": "vitest run",
"test:gate": "npm run test"
}
}
Adjust
./publicto match your build output directory based on project type.
.gitignore (Hardened)# === Secret Shield: Mandatory Ignores ===
# Environment & secret files
.env
.env.*
!.env.example
!.env.test
.dev.vars
!.dev.vars.example
.secret-lifecycle.json
# Platform-specific secrets
*.pem
*.key
*.p12
# Build & dependencies
node_modules/
dist/
.wrangler/
.next/
# OS & IDE
.DS_Store
*.log
Design tokens BEFORE components. Semantic naming ALWAYS. Saved per brand — consistent across ALL projects of the same user/company. shadcn/ui components as default. Mobile-first always.
Before creating a new design system, check if ~/.cm-design-profiles/ exists.
If the user has a previous design profile, reuse it for brand consistency.
// ~/.cm-design-profiles/{org-name}.json
// Auto-saved after first project. Reused for all future projects.
{
"orgName": "my-work-org",
"brand": {
"name": "Acme Corp",
"industry": "technology",
"style": "professional-modern"
},
"colors": {
"primary": { "50": "#eff6ff", "500": "#3b82f6", "600": "#2563eb", "700": "#1d4ed8" },
"accent": { "500": "#f59e0b" },
"success": "#22c55e",
"warning": "#f59e0b",
"error": "#ef4444"
},
"typography": {
"fontFamily": "Inter",
"monoFamily": "JetBrains Mono"
},
"ui": {
"library": "shadcn/ui",
"borderRadius": "0.5rem",
"darkMode": true
},
"lastUpdated": "2026-03-17",
"usedInProjects": ["my-awesome-project", "my-frontend-app"]
}
Rules:
~/.cm-design-profiles/🎨 DESIGN SYSTEM SETUP
No existing design profile found. Tell me about your brand:
1. Company/Brand name: ___________
2. Industry: ___________
3. Style preference: (professional / playful / minimal / bold)
4. Primary brand color (hex): ___________ (or "auto" to suggest)
5. Dark mode needed? (yes / no) [default: yes]
6. UI Library: [shadcn/ui] (Enter to keep, or type alternative)
For shadcn/ui projects (default):
Design tokens are managed through tailwind.config.ts and shadcn's CSS variables.
Customize app/globals.css (or src/index.css) with brand colors:
@tailwind base;
@tailwind components;
@tailwind utilities;
@layer base {
:root {
/* === Brand Colors (from profile or user input) === */
--background: 0 0% 100%;
--foreground: 222.2 84% 4.9%;
--card: 0 0% 100%;
--card-foreground: 222.2 84% 4.9%;
--popover: 0 0% 100%;
--popover-foreground: 222.2 84% 4.9%;
--primary: 221.2 83.2% 53.3%; /* ← Brand primary */
--primary-foreground: 210 40% 98%;
--secondary: 210 40% 96.1%;
--secondary-foreground: 222.2 47.4% 11.2%;
--muted: 210 40% 96.1%;
--muted-foreground: 215.4 16.3% 46.9%;
--accent: 210 40% 96.1%;
--accent-foreground: 222.2 47.4% 11.2%;
--destructive: 0 84.2% 60.2%;
--destructive-foreground: 210 40% 98%;
--border: 214.3 31.8% 91.4%;
--input: 214.3 31.8% 91.4%;
--ring: 221.2 83.2% 53.3%; /* ← Brand primary */
--radius: 0.5rem;
/* === Additional Semantic Tokens === */
--success: 142.1 76.2% 36.3%;
--warning: 37.7 92.1% 50.2%;
--info: 221.2 83.2% 53.3%;
}
.dark {
--background: 222.2 84% 4.9%;
--foreground: 210 40% 98%;
--card: 222.2 84% 4.9%;
--card-foreground: 210 40% 98%;
--popover: 222.2 84% 4.9%;
--popover-foreground: 210 40% 98%;
--primary: 217.2 91.2% 59.8%;
--primary-foreground: 222.2 47.4% 11.2%;
--secondary: 217.2 32.6% 17.5%;
--secondary-foreground: 210 40% 98%;
--muted: 217.2 32.6% 17.5%;
--muted-foreground: 215 20.2% 65.1%;
--accent: 217.2 32.6% 17.5%;
--accent-foreground: 210 40% 98%;
--destructive: 0 62.8% 30.6%;
--destructive-foreground: 210 40% 98%;
--border: 217.2 32.6% 17.5%;
--input: 217.2 32.6% 17.5%;
--ring: 224.3 76.3% 48%;
}
}
For vanilla/static projects:
Create design-tokens.css with CSS custom properties (see example in project scaffold).
Use the same brand colors from the profile.
Install essential base components:
# Core layout components
npx shadcn@latest add button
npx shadcn@latest add input
npx shadcn@latest add label
npx shadcn@latest add card
npx shadcn@latest add dialog
npx shadcn@latest add dropdown-menu
npx shadcn@latest add toast
npx shadcn@latest add skeleton
Only install what's needed. Add more components as features require them.
/* Always include these mobile-first foundations */
/* Touch-friendly interactive elements */
button, a, [role="button"] {
min-height: 44px;
min-width: 44px;
}
/* Responsive container */
.container {
width: 100%;
padding-inline: 1rem;
}
@media (min-width: 640px) { .container { padding-inline: 1.5rem; } }
@media (min-width: 1024px) { .container { max-width: 1024px; margin-inline: auto; } }
@media (min-width: 1280px) { .container { max-width: 1280px; } }
/* Safe area for mobile devices */
body {
padding: env(safe-area-inset-top) env(safe-area-inset-right)
env(safe-area-inset-bottom) env(safe-area-inset-left);
}
After setting up the design system, auto-save to ~/.cm-design-profiles/{org}.json:
usedInProjects array✅ DO:
- Use shadcn/ui components as building blocks (SPA/Fullstack)
- Use semantic color tokens: bg-primary, text-muted-foreground
- Design mobile layout FIRST, then enhance for larger screens
- Reuse brand profile from ~/.cm-design-profiles/
- Touch targets: minimum 44x44px
- Test at 375px (iPhone SE) as baseline
❌ DON'T:
- Use raw hex colors: color: #333 → use token
- Design desktop-first then "fix" mobile
- Create new color palette when brand profile exists
- Skip dark mode (enabled by default)
- Use fixed widths on mobile: width: 500px
- Ignore safe-area-inset on mobile
Keep from v1 — enhanced to be framework-agnostic.
For static/vanilla projects, create i18n.js:
const i18n = {
currentLang: 'vi',
translations: {},
async init(lang) {
this.currentLang = lang || localStorage.getItem('lang') || 'vi';
try {
const res = await fetch(`/static/i18n/${this.currentLang}.json`);
this.translations = await res.json();
} catch {
const fallback = await fetch('/static/i18n/vi.json');
this.translations = await fallback.json();
}
this.apply();
},
t(key) {
return key.split('.').reduce((obj, k) => obj?.[k], this.translations) || `[${key}]`;
},
apply() {
document.querySelectorAll('[data-i18n]').forEach(el => {
el.textContent = this.t(el.dataset.i18n);
});
document.querySelectorAll('[data-i18n-placeholder]').forEach(el => {
el.placeholder = this.t(el.dataset.i18nPlaceholder);
});
document.documentElement.lang = this.currentLang;
},
async switchTo(lang) {
localStorage.setItem('lang', lang);
await this.init(lang);
}
};
For React/Vite projects, use react-i18next:
npm install i18next react-i18next i18next-browser-languagedetector
For Astro projects, use astro-i18n or manual routing.
i18n/
├── vi.json ← Source of truth (primary language)
├── en.json
├── th.json
└── ph.json
✅ DO:
- Write ALL user-facing strings with t() or data-i18n
- Primary language file is source of truth
- MAX 30 strings per batch when extracting
- Run i18n-sync test after every batch
❌ DON'T:
- Hardcode strings: "Save" → use t('common.save')
- Add 600 strings in one shot → app crashes
- Translate before primary language is complete
- Skip audit gates between batches
NEW — Learn from Lovable & Cursor: SEO is infrastructure, not afterthought.
Every page must include:
<!DOCTYPE html>
<html lang="vi">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- SEO: Title and Description -->
<title data-i18n="meta.title">Project Name — Short description</title>
<meta name="description" data-i18n-content="meta.description" content="Page description 150-160 characters">
<!-- SEO: Open Graph -->
<meta property="og:title" content="Project Name">
<meta property="og:description" content="Page description">
<meta property="og:type" content="website">
<meta property="og:url" content="https://yourdomain.com">
<meta property="og:image" content="https://yourdomain.com/og-image.png">
<!-- SEO: Twitter Card -->
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="Project Name">
<meta name="twitter:description" content="Page description">
<!-- SEO: Canonical URL -->
<link rel="canonical" href="https://yourdomain.com">
<!-- Performance: Preconnect to fonts -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<!-- Favicon -->
<link rel="icon" type="image/svg+xml" href="/favicon.svg">
<!-- Styles -->
<link rel="stylesheet" href="/static/css/design-tokens.css">
<link rel="stylesheet" href="/static/css/style.css">
</head>
<body>
<!-- Content with semantic HTML -->
<header role="banner">...</header>
<nav role="navigation" aria-label="Main">...</nav>
<main role="main">
<h1>One H1 per page</h1>
...
</main>
<footer role="contentinfo">...</footer>
<script src="/static/js/i18n.js"></script>
<script src="/static/js/app.js" defer></script>
</body>
</html>
Every page must pass:
| # | Check | Rule |
|---|---|---|
| 1 | Title tag | Descriptive, unique per page, < 60 chars |
| 2 | Meta description | Compelling, 150-160 chars |
| 3 | H1 tag | Exactly ONE per page |
| 4 | Heading hierarchy | h1 → h2 → h3 (no skipping) |
| 5 | Semantic HTML | <header>, <nav>, <main>, <footer>, <article>, <section> |
| 6 | Alt attributes | Every <img> has descriptive alt text |
| 7 | Canonical URL | Prevents duplicate content |
| 8 | Open Graph | Social sharing preview |
| 9 | Lang attribute | <html lang="vi"> matches current language |
| 10 | Unique IDs | All interactive elements have unique, descriptive IDs |
NEW — Learn from Amp & Claude Code: Project manifest for AI collaboration.
Every project MUST have this file at root:
# AGENTS.md — Project Manifest
> This file helps AI agents understand and work with this project effectively.
## Project Overview
- **Name**: my-awesome-docs
- **Type**: Static Website (Cloudflare Pages)
- **Primary Language**: English (en)
- **Tech Stack**: HTML, vanilla JS, CSS, Cloudflare Pages
## Commands
- `npm run dev` — Start local dev server
- `npm run test` — Run all tests
- `npm run test:gate` — Run pre-deploy test gate
- `npm run deploy:staging` — Deploy to staging
- `npm run deploy:production` — Deploy to production
## Project Structure
public/ — Static files served directly static/css/ — Stylesheets (design-tokens.css, style.css) static/js/ — JavaScript (app.js, i18n.js) static/i18n/ — Language files (vi.json, en.json, ...) src/ — Backend source (if applicable) tests/ — Test files docs/plans/ — Implementation plans
## Code Conventions
- **i18n**: ALL user-facing strings must use t() or data-i18n. vi.json is source of truth.
- **CSS**: Use design tokens only. Never raw hex colors or arbitrary spacing.
- **Commits**: Conventional format — `feat:`, `fix:`, `docs:`, `test:`, `chore:`
- **Branches**: `main` = staging, `production` = production only
- **Deploy**: Always staging first. Production requires explicit request.
## Important Rules
1. Run `cm-identity-guard` before any git push
2. Never force push to main or production
3. i18n extraction: MAX 30 strings per batch
4. Run test:gate before every deploy
5. Check `.project-identity.json` for deploy targets
6. Use `qmd` (cm-deep-search) for semantic codebase search. Ensure `.qmd` index is fresh.
From the very first commit, enforce:
feat: add user login page
fix: correct i18n key for save button
docs: update README with deploy instructions
test: add frontend safety tests
chore: update dependencies
i18n: extract settings page strings (batch 3/5)
main branch:
✅ Direct push allowed (staging)
❌ Never force push
✅ Run test:gate before deploy
production branch:
❌ Never direct push
✅ Only via: git checkout production && git merge main && git push
✅ Requires staging verification first
❌ Never force push
git add .
git commit -m "chore: bootstrap project with cm-project-bootstrap v2.0"
.github/pull_request_template.md)## What Changed
<!-- Brief description -->
## Test Plan
- [ ] Tests pass (`npm run test:gate`)
- [ ] Staging verified
- [ ] i18n keys present in all languages
- [ ] No raw strings in UI
## Deploy
- [ ] Ready for staging
- [ ] Ready for production (requires staging verification)
// vitest.config.js (or vitest.config.ts)
import { defineConfig } from 'vitest/config';
export default defineConfig({
test: {
globals: true,
environment: 'node',
include: ['tests/**/*.test.{js,ts}'],
},
});
Create tests/unit/frontend-safety.test.js:
import { describe, it, expect } from 'vitest';
import { readFileSync, readdirSync, existsSync } from 'fs';
import { join } from 'path';
describe('Frontend Safety', () => {
// Test 1: HTML files have proper structure
it('index.html has required meta tags', () => {
const html = readFileSync('public/index.html', 'utf-8');
expect(html).toContain('<meta charset=');
expect(html).toContain('<meta name="viewport"');
expect(html).toContain('<title');
expect(html).toContain('lang=');
});
// Test 2: No syntax errors in JS files
it('JavaScript files parse without errors', () => {
const jsDir = 'public/static/js';
if (!existsSync(jsDir)) return;
const files = readdirSync(jsDir).filter(f => f.endsWith('.js'));
files.forEach(file => {
const content = readFileSync(join(jsDir, file), 'utf-8');
expect(() => new Function(content)).not.toThrow();
});
});
// Test 3: CSS files reference design tokens (not raw values)
it('stylesheets use design tokens', () => {
const cssFile = 'public/static/css/style.css';
if (!existsSync(cssFile)) return;
const css = readFileSync(cssFile, 'utf-8');
// Warn if raw hex colors found outside of design-tokens.css
const rawColors = css.match(/#[0-9a-fA-F]{3,8}(?!.*design-tokens)/g);
if (rawColors && rawColors.length > 0) {
console.warn(`⚠️ Found ${rawColors.length} raw color values. Use design tokens instead.`);
}
});
// Test 4: Design tokens file exists
it('design-tokens.css exists', () => {
expect(existsSync('public/static/css/design-tokens.css')).toBe(true);
});
// Test 5: AGENTS.md exists
it('AGENTS.md exists at project root', () => {
expect(existsSync('AGENTS.md')).toBe(true);
});
// Test 6: .project-identity.json exists
it('.project-identity.json exists', () => {
expect(existsSync('.project-identity.json')).toBe(true);
});
});
Create tests/unit/i18n-sync.test.js:
import { describe, it, expect } from 'vitest';
import { readFileSync, readdirSync, existsSync } from 'fs';
import { join } from 'path';
describe('i18n Sync', () => {
const i18nDir = 'public/static/i18n';
it('primary language file exists', () => {
expect(existsSync(join(i18nDir, 'vi.json'))).toBe(true);
});
it('all language files have same keys as primary', () => {
if (!existsSync(i18nDir)) return;
const primaryKeys = getAllKeys(
JSON.parse(readFileSync(join(i18nDir, 'vi.json'), 'utf-8'))
);
const langFiles = readdirSync(i18nDir)
.filter(f => f.endsWith('.json') && f !== 'vi.json');
langFiles.forEach(file => {
const langKeys = getAllKeys(
JSON.parse(readFileSync(join(i18nDir, file), 'utf-8'))
);
const missing = primaryKeys.filter(k => !langKeys.includes(k));
expect(missing, `${file} missing keys: ${missing.join(', ')}`).toEqual([]);
});
});
});
function getAllKeys(obj, prefix = '') {
return Object.entries(obj).flatMap(([key, val]) => {
const fullKey = prefix ? `${prefix}.${key}` : key;
return typeof val === 'object' && val !== null
? getAllKeys(val, fullKey)
: [fullKey];
});
}
Ensure package.json has:
{
"scripts": {
"test": "vitest run",
"test:watch": "vitest",
"test:gate": "vitest run"
}
}
Enhanced from 6 to 8 gates — adding accessibility + performance.
Gate 1: Identity Check — .project-identity.json matches deploy target
Gate 2: Branch Check — On correct branch (main=staging, production=prod)
Gate 3: Test Gate — npm run test:gate passes
Gate 4: Build Gate — npm run build succeeds (if applicable)
Gate 5: i18n Gate — All language files in sync
Gate 6: Lint Gate — No lint errors (if linter configured)
Gate 7: Accessibility Gate — Semantic HTML, alt tags, ARIA labels present
Gate 8: Performance Gate — No obviously large bundles or unoptimized assets
# Read .project-identity.json → confirm Cloudflare account + project name
cat .project-identity.json | jq '.cloudflare'
# Verify current branch
BRANCH=$(git branch --show-current)
if [ "$1" = "production" ] && [ "$BRANCH" != "production" ]; then
echo "❌ Must be on production branch for production deploy"
exit 1
fi
npm run test:gate
npm run build 2>&1 || { echo "❌ Build failed"; exit 1; }
# Verified by i18n-sync test in Gate 3
echo "✅ i18n sync verified by test suite"
npm run lint 2>&1 || echo "⚠️ Lint warnings (non-blocking)"
# Check HTML for basic accessibility
echo "Checking semantic HTML..."
grep -r '<img' public/ | grep -v 'alt=' && echo "❌ Images missing alt attributes" || echo "✅ All images have alt"
grep -r 'role=' public/index.html > /dev/null && echo "✅ ARIA roles present" || echo "⚠️ Consider adding ARIA roles"
# Check for obviously large files
find public/ -type f -size +500k | head -5
if [ $? -eq 0 ]; then
echo "⚠️ Large files detected. Consider optimizing."
fi
echo "✅ Performance gate passed"
# Staging (default)
npm run deploy:staging
# Production (explicit only)
npm run deploy:production
1. Plan → cm-brainstorm / cm-writing-plans
2. Branch → cm-using-git-worktrees (optional for complex features)
3. TDD → cm-test-driven-development
4. Build → Implement the feature
5. Test → npm run test:gate
6. Review → cm-requesting-code-review
7. Commit → Conventional commit format
8. Deploy → deploy:staging (8-gate pipeline)
9. Verify → Check staging URL
10. Merge → production branch (when ready)
| Situation | Skill |
|---|---|
| Starting a feature | cm-brainstorm |
| Writing implementation plan | cm-writing-plans |
| Need isolated workspace | cm-using-git-worktrees |
| Writing tests first | cm-test-driven-development |
| Running independent tasks | cm-subagent-driven-development |
| Executing a plan | cm-executing-plans |
| Before deploying | cm-pre-deploy-testing → cm-identity-guard |
| After implementing | cm-requesting-code-review |
| Receiving review | cm-receiving-code-review |
| Bug found | cm-systematic-debugging |
| Extracting i18n | cm-safe-i18n-translation |
| Before git push | cm-identity-guard |
| Finishing feature branch | cm-finishing-a-development-branch |
| Before claiming done | cm-verification-before-completion |
| Need a skill you don't have | → Adaptive Skills Discovery (below) |
User says "deploy" → Deploy to STAGING
User says "deploy staging" → Deploy to STAGING
User says "deploy production"→ Deploy to PRODUCTION (requires staging verified)
User says "deploy prod" → Deploy to PRODUCTION (requires staging verified)
After successful production deploy:
→ Suggest updating CHANGELOG.md
→ Suggest updating docs/ if applicable
→ Suggest creating git tag: git tag v1.x.x
The bootstrap doesn't just set up a project — it LEARNS what the project needs. Like a framework that finds its own missing pieces.
DON'T just fail when you hit something you've never done.
DO search for a skill that can help.
DON'T install blindly — review what the skill does first.
DO remember what was useful for next time.
When the agent encounters a task it doesn't have a skill for:
1. DETECT → "I need to do X but don't have a matching skill"
2. SEARCH → npx skills find {keyword} — search skills.sh registry
3. REVIEW → Read the SKILL.md of the found skill — is it safe & relevant?
4. ASK → "Found skill '{name}': {description}. Install it?"
5. INSTALL → npx skills add {source} --skill {name} -a antigravity -y
6. USE → Apply the newly installed skill to the current task
7. LOG → Record what was installed + why in .cm-skills-log.json
Use npx skills find to search the community registry at skills.sh:
# Interactive search (fuzzy finder)
npx skills find
# Search by keyword
npx skills find "nextjs"
npx skills find "supabase"
npx skills find "testing"
npx skills find "deployment"
# Browse a known skills repository
npx skills add vercel-labs/agent-skills --list
# Install to Antigravity agent (project-level)
npx skills add vercel-labs/agent-skills --skill {skill-name} -a antigravity
# Install globally (available to all projects)
npx skills add vercel-labs/agent-skills --skill {skill-name} -a antigravity -g
# From any GitHub repo
npx skills add https://github.com/{owner}/{repo} --skill {skill-name} -a antigravity
Maintain .cm-skills-log.json at project root to track what was discovered:
{
"discoveredSkills": [
{
"name": "supabase-rls",
"source": "vercel-labs/agent-skills",
"installedAt": "2026-03-17",
"reason": "User needed Row Level Security setup",
"scope": "project"
}
]
}
| Situation | Search Keywords |
|---|---|
| User asks for something you've never done | Search by the technology/concept name |
| A framework you're unfamiliar with | npx skills find "{framework}" |
| Complex DevOps / CI/CD setup | npx skills find "deployment", "ci", "docker" |
| Database patterns | npx skills find "prisma", "supabase", "drizzle" |
| Testing frameworks | npx skills find "playwright", "cypress", "vitest" |
| UI component libraries | npx skills find "shadcn", "radix", "design-system" |
| Auth / payment / external | npx skills find "auth", "stripe", "clerk" |
✅ DO:
- Always show the user what skill you found before installing
- Prefer skills from known repos (vercel-labs/agent-skills, etc.)
- Install project-level by default, global only if user agrees
- Log every installed skill with reason
- Check `npx skills list` to avoid duplicates
❌ DON'T:
- Install skills without user confirmation
- Install from untrusted/unknown sources without review
- Override existing cm-* skills with external ones
- Install more than needed — minimal is better
After completing a project, the bootstrap gets smarter:
1. Review .cm-skills-log.json — what new skills were needed?
2. If a skill was useful → suggest making it a permanent cm-* skill
3. If the same type of skill is needed across 3+ projects →
auto-suggest: "This skill seems essential. Make it part of your default toolkit?"
4. Update ~/.cm-identity-history.json with commonly needed skill patterns
MANDATORY. Every project gets a CONTINUITY.md. This is what makes AI remember context across sessions.
.cm/ directorymkdir -p .cm
Write .cm/CONTINUITY.md using the template from cm-continuity skill:
Project: to the project name from .project-identity.jsonCurrent Phase: to bootstrappingActive Goal: to the user's stated project purposeMistakes & Learnings empty (will be populated during development).cm/CONTINUITY.md is LOCAL working memory — do NOT commit:
# Working memory (local only)
.cm/
Add this line to the AGENTS.md "Important Rules" section:
- Read `.cm/CONTINUITY.md` at the start of every session for context
Next session, AI reads ~200 tokens from CONTINUITY.md instead of re-scanning 50+ files (~15,000 tokens). Savings: ~97% on context loading.
| # | Anti-Pattern | Consequence | Prevention |
|---|---|---|---|
| 1 | Skip identity lock | Deploy to wrong Cloudflare account | Phase 0 is MANDATORY |
| 2 | No staging branch | Bugs hit production directly | Always 2 branches |
| 3 | i18n "later" | Weeks of refactoring | Phase 4 from day 1 |
| 4 | Raw hex colors | Inconsistent UI, broken dark mode | Design tokens only |
| 5 | No AGENTS.md | AI agents make wrong assumptions | Phase 6 creates it |
| 6 | deploy = production | Users see bugs | deploy = staging default |
| 7 | Code before plan | Technical debt from start | cm-writing-plans first |
| 8 | Skip test:gate | "Tests pass" but app broken | 8-gate pipeline |
| 9 | 600 i18n strings at once | App crash | MAX 30 per batch |
| 10 | No design tokens | Every component has different colors | Phase 3 foundation |
| 11 | Force push to main | Lost commits, broken deploys | Never. Period. |
| 12 | No PR template | Unverified code reaches production | Phase 6 creates it |
After bootstrap, the project MUST have:
✅ .project-identity.json — Identity locked
✅ ~/.cm-identity-history.json — Identity saved for future suggestions
✅ ~/.cm-design-profiles/{org}.json — Brand design system saved
✅ .gitleaks.toml — Secret scanning config (Phase 0.5)
✅ .git/hooks/pre-commit — Secret Shield pre-commit hook (Phase 0.5)
✅ .dev.vars.example — Secret template (Phase 0.5)
✅ AGENTS.md — AI collaboration manifest
✅ .github/pull_request_template.md — PR template
✅ .gitignore — Hardened ignores (secrets, keys, env files)
✅ package.json — With deploy:staging, deploy:production, test:gate, security:scan
✅ shadcn/ui initialized — (SPA/Fullstack) or design-tokens.css (Static)
✅ globals.css / style.css — Brand tokens + mobile-first base styles
✅ i18n/vi.json — Primary language file
✅ i18n/[lang].json — Target language files (empty structure)
✅ index.html — With SEO meta tags, semantic HTML
✅ tests/frontend-safety — Safety checks
✅ tests/i18n-sync — Key parity tests
✅ vitest.config.js — Test configuration
✅ main branch — Staging deploys
✅ production branch — Production deploys
✅ First commit — "chore: bootstrap with cm-project-bootstrap v2.0"
✅ .cm/CONTINUITY.md — Working memory for AI context persistence