Real Functions

Your feature looks great – now make it truly work. This is the systems pass: take it from mock or placeholder data to real, working logic that's implemented cleanly and runs efficiently.

Still no database yet – that comes in Level 3. Here you'll use Next.js Server Actions (server-side functions you can call straight from your UI, which keep any secrets off the browser) and keep state local for now.

Same loop as always: plan, build, preview, refine, ship.

1. Plan the real logic (plan mode)

In plan mode (Shift+Tab), have Claude plan how to replace the mock data with real, working logic. Because the Next.js skill is installed, Claude already knows the current best practices (Server Actions, async APIs) – you just describe the behavior you want.

Plan the real functionality (in plan mode)
We're in plan mode. My feature currently runs on mock or placeholder data. Plan how to make it actually work:
- Use Next.js Server Actions for the logic (an API route only if something external truly needs to call it over HTTP).
- No database yet – keep any state local or in-memory for now.
- Aim for a clean, efficient implementation with sensible error handling.
Show me the plan before we build.

Outcome: You have a plan to turn your feature into real, working logic.

I planned the real functionality with Claude

2. Build it well

Approve the plan, switch to auto-accept, and let Claude wire it up.

Build the real functionality
Build the plan. Use Server Actions for the logic, connect them to my existing UI, and show clear loading, success, and error states. Keep the code clean and efficient – avoid duplicate work and unnecessary re-renders. Show me it working in the preview.

Outcome: Your UI now calls real server-side logic and shows real results.

My feature runs on real, working logic

3. Make it solid and efficient

Now harden it: handle the edge cases, trim anything wasteful, and confirm it holds up.

Review for correctness and performance
Review my feature for correctness and performance:
- Handle errors and edge cases gracefully (bad input, empty states, failures).
- Remove anything wasteful and keep the code simple and reusable.
- Walk me through testing the happy path and a couple of failure cases in the preview.
Fix what you find as we go.

Outcome: The feature is reliable and efficient, not just working.

My feature is solid, efficient, and handles edge cases

4. Ship it

Happy with it? Commit and push to main to send it live.

Commit and push to go live
Commit this work with a clear message and push it to main so it goes live. Confirm when the deploy is done.

Outcome: Your now-functional feature is live.

I shipped the working feature to my live site