AI Coding Best Practices & Advanced Techniques

Learn how to maximize your productivity with AI coding assistants like Claude Code. These proven techniques will help you build features faster, with fewer iterations and better results.

Writing Effective Prompts

The Golden Rule: Be Comprehensive

Detailed prompts with clear requirements consistently outperform short, vague requests. Think of your prompt as a detailed specification document rather than a quick note.

❌ Avoid: Vague, Short Prompts
"Add a user profile page"
Too vague - Claude doesn't know what fields to include, what design to follow, or what functionality you need.
✅ Better: Detailed, Specific Prompts
"Create a user profile page at /profile that fetches and displays the current user's data from the auth service. Include these fields: profile photo (with upload capability), display name (editable), email (read-only), account creation date, and last login time. Use the existing card components and Tailwind styling from the dashboard. Add loading states, error handling, and success messages for profile updates."
✓ Clear requirements ✓ Specific fields ✓ Design guidance ✓ Error handling specified

Prompt Structure Template

Use this template as a starting point for your prompts:

1. Feature Overview:

What are you building and why?

2. Specific Requirements:

List exact features, fields, and functionality needed

3. Integration Points:

Which StackForDevs APIs will you use? (Auth, CMS, Mailer, etc.)

4. Design Guidance:

Reference existing components or describe the desired UI/UX

5. Edge Cases:

Loading states, error handling, validation rules, permissions

Example: "Build a blog commenting system. (1) Users can post comments on blog posts retrieved from the CMS service. (2) Each comment shows author name, timestamp, and content. (3) Use the Auth service to verify logged-in users - only authenticated users can comment. (4) Store comments via the CMS API. (5) Style comments using the same card components as the blog posts. (6) Handle: loading state while posting, error messages for failed posts, empty state when no comments exist."

Iterative Development Workflow

Step 1: Start with Core Functionality

Get the basic feature working first. Don't try to build everything at once.

"Create a basic blog list page that fetches posts from the CMS API and displays titles and excerpts."

Step 2: Test and Verify

Rebuild with Docker, test in your browser, confirm the core feature works as expected.

Step 3: Add Enhancements

Once the core works, add refinements one at a time.

"Add pagination to the blog list - 10 posts per page with previous/next buttons."

Step 4: Polish and Refine

Add loading states, error handling, animations, and other polish.

"Add skeleton loading states while blog posts are fetching, and an error message if the API call fails."

Common Patterns & Examples

🔐 Authentication Flows

When building features that require user authentication:

"Create a protected route at /dashboard that requires authentication. If the user is not logged in, redirect them to /login. Fetch the user's session from the Auth service and display their name and email in the header. Add a logout button that calls the logout endpoint and redirects to the home page."
🔌 API Integration

When integrating with StackForDevs services:

"Build an email contact form at /contact that collects name, email, and message. When submitted, use the Mailer service API to send the message to admin@example.com. Show a success notification using the Notification service when the email is sent. Handle validation errors (empty fields, invalid email) and API errors (network issues, rate limiting). Use the existing form styling from the auth pages."
📊 Data Display & Tables

When displaying lists or tables of data:

"Create an admin dashboard at /admin/users that displays all users from the Auth service in a table. Include columns for: email, display name, creation date, last login, and status (active/inactive). Add sorting by clicking column headers. Include a search box to filter users by email or name. Add pagination (20 users per page). Style the table to match the existing admin panel design."

Advanced Techniques

🎯 Reference Existing Code

Tell Claude to follow patterns that already exist in your codebase:

"Create a notifications panel similar to the existing dashboard layout. Use the same sidebar navigation pattern and card components I see in /dashboard/page.tsx."

🔄 Refactoring Requests

When improving existing code, explain what and why:

"Refactor the blog post component to extract the API fetching logic into a separate hook. Create a useBlogPosts() hook that handles loading, error states, and data fetching. Update the component to use this hook. This will make the code more reusable and testable."

🐛 Debugging & Fixes

Describe the problem and any error messages you're seeing:

"The blog post page is showing a 401 Unauthorized error when fetching posts. The error appears in the console: 'Missing authentication token'. I think the API request isn't including the auth headers. Please fix the fetch call to include the authorization token from the user session."

Do's and Don'ts

✅ Do

  • • Provide specific requirements and acceptance criteria
  • • Reference existing code patterns and components
  • • Specify error handling and edge cases
  • • Break large features into smaller, testable chunks
  • • Test after each iteration before adding more
  • • Include design and UX requirements

❌ Don't

  • • Use vague or ambiguous language
  • • Try to build complex features in one prompt
  • • Skip testing between iterations
  • • Assume Claude knows your design preferences
  • • Forget to mention authentication or permission requirements
  • • Ignore error messages - share them with Claude

Quick Tips

💬 Ask Questions

If Claude asks clarifying questions, answer them. This leads to better results.

🔍 Review the Code

Quickly scan what Claude writes. If something looks off, point it out immediately.

🎨 Specify Styling

Mention if you want mobile-responsive design, dark mode support, or specific colors.

📝 Document Decisions

Ask Claude to add comments explaining complex logic or architectural decisions.

Complete Example: Building a Feature

Here's a complete example of building a "Team Management" feature using best practices:

Iteration 1: Core Structure
"Create a team management feature. Build a /teams page that lists all teams for the current tenant using the Auth service. Display each team as a card showing: team name, member count, and creation date. Add a 'Create Team' button at the top that opens a modal form. The form should have a team name field and submit to the Auth API to create a new team. Use the existing modal and form components from the project settings page. Handle loading and error states."
Iteration 2: Team Details
"Add team detail pages. When clicking a team card, navigate to /teams/[teamId] which shows: team name (editable), full member list with names and emails, option to remove members, and an 'Add Member' button that opens a form to invite users by email. Fetch team details from the Auth service GET /teams/:id endpoint."
Iteration 3: Permissions
"Add role-based permissions. Only team admins should see the 'Add Member' button and be able to remove members. Check the current user's role from the Auth service and conditionally render admin actions. Show a notice if a non-admin user tries to access admin features."
Iteration 4: Polish
"Add final polish to the teams feature: 1) Empty state when user has no teams (with illustration and 'Create Your First Team' button), 2) Confirmation dialog before removing team members, 3) Success notifications when teams are created/updated, 4) Loading skeletons while fetching team data, 5) Mobile-responsive design for the team cards grid."