Agent skill

Pg 207 SaaS Homepage

PG-207 SaaS 首页重设计（Stores First）执行指南。将 SaaS 首页从商品市场转型为店铺托管平台展示页。触发词："执行 PG-207", "SaaS 首页", "Stores First", "首页重设计", "saas homepage".

MPL-2.0Auto-check passedFrontend & Design

Install Pg 207 SaaS Homepage

skills CLI

$ npx skills add mobazha/mobazha-unified --skill pg-207-saas-homepage -a claude-code

Project install by default; add -g for ~/.claude/skills/.

GitHub CLI

$ gh skill install mobazha/mobazha-unified pg-207-saas-homepage --agent claude-code

Project scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).

Manual copy

$ git clone --depth 1 https://github.com/mobazha/mobazha-unified.git skills-src && mkdir -p .claude/skills && cp -r skills-src/.cursor/skills/pg-207-saas-homepage .claude/skills/pg-207-saas-homepage && rm -rf skills-src

Use ~/.claude/skills/ instead of .claude/skills for a personal install. The folder must contain SKILL.md.

Claude Code skills documentation · loads skills from .claude/skills/

Paste into Claude Code

Install the "pg-207-saas-homepage" agent skill from https://github.com/mobazha/mobazha-unified/tree/main/.cursor/skills/pg-207-saas-homepage into .claude/skills/pg-207-saas-homepage/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "pg-207-saas-homepage", then confirm the skill loads.

Claude Code copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.

$skill-installer

$skill-installer install https://github.com/mobazha/mobazha-unified/tree/main/.cursor/skills/pg-207-saas-homepage

Type this inside Codex. $skill-installer <name> installs a curated skill from openai/skills. The installer writes to $CODEX_HOME/skills (default ~/.codex/skills). Restart Codex if the skill does not show up.

skills CLI

$ npx skills add mobazha/mobazha-unified --skill pg-207-saas-homepage -a codex

Project install goes to .agents/skills/; add -g for ~/.codex/skills/.

GitHub CLI

$ gh skill install mobazha/mobazha-unified pg-207-saas-homepage --agent codex

Project scope by default (.agents/skills/); add --scope user for a personal install.

Manual copy

$ git clone --depth 1 https://github.com/mobazha/mobazha-unified.git skills-src && mkdir -p .agents/skills && cp -r skills-src/.cursor/skills/pg-207-saas-homepage .agents/skills/pg-207-saas-homepage && rm -rf skills-src

Use ~/.agents/skills/ instead of .agents/skills for a personal install.

Codex skills documentation · loads skills from .agents/skills/

Paste into Codex

Install the "pg-207-saas-homepage" agent skill from https://github.com/mobazha/mobazha-unified/tree/main/.cursor/skills/pg-207-saas-homepage into .agents/skills/pg-207-saas-homepage/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "pg-207-saas-homepage", then confirm the skill loads.

Codex copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.

skills CLI

$ npx skills add mobazha/mobazha-unified --skill pg-207-saas-homepage -a cursor

Project install goes to .agents/skills/; add -g for ~/.cursor/skills/.

GitHub CLI

$ gh skill install mobazha/mobazha-unified pg-207-saas-homepage --agent cursor

Project scope by default (.agents/skills/); add --scope user for a personal install.

Manual copy

$ git clone --depth 1 https://github.com/mobazha/mobazha-unified.git skills-src && mkdir -p .cursor/skills && cp -r skills-src/.cursor/skills/pg-207-saas-homepage .cursor/skills/pg-207-saas-homepage && rm -rf skills-src

Use ~/.cursor/skills/ instead of .cursor/skills for a personal install.

Cursor skills documentation · loads skills from .cursor/skills/, .agents/skills/, .claude/skills/, .codex/skills/

Paste into Cursor

Install the "pg-207-saas-homepage" agent skill from https://github.com/mobazha/mobazha-unified/tree/main/.cursor/skills/pg-207-saas-homepage into .cursor/skills/pg-207-saas-homepage/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "pg-207-saas-homepage", then confirm the skill loads.

Cursor copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.

gemini skills install

$ gemini skills install https://github.com/mobazha/mobazha-unified.git --path .cursor/skills/pg-207-saas-homepage

--scope user (default) or --scope workspace; --path is the subfolder of the repo that holds the skill; --consent skips the security confirmation prompt.

skills CLI

$ npx skills add mobazha/mobazha-unified --skill pg-207-saas-homepage -a gemini-cli

