Final Polish

The big design work is done. Now we add the finishing touches — the details that separate a project from a product.

Favicon and page title

"Add a proper page title and favicon. Set the page title to 'Todo App' and the meta description to 'A clean, focused task manager.' Create a simple favicon — use an SVG favicon with a checkmark icon in our primary color."

💡Info

Next.js App Router handles metadata through a metadata export in your layout or page. Claude Code knows this convention and will set it up correctly.

// In app/layout.tsx
export const metadata = {
  title: 'Todo App',
  description: 'A clean, focused task manager.',
  icons: {
    icon: '/favicon.svg',
  },
}

Loading states

When the app first loads, there might be a brief moment before the todos appear. A loading skeleton looks much better than an empty screen:

"Add a loading skeleton for the todo list. When todos are loading, show 3-4 animated placeholder rows that pulse with a subtle shimmer effect. Use Tailwind's animate-pulse. The skeletons should match the approximate size and shape of real todo items."

Skeleton rows — Gray rectangles that match the shape of real items
Pulse animation — Tailwind's animate-pulse creates a gentle shimmer
Realistic sizing — Skeletons should be the same height as real items
Smooth transition — When real data loads, it should replace the skeletons without a jump

function TodoSkeleton() {
  return (
    <div className="flex items-center gap-3 p-3">
      <div className="h-5 w-5 rounded bg-surface animate-pulse" />
      <div className="h-4 flex-1 rounded bg-surface animate-pulse" />
    </div>
  )
}

Error boundary

"Add an error boundary component that catches rendering errors in the todo list. Instead of a white screen, show a friendly message: 'Something went wrong. Try refreshing the page.' Style it to match the app's design."

⚠️Warning

Without error boundaries, a single rendering bug can crash your entire app, showing a blank white screen. Error boundaries catch these errors and show a fallback UI instead.

Focus management

"Make sure the app has good focus management. When the page loads, auto-focus the input field so users can immediately start typing. After adding a todo, return focus to the input."

Scroll behavior

"If the todo list gets long enough to scroll, add a subtle top shadow on the list container when the user scrolls down, indicating there's more content above. Make it smooth."

The final review prompt

Give Claude Code one last pass:

"Do a final review of the entire app. Look for: inconsistent spacing, missing hover states, hardcoded colors that should use variables, elements without border-radius that should have it, and any accessibility issues. Fix anything you find."

✅Tip

This "final review" prompt is a powerful pattern. Claude Code will scan your entire codebase with fresh eyes and catch inconsistencies you've missed. Use it at the end of any design session.

The result

Take a moment to appreciate what you've built. Open the app and look at it:

Color system with light and dark themes
Professional typography that's easy to read
Polished components with hover states and transitions
Icons and badges for visual clarity
Smooth animations for list operations
Toast notifications for user feedback
Responsive layout that works on any device
Loading states and error handling

This is what design polish looks like. None of these features change what the app does, but they completely change how it feels. And you built it all through conversation with Claude Code.