Skip weeks of setup. Use Claude Code to implement the three essential systems that transform any project from prototype to professional application.
Visual consistency, component library, dark mode testing
Role-based access, user switching, route protection
AI content generation, pillar strategy, email approval
These priming prompts set up your core technologies. Run these first to establish the foundation for all three systems.
Essential libraries for modern web applications
npm install next@latest react@latest
npm install @next-auth/prisma-adapter
npm install next-auth prisma @prisma/client
npm install tailwindcss shadcn/ui
npm install framer-motion lucide-reactDatabase, authentication, and API configurations
DATABASE_URL="postgresql://..."
NEXTAUTH_URL="http://localhost:3000"
NEXTAUTH_SECRET="your-secret"
ANTHROPIC_API_KEY="sk-ant-..."
EMAIL_SERVER_HOST="smtp.resend.com"Establish your brand identity, component library, and design tokens. Perfect for testing dark mode, ensuring Tailwind consistency, and creating a unified visual experience.
Creates comprehensive DESIGN-SYSTEM.md with color palette, typography, components, and usage guidelines.
Create a comprehensive design system documentation file called DESIGN-SYSTEM.md for my [PROJECT_NAME] application. Include the following sections: 1. Core Design Principles & Brand Values 2. Color Palette (primary, semantic, neutral with hex codes) 3. Typography (font families, sizes, weights, line heights) 4. Component Patterns (buttons, cards, forms, badges) 5. Layout Patterns (containers, grids, spacing) 6. Email Template Standards (for client communications) 7. Implementation examples with Tailwind CSS classes Requirements: - Modern, professional aesthetic - Dark mode support - Accessible color combinations (WCAG compliant) - Email-safe fallbacks for client communications - Copy-paste ready CSS variables and Tailwind classes - Responsive design considerations Make it comprehensive enough that any developer on my team can maintain visual consistency across the entire application.
Creates /design-system page to test all components, dark mode, and visual consistency.
Create a design system showcase page at /design-system that displays all our design components and patterns. Include these interactive sections: 1. Overview - Brand values and design principles 2. Colors - Primary, semantic, and neutral palettes with hex codes 3. Typography - All font sizes, weights, and examples 4. Components - Buttons, cards, badges, forms with hover states 5. Email Templates - Preview of email designs Features needed: - Tabbed navigation between sections - Dark/light mode toggle for testing - Copy-to-clipboard for color codes and CSS classes - Interactive component examples - Mobile responsive design - Live preview of all component states (hover, active, disabled) Use our existing tech stack: Next.js, Tailwind CSS, shadcn/ui components, and Lucide icons. Make this page the go-to resource for maintaining design consistency across our application.
The design system page becomes your testing ground. Every time you add a new component or modify styling, you can immediately see how it affects the overall visual harmony. It's especially valuable for ensuring dark mode works correctly and that your Tailwind configuration produces consistent results.
Role-based authentication with powerful development tools. Includes user switching, route protection testing, and comprehensive auth documentation.
Sets up NextAuth.js with role-based access control, database integration, and comprehensive documentation.
Create a complete authentication system using NextAuth.js v4 with the following user roles: [ADMIN, USER, OTHER_ROLES_FOR_YOUR_APP]. Requirements: 1. Database schema with User, Account, Session models (Prisma) 2. NextAuth configuration with email magic links as primary auth 3. JWT session strategy for better compatibility 4. Role-based middleware for route protection 5. User registration with automatic role assignment 6. Development credentials provider for testing Create these files: - /app/api/auth/[...nextauth]/route.ts - Main NextAuth config - /middleware.ts - Route protection with role checks - /types/next-auth.d.ts - TypeScript extensions for session - AUTH-SYSTEM.md - Complete documentation Route protection needed: - /admin/* - ADMIN role only - /dashboard/* - Authenticated users - /api/* - Protected API routes Include comprehensive documentation explaining: - How to add new protected routes - User role management - Session handling - Database integration Make it production-ready with proper error handling and security best practices.
Creates powerful dev tools for instant user switching and route protection testing.
Create development tools in /components/dev-tools/ for testing authentication: 1. User Switcher Component (/components/dev-tools/user-switcher.tsx): - Floating button (development only) - Quick switching between test users of different roles - One-click authentication for each role type - Visual indicators for current user and role 2. Route Tester Component (/components/dev-tools/route-tester.tsx): - Test protected route access for different roles - Display expected vs actual access results - Visual feedback for route protection status 3. Test User Seeds: - Admin user (your email) - Regular users for each role type - Test data with realistic names and profiles Features: - Only visible in development mode - Distinctive styling (orange/red colors) for easy identification - Positioned as floating elements (bottom-left corner) - Automatic route testing on user switch - Integration with NextAuth development provider Make these tools essential for rapid development and testing of role-based features.
These dev tools transform authentication testing from tedious to instant. Instead of manually signing in/out to test different user types, you get one-click user switching. The route tester shows you exactly which routes are properly protected, making security testing visual and immediate.
Automated content generation with strategic pillar approach, AI article creation, and email approval workflow. The most advanced of the three systems.
Creates strategic content pillars and topic database for systematic SEO content planning.
Create a strategic content pillar system for my [BUSINESS_TYPE] targeting [TARGET_LOCATION]. Database Schema: 1. ContentPillar model: - name, description, priority (1-10) - target_article_count, business_value - current_article_count, completion_status 2. ContentTopic model: - keyword, category, search_volume, difficulty - pillar_id, status (identified/in_progress/completed) - priority, strategic_reason Create 6-8 content pillars focused on: - Core services/products - Cost and buying guides - Problem-solving content - Educational content - Local/industry-specific topics - Competitive advantage topics For each pillar, generate 10-15 high-value topics with: - Local SEO keywords (include location) - Search volume estimates (25-500/month range) - Business intent matching - Content gaps in competitor coverage Include a strategy document explaining: - Pillar prioritization methodology - Topic selection criteria - Content calendar approach - Success metrics Make this the foundation for systematic, strategic content creation.
Complete automated system with AI article generation, email approval workflow, and Vercel cron.
Create an automated AI content generation system with these components: 1. AI Article Generator (/lib/ai-content-generator.ts): - Integrates with Anthropic Claude API - Strategic topic selection from content pillars - 1,500+ word SEO-optimized articles - Local business context integration - Quality scoring and validation 2. Email Approval Workflow (/lib/email-approval.ts): - Sends full article preview to admin email - One-click publish/skip buttons in email - User-friendly confirmation pages - Article status tracking 3. Vercel Cron Automation (/api/cron/daily-content/route.ts): - Daily automated content generation - Error handling and notifications - Database-driven topic selection - Production-ready security 4. Admin Dashboard Integration: - Content approval queue - Article performance tracking - Pillar progress monitoring - Manual content triggers Environment Variables Needed: - ANTHROPIC_API_KEY for AI generation - Email service for approval workflow - CRON_SECRET for Vercel automation Create comprehensive documentation explaining the entire workflow from topic selection to publication.
This system generates strategic, high-quality content daily without manual effort. The AI understands your business context, targets local SEO keywords, and maintains quality standards. You get 100+ professional articles per year with just email approval clicks.
Follow this timeline to implement all three systems systematically. Each system builds on the previous, creating a cohesive development environment.
Visual consistency and component testing ready
Secure app with instant user switching for testing
Automated daily content generation with email approval