edgeone-pages-saas

Files (5)

• SKILL.md
• customization.md · references/
• env-setup.md · references/
• template-setup.md · references/
• user-prompt-intake.md · references/

SKILL.md (first lines)

# EdgeOne Pages SaaS Scaffolding Skill

Scaffold and customize a SaaS website from the [`TencentEdgeOne/saas-starter`](https://github.com/TencentEdgeOne/saas-starter) template, then hand it off to the deploy skill.

## When to use this skill

- User wants to **start a new SaaS site** (AI SaaS, AI tool, membership site, etc.) on EdgeOne Pages
- User mentions the `saas-starter` template explicitly
- User wants a Next.js + Supabase + Stripe SaaS foundation with credits / auth / payments / AI

**Do NOT use for:**
- Adding a single API/function to an existing project → use `edgeone-pages-dev`
- Deploying an already-built project → use `edgeone-pages-deploy`
- Plain static sites, blogs, landing pages without SaaS features

## How to use this skill (for the coding agent)

Follow the **main flow** below top-to-bottom. Load `references/*.md` only when the flow tells you to — do NOT preload everything.

---

## ⛔ Critical Rules (never skip)

1. **ALWAYS ask the user about their own Prompt FIRST**, before doing anything else. This is the entry gate of the skill.
2. **Never fabricate the user's product** — if information is missing and the user has no Prompt, run the built-in questionnaire in `references/user-prompt-intake.md`.
3. **Never rewrite the template's source tree wholesale.** Apply targeted edits only — see `references/customization.md` for the exact files to touch.
4. **Use `npx degit TencentEdgeOne/saas-starter <project>`** to bootstrap (no `.git` history). Do not run `git clone` unless degit is unavailable.
5. **Never commit `.env.local` or any real API keys** to git. Make sure `.gitignore` covers it (the template already does).
6. **DO NOT deploy inside this skill.** Deployment belongs to `edgeone-pages-deploy`. In Step 6, BEFORE telling the user "you can deploy now", **MUST verify that `edgeone-pages-deploy` skill is installed locally** (check whether `~/.codebuddy/skills/edgeone-pages-deploy/` — or its Windows equivalent `%USERPROFILE%\.codebuddy\skills\edgeone-pages-deploy\` — exists). If not installed, follow the guided-install branch in Step 6.3 instead of just leaving a text hint.
7. **The template's `package.json` uses `next dev`** (NOT `edgeone pages dev`). Only suggest `edgeone pages dev` when the user actually needs to develop/debug Edge Functions, Cloud Functions, or KV locally — and then guide via `edgeone-pages-dev` skill.
8. **Confirm destructive operations before running** (removing unused modules, deleting locale files, rewriting config). Show the plan, then proceed after user says go.

---

## Main Flow

### Step 1 — Gate question: does the user have a Prompt?

**This is mandatory and happens FIRST.** Use the IDE's question UI (e.g. `ask_followup_question`) to ask:

> 开始之前先问一下：你有没有自己准备好的 Prompt / 产品描述？
>
> - **有** — 贴进来，我会据此定位品牌 / 功能 / 配色 / 文案
> - **没有** — 我会用内置问答引导你，问几个关键问题
> - **完全默认** — 直接按模板默认（AI 图片生成 SaaS，紫色主题，中英双语）落地，后续再改

Branch:
- User provides a Prompt → **read `references/user-prompt-intake.md` § "Prompt 解析"** and extract a structured spec
- User chooses the questionnaire → **read `references/user-prompt-intake.md` § "内置问答"** and run through the questions
- User chooses default → skip intake, use default spec in `references/user-prompt-intake.md` § "默认规格"

Output of this step: a **Spec object** with at least the following fields:
```
{
  productName, tagline, industry,
  primaryColorHSL, accentColorHSL,
  features: { auth, credits, aiImage, blog, admin, cms, i18n },
  locales: [...],
  adminEmails: [...]
}
```

Show the Spec back to the user and ask for confirmation before moving on.

---

### Step 2 — Scaffold the project

Read **`references/template-setup.md`** and follow it to:
1. Pick a project directory name (from Spec.productName, kebab-case)
2. Run `npx degit TencentEdgeOne/saas-starter <dir>`
3. `cd <dir>` and install dependencies (`npm install` / `pnpm install` / `yarn`)
4. Verify the directory tree matches the expected layout

Do **not** run any build yet.

---

### Step 3 — Apply customizations

Read **`references/customization.md`** and apply edits based on the Spec:

| Spec field | Target file(s) |
|------------|----------------|
| productName, tagline | `src/app/layout.tsx` (metadata), `src/components/layout/Header.tsx`, `dictionaries/en-US.json`, `dictionaries/zh-CN.json` |
| primaryColorHSL, accentColorHSL | `src/app/globals.css` (`:root` block — `--primary`, `--primary-dark`, `--accent`, `--accent-dark`) |
| features.auth = false | (rare) remove `/auth` routes, strip Supabase; **warn the user this breaks credits/admin** |
| features.credits = false | remove credits UI, simplify DB schema from `database_init.sql` |
| features.aiImage = false | remove `src/app/ai/`, remove `@ai-sdk/*` deps from `package.json`, remove `FAL_API_KEY` / `FIREWORKS_API_KEY` from env |
| features.blog = false | remove `src/app/blog/`, `content/blog/` |
| features.admin = false | remove `src/app/admin/`, remove `ADMIN_EMAILS` env |
| features.cms = false | remove `cms/contentful/`, Contentful deps, `contentful:export` script, CMS env vars |
| features.i18n (locales) | prune `dictionaries/` to requested locales |

**Apply edits one module at a time and report progress.** If a destructive change has downstream impact (e.g. removing auth kills credits), call it out and ask for confirmation.

---

### Step 4 — Environment variables

Read **`references/env-setup.md`** and:
1. Copy `.env.example` → `.env.local`
2. Based on the enabled features, produce a **filtered env list** (only keys the user actually needs)
3. For each required key, either:
   - Ask the user to paste the value, or
   - Guide them to the provider's dashboard and wait
4. Write the collected values into `.env.local`
5. Remind: **never commit `.env.local`**

Optional Supabase schema step: if `features.auth` or `features.credits` is on, point the user to `database_init.sql` and the Supabase SQL Editor (one-paragraph summary is enough — this skill doesn't manage DB execution).

---

### Step 5 — Local verification

Run (or tell the user to run):

```bash
npm run dev     # starts Next.js on http://localhost:3000

From TencentEdgeOne/awesome-website-prompts-and-skills, MIT.

More from TencentEdgeOne/awesome-website-prompts-and-skills