All AI Prompts

Code Generation

Ultimate React & Tailwind Reusable Button Architect

April 5, 2026

  • React Component
  • Reusable
  • Button

Generate a production-ready, accessible, and highly flexible React button component with multiple variants, sizes, and state handling using Tailwind CSS and TypeScript.

Prompt Text

Act as a Senior Frontend Architect. Your task is to build a highly reusable, robust 'Button' component using React, TypeScript, and Tailwind CSS. Follow these strict requirements: 1) Styling Architecture: Use 'tailwind-merge' and 'clsx' (or 'class-variance-authority') to manage complex conditional classes efficiently. 2) Variants: Include styles for Primary, Secondary, Outline, Ghost, and Destructive. 3) Sizes: Support Sm, Md, Lg, and Icon-only versions. 4) Features: Implement a loading state with a customizable SVG spinner, disabled state handling, and support for left/right icons. 5) Polymorphism: Ensure the component can be rendered as a 'button' or an 'a' (anchor) tag using an 'asChild' pattern or an 'as' prop. 6) Accessibility: Include proper ARIA attributes, focus ring styles for keyboard navigation, and high-contrast considerations. 7) Code Quality: Provide clean, commented TypeScript interfaces for all props and ensure the component follows modern React best practices (React.forwardRef). Output the complete source code for 'Button.tsx' and include an example of how to implement it in a parent component.

Suggested Tools

ChatGPT

Related Prompts

View all prompts →

Generate a future-proof, comprehensive Python curriculum tailored for mid-level developers aiming for senior-level mastery by 2026.

Prompt Preview

You are an expert technical program manager and senior Python architect. Create a comprehensive, 12-month Python learning and career acceleration plan tailored for a developer with exactly 3 years of professional experience, specifically projecting forward to the technological landscape of 2026.

Please structure the plan into quarterly milestones, focusing on:
1. [Placeholder: Focus Area 1, e.g., Advanced AI/ML Integration with Python or High-Performance Computing]
2. [Placeholder: Focus Area 2, e.g., Asyncio, Concurrency, and Microservices at Scale]
3. [Placeholder: Focus Area 3, e.g., Modern Python Frameworks expected to dominate in 2026 like FastAPI/SQLAlchemy 2.0+ or advanced data engineering tools]

For each quarter, provide:
- Core Objectives: What high-level skills will be mastered.
- Key Technologies & Libraries: Specific tools, libraries, or PEP standards to study (including emerging trends for 2026).
- Practical Project Ideas: Hands-on, production-grade projects that demonstrate these skills to future employers.
- Recommended Learning Resources: Types of documentation, books, or advanced topics to research.
- Assessment Metrics: How the developer can measure their mastery at the end of the quarter.

Ensure the plan bridges the gap between mid-level developer and senior engineer/architect roles, with a strong emphasis on system design, clean code, scalability, and 2026 tech trends.
View full details
  • python
  • learning-path
  • career-growth
  • mid-level-developer
  • future-skills

Quickly generate robust, production-ready unit and integration test cases for any React component using Jest and React Testing Library.

Prompt Preview

You are an expert Frontend QA Engineer and Senior React Developer. Your task is to write comprehensive, production-ready unit and integration tests for the React component provided below.

### Tech Stack Requirements:
- Testing Framework: Jest
- Rendering & Queries: React Testing Library (@testing-library/react)
- User Events: @testing-library/user-event (preferred over fireEvent)

### Testing Guidelines & Best Practices:
1. **Query Selection**: Prioritize accessible queries (e.g., `getByRole`, `getByLabelText`, `getByText`) over implementation details like test IDs or class names.
2. **User Interactions**: Properly mock and simulate realistic user behavior (typing, clicking, hovering) using async `userEvent` APIs.
3. **Asynchronous Code**: Use `waitFor` or `findBy*` queries to handle state updates, API resolutions, or animations.
4. **Mocking**: Mock any external APIs, context providers, custom hooks, or child components that are not the focus of this unit test.
5. **Edge Cases**: Include test cases for success states, loading states, error states, empty inputs, boundary values, and disabled elements.
6. **Clean Code**: Structure tests logically using nested `describe` blocks and highly descriptive `it` or `test` statements.

### Component Code to Test:
[INSERT YOUR REACT COMPONENT CODE HERE]

Generate the complete test suite file, including all necessary imports, mocks, setup, and teardown steps.
View full details
  • React
  • Jest
  • React Testing Library
  • Unit Testing
  • QA Automation
  • Frontend Development

Develop high-converting, multi-slide Instagram Story campaigns designed to drive engagement, clicks, and sales through strategic storytelling and interactive elements.

Prompt Preview

Act as a professional Social Media Marketing Strategist and Copywriter. Your task is to design a comprehensive 5-slide Instagram Story promotion sequence for [Product/Service Name]. 

Context:
- Objective: [Objective, e.g., Flash Sale, Lead Generation, Brand Awareness]
- Target Audience: [Describe Audience]
- Brand Tone: [Tone, e.g., Minimalist, Energetic, Luxury]
- Key Benefit: [Primary Value Proposition]

Please provide a storyboard including:
1. Visual Direction: Description of the imagery or video style (e.g., UGC, motion graphics, lifestyle photography).
2. Primary Copy: High-impact headlines and supporting text for each slide.
3. Interactive Elements: Suggest specific Instagram stickers (Polls, Quizzes, Sliders, or Link Stickers) to boost engagement.
4. Narrative Flow: Ensure the sequence follows a 'Hook, Value, Proof, Urgency, CTA' structure.
5. Call to Action (CTA): Compelling directions for the user to take the next step.

Deliver the response in a structured slide-by-slide format optimized for visual content creators.
View full details
  • Instagram
  • Social Media
  • Marketing
  • Copywriting
  • Promotion
  • Engagement

Elevate your professional brand with a custom-designed LinkedIn banner that captures your expertise, industry authority, and unique personality to instantly differentiate your profile.

Prompt Preview

Act as a high-end graphic designer specializing in personal branding. Create a detailed visual description for an AI image generator to design a LinkedIn banner with a 4:1 aspect ratio. Theme: [Insert Industry, e.g., Fintech, Marketing, Data Science]. Visual Style: [Insert Style, e.g., Minimalist, High-Tech, Organic, Abstract]. Elements: Incorporate high-quality textures, professional color palettes including [Insert Primary Colors], and symbolic representations of [Insert Key Skills/Expertise]. The layout must ensure the bottom-left area remains visually clean to accommodate the circular profile picture overlay without obscuring critical design elements. Focus on cinematic lighting, depth of field, and a sleek, modern aesthetic that communicates authority, innovation, and trustworthiness. Ensure the design is professional, high-resolution, and free of any text.
View full details
  • LinkedIn
  • Personal Branding
  • Banner Design
  • AI Prompt
  • Profile Optimization
  • Career Growth
  • Graphic Design