🚀 AI Prompting Cheat Sheet

[ROLE] Kamu adalah senior web developer [TASK] Buatkan [komponen/fitur] [CONTEXT] Untuk [jenis website/app] [REQUIREMENTS] - [fitur 1] - [fitur 2] [CONSTRAINTS] - [batasan 1] - [batasan 2] [FORMAT] Output dalam format [format]

❌ "buatkan navbar" ✅ "buatkan navbar responsive dengan: - Logo di kiri - Menu items: Home, About, Products, Contact - Mobile hamburger menu - Dropdown untuk Products - Warna primary: #3b82f6 - Gunakan Flexbox"

Prompt 1: "Buatkan card component" Prompt 2: "Tambahkan hover effects" Prompt 3: "Buat responsive untuk mobile" Prompt 4: "Tambahkan dark mode support"

"Buatkan struktur HTML5 semantic untuk blog post dengan: SECTIONS: 1. Header dengan navigation 2. Main article dengan: - Title (h1) - Meta info (author, date) - Featured image - Article content (multiple paragraphs) - Tags section 3. Sidebar dengan: - Author bio - Related posts 4. Footer dengan copyright REQUIREMENTS: - Gunakan semantic tags (header, nav, main, article, aside, footer) - Accessible (ARIA labels dimana perlu) - SEO friendly - Valid HTML5"

"Buatkan CSS untuk responsive layout dengan: BREAKPOINTS: - Mobile: < 768px (1 column) - Tablet: 768px - 1024px (2 columns) - Desktop: > 1024px (3 columns) REQUIREMENTS: - Mobile-first approach - Fluid typography - Flexible images - CSS Grid untuk layout - Flexbox untuk components"

"Buatkan CSS Grid layout untuk dashboard: LAYOUT: - Header (full width) - Sidebar (fixed 250px) - Main content (fluid) - Widget area (right sidebar) - Footer (full width) REQUIREMENTS: - 12-column grid system - Gap: 1.5rem - Responsive: sidebar collapse di mobile - Min-height: 100vh - Use CSS variables untuk spacing"

"Buat fungsi untuk dynamic content loading: FUNCTIONS: 1. loadData(apiUrl) - Fetch data dari API 2. renderList(items) - Render array ke DOM 3. addEventListener untuk interactive elements 4. debounce function untuk search input REQUIREMENTS: - Gunakan async/await - Error handling dengan try/catch - Loading states - No jQuery, vanilla JS only"

"Buat form validation real-time: FIELDS: - Email (format validation) - Password (strength: 8+ chars, uppercase, number) - Confirm Password (match validation) - Phone (format validation) FEATURES: - Real-time validation on input - Show/hide error messages - Submit button enable/disable - Debounce validation (300ms)"

"Implement event handling patterns: PATTERNS: 1. Event delegation untuk dynamic elements 2. Debounce untuk search input 3. Throttle untuk scroll events 4. Custom events untuk component communication EXAMPLE: - parent.addEventListener('click', (e) => { if(e.target.matches('.delete-btn')) { // handle delete } });"

"Buatkan React functional component dengan: PROPS: - title (string, required) - items (array of objects) - onSelect (function) - isLoading (boolean) FEATURES: - useState untuk local state - useEffect untuk data fetching - Custom hooks jika perlu - PropTypes untuk type checking - Memoization dengan React.memo STYLING: - CSS Modules atau styled-components - Responsive design - Dark mode support"

"Implement state management untuk todo app: STATE STRUCTURE: { todos: [], filter: 'all', loading: false, error: null } ACTIONS: - ADD_TODO - TOGGLE_TODO - DELETE_TODO - SET_FILTER USING: - React Context API - useReducer untuk complex state - LocalStorage persistence - Optimistic updates"

"Buat custom hook useFetch: FEATURES: - Data fetching dengan fetch API - Loading, error, data states - Refetch functionality - Cache dengan useRef - Dependency array untuk re-fetch IMPLEMENTATION: function useFetch(url, options) { const [data, setData] = useState(null); const [loading, setLoading] = useState(true); const [error, setError] = useState(null); // implementation... }"

