Frontend prompts

React Component Builder with TypeScript

Generate production-ready React components with TypeScript interfaces, proper error handling, and modern best practices. Perfect for frontend developers building scalable applications.

Progressive Web App Scaffold Generator

Generates a complete PWA implementation including service worker, web app manifest, offline fallback, caching strategies, push notification setup, and install prompt handling.

SVG Animation and Illustration Generator

Generates optimized SVG illustrations with CSS or SMIL animations, including path morphing, draw-on effects, and interactive states for icons, logos, and decorative elements.

Frontend Error Boundary and Fallback Designer

Generates a complete error handling architecture with error boundaries, fallback UIs, retry logic, error reporting integration, and graceful degradation patterns for your frontend application.

CSS Animation System Generator with Keyframes

Generate production-ready CSS animation systems with configurable keyframes, easing functions, and responsive behavior. Perfect for adding polished motion design to web interfaces.

Design System Token Generator

Generates a complete design token system with color scales, typography, spacing, elevation, and motion tokens in multiple output formats for seamless design-to-code handoff.

Storybook Configuration and Story Writer

Generates complete Storybook configuration, story files with all variants, interactive controls, documentation pages, and visual testing setup for your component library.

Frontend Performance Bundle Analyzer and Optimizer

Analyzes your frontend bundle configuration, identifies performance bottlenecks, and generates specific optimization strategies with code changes for tree-shaking, code splitting, and lazy loading.

Dark Mode Implementation Guide

Generates a complete dark mode implementation with theme tokens, toggle component, system preference detection, persistence, smooth transitions, and image adaptation for your frontend stack.

Internationalization Setup Guide Generator

Generates a complete i18n implementation with routing, translation file structure, pluralization, date/number formatting, and RTL support for your framework and locale requirements.

Image Optimization and Lazy Loading Setup

Generates a complete image optimization pipeline with responsive images, lazy loading, blur placeholders, format selection, CDN configuration, and Core Web Vitals optimizations.

CSS Grid and Flexbox Layout Solver

Takes a layout description or wireframe specification and generates the optimal CSS Grid or Flexbox implementation with responsive behavior, alignment, and gap handling.

Tailwind CSS Component Generator

Generates production-ready UI components styled entirely with Tailwind CSS, including responsive variants, dark mode support, and accessible markup for any component pattern you need.

Accessibility Audit and Fix Generator

Performs a comprehensive accessibility audit on your frontend code, identifies WCAG violations, and generates ready-to-apply fixes with ARIA attributes, semantic HTML, and keyboard navigation improvements.

TypeScript Type Utility Generator

Generates advanced TypeScript type utilities, mapped types, conditional types, and generic patterns for common frontend patterns like API responses, form state, component props, and configuration objects.

WCAG Compliance Checker and Remediation Guide

Performs a systematic WCAG 2.2 compliance check across all four principles (Perceivable, Operable, Understandable, Robust) and generates a prioritized remediation plan with code fixes.

Form Validation System Builder

Generates a complete form validation system with schema definitions, real-time validation, accessible error messages, and multi-step form support for your chosen framework and validation library.

SEO Meta Tag and Structured Data Generator

Generates complete SEO meta tags, Open Graph tags, Twitter Cards, JSON-LD structured data, and canonical URL configuration for your page type and frontend framework.

Browser DevTools Workflow Generator

Creates structured browser DevTools debugging workflows with panel-specific techniques, breakpoint strategies, performance recording analysis, and network waterfall interpretation.

ChatGPTClaudeGemini+3

Micro-Frontend Architecture Planner

Generates a complete micro-frontend architecture plan with module federation configuration, shared dependency management, routing strategy, communication patterns, and deployment pipeline design.

Component Unit Testing Template Generator

Generates comprehensive unit testing templates for frontend components with testing patterns for user interactions, async behavior, accessibility checks, and snapshot testing in your chosen testing framework.

SSR vs SSG Migration Guide Generator

Generates a detailed migration guide for transitioning between server-side rendering and static site generation strategies, with framework-specific code changes, performance comparisons, and step-by-step implementation.

Browser Compatibility Fix Generator

Identifies browser compatibility issues in your frontend code and generates cross-browser fixes with polyfills, fallbacks, and progressive enhancement patterns for your target browser matrix.

Responsive Grid and Layout System Builder

Generates a complete responsive grid and layout system with breakpoints, container queries, and fluid spacing, tailored to your CSS approach and design requirements.

State Management Pattern Selector and Implementer

Analyzes your application requirements and recommends the optimal state management pattern, then generates a complete implementation with types, actions, selectors, and component integration code.