Project install goes to .agents/skills/; add -g for ~/.gemini/skills/.

GitHub CLI

$ gh skill install mobazha/mobazha-unified pg-207-saas-homepage --agent gemini-cli

Project scope by default (.agents/skills/); add --scope user for a personal install.

Manual copy

$ git clone --depth 1 https://github.com/mobazha/mobazha-unified.git skills-src && mkdir -p .gemini/skills && cp -r skills-src/.cursor/skills/pg-207-saas-homepage .gemini/skills/pg-207-saas-homepage && rm -rf skills-src

Use ~/.gemini/skills/ instead of .gemini/skills for a personal install, then run /skills reload.

Gemini CLI skills documentation · loads skills from .gemini/skills/, .agents/skills/

Paste into Gemini CLI

Install the "pg-207-saas-homepage" agent skill from https://github.com/mobazha/mobazha-unified/tree/main/.cursor/skills/pg-207-saas-homepage into .gemini/skills/pg-207-saas-homepage/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "pg-207-saas-homepage", then confirm the skill loads.

Gemini CLI copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.

GitHub CLI

$ gh skill install mobazha/mobazha-unified pg-207-saas-homepage

Installs for Copilot at project scope by default; add --scope user for a personal install. Preview a skill first with gh skill preview. Needs GitHub CLI 2.90.0 or later (public preview).

skills CLI

$ npx skills add mobazha/mobazha-unified --skill pg-207-saas-homepage -a github-copilot

Project install goes to .agents/skills/; add -g for ~/.copilot/skills/.

Manual copy

$ git clone --depth 1 https://github.com/mobazha/mobazha-unified.git skills-src && mkdir -p .github/skills && cp -r skills-src/.cursor/skills/pg-207-saas-homepage .github/skills/pg-207-saas-homepage && rm -rf skills-src

Use ~/.copilot/skills/ instead of .github/skills for a personal install. Commit .github/skills so cloud agent and code review can use it.

GitHub Copilot skills documentation · loads skills from .github/skills/, .claude/skills/, .agents/skills/

Paste into GitHub Copilot

Install the "pg-207-saas-homepage" agent skill from https://github.com/mobazha/mobazha-unified/tree/main/.cursor/skills/pg-207-saas-homepage into .github/skills/pg-207-saas-homepage/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "pg-207-saas-homepage", then confirm the skill loads.

GitHub Copilot copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.

skills CLI

$ npx skills add mobazha/mobazha-unified --skill pg-207-saas-homepage -a opencode

OpenCode documents no install command of its own. Project install goes to .agents/skills/; add -g for ~/.config/opencode/skills/.

GitHub CLI

$ gh skill install mobazha/mobazha-unified pg-207-saas-homepage --agent opencode

Project scope by default (.agents/skills/); add --scope user for a personal install.

Manual copy

$ git clone --depth 1 https://github.com/mobazha/mobazha-unified.git skills-src && mkdir -p .opencode/skills && cp -r skills-src/.cursor/skills/pg-207-saas-homepage .opencode/skills/pg-207-saas-homepage && rm -rf skills-src

Use ~/.config/opencode/skills/ instead of .opencode/skills for a personal install.

OpenCode skills documentation · loads skills from .opencode/skills/, .claude/skills/, .agents/skills/

Paste into OpenCode

Install the "pg-207-saas-homepage" agent skill from https://github.com/mobazha/mobazha-unified/tree/main/.cursor/skills/pg-207-saas-homepage into .opencode/skills/pg-207-saas-homepage/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "pg-207-saas-homepage", then confirm the skill loads.

OpenCode copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.

Facts

Skill name: pg-207-saas-homepage
GitHub stars: 165
Token cost: ~1.5k tokens
SKILL.md length: 416 words
Files: 1
Skills in repo: 29
Repo updated: Oct 3, 2026
First seen: Oct 7, 2026
Licence: MPL-2.0

At a glance

Works in 5 steps: 数据层准备 → 新建 SaaSHome 组件 → 重构 Hero → …
Frontend & Design work in your project
SKILL.md covers 执行前检查, 核心设计决策（速查）, Step 1: 数据层准备 and Step 2: 新建 SaaSHome 组件, plus 4 more sections
Calls pnpm

What it does

Pg 207 SaaS Homepage is an agent skill from mobazha/mobazha-unified. PG-207 SaaS 首页重设计（Stores First）执行指南。将 SaaS 首页从商品市场转型为店铺托管平台展示页。触发词："执行 PG-207", "SaaS 首页", "Stores First", "首页重设计", "saas homepage".

