fix-onboarding

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

/fix-onboarding

Fix the highest priority onboarding issue.

修复优先级最高的新用户引导问题。

What This Does

功能说明

Invoke
```
/check-onboarding
```
to audit new user experience
Identify highest priority issue
Fix that one issue
Verify the fix
Report what was done

This is a fixer. It fixes one issue at a time. Run again for next issue.

调用/check-onboarding来审核新用户体验
识别优先级最高的问题
修复该问题
验证修复效果
报告处理内容

这是一个修复工具。它每次仅修复一个问题。如需处理下一个问题，请再次运行。

Process

操作流程

1. Run Primitive

1. 运行基础工具

Invoke

/check-onboarding

skill to get prioritized findings.

调用/check-onboarding技能以获取按优先级排序的问题列表。

2. Fix Priority Order

2. 修复优先级顺序

Fix in this order:

P0: No onboarding flow, broken auth, paywall before value
P1: No empty states, no guidance, complex forms, no loading
P2: No progressive disclosure, no tooltips, no tour
P3: Retention hooks

按照以下顺序修复：

P0：无引导流程、认证功能故障、提供价值前设置付费墙
P1：无空状态提示、无操作指引、表单复杂、无加载状态
P2：无渐进式信息披露、无提示框、无引导Tour
P3：用户留存钩子

3. Execute Fix

3. 执行修复

No onboarding flow (P0): Create

app/onboarding/page.tsx

tsx

export default function OnboardingPage() {
  return (
    <div className="min-h-screen flex items-center justify-center">
      <div className="max-w-md text-center">
        <h1 className="text-3xl font-bold mb-4">Welcome! 👋</h1>
        <p className="text-gray-600 mb-8">
          Let's get you started with your first [thing].
        </p>
        <a
          href="/create"
          className="bg-primary text-white px-6 py-3 rounded-lg"
        >
          Create your first [thing]
        </a>
      </div>
    </div>
  );
}

Add redirect for new users:

tsx

// middleware.ts or layout check
const isNewUser = !user.hasCompletedOnboarding;
if (isNewUser) redirect('/onboarding');

No empty states (P1): Create

components/empty-state.tsx

tsx

export function EmptyState({
  title,
  description,
  action,
  actionHref,
}: {
  title: string;
  description: string;
  action: string;
  actionHref: string;
}) {
  return (
    <div className="text-center py-12">
      <div className="text-6xl mb-4">📭</div>
      <h3 className="text-xl font-semibold mb-2">{title}</h3>
      <p className="text-gray-600 mb-6">{description}</p>
      <a href={actionHref} className="bg-primary text-white px-4 py-2 rounded">
        {action}
      </a>
    </div>
  );
}

Use in lists:

tsx

{items.length === 0 ? (
  <EmptyState
    title="No projects yet"
    description="Create your first project to get started"
    action="Create Project"
    actionHref="/projects/new"
  />
) : (
  <ItemsList items={items} />
)}

No first-action guidance (P1): Add inline hints:

tsx

<div className="bg-blue-50 border border-blue-200 rounded-lg p-4 mb-4">
  <p className="text-blue-800">
    💡 <strong>Quick tip:</strong> Start by creating your first project.
    It only takes 30 seconds!
  </p>
</div>

Complex initial forms (P1): Simplify to essential fields only:

tsx

// Before: 10 required fields
// After: 2 required fields + "You can add more details later"

<form>
  <input name="name" required placeholder="Project name" />
  <button type="submit">Create</button>
  <p className="text-sm text-gray-500">
    You can add more details later
  </p>
</form>

No loading states (P1): Add skeleton component:

tsx

export function Skeleton({ className }: { className?: string }) {
  return (
    <div className={`animate-pulse bg-gray-200 rounded ${className}`} />
  );
}

// Usage
{isLoading ? (
  <div className="space-y-4">
    <Skeleton className="h-8 w-full" />
    <Skeleton className="h-8 w-full" />
    <Skeleton className="h-8 w-full" />
  </div>
) : (
  <ItemsList items={items} />
)}

无引导流程（P0）： 创建

app/onboarding/page.tsx

tsx

export default function OnboardingPage() {
  return (
    <div className="min-h-screen flex items-center justify-center">
      <div className="max-w-md text-center">
        <h1 className="text-3xl font-bold mb-4">欢迎！👋</h1>
        <p className="text-gray-600 mb-8">
          让我们开始创建你的第一个[内容]吧。
        </p>
        <a
          href="/create"
          className="bg-primary text-white px-6 py-3 rounded-lg"
        >
          创建你的第一个[内容]
        </a>
      </div>
    </div>
  );
}

添加新用户重定向：

tsx

// middleware.ts or layout check
const isNewUser = !user.hasCompletedOnboarding;
if (isNewUser) redirect('/onboarding');

无空状态提示（P1）： 创建

components/empty-state.tsx

tsx

