letsgo

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

<progress_context> Use Read tool:

docs/progress.md

(first 50 lines)

Check what's been done recently — ensures nothing is missed before shipping. </progress_context>

<progress_context> 使用Read工具：

docs/progress.md

（前50行）

查看近期已完成的工作——确保上线前没有遗漏任何事项。 </progress_context>

Letsgo Workflow

Letsgo 工作流

Prepare a codebase for production. Generates a tailored checklist based on project detection and user input—not a generic one-size-fits-all list.

为生产环境准备代码库。基于项目检测结果和用户输入生成定制化检查清单——而非通用的一刀切清单。

Process

流程

Step 1: Project Detection

步骤1：项目检测

Scan the codebase to understand what's present. Look for:

Detection signals:
├── Framework: package.json (next, remix, astro, etc.)
├── Auth: auth libraries, OAuth config, session handling
├── Payments: stripe, paddle, lemon-squeezy
├── Email: resend, sendgrid, postmark, nodemailer
├── Database: prisma, drizzle, supabase, planetscale
├── Analytics: GA, mixpanel, posthog, plausible
├── i18n: next-intl, i18next, locale files
├── CMS: sanity, contentful, payload
├── File uploads: uploadthing, cloudinary, S3 config
└── Existing meta: robots.txt, sitemap, og images

Report findings:

markdown

undefined

扫描代码库以了解现有内容。检测方向包括：

Detection signals:
├── Framework: package.json (next, remix, astro, etc.)
├── Auth: auth libraries, OAuth config, session handling
├── Payments: stripe, paddle, lemon-squeezy
├── Email: resend, sendgrid, postmark, nodemailer
├── Database: prisma, drizzle, supabase, planetscale
├── Analytics: GA, mixpanel, posthog, plausible
├── i18n: next-intl, i18next, locale files
├── CMS: sanity, contentful, payload
├── File uploads: uploadthing, cloudinary, S3 config
└── Existing meta: robots.txt, sitemap, og images

检测结果报告示例：

markdown

undefined

Project Detection

项目检测

Framework: Next.js 14 (App Router) Detected features:

✓ Authentication (NextAuth with Google, GitHub providers)
✓ Payments (Stripe)
✓ Database (Prisma + PostgreSQL)
✓ Email (Resend)
✗ i18n (not detected)
✗ Analytics (not configured)

Existing production config:

✓ robots.txt present
✗ sitemap.xml missing
✗ Site verification meta tags missing

undefined

框架： Next.js 14（App Router） 已检测功能：

✓ 身份验证（NextAuth 集成 Google、GitHub 提供商）
✓ 支付功能（Stripe）
✓ 数据库（Prisma + PostgreSQL）
✓ 邮件服务（Resend）
✗ 国际化（未检测到）
✗ 数据分析（未配置）

现有生产配置：

✓ 存在 robots.txt
✗ 缺少 sitemap.xml
✗ 缺少站点验证元标签

undefined

Step 2: Scope Questions

步骤2：范围确认问题

Ask the user to fill gaps detection can't cover:

markdown

**Questions to scope your checklist:**

1. **Target platforms for site verification?**
   - [ ] Google Search Console
   - [ ] Bing Webmaster Tools
   - [ ] Pinterest
   - [ ] Twitter/X
   - [ ] Facebook/Meta
   - [ ] Yandex
   - [ ] Other: ___

2. **Social sharing requirements?**
   - [ ] Need OG images for all pages
   - [ ] Twitter Cards (summary vs large image)
   - [ ] LinkedIn sharing
   - [ ] Pinterest Rich Pins