Its SKILL.md is about 1.5k tokens, which your agent loads only when the skill is triggered. It is a single SKILL.md file with no bundled scripts.

It sits in Frontend & Design. The repository describes itself as: Open-source commerce frontend for storefronts, marketplaces, checkout, and seller management. The licence is MPL-2.0.

When your agent uses it

Frontend & Design work in your project

Example prompts

“执行 PG-207”
“SaaS 首页”
“Stores First”
“/pg-207-saas-homepage”

Workflow steps

5 steps, taken from the step headings in SKILL.md.

数据层准备
新建 SaaSHome 组件
重构 Hero
重构 page.tsx
测试 & 打磨

What it can do on your machine

Read from SKILL.md and the folder at commit 156c699. It shows what the files ask for, not the result of running them.

Tool permissions
Pre-approves nothing: there is no allowed-tools line, so your agent's usual permission prompts apply.
From allowed-tools in the SKILL.md frontmatter.
Runs code
Shell commands in SKILL.md call:
- pnpm
From the folder's file list and the shell code blocks in SKILL.md.
Network
No URLs in SKILL.md. Its commands use pnpm, which can reach the network depending on how they are called.
From URLs in SKILL.md, links to its own repository left out.
Credentials
Names no API keys, tokens, secrets or passwords.
From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.

Context cost

Pg 207 SaaS Homepage loads about 1.5k tokens when it runs. Until then it costs about 38 tokens; SKILL.md has 416 words of instructions outside code blocks.

Always · name and description, kept in context so the agent knows when to use it: ~38
When it runs · the whole SKILL.md, loaded when a task matches: ~1.5k

Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.

Safety

Auto-check passed

The automated check found no risky patterns in SKILL.md.

Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); files beside SKILL.md are not scanned.

SKILL.md

The full file from mobazha/mobazha-unified at commit 156c699, republished under its MPL-2.0 licence (© mobazha). 416 words, ~1,455 tokens.

