Back to Details

frontend-polish

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

Frontend Polish

前端优化打磨

Make the AI-generated frontend production-ready: loading states, error handling, and responsive fixes.
This skill is called by the 
vibe-ship
orchestrator. Framework-agnostic — applies to both Next.js and Vite/React.
让AI生成的前端达到生产就绪状态：加载状态、错误处理和响应式修复。
该技能由
vibe-ship
编排器调用。与框架无关——适用于Next.js和Vite/React。

1. Apply design best practices

1. 应用设计最佳实践

Invoke 
frontend-design
for visual quality guidance before making any changes.
在进行任何修改之前，调用
frontend-design
获取视觉质量指导。

2. Add loading states

2. 添加加载状态

Scan every component that fetches data. For each one missing a loading state:
Next.js — create a 
loading.tsx
file next to the 
page.tsx
:
typescript
// app/dashboard/loading.tsx
export default function Loading() {
  return <div className="animate-pulse h-8 bg-gray-200 rounded" />
}
Vite/React — add a loading conditional before the main return:
typescript
const [loading, setLoading] = useState(true)
// set loading to false after data fetch completes

if (loading) return <div className="animate-pulse h-8 bg-gray-200 rounded" />
扫描所有获取数据的组件。对于每个缺少加载状态的组件：
Next.js — 在
page.tsx
旁创建
loading.tsx
文件：
typescript
// app/dashboard/loading.tsx
export default function Loading() {
  return <div className="animate-pulse h-8 bg-gray-200 rounded" />
}
Vite/React — 在主return语句前添加加载状态判断：
typescript
const [loading, setLoading] = useState(true)
// 数据获取完成后将loading设为false

if (loading) return <div className="animate-pulse h-8 bg-gray-200 rounded" />

3. Add error boundaries

3. 添加错误边界

Next.js — create an 
error.tsx
file next to any 
page.tsx
that fetches data:
typescript
'use client'
export default function Error({ error, reset }: { error: Error; reset: () => void }) {
  return (
    <div>
      <p>Something went wrong.</p>
      <button onClick={reset}>Try again</button>
    </div>
  )
}
Vite/React — wrap top-level routes with 
react-error-boundary
:
Install if not present: 
npm install react-error-boundary
typescript
import { ErrorBoundary } from 'react-error-boundary'

function FallbackUI({ resetErrorBoundary }: { resetErrorBoundary: () => void }) {
  return (
    <div>
      <p>Something went wrong.</p>
      <button onClick={resetErrorBoundary}>Try again</button>
    </div>
  )
}

// Wrap your routes:
// <ErrorBoundary FallbackComponent={FallbackUI}><YourRoute /></ErrorBoundary>
Next.js — 在任何获取数据的
page.tsx
旁创建
error.tsx
文件：
typescript
'use client'
export default function Error({ error, reset }: { error: Error; reset: () => void }) {
  return (
    <div>
      <p>出现错误。</p>
      <button onClick={reset}>重试</button>
    </div>
  )
}
Vite/React — 使用
react-error-boundary
包裹顶级路由：
若未安装则执行：
npm install react-error-boundary
typescript
import { ErrorBoundary } from 'react-error-boundary'

function FallbackUI({ resetErrorBoundary }: { resetErrorBoundary: () => void }) {
  return (
    <div>
      <p>出现错误。</p>
      <button onClick={resetErrorBoundary}>重试</button>
    </div>
  )
}

// 包裹你的路由：
// <ErrorBoundary FallbackComponent={FallbackUI}><YourRoute /></ErrorBoundary>

4. Check page titles and meta tags

4. 检查页面标题和元标签

Next.js — ensure every 
page.tsx
exports a metadata object:
typescript
export const metadata = { title: 'Page Title | App Name' }
Vite/React — open 
index.html
and confirm:
  • <title>
    is set to the app name (not the default "Vite App")
  • <meta name="description" content="...">
    exists
Next.js — 确保每个
page.tsx
都导出metadata对象：
typescript
export const metadata = { title: '页面标题 | 应用名称' }
Vite/React — 打开
index.html
并确认：
  • <title>
    已设置为应用名称（而非默认的"Vite App"）
  • <meta name="description" content="...">
    已存在

5. Quick responsive audit

5. 快速响应式检查

In the browser, open each main page at 375px width (iPhone SE size — use DevTools device toolbar). Flag and fix any of:
  • Text overflowing its container
  • Buttons too small to tap (less than 44px height)
  • Horizontal scroll appearing unexpectedly
Fix using Tailwind responsive prefixes (
sm:
, 
md:
) or CSS media queries.
在浏览器中，打开每个主页面并将宽度设为375px（iPhone SE尺寸——使用开发者工具的设备工具栏）。标记并修复以下问题：
  • 文本溢出容器
  • 按钮过小无法点击（高度小于44px）
  • 意外出现水平滚动条
使用Tailwind响应式前缀（
sm:
、
md:
）或CSS媒体查询进行修复。

6. Validate

6. 验证

Ask the user to:
  1. Run 
    npm run dev
  2. Throttle network to "Slow 3G" in DevTools → confirm loading states appear before content
  3. Open each main page at 375px width → confirm no overflow or scroll issues
Report: "✓ Frontend polished. Loading states, error boundaries, and responsive layout confirmed."
请用户执行以下操作：
  1. 运行
    npm run dev
  2. 在开发者工具中将网络限速为"Slow 3G" → 确认加载状态在内容显示前出现
  3. 将每个主页面宽度设为375px → 确认无溢出或滚动问题
报告："✓ 前端已优化完成。加载状态、错误边界和响应式布局已确认正常。"