AI Prompt Library

You are an elite TypeScript engineer. Please refactor or write the requested code adhering to SOLID and Clean Architecture patterns. - Ensure strict TypeScript rules (no 'any'). - Wrap operations in try-catch blocks with helpful console logging and visual Toast notifications. - Organize components following the feature-sliced design (FSD) structure. - Prioritize dry clean code and single responsibility functions.

Create a fully operational Kanban Board application using React + Vite. - Use Tailwind CSS for a high-fidelity visual experience. - Implement columns: To Do, In Progress, In Review, and Done. - Persist state locally using browser LocalStorage. - Add support for subtasks and a visual progress indicator. - Make it beautifully stylized in a cyberpunk theme.

Design a highly polished responsive UI card block using Next.js React components and Tailwind CSS. - Accent Theme: neon cyan (#00d4ff) glow. - Background: semi-transparent dark navy (#161b22/75) with Backdrop Blur filters. - Layout: 3-column responsive grid with smooth scale hover micro-interactions. - Extra styling details: thin borders with opacity (1px white/10%).

Cinematic movie scene, a rogue courier in a leather jacket carrying a glowing neon briefcase, neon signs flashing in a wet street in downtown neo-Tokyo alley, highly detailed reflection, shot on vintage 35mm anamorphic camera, film grain, aesthetic synthwave atmosphere, --ar 16:9 --v 6.0

Write a high-ranking technical tutorial about React Server Components vs Client Components in Next.js 14 targeting intermediate frontend web developers. - Outline standard SEO metadata: Title tag, meta description. - Article length: at least 1500 words, formatted using structured markdown. - Style tone: casual, expert-level and highly educational (like a senior dev pair-programming). - Include step-by-step code samples showing async server fetches and standard client error states. - Dedicate a section to FAQs and troubleshooting common bugs.

Analyze the following raw git diff output and write a concise, structured Git Commit message. Follow the Conventional Commits (feat, fix, docs, refactor) conventions strictly: - Format: type(scope): brief description in lowercase, followed by a body description with bullet points if complex - Explain the 'why' behind the changes, not just the 'what'. - Limit the first header line to under 72 characters. Here is the diff: [Insert your git diff output here]

Review the provided Next.js code. Refactor it to optimize performance using React Server Components (RSC) and Suspense boundaries. - Minimize client bundle weight by moving calculations to the server. - Prevent unnecessary re-renders using standard React hooks. - Refactor custom functions into clean reusable React custom hooks like useLocalStorage or useDebounce. - Ensure TypeScript compilation checks return no warnings.

Generate a sleek dark dashboard for a SaaS Subscription Analytics Platform application. - Use a Midnight Navy (#0d1117) and Electric Green (#3fb950) color scheme with glowing neon overlays. - Key Metrics to display in responsive cards: Monthly Recurring Revenue, Active Trials, Churn Rate, and Average LTV. - Include a sidebar navigation with smooth custom tooltips. - Add an interactive transaction history table with active status pill highlights.

Write a robust secure API route file for Next.js 14 App Router. - Path: /api/dashboard/billing/update - Implement the following safeguards: JWT Token authorization, Upstash Redis rate limiting, and schema validation with Zod. - Database interaction: query Supabase PostgreSQL Database safely using Prisma/Kysely. - Output JSON format: include clear error status codes (401, 429, 500) and user payload.

Architectural photography, a towering glass metropolis with waterfalls cascading down skyscrapers, sustainable eco-friendly structures covered in lush green hanging vines, colorful tropical flowers, and rooftop forests, futuristic flying vehicles, glowing solar panels, soft volumetric golden light, unreal engine 5 render, high details, aspect ratio --ar 21:9 --v 6.0

A flat vector minimalist style app icon representing a smart database code compiler owl. - Details: sleek geometric lines, glowing holographic circuits on the owl's head. - Color palette: vibrant neon purple, cyber cyan, and deep space black. - Design constraints: single central shape, high contrast, clean white background, no text or words, vector asset.

Write a robust Node.js automation script using Playwright with chromium automation engine to scrape data from https://news.ycombinator.com/jobs. - Target element classes to extract: job titles, corporate links, hiring companies, and time posted. - Bypass mechanisms: include custom user-agent rotation, random navigation delays, and request header mimicking to mimic realistic browser requests. - Output: format extracted metrics into a valid JSON array and save it to jobs-results.json file. - Error handling: implement retries and logging for bad statuses (404, 403).

Write a customizable React custom hook called useLocalStorage in TypeScript. - Goal: Sync state with localStorage automatically. - Support: React 18, Server-Side Rendering (SSR) safe check. - Tab synchronization: use standard window.addEventListener('storage', callback) to propagate state changes instantly when other browser tabs update. - Edge cases: handle data serialization errors and missing browser storage gracefully.

Write a comprehensive, professional README.md for a TypeScript Fullstack Next.js 14 SaaS dashboard project. - Sections to include: title, subtitle, badged shields, high-level features checklist, visual architectural layout diagram, step-by-step npm i && npm run dev instructions, and license details. - Styling: use standard clean Markdown tables and detailed code highlight blocks. - Focus: emphasize clean production-ready onboarding.

Create a detailed 10-slide outline for a Pitch Deck pitching CodePreviewer.com AI Suite to venture capital investors. - Industry segment: Developer Tools and AI Code Generators. - Problem Statement: clearly describe Developer tools suffer from slow UI design loops and complex configuration hurdles for non-technical creators. - Include slides for: Executive Summary, The Problem, The Solution, Product Demo details, Market Sizing (TAM/SAM/SOM), Business Revenue Model, Competitor Matrix grid, Go-To-Market strategy, Financial Projections timeline, and Founder Team highlights. - Keep the writing tone highly professional, metric-driven, and visionary but highly persuasive and factual.

Write an optimized Google Apps Script or Excel Formula to solve the following business need: - Objective: Send an automatic email alert via GmailApp if a row's payment status column is updated to 'Overdue'. - Target cells or columns: Column E (Payment Status), Column F (Client Email), Column G (Client Name). - Behavior: runs automatically inside onEdit(e) trigger and ensures emails are sent only once per row. - Formatting: provide clear inline comments explaining how to paste and authorize the script in your spreadsheet.

Generate a comprehensive .cursorrules system file for a Next.js 14 App Router, TypeScript, and Tailwind CSS project. - Coding Guidelines: enforce use React Server Components (RSC) by default, extract client state components, utilize Zod for server action inputs. - Next.js Conventions: strictly warn against using next/router (use next/navigation instead) and deprecated page.js formats APIs. - AI Behavior: always explain architectural choices in short bullet points before outputting blocks. - Formatting: write in standard, valid markdown formatted code block.

Write the complete directory files structure and baseline code for a Manifest V3 Chrome Extension. - Extension name: AI Code Previewer Companion. - Manifest settings: popup window size 350x450px, using activeTab, storage, and scripting permissions. - Features: reads selected page text, extracts active code blocks, and counts total files. - Implement a background service worker script that listens for chrome.runtime.onMessage sent from the active webpage content script and communicates with the popup. - Provide a clean cyberpunk dashboard style for the popup UI.

You are utilizing the Claude Code CLI agent. Direct it to perform a systematic audit and overhaul of /src/lib/controllers. - Focus on analyzing asynchronous race conditions and memory leaks for potential bugs and performance bottlenecks. - Enforce strict functional purity and robust TypeScript type safety across all files. - Automate the testing of modified files via npm run test:unit before staging. - Write atomic, descriptive conventional commit messages for each logical patch.

Design a highly scalable, stateful multi-agent swarm using LangGraph and Python with AsyncIO. - Initialize a shared graph state tracking user_query, agent_scratchpad, validation_status, and final_response. - Create specialized nodes: RouterAgent, DeveloperAgent, and SecurityAuditorAgent. - Implement conditional routing based on the semantic verification of the auditor's safety checks to decide the next active node. - Use PostgreSQL-backed LangGraph SqliteSaver to persist conversational state across sessions. - Write highly resilient error handler edges to handle API rate limits gracefully.

Write a highly optimized React Native mobile screen component using Expo and NativeWind v4 with Tailwind CSS utilities. - Design a responsive layout suitable for a visual user profile card with organic interaction stats. - Integrate smooth navigation using Expo Router file-based navigation (tabs layout). - Support fluid animations powered by Moti (Framer Motion wrapper for React Native). - Ensure absolute accessibility (a11y) standards by providing accessible roles, accessibilityLabel tags, and dynamic text scaling. - Use a dark cyberpunk color palette with translucent overlay cards.

Create a stunning reactive liquid UI interface using React, SVG, and Framer Motion. - Render organic fluid shape structures using SVG filters (feGaussianBlur and feColorMatrix for gooey effect). - Animate active state morphing using stiffness: 120, damping: 10, mass: 0.8 settings for elastic gooey feedback. - Add micro-interactions triggered by hover mouse coordinates and dynamic cursor distance. - Apply cyberpunk glowing styles: drop-shadow filters with 15px radius and cyan (#00d4ff) glow.

Hyper-realistic high-fidelity portrait photography of a cybernetic female systems architect looking thoughtfully into a holographic console, shot on Sony Alpha 7R V with an 85mm f/1.2 lens. - Lighting: dramatic golden hour side-lighting mixed with soft blue neon glow from the screen creating deep atmospheric shadows and volumetric highlights. - Composition: close-up shot, sharp focus on eyes, shallow depth of field, natural skin texture with visible pores. - Color tone: cinematic cyberpunk grading with rich amber skin tones and deep navy shadows with filmic aesthetic. - Render parameters: --ar 4:5 --quality high, realism-focused

Create a fully responsive Navigation Bar component using Next.js App Router (React) and Tailwind CSS. - Desktop view: Logo on left, navigation links in center, Login and Signup buttons on right. - Mobile view: Hamburger menu icon that opens a smooth slide-out sidebar panel. - Interactions: Add active state styling for the current route and a sticky blur effect on scroll. - Extras: Include a dark/light mode toggle.

Design a comprehensive Prisma schema for a multi-tenant SaaS project management application. - Core models needed: User, Team, Project, Task, and Comment. - Relationships: Ensure proper one-to-many and many-to-many relations with cascading deletes where appropriate. - Include standard NextAuth/Auth.js user and session tables. - Add index directives (@@index) for frequently queried fields like email, teamId, and status to optimize performance.

Write a complete authentication flow using Supabase and React. - Features: Email/password signup, login, password reset, and Google and GitHub OAuth. - UI Components: Build responsive login and registration forms using Tailwind CSS with Lucide icons. - State Management: Create an AuthProvider context to wrap the app and manage user sessions. - Security: Implement protected route higher-order components (HOC) or middleware to redirect unauthenticated users.

Create a secure Stripe Webhook endpoint using Node.js Express. - Security: Verify the Stripe signature using the webhook secret before processing. - Events to handle: checkout.session.completed, customer.subscription.updated, and customer.subscription.deleted. - Database Logic: Update the user's subscription status in a MongoDB database based on the event payload. - Error Handling: Return proper 200 OK or 400 Bad Request status codes and log failed webhook verifications.

Implement a complete navigation architecture for a React Native app using React Navigation v6. - Core Structure: A Bottom Tab Navigator as the root, containing nested stack navigators for individual flows. - Screens to include: Home, Profile, Settings, and a detailed Product Information view. - Styling: Customize the header bar to match a dark cyberpunk theme and add custom bottom tab icons. - Deep Linking: Configure deep link prefixes for sharing in-app content.

Write a fully functional CRUD REST API using Python and FastAPI. - Entity: Manage a Product Catalog item resource. - Database: Use SQLAlchemy (AsyncIO) with PostgreSQL for asynchronous database interactions. - Validation: Define strict request and response schemas using Pydantic v2 models. - Documentation: Ensure Swagger UI (automatically generated by FastAPI) includes descriptive tags, summaries, and error responses (404, 422).

Implement smooth page transitions in a Next.js App Router application using Framer Motion. - Animation Style: A fade in and slide up (20px) effect when navigating between routes. - Component Setup: Wrap the application in AnimatePresence to handle component unmounting gracefully. - Accessibility: Respect the user's "prefers-reduced-motion" system settings to disable animations if necessary. - Configuration: Set the spring physics duration to 0.4 seconds with slight bounce for a natural feel.

Explain the step-by-step process to perform an interactive git rebase on my current branch. - Current situation: I have 5 messy commits and need to squash them into one clean commit before merging into main. - Commands: Provide the exact terminal commands required. - Conflict Handling: Explain clearly what to do if I encounter a merge conflict during the rebase. - Tone: Helpful, reassuring, and extremely clear (prevent me from accidentally deleting my work).

Write a complete docker-compose.yml file to containerize a full-stack application. - Services required: Node.js API, React Frontend, and MongoDB. - Networking: Ensure the backend can securely communicate with the database on an internal Docker network, while exposing the frontend to the host machine on port 3000. - Volumes: Add a named persistent volume for the database so data is not lost when containers restart. - Environment Variables: Show how to pass '.env' files into the Node.js container.

Create a reusable Next.js App Router (metadata API) SEO component for managing document head tags. - Meta Tags needed: Standard title/description, OpenGraph (og:image, og:type), and Twitter/X summary_large_image cards. - Props: Accept dynamic props for title, description, image URL, and canonical link. - Fallbacks: Provide sensible default values if a specific prop is not provided by the parent page. - Implementation: Use the recommended export const generateMetadata function method to inject these tags safely.