React Prompt Recipes Prompts

ROLE
You are a senior React developer building a reusable authentication flow.

CONTEXT
Framework: [REACT_VERSION, e.g. React 18]
Routing library: [ROUTING_LIBRARY_AND_VERSION, e.g. React Router v6]
Backend auth endpoints: [LOGIN_ENDPOINT], [LOGOUT_ENDPOINT], [SESSION_CHECK_ENDPOINT]
Token storage method: [TOKEN_STORAGE_METHOD, e.g. httpOnly cookie set by the server]
Styling approach: [STYLING_APPROACH, e.g. Tailwind CSS]

TASK
Generate the following, using functional components and hooks:
1. An AuthContext and AuthProvider that exposes the current user, a loading flag, and login/logout functions.
2. A login form component that calls the login function and displays validation and API errors.
3. A ProtectedRoute component that redirects unauthenticated users to [LOGIN_ROUTE_PATH], preserving the originally requested URL for post-login redirect.
4. On initial app load, verify any existing session before rendering protected routes, showing a loading indicator during the check.

CONSTRAINTS
- Do not render protected page content until the session check has completed.
- Handle network and 401 errors from the auth endpoints gracefully, with user-facing messages.
- Keep components small and composable; do not put API calls directly inside UI components.

OUTPUT FORMAT
Provide each file separately with a filename comment at the top, followed by a 2-3 sentence summary of how the pieces connect together.

ROLE: You are a frontend developer converting a design image into a React component.

CONTEXT: I'm attaching a design screenshot/mockup. Tech stack: [REACT VERSION, STYLING APPROACH e.g. Tailwind/CSS Modules/styled-components, COMPONENT LIBRARY IF ANY]

TASK:
1. First, describe what you see in the image: overall layout, spacing, typography (font sizes/weights), colors, and any visible interactive states
2. Flag anything you're uncertain about (illegible text, ambiguous spacing, colors that are hard to read precisely) instead of guessing silently
3. Then write the React component matching this description, split into: component structure (JSX), styling, and any props needed to make it reusable

CONSTRAINTS:
- Match the layout and spacing as closely as possible to what's visible in the image
- Use [STYLING APPROACH] only, no inline styles unless the project convention requires it
- Make the component accept props for any content that would realistically vary (text, images, links)
- [ANY ADDITIONAL CONSTRAINT, e.g. must be accessible, must support dark mode]

OUTPUT FORMAT:
1. A short description of the design (layout, spacing, typography, colors, flagged uncertainties)
2. The complete component code in a fenced code block
3. A one-line note on anything that will need visual verification once rendered

ROLE: You are a senior frontend engineer writing accessible React components.

TASK:
Build a reusable Modal component in React with [TYPESCRIPT / JAVASCRIPT].

FUNCTIONAL REQUIREMENTS:
- Opens and closes based on an `isOpen` prop and `onClose` callback
- Renders via [REACT PORTAL / INLINE] into [TARGET DOM NODE OR DESCRIPTION]
- Closes on Escape key press
- Closes on clicking the overlay background (but not when clicking inside the modal content)

ACCESSIBILITY REQUIREMENTS:
- Traps keyboard focus inside the modal while it is open
- Returns focus to the element that triggered the modal when it closes
- Uses `role="dialog"`, `aria-modal="true"`, and `aria-labelledby` pointing to the modal title
- Prevents background content from being read by screen readers while the modal is open

STYLING:
- [UNSTYLED WITH CLASS NAMES / USE TAILWIND / MATCH THIS DESIGN SYSTEM: DESCRIBE]

OUTPUT FORMAT:
Provide the complete component code in a single file, followed by a short usage example showing how to open the modal from a parent component.

ROLE:
You are a senior frontend engineer who writes clean, accessible React components.

CONTEXT:
I need a React component called [COMPONENT_NAME] that displays a data table for the following data shape:
[DESCRIBE_DATA_SHAPE_E.G._ARRAY_OF_OBJECTS_WITH_FIELDS_AND_TYPES]

REQUIREMENTS:
- Columns: [LIST_COLUMN_NAMES_AND_WHICH_ARE_SORTABLE]
- Sorting: clicking a sortable column header toggles ascending/descending order, with a visible indicator of current sort state
- Filtering: a single search input that filters rows by [SPECIFY_WHICH_FIELDS_TO_MATCH], case-insensitive
- Pagination: [NUMBER] rows per page, with previous/next controls and a current page indicator
- Empty states: show a clear message when the data array is empty, and a separate message when a filter returns no results
- Accessibility: sortable headers must be keyboard-operable and expose their sort state to screen readers
- Styling approach: [SPECIFY_E.G._TAILWIND_CLASSES_OR_PLAIN_CSS_MODULES]

OUTPUT FORMAT:
Return the complete component code in a single code block, followed by a short list of any assumptions you made about data or behavior that I didn't specify.

Role: You are a frontend engineer who writes clean, reusable React components.

Context:
- Component purpose: [E.G., SIGNUP FORM, CONTACT FORM, SETTINGS FORM]
- Fields and validation rules: [FIELD NAME: TYPE AND RULE, repeat for each field, e.g., "email: required, must match email format"]
- State approach: [PLAIN useState, TYPESCRIPT, OR A LIBRARY LIKE REACT HOOK FORM]
- Styling approach: [CSS MODULES, TAILWIND, PLAIN CSS, OR INLINE STYLES]
- Submit behavior: [WHAT SHOULD HAPPEN ON VALID SUBMIT, E.G., "CALL AN onSubmit PROP WITH FORM VALUES"]

Constraints:
- Component must be self-contained and reusable, accepting props for initial values and onSubmit
- Each field must show its own inline error message that clears once the field becomes valid
- Submit button must be disabled while any required field is invalid

Task: Write the complete React component code implementing the form above.

Output format:
1. The full component code in a single fenced code block
2. A short explanation of the validation logic and how to use the component
3. Any assumptions made about props or styling