Download SKILL.mdSave it as .claude/skills/pg-207-saas-homepage/SKILL.md (or your agent's skills folder).

name: pg-207-saas-homepage
description: PG-207 SaaS 首页重设计（Stores First）执行指南。将 SaaS 首页从商品市场转型为店铺托管平台展示页。触发词："执行 PG-207", "SaaS 首页", "Stores First", "首页重设计", "saas homepage".

PG-207: SaaS 首页重设计 — Stores First

设计文档：docs/SAAS_HOMEPAGE_DESIGN.md（权威来源，实施前必须先读） 触发词："执行 PG-207"、"SaaS 首页"、"Stores First" 前置条件：PG-201（店铺品牌化）✅、PG-202（AI Store Builder）✅

执行前检查

读取 docs/SAAS_HOMEPAGE_DESIGN.md — 完整设计方案
读取 docs/PROFESSIONAL_GRADE_ROADMAP.md Section 4.7 — Tier 2 进度
确认当前分支状态（建议新建 feature/pg-207-saas-homepage）
告知用户将要执行的 Step 和预估工作量

核心设计决策（速查）

主受众：潜在卖家（非买家），首页是平台能力展示页
信息漏斗：Why（Hero + Value Props）→ What（Featured Stores）→ Proof（Activity + Stats）
Hero 三态：匿名 / 已登录卖家 / 已登录买家
精选店铺：品牌化案例展示（利用 PG-201 品牌色/header image），非购物发现
Network Activity：最新商品带店铺归属（from {storeName}），无数据时隐藏
仅影响 SaaS 分支：独立站首页（isStandalone()）不受影响

Step 1: 数据层准备

1.1 新增 API 函数

在 packages/core/services/api/products.ts 中新增：

typescript

export async function getFeaturedStores(): Promise<SearchedUser[]> {
  const result = await searchProfiles({ query: '*', pageSize: 20 });
  return result.results
    .map(user => ({ ...user, score: computeStoreScore(user) }))
    .sort((a, b) => b.score - a.score)
    .slice(0, 6);
}

export async function getLatestProducts(limit = 12) {
  // 调用 SEARCH_API.LISTINGS_FRESH(limit)
}

排序公式（设计文档 Section 4.2）：

typescript

function computeStoreScore(user: SearchedUser): number {
  const activityScore = user.listingCount * 0.3 + user.reviewCount * 0.2;
  const qualityScore = user.rating * 0.2;
  const brandScore =
    (user.avatar ? 1 : 0) * 0.1 +
    (user.shortDescription ? 1 : 0) * 0.1 +
    (user.listingCount > 0 ? 1 : 0) * 0.1;
  return activityScore + qualityScore + brandScore;
}

1.2 新增 dataService 方法

在 packages/core/services/dataService.ts 中新增对应方法。

1.3 新增 i18n keys

在 packages/core/i18n/locales/en.ts 和 zh.ts 中新增 saasHome 命名空间。完整 key 列表见设计文档 Section 4.3。关键命名空间：

saasHome.hero.* — 三态标题/副标题/CTA
saasHome.valueProps.* — 4 个差异化卖点
saasHome.featuredStores.* — 精选店铺标题/空态/少量态
saasHome.networkActivity.* — 网络活跃度标题 + fromStore
saasHome.stats.* — 平台统计

验收

getFeaturedStores() 返回按 score 排序的店铺列表
getLatestProducts() 调用正确的 SEARCH_API
i18n keys 在 en.ts 和 zh.ts 中完整
pnpm build 无类型错误

Step 2: 新建 SaaSHome 组件

统一目录：apps/web/src/components/SaaSHome/

2.1 StoreCard.tsx — 品牌化橱窗卡片

关键设计（利用 PG-201 品牌化能力）：

卡片顶部：headerHashes 展示 header image，无则用 --store-primary 渐变
Avatar 叠在 header 底部
店铺名 + shortDescription（截断 2 行）+ 评分 + 商品数
"Visit Store →" 按钮使用店铺品牌色
暗色模式下品牌色对比度检查

2.2 FeaturedStoresSection.tsx — 精选店铺

按店铺数量的展示策略（设计文档 Section 3.2）：

0 个：隐藏或 "Be the first" + CTA
1-2 个：单行横排 + "Join the growing network"
3-5 个：自适应 Grid（移动端横向滚动 snap）
6+ 个：3 列 Grid + "View All Stores →"

包含骨架屏加载态。

2.3 ValuePropsSection.tsx — Web3 差异化卖点

4 个卡片 grid（2×2 或 4×1）：

Buyer Protection / Own Your Data / Zero Platform Fees / Crypto Native
图标 + 标题 + 简短描述

2.4 PlatformStatsSection.tsx — 平台统计

3 列：Active Stores / Products Listed / Chains Supported
数据来源：searchProfiles({ query: '*', pageSize: 1 }) 获取 total 字段
暗色背景区域，与 Footer 衔接
数字使用骨架屏加载态

2.5 index.ts — barrel export

验收

所有组件在 SaaS 模式下渲染正常
StoreCard 展示品牌色/header image
FeaturedStoresSection 正确处理 0/1-2/3-5/6+ 店铺态
骨架屏加载态可见
暗色模式下所有组件正常

Step 3: 重构 Hero

修改 apps/web/src/components/Hero/Hero.tsx。

Show full SKILL.md (166 more words)Show less

三态实现

判断逻辑：

typescript

const { user } = useAuth(); // 或相应的认证 hook
const isAnonymous = !user;
const isSeller = user && user.hasSeller; // 根据实际字段判断
const isBuyer = user && !user.hasSeller;

匿名态：营销文案 + "Create Your Store" + "Explore Stores ↓"
卖家态：欢迎回来 + "Go to Dashboard" + "View Your Store"（高度缩减）
买家态：同匿名布局 + "Start Selling" + "Browse Stores ↓"

移动端简化

标题 1 行，1 主 CTA + 文字链接次 CTA
统计数据移到 PlatformStatsSection，不在 Hero 内
高度不超过 1 屏 60%

验收

三态切换正确（可通过登录/退出测试）
移动端 Hero 紧凑，不超过视口 60%
"Explore Stores ↓" 锚点滚动到 #featured-stores

Step 4: 重构 page.tsx

修改 apps/web/src/app/page.tsx SaaS 分支。

目标结构

tsx

{!standalone && (
  <>
    <Hero />
    <ValuePropsSection />
    <FeaturedStoresSection />
    <ProductSection
      title={t('saasHome.networkActivity.title')}
      showStoreName
      ...
    />
    <PlatformStatsSection />
  </>
)}

删除

placeholderProducts（mock 数据）
categories 硬编码数组
SaaS 分支中的 Trending / Featured / Categories 区域

保留

独立站分支完全不变
Header / Footer 不变

数据缓存

使用 React Query / SWR，staleTime 5 分钟：

typescript

const { data: stores } = useQuery({
  queryKey: ['featured-stores'],
  queryFn: getFeaturedStores,
  staleTime: 5 * 60 * 1000,
});

验收

SaaS 首页按 Why → What → Proof 顺序展示
无 mock 数据、无硬编码统计
独立站首页不受影响（isStandalone() 验证）
pnpm build 通过

Step 5: 测试 & 打磨

必测场景

场景	预期
SaaS 匿名访客	营销 Hero + 全部 Section
SaaS 已登录卖家	欢迎回来 + Dashboard CTA
SaaS 已登录买家	Start Selling CTA
0 个店铺	FeaturedStores 隐藏或 "Be the first"
1-2 个店铺	单行 + 鼓励文案
6+ 个店铺	3 列 Grid + View All
0 个商品	Network Activity 隐藏
移动端 375px	Hero 紧凑 + 横向滚动
暗色模式	所有组件正常
独立站模式	完全不受影响

运行

bash

pnpm build          # 构建无错
pnpm lint           # lint 通过
pnpm test           # 现有测试不破坏

完成后更新

docs/PROFESSIONAL_GRADE_ROADMAP.md — PG-207 状态 ⏳ → ✅ + 日期
docs/SAAS_HOMEPAGE_DESIGN.md — 记录实施中的偏差（如有）
提交：按 Step 拆分 commit，每个 Step 一个 commit

Files

Just SKILL.md in .cursor/skills/pg-207-saas-homepage of mobazha/mobazha-unified.

Open the folder on GitHubat commit 156c699

Compare with similar skills

Pg 207 SaaS Homepage next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.

Pg 207 SaaS Homepage compared with similar skills
Skill	Stars	Used in	Tokens	Auto-check	Licence	Repo updated
Pg 207 SaaS Homepage this skillmobazha/mobazha-unified	165	—	~1.5k	Automated safety check: Pass	MPL-2.0	7 days ago
Web Artifacts Builderanthropics/skills	180k	40 repos	~769	Automated safety check: Pass	Apache-2.0	yesterday
React Doctormakeplane/plane	61k	12 repos	~657	Automated safety check: Pass	AGPL-3.0	yesterday
Impeccablebestofjs/bestofjs	3.1k	26 repos	~2.6k	Automated safety check: Pass	MIT	6 days ago
Figma Design System Builderwarpdotdev/warp	65k	2 repos	~4.4k	Automated safety check: Pass	AGPL-3.0	today
Web Interface Guidelines Reviewervercel-labs/openreview	1.7k	97 repos	~308	Automated safety check: Pass	None	7 mo ago

Similar skills

Web Artifacts Builder
anthropics/skills
Official
Builds multi-component claude.ai HTML artifacts as a small React, TypeScript and Tailwind project, then bundles it into one shareable HTML file.
180k GitHub starsUsed in 40 repos~769 tokens
Frontend & DesignAuto-check passed
React Doctor
makeplane/plane
Scans React code for lint, accessibility, bundle size and architecture issues, reports a health score and checks that changes do not lower it.
61k GitHub starsUsed in 12 repos~657 tokens
Frontend & DesignAuto-check passed
Impeccable
bestofjs/bestofjs
A skill your agent uses when the user wants to design, redesign, shape, critique, audit, polish, clarify, distill, harden, optimize, adapt, animate, colorize, extract, or otherwise improve a…
3.1k GitHub starsUsed in 26 repos~2.6k tokens
Frontend & DesignAuto-check passed
Figma Design System Builder
warpdotdev/warp
Builds or updates a design system in Figma from a codebase in ordered phases: discovery, variables and tokens, components, theming and documentation, with checkpoints.
65k GitHub starsUsed in 2 repos~4.4k tokens
Frontend & DesignAuto-check passed
Web Interface Guidelines Reviewer
vercel-labs/openreview
Official
Review UI code for Web Interface Guidelines compliance. Use when asked to "review my UI", "check accessibility", "audit design", "review UX", or "check my…
1.7k GitHub starsUsed in 97 repos~308 tokens
Frontend & DesignAuto-check passed
Tailwindcss Development
anonaddy/anonaddy
Always invoke when the user's message includes 'tailwind' in any form.
4.9k GitHub starsUsed in 10 repos~865 tokens
Frontend & DesignAuto-check passed

Questions about Pg 207 SaaS Homepage

What does Pg 207 SaaS Homepage do?

PG-207 SaaS 首页重设计（Stores First）执行指南。将 SaaS 首页从商品市场转型为店铺托管平台展示页。触发词："执行 PG-207", "SaaS 首页", "Stores First", "首页重设计", "saas homepage". Pg 207 SaaS Homepage is an agent skill from mobazha/mobazha-unified. PG-207 SaaS 首页重设计（Stores First）执行指南。将 SaaS 首页从商品市场转型为店铺托管平台展示页。触发词："执行 PG-207", "SaaS 首页", "Stores First", "首页重设计", "saas homepage".

When should I use Pg 207 SaaS Homepage?

Pg 207 SaaS Homepage fits situations like: frontend & Design work in your project.

How do I install Pg 207 SaaS Homepage in Claude Code?

Run `npx skills add mobazha/mobazha-unified --skill pg-207-saas-homepage -a claude-code`. Or copy the skill folder (.cursor/skills/pg-207-saas-homepage in mobazha/mobazha-unified) into .claude/skills/pg-207-saas-homepage in your project. Claude Code loads it when a task matches its description.

How do I install Pg 207 SaaS Homepage in Codex?

Run `npx skills add mobazha/mobazha-unified --skill pg-207-saas-homepage -a codex`. Or copy the skill folder (.cursor/skills/pg-207-saas-homepage in mobazha/mobazha-unified) into .agents/skills/pg-207-saas-homepage in your project. Codex loads it when a task matches its description.

Can I use Pg 207 SaaS Homepage in Cursor, Gemini CLI or GitHub Copilot?

Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add mobazha/mobazha-unified --skill pg-207-saas-homepage -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/pg-207-saas-homepage, .gemini/skills/pg-207-saas-homepage, .github/skills/pg-207-saas-homepage and .opencode/skills/pg-207-saas-homepage in your project.

What does Pg 207 SaaS Homepage need to run?

Going by SKILL.md and its folder, Pg 207 SaaS Homepage needs the command-line tools its instructions call (pnpm).

Does Pg 207 SaaS Homepage access the network?

SKILL.md contains no URLs. Any network use would come from the scripts or tools the agent runs. This is read from the text; nothing was executed.

Is Pg 207 SaaS Homepage safe to install?

Our automated static check of SKILL.md found no risky patterns, such as piping downloads into a shell, reading credential files or hidden Unicode. It is not a guarantee. Review the folder before installing.

What licence does Pg 207 SaaS Homepage use?

Pg 207 SaaS Homepage is published under the MPL-2.0 licence (the repository's licence). It allows redistribution, so the full SKILL.md is shown on this page.

How many tokens does Pg 207 SaaS Homepage use?

About 1.5k tokens (SKILL.md is roughly 5.8k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full.

What are the alternatives to Pg 207 SaaS Homepage?

Skills that share tags, products or a category with Pg 207 SaaS Homepage: Web Artifacts Builder (anthropics/skills, 180k stars), React Doctor (makeplane/plane, 61k stars), Impeccable (bestofjs/bestofjs, 3.1k stars) and Figma Design System Builder (warpdotdev/warp, 65k stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains Pg 207 SaaS Homepage?

mobazha (a GitHub organization) maintains it in mobazha/mobazha-unified, which has 165 GitHub stars. The repository holds 29 skills in this directory. The repository was last updated on October 3, 2026.

Source: mobazha/mobazha-unified on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.

Install Pg 207 SaaS Homepage

Facts

At a glance

What it does

When your agent uses it

Example prompts

Workflow steps

What it can do on your machine

Tool permissions

Runs code

Network

Credentials

Context cost

Safety

SKILL.md

PG-207: SaaS 首页重设计 — Stores First

执行前检查

核心设计决策（速查）

Step 1: 数据层准备

1.1 新增 API 函数

1.2 新增 dataService 方法

1.3 新增 i18n keys

验收

Step 2: 新建 SaaSHome 组件

2.1 StoreCard.tsx — 品牌化橱窗卡片

2.2 FeaturedStoresSection.tsx — 精选店铺

2.3 ValuePropsSection.tsx — Web3 差异化卖点

2.4 PlatformStatsSection.tsx — 平台统计

2.5 index.ts — barrel export

验收

Step 3: 重构 Hero

三态实现

移动端简化

验收

Step 4: 重构 page.tsx

目标结构

删除

保留

数据缓存

验收

Step 5: 测试 & 打磨

必测场景

运行

完成后更新

Files

Compare with similar skills

Similar skills

More from mobazha/mobazha-unified

Related

Questions about Pg 207 SaaS Homepage