Add Rafid Prompt Tool - AI-powered prompt optimization app

[HumanBotRafid]

Summary

This PR introduces the complete Rafid Prompt Tool application, a Next.js-based web application that optimizes AI prompts using Claude. The tool offers two modes: Quick Optimise for instant improvements and Deep Build for iterative refinement through guided questions.

Key Changes

Core Application Structure

• Main component (PromptTool.tsx): Orchestrates the entire flow with state management for two optimization modes, usage tracking, and error handling
• Layout & pages (layout.tsx, page.tsx): Next.js app structure with custom fonts (Playfair Display, DM Sans) and metadata
• Styling (globals.css, tailwind.config.ts): Custom Tailwind theme with amber accent color, custom shadows, and animations

UI Components

• InputForm: Textarea for prompt input with dropdowns for target AI and goal selection
• ModeToggle: Switch between Quick Optimise (⚡) and Deep Build (🎯) modes
• DeepBuildQuestions: Multi-step form for answering guided questions with progress tracking
• OutputSection: Displays original and optimized prompts side-by-side with explanation
• CopyButton: Utility component for copying optimized prompts to clipboard
• LimitModal: Modal dialog for daily usage limit notifications
• Navbar & Hero: Header and landing section components
• LoadingSpinner: Animated loading indicator

API Routes

• /api/optimise: Quick optimization endpoint that takes a prompt and returns optimized version with explanation
• /api/deepbuild/questions: Generates 3-5 contextual questions based on the initial prompt
• /api/deepbuild/generate: Final generation endpoint that combines original prompt with user answers to questions

Utilities & Helpers

• lib/anthropic.ts: Claude API client wrapper with JSON parsing support
• lib/parseJson.ts: Robust JSON extraction from Claude responses (handles code fences, balanced braces)
• lib/prompts.ts: System prompts for quick optimize, deep build questions, and deep build generation
• lib/apiHelpers.ts: Request validation, error mapping, and type guards
• lib/usage.ts: Client-side usage tracking with localStorage, daily limit enforcement (3 free uses/day)
• lib/types.ts: TypeScript types for modes, goals, target AIs, API responses, and usage records

Configuration

• TypeScript config with path aliases (@/*)
• Next.js config with Node.js runtime
• Environment setup with .env.example for ANTHROPIC_API_KEY
• ESLint config extending Next.js standards

Notable Implementation Details

• Dual-mode architecture: Quick mode for instant optimization vs. Deep Build for iterative refinement through questions
• Usage tracking: Client-side localStorage-based daily limit (3 free uses) with UTC date rollover
• Abort controller pattern: Proper request cancellation when switching modes or unmounting
• Robust JSON parsing: Multi-strategy approach to extract JSON from Claude responses (direct parse → code fence stripping → bracket counting)
• Error handling: Comprehensive error mapping for API failures, rate limits, and auth issues
• Accessibility: ARIA labels, roles, and semantic HTML throughout
• Responsive design: Mobile-first Tailwind approach with custom animations (fadeIn, spinSlow)

https://claude.ai/code/session_01AEUzJynCeHD5hgd8tughvW