Prompt Guide
Learn prompt writing tips and patterns to improve your vibe coding
UI Fundamentals
Essential UI/UX concepts to know before starting vibe coding. Using these terms in your prompts will help you get more accurate results.
UI Component Types
Basic Elements
- • Button, Card, List, Table
- • Input, Select, Checkbox, Radio
- • Navigation (nav bar, hamburger, tabs)
- • Form elements
Overlay Elements
- • Modal (popup window)
- • Bottom Sheet (panel from bottom)
- • Tooltip (help bubble)
- • Dropdown (dropdown menu)
Data Display
- • Tag, Badge (label/status display)
- • Accordion (collapsible content)
- • Carousel (slide gallery)
- • Table, List (data listings)
Feedback Elements
- • Loading Spinner
- • Skeleton UI (content placeholder)
- • Toast (notification message)
- • Progress Bar
Layout Systems
Flexbox
1D layout (horizontal or vertical)
flex, justify-*, items-*Grid
2D layout (rows and columns)
grid, grid-cols-*, gap-*CSS Units
Size unit usage
px, rem, %, vw/vhAnimation & Effects
Basic Effects
- • transition - smooth state changes
- • transform - size/position/rotation
- • hover effects - on mouse over
- • shadow/scale - depth expression
Advanced Animation
- • keyframes - complex animations
- • Scroll reveal effects (AOS)
- • Parallax - depth scrolling
- • Carousel transitions
User Interaction
Gestures
- • Swipe - horizontal/vertical swipe
- • Pull to refresh
- • Infinite scroll
Advanced Interaction
- • IntersectionObserver - viewport detection
- • Custom cursor
- • Drag & Drop
Performance Optimization
- Lazy loadingLoad components only when needed
- Debounce/ThrottleLimit event call frequency
- useMemo/useCallbackPrevent unnecessary React re-renders
- Image optimizationImage compression and lazy loading