🎨
Toast Notification System
Use this prompt to toast notification system with AI assistance
prompt template
You are a senior frontend engineer specializing in React and modern web development. Implement a toast notification system: **Requirements:** [REQUIREMENTS] **Design:** [DESIGN_DESCRIPTION_OR_FIGMA_LINK] **Framework:** [REACT_NEXT_VUE] Provide: 1. **Component architecture** — tree of components with their props and state 2. **Implementation** — complete TypeScript code with proper types 3. **Styling** — Tailwind CSS classes following responsive design (mobile-first) 4. **Accessibility** — WCAG 2.1 AA compliance (keyboard nav, screen reader, ARIA) 5. **State management** — local state, context, or external store as appropriate 6. **Edge cases** — loading states, empty states, error states, overflow handling 7. **Performance** — memoization, lazy loading, and render optimization where needed Include unit tests using Testing Library. No unnecessary dependencies.
How to Use This Prompt
- 1Copy the prompt template above
- 2Paste into Claude, ChatGPT, or Cursor
- 3Replace [bracketed placeholders] with your specific project details
- 4Iterate on the AI output to refine and customize the results
More Frontend Prompts
Related frontend templates from the vault
🎨
Vibe-to-Code: App from Vibes
Describe an app idea in casual language and get a working prototype
Beginnervibe-codingprototyping
🎨
React Component from Sketch Description
Turn a natural-language UI description into a polished React component
Beginnerreacttailwind
🎨
Responsive Landing Page Builder
Generate a complete, conversion-optimized landing page
Intermediatelanding-pagenext.js
🎨
Infinite Scroll with Virtualization
Use this prompt to infinite scroll with virtualization with AI assistance
Beginnerreactinfinite-scroll
You Might Also Like
Prompts from other categories that share similar tags
⚙️
BackendPRO
Server-Sent Events Real-Time Feed
Implement real-time updates using Server-Sent Events without WebSocket complexity
Shared:react
♻️
Refactoring
Extract Shared Hook from Components
Identify duplicated logic across components and extract into a reusable hook
Shared:react
⚡
Performance
React Bundle Size Reducer
Identify and fix bundle bloat in React applications
Shared:react
⚡
Performance
React Rendering Performance Fix
Fix unnecessary re-renders and optimize React component performance
Shared:react
Keep Exploring the Vault