3. **Email sending from custom domain?**
   - [ ] Yes (need SPF/DKIM/DMARC DNS records)
   - [ ] No (using provider's domain)

4. **Compliance requirements?**
   - [ ] GDPR (EU users)
   - [ ] CCPA (California)
   - [ ] Cookie consent banner
   - [ ] Accessibility (WCAG 2.1)

5. **Launch type?**
   - [ ] Soft launch (limited audience)
   - [ ] Public launch (SEO, marketing)
   - [ ] Migration (redirects needed)

询问用户以填补检测无法覆盖的信息空白：

markdown

**用于确定检查清单范围的问题：**

1. **站点验证的目标平台？**
   - [ ] Google Search Console
   - [ ] Bing Webmaster Tools
   - [ ] Pinterest
   - [ ] Twitter/X
   - [ ] Facebook/Meta
   - [ ] Yandex
   - [ ] 其他：___

2. **社交分享需求？**
   - [ ] 所有页面需要OG图片
   - [ ] Twitter卡片（摘要式 vs 大图式）
   - [ ] LinkedIn分享支持
   - [ ] Pinterest富媒体Pin

3. **使用自定义域名发送邮件？**
   - [ ] 是（需要配置SPF/DKIM/DMARC DNS记录）
   - [ ] 否（使用服务商域名）

4. **合规性要求？**
   - [ ] GDPR（针对欧盟用户）
   - [ ] CCPA（针对加州用户）
   - [ ] Cookie同意横幅
   - [ ] 无障碍访问（WCAG 2.1）

5. **发布类型？**
   - [ ] 软发布（限制访问受众）
   - [ ] 公开发布（需SEO、营销支持）
   - [ ] 迁移（需要配置重定向）

Step 3: Generate Tailored Checklist

步骤3：生成定制化检查清单

Based on detection + user input, generate ONLY relevant sections:

基于检测结果+用户输入，仅生成相关部分：

Checklist Categories

检查清单分类

A. Domain & Hosting (Always)

A. 域名与托管（必选）

B. Site Verification (If user selected platforms)

B. 站点验证（若用户选择了对应平台）

html

<!-- Google Search Console -->
<meta name="google-site-verification" content="..." />

<!-- Bing Webmaster -->
<meta name="msvalidate.01" content="..." />

<!-- Pinterest -->
<meta name="p:domain_verify" content="..." />

<!-- Twitter/X (for analytics, not cards) -->
<meta name="twitter:site:id" content="..." />

<!-- Facebook/Meta domain verification -->
<meta name="facebook-domain-verification" content="..." />

<!-- Yandex -->
<meta name="yandex-verification" content="..." />

Checklist:

Google Search Console verified (HTML tag or DNS)
Sitemap submitted to Google Search Console
Bing Webmaster Tools verified
Pinterest site claimed
Facebook domain verified (for ads/insights)
Twitter/X analytics connected

html

<!-- Google Search Console -->
<meta name="google-site-verification" content="..." />

<!-- Bing Webmaster -->
<meta name="msvalidate.01" content="..." />

<!-- Pinterest -->
<meta name="p:domain_verify" content="..." />

<!-- Twitter/X (用于分析，非卡片) -->
<meta name="twitter:site:id" content="..." />

<!-- Facebook/Meta域名验证 -->
<meta name="facebook-domain-verification" content="..." />

<!-- Yandex -->
<meta name="yandex-verification" content="..." />

检查清单：

Google Search Console已验证（通过HTML标签或DNS）
站点地图已提交至Google Search Console
Bing Webmaster Tools已验证
Pinterest站点已认领
Facebook域名已验证（用于广告/数据分析）
Twitter/X分析已关联

C. SEO & Meta (Always for public sites)

C. SEO与元数据（公开发布站点必选）

Reference:
${CLAUDE_PLUGIN_ROOT}/rules/seo.md
for full SEO rules.

```
<html lang="...">
```
attribute set
```
<meta name="viewport">
```
present
Page titles set (unique, <60 chars per page)
Meta descriptions written (unique, <160 chars per page)
Single
```
<h1>
```
per page, logical heading hierarchy
Canonical URLs set (avoid duplicate content)
Images have meaningful
```
alt
```
text
No
```
noindex
```
on production marketing pages (check for Vercel preview leftover)
Clean URL structure (no UUIDs, no query params for content)
robots.txt configured and not blocking marketing pages
sitemap.xml generated and submitted
Structured data / JSON-LD (if applicable)
Rich Results Test passing

For a comprehensive SEO audit, run
/arc:seo
.

参考：
${CLAUDE_PLUGIN_ROOT}/rules/seo.md
获取完整SEO规则。

已设置
```
<html lang="...">
```
属性
存在
```
<meta name="viewport">
```
标签
已设置页面标题（唯一，每页不超过60字符）
已撰写元描述（唯一，每页不超过160字符）
每页仅有一个
```
<h1>
```
标签，标题层级逻辑清晰
已设置规范URL（避免重复内容）
图片包含有意义的
```
alt
```
文本
生产环境营销页面无
```
noindex
```
标签（检查是否残留Vercel预览环境标签）
URL结构清晰（无UUID、无内容相关的查询参数）
robots.txt已配置且未屏蔽营销页面
sitemap.xml已生成并提交
已配置结构化数据/JSON-LD（如适用）
富媒体结果测试通过

如需全面SEO审计，运行
/arc:seo
。

D. Social Sharing / Open Graph

D. 社交分享/Open Graph

og:title, og:description, og:image set
og:image is 1200x630px (optimal for all platforms)
Twitter Card meta tags (twitter:card, twitter:title, etc.)
Twitter Card type chosen (summary vs summary_large_image)
Validated with real tools:

Next.js OG Image Generation (Recommended for Next.js projects):

Offer to set up dynamic OG images using Next.js built-in

ImageResponse

typescript

// app/og/route.tsx - Dynamic OG image generation
import { ImageResponse } from 'next/og'

export async function GET(request: Request) {
  const { searchParams } = new URL(request.url)
  const title = searchParams.get('title') ?? 'Default Title'

  return new ImageResponse(
    (
      <div style={{ /* your design */ }}>
        <h1>{title}</h1>
      </div>
    ),
    { width: 1200, height: 630 }
  )
}

Then reference in metadata:

typescript

// app/layout.tsx or page.tsx
export const metadata: Metadata = {
  openGraph: {
    images: ['/og?title=Your+Page+Title'],
  },
}

⚠️ OG Image Design Quality:

OG images are often the first impression of your product. Avoid:

PowerPoint-style slides with generic gradients
Stock photo backgrounds with overlaid text
Default template looks (Canva templates, etc.)
Tiny unreadable text
Generic "hero image + title" layouts

Use
/arc:design
to create distinctive OG image designs that match your brand and stand out in social feeds. The OG image should feel like part of your product, not an afterthought.

Good OG images have:

Clear visual hierarchy (title readable at thumbnail size)
Brand colors and typography
Memorable visual element or illustration
Consistent style across all pages

已设置og:title、og:description、og:image
og:image尺寸为1200x630px（适配所有平台的最优尺寸）
已配置Twitter Card元标签（twitter:card、twitter:title等）
已选择Twitter Card类型（摘要式 vs 摘要大图式）
使用真实工具验证：

Next.js OG图片生成（Next.js项目推荐）：

可协助使用Next.js内置的

ImageResponse

设置动态OG图片：

typescript

// app/og/route.tsx - 动态OG图片生成
import { ImageResponse } from 'next/og'

export async function GET(request: Request) {
  const { searchParams } = new URL(request.url)
  const title = searchParams.get('title') ?? 'Default Title'

  return new ImageResponse(
    (
      <div style={{ /* your design */ }}>
        <h1>{title}</h1>
      </div>
    ),
    { width: 1200, height: 630 }
  )
}

然后在元数据中引用：

typescript

// app/layout.tsx 或 page.tsx
export const metadata: Metadata = {
  openGraph: {
    images: ['/og?title=Your+Page+Title'],
  },
}

⚠️ OG图片设计质量注意事项：

OG图片通常是产品给用户的第一印象，需避免：

带有通用渐变的PPT风格幻灯片
叠加文字的库存照片背景
默认模板外观（如Canva模板等）
过小且无法阅读的文字
通用的"英雄图+标题"布局

使用
/arc:design
创建独特的OG图片设计，使其匹配品牌风格并在社交信息流中脱颖而出。OG图片应作为产品的一部分，而非事后补充。

优质OG图片的特点：

清晰的视觉层级（标题在缩略图尺寸下仍可读）
品牌色彩与字体
令人难忘的视觉元素或插图
所有页面风格一致

E. Favicons & App Icons

E. 网站图标与应用图标

favicon.ico (16x16, 32x32)
apple-touch-icon.png (180x180)
android-chrome icons (192x192, 512x512)
site.webmanifest (if PWA)
Theme color meta tag

Next.js Metadata API (Recommended for Next.js projects):

Next.js can auto-generate favicons from a single source. Offer to set up:

app/
├── icon.tsx          # Dynamic favicon (uses ImageResponse)
├── icon.png          # Or static favicon (auto-detected)
├── apple-icon.png    # Apple touch icon (auto-detected)
└── opengraph-image.tsx  # Dynamic OG image per route

Example dynamic favicon:

typescript

// app/icon.tsx
import { ImageResponse } from 'next/og'

export const size = { width: 32, height: 32 }
export const contentType = 'image/png'

export default function Icon() {
  return new ImageResponse(
    (
      <div style={{
        fontSize: 24,
        background: '#000',
        color: '#fff',
        width: '100%',
        height: '100%',
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'center',
        borderRadius: 4,
      }}>
        A
      </div>
    ),
    { ...size }
  )
}

⚠️ Favicon Design Quality:

Favicons appear in browser tabs, bookmarks, and home screens. Avoid:

Just shrinking your full logo (unreadable at 16px)
Generic letter in a colored square
Too much detail that becomes muddy

Use
/arc:design
for favicon concepts if you don't have a dedicated icon mark. Good favicons:

Work at 16x16, 32x32, and 180x180 (apple-touch-icon)
Use a simplified version of your brand mark
Are recognizable in a sea of browser tabs
Have sufficient contrast on both light and dark browser chrome

favicon.ico（16x16、32x32）
apple-touch-icon.png（180x180）
android-chrome图标（192x192、512x512）
site.webmanifest（若为PWA）
已设置主题颜色元标签

Next.js元数据API（Next.js项目推荐）：

Next.js可从单个源文件自动生成网站图标。可协助设置：

app/
├── icon.tsx          # 动态网站图标（使用ImageResponse）
├── icon.png          # 或静态网站图标（自动检测）
├── apple-icon.png    # Apple触摸图标（自动检测）
└── opengraph-image.tsx  # 按路由生成动态OG图片

动态网站图标示例：

typescript

// app/icon.tsx
import { ImageResponse } from 'next/og'

export const size = { width: 32, height: 32 }
export const contentType = 'image/png'

export default function Icon() {
  return new ImageResponse(
    (
      <div style={{
        fontSize: 24,
        background: '#000',
        color: '#fff',
        width: '100%',
        height: '100%',
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'center',
        borderRadius: 4,
      }}>
        A
      </div>
    ),
    { ...size }
  )
}

⚠️ 网站图标设计质量注意事项：

网站图标出现在浏览器标签、书签和主屏幕上，需避免：

直接缩小完整logo（16px尺寸下无法辨认）
彩色方块中的通用字母
过于复杂导致模糊的细节

若没有专用图标，使用
/arc:design
获取网站图标设计方案。优质网站图标：

在16x16、32x32和180x180（apple-touch-icon）尺寸下均清晰可读
使用品牌标识的简化版本
在众多浏览器标签中易于识别
在浅色和深色浏览器界面上均有足够对比度

F. Performance (Always)

F. 性能优化（必选）

Images optimized (next/image, srcset, WebP/AVIF)
Fonts optimized (display: swap, preload critical)
Font rendering classes on body (see below)
Bundle size reasonable (check with
```
next build
```
output)
No console errors in production build
Core Web Vitals passing (LCP, FID, CLS)
Lighthouse score acceptable (aim for 90+)

Font Rendering & Body Classes:

Ensure the

<body>

has proper font rendering classes for crisp text:

tsx

// Tailwind CSS
<body className="antialiased">

// Or with more control:
<body className="antialiased text-base leading-relaxed text-foreground bg-background">

If not using Tailwind, add equivalent CSS:

css

body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

Additional body-level considerations:

```
antialiased
```
class applied (smoother fonts on macOS/iOS)
Base text color set (not relying on browser default black)
Base background color set (prevents flash of white)
```
overflow-x-hidden
```
on html/body if using full-bleed sections
```
scroll-behavior: smooth
```
if desired (or Tailwind
```
scroll-smooth
```
)
```
min-h-screen
```
on body/main for proper footer positioning

If React/Next.js and
vercel-react-best-practices
skill available:

Invoke skill: vercel-react-best-practices
"Review performance patterns. Check: component rendering, data fetching, bundle optimization"

If React Native/Expo and
vercel-react-native-skills
skill available:

Invoke skill: vercel-react-native-skills
"Review React Native production readiness. Check: list performance, animation optimization, memory leaks, native module usage, Expo config"

图片已优化（使用next/image、srcset、WebP/AVIF格式）
字体已优化（设置display: swap、预加载关键字体）
已为body添加字体渲染类（见下文）
包大小合理（查看
```
next build
```
输出结果）
生产构建中无控制台错误
Core Web Vitals指标达标（LCP、FID、CLS）
Lighthouse分数达标（目标90+）

字体渲染与Body类：

确保

<body>

标签添加了合适的字体渲染类以实现清晰文本：

tsx

// Tailwind CSS
<body className="antialiased">

// 或更精细的控制：
<body className="antialiased text-base leading-relaxed text-foreground bg-background">

若未使用Tailwind，添加等效CSS：

css

body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

额外的body层级注意事项：

已应用
```
antialiased
```
类（在macOS/iOS上实现更平滑的字体）
已设置基础文本颜色（不依赖浏览器默认黑色）
已设置基础背景颜色（避免白屏闪烁）
若使用全屏宽度区块，为html/body添加
```
overflow-x-hidden
```
若需要，添加
```
scroll-behavior: smooth
```
（或Tailwind的
```
scroll-smooth
```
）
为body/main添加
```
min-h-screen
```
以确保页脚定位正确

若React/Next.js项目且
vercel-react-best-practices
技能可用：

调用技能：vercel-react-best-practices
"审查性能模式。检查：组件渲染、数据获取、包优化"

若React Native/Expo项目且
vercel-react-native-skills
技能可用：

调用技能：vercel-react-native-skills
"审查React Native生产就绪情况。检查：列表性能、动画优化、内存泄漏、原生模块使用、Expo配置"

G. Security (Always)

G. 安全（必选）

No secrets in client-side code (check bundle)
HTTPS enforced (automatic on Vercel)
Environment variables not prefixed with NEXT_PUBLIC_ unless intended
Auth tokens stored securely (httpOnly cookies)
CORS configured for production origins only
```
pnpm audit
```
shows no critical vulnerabilities

If handling sensitive data:

CSP headers configured
Rate limiting on auth/API endpoints
Input validation / sanitization

客户端代码中无敏感信息（检查包内容）
已强制启用HTTPS（Vercel自动配置）
环境变量仅在需要时才添加NEXT_PUBLIC_前缀
Auth令牌存储安全（使用httpOnly cookies）
CORS仅配置为允许生产环境源
```
pnpm audit
```
无严重漏洞

若处理敏感数据：

已配置CSP头
已对Auth/API端点设置速率限制
已实现输入验证/清理

H. Email Deliverability (If sending email)

H. 邮件送达率（若发送邮件）

I. Payments (If Stripe/payments detected)

I. 支付功能（若检测到Stripe/支付功能）

J. Database (If database detected)

J. 数据库（若检测到数据库）

K. Auth (If auth detected)

K. 身份验证（若检测到Auth功能）

L. Legal & Compliance (Based on user input)

L. 法律与合规性（基于用户输入）

Required Documents:

Privacy Policy — Required if collecting ANY data (analytics, cookies, forms, auth)
- What data is collected
- How it's used and stored
- Third parties it's shared with
- User rights (access, deletion, portability)
- Contact information for data requests
Terms of Service — Recommended for any app/SaaS
- Acceptable use policy
- Liability limitations
- Dispute resolution
- Account termination conditions
Cookie Policy — Required if using cookies (often part of Privacy Policy)
- Types of cookies used (essential, analytics, marketing)
- Purpose of each cookie
- How to opt out

Cookie Consent:

Cookie consent banner implemented
Consent recorded before non-essential cookies set
"Reject All" option available (GDPR requirement)
Preferences can be changed after initial choice
Analytics/tracking only fires AFTER consent

GDPR Compliance (if EU users):

Legal basis for data processing documented
Data export mechanism (user can download their data)
Data deletion mechanism (user can request deletion)
Data processing agreements with third parties
Privacy policy includes EU-specific rights

Accessibility:

Accessibility statement page (if WCAG compliance needed)
Contact method for accessibility issues

If legal documents are missing, offer to generate them:

Invoke skill: /arc:legal
"Generate Privacy Policy, Terms of Service, and Cookie Policy for this project"

This will detect data collection, gather business info, and create template pages.

必填文档：

隐私政策——若收集任何数据（分析、Cookie、表单、Auth）则必填
- 收集的数据类型
- 数据的使用与存储方式
- 共享数据的第三方
- 用户权利（访问、删除、可移植性）
- 数据请求的联系信息
服务条款——任何应用/SaaS均推荐配置
- 可接受使用政策
- 责任限制
- 争议解决
- 账户终止条件
Cookie政策——若使用Cookie则必填（通常包含在隐私政策中）
- 使用的Cookie类型（必要、分析、营销）
- 每个Cookie的用途
- 如何选择退出

Cookie同意：

已实现Cookie同意横幅
在设置非必要Cookie前已记录用户同意
提供"全部拒绝"选项（GDPR要求）
用户可在初始选择后更改偏好
分析/跟踪仅在获得同意后启动

GDPR合规性（针对欧盟用户）：

已记录数据处理的法律依据
已实现数据导出机制（用户可下载其数据）
已实现数据删除机制（用户可请求删除数据）
已与第三方签订数据处理协议
隐私政策包含欧盟特定权利

无障碍访问：

无障碍访问声明页面（若需要符合WCAG标准）
无障碍问题的联系方法

若缺少法律文档，可协助生成：

调用技能：/arc:legal
"为该项目生成隐私政策、服务条款和Cookie政策"

该技能会检测数据收集情况、收集业务信息并生成模板页面。

M. Analytics & Tracking (If user wants)

M. 分析与跟踪（若用户需要）

Analytics provider configured (GA4, Plausible, PostHog, etc.)
Privacy-respecting settings (IP anonymization, etc.)
Conversion tracking set up (if applicable)
Events/goals configured

已配置分析服务商（GA4、Plausible、PostHog等）
已设置隐私友好的配置（如IP匿名化等）
已设置转化跟踪（如适用）
已配置事件/目标

N. Error Handling & Monitoring

N. 错误处理与监控

O. Quality (Always)

O. 代码质量（必选）

All tests passing
No TypeScript errors (
```
pnpm tsc --noEmit
```
)
No lint errors (
```
pnpm biome check .
```
or eslint)
```
/arc:audit --hygiene
```
run (no code artifacts)
Placeholder content replaced
Lorem ipsum removed

所有测试通过
无TypeScript错误（
```
pnpm tsc --noEmit
```
）
无代码规范错误（
```
pnpm biome check .
```
或eslint）
已运行
```
/arc:audit --hygiene
```
（无代码遗留物）
占位符内容已替换
已移除Lorem ipsum文本

P. Branding Consistency (Always)

P. 品牌一致性（必选）

Audit all brand touchpoints for consistency:

Logo usage:

Correct logo version used everywhere (not outdated versions)
Logo appears in correct sizes (not stretched/distorted)
Logo has proper spacing/clearance
Dark mode logo variant used where needed
Favicon matches current logo

Brand name casing:

Product name cased consistently everywhere
Check: page titles, meta tags, footer, emails, error messages
Third-party brand names correctly cased (see common mistakes below)

Common brand casing mistakes to check:

WRONG          → CORRECT
Github         → GitHub
Javascript     → JavaScript
Typescript     → TypeScript
NextJS/Nextjs  → Next.js
NodeJS/Nodejs  → Node.js
VSCode         → VS Code
MacOS          → macOS
iOS (correct)  → iOS (not IOS)
PostgreSQL     → PostgreSQL (not Postgres in formal contexts)
MongoDB        → MongoDB (not Mongo in formal contexts)
LinkedIn       → LinkedIn (not Linkedin)
YouTube        → YouTube (not Youtube)
PayPal         → PayPal (not Paypal)

Grep for inconsistencies:

bash

undefined

审计所有品牌接触点的一致性：

Logo使用：

所有位置使用正确的logo版本（非过时版本）
Logo尺寸正确（无拉伸/变形）
Logo有适当的间距/留白
在需要的地方使用深色模式logo变体
网站图标与当前logo匹配

品牌名称大小写：

产品名称在所有位置大小写一致
检查：页面标题、元标签、页脚、邮件、错误信息
第三方品牌名称大小写正确（见下方常见错误）

需检查的常见品牌大小写错误：

错误写法       → 正确写法
Github         → GitHub
Javascript     → JavaScript
Typescript     → TypeScript
NextJS/Nextjs  → Next.js
NodeJS/Nodejs  → Node.js
VSCode         → VS Code
MacOS          → macOS
iOS (正确)      → iOS (非IOS)
PostgreSQL     → PostgreSQL (正式场合不使用Postgres)
MongoDB        → MongoDB (正式场合不使用Mongo)
LinkedIn       → LinkedIn (非Linkedin)
YouTube        → YouTube (非Youtube)
PayPal         → PayPal (非Paypal)

查找不一致写法：

bash

undefined

Find potential casing issues (case-insensitive search, then review)

查找潜在大小写问题（不区分大小写搜索，然后人工审核）


**Brand colors:**
- [ ] Primary brand colors used consistently
- [ ] Colors defined in one place (CSS variables, Tailwind config)
- [ ] No hardcoded hex values that should use brand tokens

**Typography:**
- [ ] Brand fonts loaded and applied
- [ ] Font weights consistent with brand guidelines
- [ ] No system font fallbacks visible where brand fonts expected

**Voice & messaging:**
- [ ] Tagline consistent across touchpoints
- [ ] Product descriptions match (homepage, meta, social)
- [ ] CTA button text consistent ("Get Started" vs "Start Now" vs "Sign Up")

**Ask user:** "What is the exact casing for your product name? (e.g., 'MyApp', 'myApp', 'MYAPP')"

Then grep the codebase for variations and fix any inconsistencies.


**品牌色彩：**
- [ ] 主品牌色彩使用一致
- [ ] 色彩在单一位置定义（CSS变量、Tailwind配置）
- [ ] 没有应使用品牌令牌的硬编码十六进制值

**排版：**
- [ ] 已加载并应用品牌字体
- [ ] 字体粗细与品牌指南一致
- [ ] 品牌字体应出现的位置没有显示系统字体回退

**语气与信息传递：**
- [ ] 标语在所有接触点一致
- [ ] 产品描述一致（首页、元数据、社交平台）
- [ ] CTA按钮文本一致（如"Get Started" vs "Start Now" vs "Sign Up"）

**询问用户：** "你的产品名称的正确大小写格式是什么？（例如：'MyApp'、'myApp'、'MYAPP'）"

然后在代码库中查找变体并修复所有不一致之处。

Q. Redirects (If migration)

Q. 重定向（若为迁移场景）

Old URLs mapped to new URLs
301 redirects configured in vercel.json or middleware
www vs non-www canonical decided
HTTP → HTTPS redirects (automatic on Vercel)

已将旧URL映射到新URL
已在vercel.json或中间件中配置301重定向
已确定www与非www的规范域名
HTTP→HTTPS重定向（Vercel自动配置）

R. Pre-Launch Testing

R. 上线前测试

Responsive audit completed (
```
/arc:responsive
```
if not done already)
Test on real mobile device (not just DevTools)
Test in incognito/private browsing
Test critical user flows end-to-end
Test with slow network (DevTools throttling)
Check print styles (if applicable)

已完成响应式审计（若未完成，运行
```
/arc:responsive
```
）
在真实移动设备上测试（而非仅使用DevTools）
在隐身/隐私浏览模式下测试
端到端测试关键用户流程
在慢速网络下测试（使用DevTools节流）
检查打印样式（如适用）

S. UI Polish (Always)

S. UI细节优化（必选）

No layout shift on dynamic content (hardcoded dimensions,
```
tabular-nums
```
, no font-weight changes on hover)
Animations have
```
prefers-reduced-motion
```
support
Touch targets are 44px minimum
Hover effects gated behind
```
@media (hover: hover)
```
Keyboard navigation works (tab order, focus trap in modals, arrow keys in lists)
Icon-only buttons have
```
aria-label
```
Forms submit with Enter; textareas with ⌘/Ctrl+Enter
Inputs are
```
text-base
```
(16px+) to prevent iOS zoom
No
```
transition: all
```
— specify exact properties
z-index uses fixed scale or
```
isolation: isolate
```
No flash on refresh for interactive state (tabs, theme, toggles)
Destructive actions require confirmation (
```
AlertDialog
```
, not
```
confirm()
```
)

Reference:
${CLAUDE_PLUGIN_ROOT}/rules/interface/
for detailed rules on each item.

动态内容无布局偏移（使用硬编码尺寸、
```
tabular-nums
```
、hover时不改变字体粗细）
动画支持
```
prefers-reduced-motion
```
触摸目标最小尺寸为44px
悬停效果仅在
```
@media (hover: hover)
```
下生效
键盘导航正常（Tab顺序、模态框焦点陷阱、列表支持方向键）
纯图标按钮带有
```
aria-label
```
表单可按Enter提交；文本域可按⌘/Ctrl+Enter提交
输入框为
```
text-base
```
（16px+）以防止iOS缩放
不使用
```
transition: all
```
——指定确切属性
z-index使用固定比例或
```
isolation: isolate
```
交互状态（标签页、主题、切换）刷新时无闪烁
破坏性操作需要确认（使用
```
AlertDialog
```
，而非
```
confirm()
```
）

参考：
${CLAUDE_PLUGIN_ROOT}/rules/interface/
获取每个项的详细规则。

Step 4: Address Gaps

步骤4：填补空白

For each unchecked item relevant to this project:

Explain what's needed and why
Offer to implement or provide step-by-step instructions
Provide code snippets where helpful

对于项目相关的每个未勾选项：

说明需要做什么及原因
提供实现方案或分步指导
必要时提供代码片段

Step 5: Final Verification

步骤5：最终验证

bash

undefined

bash

undefined

Build production

构建生产版本

pnpm build

Run tests

运行测试

pnpm test

Check for issues

检查问题

pnpm tsc --noEmit pnpm biome check .

Check bundle for secrets (manual review)

检查包中是否包含敏感信息（人工审核）

Look for API keys, tokens, passwords in build output

在构建输出中查找API密钥、令牌、密码

undefined

undefined

Step 6: Ship

步骤6：上线

If all relevant checks pass:

bash

undefined

若所有相关检查项均通过：

bash

undefined

Deploy via Vercel CLI

通过Vercel CLI部署

vercel --prod

Or via git (if Vercel GitHub integration set up)

或通过git（若已配置Vercel GitHub集成）

git push origin main


**If `vercel:deploy` skill is available:**

Invoke skill: vercel:deploy

This handles the deployment workflow with proper verification.

<tasklist_update>
If follow-up work is identified, use **TaskCreate**:
- **subject:** Brief imperative title
- **description:** What needs to be done and why
- **activeForm:** Present continuous form
</tasklist_update>

<arc_log>
**After completing this skill, append to the activity log.**
See: `${CLAUDE_PLUGIN_ROOT}/references/arc-log.md`

Entry: `/arc:letsgo — [Deployed to URL / Checklist complete]`
</arc_log>

<success_criteria>
Letsgo is complete when:
- [ ] Project detected and checklist tailored
- [ ] All relevant checklist items addressed or deferred with reason
- [ ] Critical items resolved (no blockers remaining)
- [ ] Production build succeeds
- [ ] Deployed to production (or ready to deploy)
- [ ] Incomplete items added to tasklist (if any)
- [ ] Progress journal updated
</success_criteria>

git push origin main


**若`vercel:deploy`技能可用：**

调用技能：vercel:deploy

该技能会处理部署工作流并进行适当验证。

<tasklist_update>
若发现后续工作，使用**TaskCreate**创建任务：
- **subject：** 简短的命令式标题
- **description：** 需要完成的工作及原因
- **activeForm：** 呈现持续表单
</tasklist_update>

<arc_log>
**完成该技能后，将条目添加到活动日志。**
查看：`${CLAUDE_PLUGIN_ROOT}/references/arc-log.md`

条目：`/arc:letsgo — [已部署到URL / 检查清单完成]`
</arc_log>

<success_criteria>
Letsgo工作流完成的标准：
- [ ] 已完成项目检测并生成定制化检查清单
- [ ] 所有相关检查项已处理或已说明延期原因
- [ ] 关键问题已解决（无剩余阻塞项）
- [ ] 生产构建成功
- [ ] 已部署到生产环境（或准备就绪）
- [ ] 未完成项已添加到任务列表（如有）
- [ ] 进度日志已更新
</success_criteria>

Interop

互操作性

Runs /arc:testing as part of quality check
Runs /arc:audit --hygiene as part of quality check (code artifact detection)
References /arc:vision to verify alignment
Invokes /arc:legal to generate missing legal documents
Can invoke vercel-react-best-practices skill for performance review (if available)
Can invoke vercel-react-native-skills skill for React Native performance review (if available)
Can invoke vercel:deploy skill for deployment (if available)

作为质量检查的一部分运行**/arc:testing**
作为质量检查的一部分运行**/arc:audit --hygiene**（检测代码遗留物）
参考**/arc:vision**验证一致性
调用**/arc:legal**生成缺失的法律文档
若可用，可调用vercel-react-best-practices技能进行性能审查
若可用，可调用vercel-react-native-skills技能进行React Native性能审查
若可用，可调用vercel:deploy技能进行部署 ",