export function EmptyState({
  title,
  description,
  action,
  actionHref,
}: {
  title: string;
  description: string;
  action: string;
  actionHref: string;
}) {
  return (
    <div className="text-center py-12">
      <div className="text-6xl mb-4">📭</div>
      <h3 className="text-xl font-semibold mb-2">{title}</h3>
      <p className="text-gray-600 mb-6">{description}</p>
      <a href={actionHref} className="bg-primary text-white px-4 py-2 rounded">
        {action}
      </a>
    </div>
  );
}

在列表中使用：

tsx

{items.length === 0 ? (
  <EmptyState
    title="还没有项目"
    description="创建你的第一个项目开始吧"
    action="创建项目"
    actionHref="/projects/new"
  />
) : (
  <ItemsList items={items} />
)}

无首次操作指引（P1）： 添加内联提示：

tsx

<div className="bg-blue-50 border border-blue-200 rounded-lg p-4 mb-4">
  <p className="text-blue-800">
    💡 <strong>快速提示：</strong> 从创建你的第一个项目开始吧，只需要30秒！
  </p>
</div>

复杂初始表单（P1）： 简化为仅保留必要字段：

tsx

// 之前：10个必填字段
// 之后：2个必填字段 + "你可以稍后补充更多细节"

<form>
  <input name="name" required placeholder="项目名称" />
  <button type="submit">创建</button>
  <p className="text-sm text-gray-500">
    你可以稍后补充更多细节
  </p>
</form>

无加载状态（P1）： 添加骨架屏组件：

tsx

export function Skeleton({ className }: { className?: string }) {
  return (
    <div className={`animate-pulse bg-gray-200 rounded ${className}`} />
  );
}

// 使用示例
{isLoading ? (
  <div className="space-y-4">
    <Skeleton className="h-8 w-full" />
    <Skeleton className="h-8 w-full" />
    <Skeleton className="h-8 w-full" />
  </div>
) : (
  <ItemsList items={items} />
)}

4. Verify

4. 验证

After fix:

bash

undefined

修复完成后：

bash

undefined

New user gets onboarding

新用户会进入引导流程

Test: Create new account, verify redirect

测试：创建新账号，验证重定向是否生效

Empty state shows

空状态正常显示

Test: Clear user data, check list renders empty state

测试：清空用户数据，检查列表是否渲染空状态

Loading state shows

加载状态正常显示

Test: Throttle network, verify skeleton visible

测试：限制网络速度，验证骨架屏是否可见

undefined

undefined

5. Report

5. 报告

Fixed: [P0] No onboarding flow

Created:
- app/onboarding/page.tsx (welcome screen)
- middleware.ts update (new user redirect)
- components/onboarding-complete-button.tsx

Flow:
1. New user signs up
2. Redirected to /onboarding
3. Single CTA to first action
4. Marked complete on first creation

Next highest priority: [P1] No empty states
Run /fix-onboarding again to continue.

已修复：[P0] 无引导流程

创建的文件：
- app/onboarding/page.tsx（欢迎页面）
- middleware.ts 更新（新用户重定向）
- components/onboarding-complete-button.tsx

流程说明：
1. 新用户注册
2. 重定向至/onboarding
3. 单一行动召唤按钮引导首次操作
4. 完成首次创建后标记引导流程结束

下一个最高优先级问题：[P1] 无空状态提示
再次运行/fix-onboarding以继续修复。

Branching

分支管理

Before making changes:

bash

git checkout -b feat/onboarding-$(date +%Y%m%d)

进行修改前：

bash

git checkout -b feat/onboarding-$(date +%Y%m%d)

Single-Issue Focus

单问题聚焦

Onboarding has many moving parts. Fix incrementally:

Test each change with real new users
Measure activation rate changes
Easy to A/B test variations

Run

/fix-onboarding

repeatedly to improve activation.

新用户引导包含多个环节，应逐步修复：

每个修改都要通过真实新用户测试
跟踪激活率变化
便于进行A/B测试对比不同版本

重复运行/fix-onboarding以持续提升用户激活率。

fix-onboarding

Original

Translation

/fix-onboarding

/fix-onboarding

What This Does

功能说明

Process

操作流程

1. Run Primitive

1. 运行基础工具

2. Fix Priority Order

2. 修复优先级顺序

3. Execute Fix

3. 执行修复

4. Verify

4. 验证

New user gets onboarding

新用户会进入引导流程

Test: Create new account, verify redirect

测试：创建新账号，验证重定向是否生效

Empty state shows

空状态正常显示

Test: Clear user data, check list renders empty state

测试：清空用户数据，检查列表是否渲染空状态

Loading state shows

加载状态正常显示

Test: Throttle network, verify skeleton visible

测试：限制网络速度，验证骨架屏是否可见

5. Report

5. 报告

Branching

分支管理

Single-Issue Focus

单问题聚焦

Related

相关工具