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.

1. Apply design best practices

Invoke frontend-design for visual quality guidance before making any changes.

2. Add loading states

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:

// 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:

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" />

3. Add error boundaries

Next.js — create an error.tsx file next to any page.tsx that fetches data:

'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

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>

4. Check page titles and meta tags

Next.js — ensure every page.tsx exports a metadata object:

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

5. Quick responsive audit

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.

6. Validate

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.”