"Buat REST API dengan Express.js: ENDPOINTS: - GET /api/users - GET /api/users/:id - POST /api/users - PUT /api/users/:id - DELETE /api/users/:id FEATURES: - Middleware untuk auth, logging, cors - Error handling middleware - Request validation dengan Joi - Database integration (MongoDB/PostgreSQL) - Environment variables dengan dotenv"

"Implement JWT authentication: FEATURES: - User registration (/auth/register) - User login (/auth/login) - Protected routes middleware - Token refresh mechanism - Password hashing dengan bcrypt - Input validation MIDDLEWARE: function authenticateToken(req, res, next) { const token = req.header('Authorization'); // verify token... }"

"Buat CRUD operations dengan MongoDB: MODEL: User { name: String, email: String (unique), password: String (hashed), createdAt: Date } OPERATIONS: - createUser(userData) - findUserById(id) - findUserByEmail(email) - updateUser(id, updates) - deleteUser(id) USING: - Mongoose ODM - Async/await - Error handling - Data validation"

"Buat service class untuk API calls: FEATURES: - Base URL configuration - GET, POST, PUT, DELETE methods - Request/response interceptors - Error handling - Retry logic dengan exponential backoff - Timeout handling (10 seconds) IMPLEMENTATION: class ApiService { constructor(baseURL) { this.baseURL = baseURL; } async get(endpoint) { // implementation... } }"

"Handle API errors secara komprehensif: ERROR TYPES: 1. Network errors (offline, CORS) 2. HTTP errors (400, 401, 403, 404, 500) 3. Timeout errors 4. JSON parsing errors HANDLING: - User-friendly error messages - Retry mechanism (max 3 attempts) - Fallback data jika available - Logging untuk debugging - Toast notifications"

"Implement caching untuk API responses: STRATEGIES: 1. Memory cache (Map/WeakMap) 2. LocalStorage untuk offline data 3. Cache with expiry (TTL) 4. Stale-while-revalidate pattern IMPLEMENTATION: - Cache key generation - Cache invalidation - Background refresh - Cache size limits"

[DEBUG REQUEST] Error: "TypeError: Cannot read properties of undefined" Code: function getUserData(users) { return users.map(user => user.profile.name); } Context: Data dari API response Task: Identifikasi dan perbaiki error Steps: 1. Check users array structure 2. Check if user.profile exists 3. Add null checks 4. Test dengan berbagai data scenarios"

[PERFORMANCE DEBUG] Issue: "App lag saat scroll, banyak re-renders" Code: Large React component dengan banyak state Analysis request: 1. Identify unnecessary re-renders 2. Suggest optimization techniques 3. Implement memoization 4. Code splitting suggestions 5. Bundle size optimization"

"Buat unit tests untuk fungsi berikut: FUNCTION: function calculateTotal(items) { return items.reduce((sum, item) => { return sum + (item.price * item.quantity); }, 0); } TEST CASES: 1. Empty array returns 0 2. Single item calculation 3. Multiple items calculation 4. Decimal prices handling 5. Invalid input handling USING: Jest testing framework"

"Buat Dockerfile untuk Node.js + React app: REQUIREMENTS: - Multi-stage build - Production optimization - Nginx untuk static files - Health checks - Environment variables - Security best practices OUTPUT: - Dockerfile - docker-compose.yml - .dockerignore - Deployment instructions"

"Buat GitHub Actions workflow: STAGES: 1. Lint & Type check 2. Unit tests 3. Build optimization 4. Docker build & push 5. Deploy to staging 6. E2E tests 7. Deploy to production FEATURES: - Cache dependencies - Parallel jobs - Environment secrets - Manual approval untuk production"

"Buat environment configuration: FILES: - .env.example (template) - .env.development - .env.staging - .env.production - env-validation.js VARIABLES: - NODE_ENV - DATABASE_URL - API_KEYS (encrypted) - FEATURE_FLAGS - MONITORING_KEYS"