32 prompt templates siap guna — Visual, Security, SEO, QA. Copy, paste, polish. Satu halaman rujukan muktamad untuk Fasa 15.
V Visual Polish Prompts (8)
Gunakan prompt-template ini dengan AI untuk polish visual projek anda. Kata kunci warna emas — ubahsuai mengikut projek anda.
Visual #1
CSS transition • hover effect • 300ms
Polish CSS — Transition & Hover Effects
Guna apabila: Button dan card kelihatan "static" — tiada feedback bila user hover.
"Polish CSS untuk landing page saya di [URL].
Tambah transition pada semua button dan card:
1. Button: hover scale 1.02, transition 200ms ease-in-out
2. Cards: hover lift 4px + border highlight, transition 300ms
3. Links: color transition 200ms
4. Icons: rotate/scale on hover
5. Nav items: underline slide-in animation
Guna CSS custom properties untuk consistency."
Visual #2
responsive • mobile 375px • tablet 768px
Responsive Check — Mobile & Tablet Fix
Guna apabila: Layout pecah di mobile dan tablet. Overflow horizontal, text terlalu kecil, grid broken.
"Responsive check untuk landing page saya di [URL].
Baiki layout untuk:
1. Mobile 375px: fix overflow, adjust font sizes, stack grid into single column
2. Tablet 768px: 2-column grid, adjust padding, maintain readability
3. Desktop 1024px: ensure max-width doesn't stretch too wide
4. Wide 1440px: center content, add max-width container
Guna mobile-first approach dengan CSS media queries.
Current issues: [senarai isu responsive yang nampak]"
Visual #3
color contrast • WCAG AA • palette
Color Contrast Audit — WCAG AA Compliant
Guna apabila: Text sukar dibaca kerana contrast rendah antara text dan background.
"Color contrast audit untuk page saya di [URL].
Check semua text-background pairs guna WCAG AA standard (min 4.5:1 ratio).
Current colors: [senarai warna yang digunakan]
Issues: [senarai contrast issues]
Suggest palette baru yang:
1. Maintain dark theme vibe (jangan tukar total)
2. All pairs pass WCAG AA
3. Maintain brand identity
4. Include: background, text primary, text secondary, accent (cyan/magenta/gold), borders"
Visual #4
empty state • Tiada data • CTA
Empty State — "Tiada Data" + CTA
Guna apabila: Page/list/table nampak kosong bila tiada data. User tak tau nak buat apa.
"Tambah empty state component untuk page saya.
Apabila tiada data untuk display, tunjuk:
1. Ikon yang relevant (cth: 📋 untuk task, 👥 untuk users)
2. Title: 'Tiada Data Lagi'
3. Subtitle: 'Mula dengan menambah [item] pertama anda'
4. CTA button: 'Tambah Baru' / 'Mulakan Sekarang'
5. Animation: subtle fade-in untuk empty state
Guna dark theme, center alignment, consistent dengan design sedia ada."
Visual #5
print CSS • A4 • hide navigation
Print CSS — A4 Layout Ready
Guna apabila: User nak print page atau simpan sebagai PDF. Navigation, buttons, dan particle background kelihatan.
Guna apabila: Imej besar lambat load. Alt text missing. Format imej tak optimised.
"Optimize semua imej dalam page saya di [URL].
1. Tambah loading='lazy' untuk semua images below the fold
2. Tambah alt text descriptive untuk setiap <img>
3. Suggest convert ke WebP format untuk smaller file size
4. Check image dimensions — pastikan tak oversized (max 1920px width)
5. Tambah width dan height attributes untuk prevent layout shift (CLS)
6. Suggest responsive images dengan srcset untuk different viewports"
Guna apabila: Content async ambil masa untuk fetch. Page nampak kosong semasa loading.
"Tambah skeleton loading untuk page saya.
Untuk setiap async content section, buat skeleton placeholder:
1. Shimmer animation: linear gradient yang slide dari kiri ke kanan
@keyframes shimmer { 0% { background-position: -200px 0; } 100% { background-position: 200px 0; } }
2. Skeleton shapes:
- Text skeleton: kelabu width 80%/60%/40% height 1em
- Card skeleton: rectangle dengan rounded corners
- Avatar skeleton: circle 48px
- Image skeleton: rectangle 16:9 ratio
3. Skeleton hilang bila content actual dah siap load (JavaScript)"
Visual #8
focus states • keyboard outline • accessibility
Focus States — Keyboard Accessibility
Guna apabila: User guna keyboard (Tab) untuk navigate tapi tiada visible focus indicator.
"Tambah focus states untuk semua interactive elements:
- Input fields: focus ring 2px solid cyan + box-shadow
- Buttons: focus outline 2px solid cyan, offset 2px
- Links: focus underline + color change
- Select/dropdown: focus border color cyan
Guna CSS :focus-visible (instead of :focus) supaya focus ring hanya nampak untuk keyboard users, bukan mouse users.
Jangan guna outline: none tanpa gantian."
S Security Audit Prompts (8)
Prompt untuk mengaudit dan memperkukuh security projek anda. Kata kunci emas — fokus pada bahagian paling kritikal.
Security #1
API keys • XSS • CORS
Full Security Audit — API Keys, XSS, CORS, Secrets
Guna apabila: Nak buat security audit menyeluruh untuk projek.
"Audit kod ini untuk security vulnerabilities.
Check:
1. API keys — cari pattern: 'sk-', 'pk_', 'supabase_key', 'api_key', 'token', 'secret'
2. XSS — adakah user input digunakan dengan innerHTML? Kalau ya, gantikan dengan textContent
3. CORS — Access-Control-Allow-Origin: guna domain spesifik, bukan *
4. Secrets — adakah password, tokens, atau keys hardcoded dalam JavaScript?
5. SQL injection — (if applicable) adakah user input di-sanitize sebelum query?
Bagi saya report format: [FILE:LINE] [ISU] -> [RISK LEVEL] -> [FIX SUGGESTION]"
Security #2
.env • exposed • frontend browser
Check .env vars — Frontend Exposure
Guna apabila: Nak pastikan tiada secrets yang terdedah di frontend browser.
"Semak semua .env vars dalam projek saya.
1. Senarai semua environment variables yang digunakan
2. Tandakan mana yang exposed di frontend (browser)
3. RED FLAG: Kalau ada 'service_role', 'secret_key', 'password', 'private' — ini MESTI server-side only
4. Suggest: guna VITE_ prefix untuk Vite public vars (they MUST be safe to expose)
5. Check: adakah .env dalam .gitignore?
6. Kalau takde .gitignore, create dengan: .env, .env.local, *.key, secrets.json"
Security #3
RLS • Supabase • user data
Test RLS Policies — Supabase Row Level Security
Guna apabila: Nak pastikan data pengguna hanya boleh diakses oleh pengguna yang sepatutnya.
"Test RLS policies untuk Supabase project saya.
1. Check semua tables — adakah RLS di-enable?
2. Untuk setiap table, check policy:
- SELECT: user hanya boleh baca data sendiri WHERE auth.uid() = user_id
- INSERT: user hanya boleh insert data dengan user_id = auth.uid()
- UPDATE: user hanya boleh update data sendiri
- DELETE: user hanya boleh delete data sendiri
3. Test manually:
- Login sebagai user A, buat data
- Buka tab incognito, login sebagai user B
- Cuba access data user A — KALAU BOLEH, RLS FAIL!
4. Generate SQL policies untuk fix: CREATE POLICY "users_own_data" ON [table] FOR ALL USING (auth.uid() = user_id)"
Guna apabila: API endpoints tiada perlindungan dari spam atau abuse.
"Setup rate limiting untuk API endpoints saya.
Cadangan configuration:
1. Authentication endpoints: max 5 attempts per minute per IP
(cegah brute force login)
2. API endpoints: max 100 requests per minute per IP
(standard rate limit)
3. File upload: max 10MB per file, max 5 files per hour
4. Search/query: max 30 requests per minute per user
Implementation options:
- Cloudflare Rate Limiting (easiest — dalam dashboard)
- Supabase RLS dengan rate limiting policies
- Custom middleware (if using Node.js/Express)
Return 429 Too Many Requests with Retry-After header bila limit tercapai."
E SEO Prompts (8)
Prompt untuk SEO setup — dari meta tags hingga sitemap. Bantu Google dan social media faham projek anda.
SEO #1
meta tags • title 60 char • OG image 1200x630
Generate Complete Meta Tags — Title, Description, OG
Guna apabila: Header <head> masih kosong atau meta tags tak optimised.
"Generate complete meta tags untuk landing page saya.
Projek: [nama/penerangan projek]
Primary keyword: [keyword utama]
Bagi saya HTML yang siap copy-paste:
<!-- Primary Meta Tags -->
<title>[50-60 chars, keyword depan]</title>
<meta name="description" content="[150-160 chars, ada CTA]">
<!-- Open Graph / Facebook -->
<meta property="og:type" content="website">
<meta property="og:url" content="[URL]">
<meta property="og:title" content="[title]">
<meta property="og:description" content="[description]">
<meta property="og:image" content="[1200x630 image URL]">
<!-- Twitter -->
<meta property="twitter:card" content="summary_large_image">
<meta property="twitter:url" content="[URL]">
<meta property="twitter:title" content="[title]">
<meta property="twitter:description" content="[description]">
<meta property="twitter:image" content="[1200x630 image URL]">"
SEO #2
sitemap.xml • public pages • GSC
Generate Sitemap.xml — Semua Public Pages
Guna apabila: Nak bantu Google discover semua pages dalam website.
"Buat sitemap.xml untuk website saya di [URL].
Include semua public pages:
- / (homepage) — priority 1.0, weekly
- /features — priority 0.9, weekly
- /pricing — priority 0.8, weekly
- /about — priority 0.7, monthly
- /blog/* — priority 0.6, monthly
- /contact — priority 0.5, monthly
Exclude: /admin/*, /dashboard/*, /api/*, /login, /signup
Format:
<?xml version="1.0" encoding="UTF-8"?>
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
<url><loc>https://[domain]/</loc><priority>1.0</priority><changefreq>weekly</changefreq></url>
...
</urlset>
Selepas generate, submit ke Google Search Console."
SEO #3
robots.txt • disallow admin • crawl
Generate Robots.txt — Allow All, Block Admin
Guna apabila: Nak control page mana yang Google boleh crawl.
"Buat robots.txt untuk website saya:
User-agent: *
Allow: /
Disallow: /admin/
Disallow: /dashboard/
Disallow: /api/
Disallow: /login
Disallow: /signup
Sitemap: https://[domain]/sitemap.xml
# Optional: Delay for slower servers
# Crawl-Delay: 10
Note:
- Disallow tidak bermaksud page tak akan di-index — ia hanya cegah crawling
- Untuk block indexing total, guna <meta name="robots" content="noindex">
- robots.txt adalah public — jangan letak sensitive paths here"
Guna apabila: Nak tahu apa yang kurang dari segi SEO dan macam mana nak improve.
"Audit SEO untuk page saya di [URL].
Check:
1. Title tag: [current] — suggest improvement
2. Meta description: [current] — suggest improvement
3. Heading structure: H1? H2? H3? — betul ke hierarchy?
4. URL structure: short, descriptive, keyword?
5. Image alt text: semua ada?
6. Internal links: cukup ke?
7. Page speed: loading cepat?
8. Mobile friendly: responsive?
9. Content length: cukup comprehensive?
10. Keyword usage: primary keyword dalam H1, first paragraph, URL?
Bagi saya action items prioritised by impact."
SEO #6
social media card • OG title • share preview
Generate Social Media Preview Card
Guna apabila: URL dikongsi di social media tapi preview tak menarik atau tak keluar langsung.
"Generate social media preview card untuk page saya.
Target platforms: WhatsApp, Facebook, Twitter/X, Telegram, LinkedIn
Bagi saya:
1. OG Title (max 70 chars, grab perhatian)
2. OG Description (max 200 chars, include value prop dan CTA)
3. OG Image description (untuk generate guna AI image generator):
- Size: 1200x630 pixels
- Style: [modern/minimal/bold]
- Elements: [nama projek, tagline, gradient background, icon/logo]
4. Twitter card type: summary_large_image
Test URLs:
- WhatsApp: paste URL di chat sendiri
- Facebook: https://developers.facebook.com/tools/debug/
- LinkedIn: https://www.linkedin.com/post-inspector/
- Twitter: https://cards-dev.twitter.com/validator"
SEO #7
heading hierarchy • H1 H2 H3 • structure
Check Heading Hierarchy — H1 > H2 > H3
Guna apabila: Nak pastikan heading structure betul untuk SEO dan accessibility.
"Audit heading hierarchy untuk page saya di [URL].
Check:
1. EXACTLY 1 H1 sahaja — yang menerangkan page secara keseluruhan
2. H2 adalah main sections — mesti datang SELEPAS H1
3. H3 adalah subsections — mesti datang SELEPAS H2
4. NO SKIP — jangan ada H1 -> H3 tanpa H2
5. NO EMPTY headings
6. NO headings used purely for styling (guna CSS instead)
7. Headings mengandungi keywords relevant
Current structure: [senarai headings]
Issues: [senarai issues]
Fix: [cadangan heading structure baru]"
SEO #8
meta description • 160 char • CTA • keyword
Meta Description 160 Char — CTA + Keyword
Guna apabila: Meta description tak optimised — terlalu panjang/pendek, tiada CTA, atau tiada keyword.
"Tulis meta description untuk page saya.
Rules:
- 150-160 characters
- Include primary keyword secara natural
- Include CTA (call-to-action): 'Try now', 'Learn more', 'Get started', 'Discover how'
- Unique untuk setiap page (jangan sama semua)
- Describe value proposition — apa user akan dapat?
- Don't use quotes in the description (they break the HTML)
Current page: [nama page / penerangan]
Primary keyword: [keyword]
Bagi saya 3 options — pilihan terbaik, kedua, ketiga."
Q QA Bug Sweep Prompts (8)
Prompt untuk QA sweep — broken links, form validation, Lighthouse, performance, dan cross-browser testing.
QA #1
Playwright • broken links • 404
Playwright Link Checker — Find Broken 404
Guna apabila: Nak check semua links dalam website untuk broken links dan redirect loops.
"Guna Playwright untuk check semua links di [URL].
Cari:
1. Broken links (HTTP 404, 500, etc.)
2. Redirect loops (infinite redirects)
3. Dead images (images that return 404)
4. External links pointing to non-existent pages
5. Anchor links (#id) pointing to non-existent elements
Script suggestion:
const { chromium } = require('playwright');
const links = await page.$$eval('a', els => els.map(a => a.href));
for (const link of links) {
const response = await page.goto(link);
if (response.status() >= 400) console.log('BROKEN:', link, response.status());
}
Bagi saya report: broken links sorted by status code."
QA #2
form validation • XSS • invalid email
Test Form Validation — Empty, Invalid, XSS Attempt
Guna apabila: Forms tak ada validation yang betul. User boleh submit data kosong atau invalid.
"Test form validation untuk page saya di [URL].
Test scenarios untuk setiap form:
1. Empty submit: klik submit tanpa isi apa-apa
- Expect: error message 'Sila isi ruangan ini'
2. Invalid email: 'notanemail'
- Expect: error message 'Email tidak sah'
3. Password too short: 'ab'
- Expect: error message 'Minimum 6 aksara'
4. XSS attempt: <script>alert('xss')</script>
- Expect: sanitize / block — NO alert popup
5. Very long input: 5000+ characters
- Expect: truncate atau error message
6. Special characters: !@#$%^&*()
- Expect: handle gracefully (no crash)
Bagi saya report: PASS/FAIL untuk setiap scenario."
"Optimize page load time untuk [URL].
Current load time: [saat]
Target: <3 saat
Suggestions:
1. Image compression: convert semua images ke WebP, resize ke max needed dimensions
2. Code minification: minify CSS, JavaScript, HTML
3. Font optimization: subset fonts (hanya chars yang digunakan), preload, font-display:swap
4. Lazy loading: images below the fold — loading='lazy'
5. Reduce render-blocking: inline critical CSS, defer JS with async/defer
6. Browser caching: set Cache-Control headers untuk static assets
7. CDN: pastikan Cloudflare/Netlify CDN aktif
8. Remove unused CSS/JS: audit dan buang yang tak guna
Bagi saya action items prioritised by impact on load time."
QA #5
cross-browser • Safari • Firefox • Chrome
Cross-Browser Test — Safari, Firefox, Chrome
Guna apabila: Projek nampak ok di Chrome tapi broken di Safari/Firefox.
"Check cross-browser compatibility untuk page saya di [URL].
Test di:
1. Google Chrome (latest) — baseline
2. Safari (latest) — common issues: flexbox gap, CSS grid, backdrop-filter
3. Firefox (latest) — common issues: CSS nesting, :has() selector, container queries
Common compatibility issues:
- Flexbox gap: Safari supports from 14.5 — guna margin fallback
- CSS Grid: older Firefox need -moz- prefix
- backdrop-filter: Safari supports with -webkit- prefix, Firefox from 103
- :has(): Safari 15.4+, Firefox 121+ — provide fallback
- CSS variables: OK semua modern browsers
- WebP: Safari 14+, Firefox 65+ — provide JPEG/PNG fallback
Bagi saya specific CSS/JS fixes untuk compatibility issues yang dikesan."
QA #6
console error • JS errors • debug
Console Error Sweep — Fix All JS Errors
Guna apabila: Banyak console errors — CORS, 404, undefined variables, atau JS exceptions.
"Sweep console errors untuk page saya di [URL].
Current console errors:
[paste semua console errors di sini]
Untuk setiap error, saya nak:
1. Punca error: apa yang menyebabkan ni?
2. Impact: adakah ni kritikal? (block functionality / cosmetic only)
3. Fix: specific code change untuk baiki
4. Prevention: macam mana nak elak di masa depan?
Common console errors:
- Uncaught TypeError: undefined is not a function / Cannot read property of null
- 404: failed to load resource (check path)
- CORS: blocked by CORS policy
- Mixed content: HTTPS page loading HTTP resource
- Deprecated API: using removed browser APIs"
QA #7
mobile 375px • overflow • touch target
Mobile Responsiveness — 375px Viewport Fix
Guna apabila: Website broken kat mobile — overflow horizontal, buttons too small, text too tiny.
"Check mobile responsiveness di 375px viewport untuk page saya di [URL].
Issues yang nampak:
[senarai isu mobile]
Fix yang diperlukan:
1. Overflow: pastikan tiada horizontal scroll — max-width: 100% untuk semua containers
2. Touch targets: minimum 44x44px untuk semua buttons/links (Apple HIG)
3. Text size: minimum 16px untuk inputs (cegah iOS auto-zoom)
4. Spacing: padding minima 16px untuk content dalam mobile
5. Navigation: hamburger menu untuk mobile (bukan full navbar)
6. Forms: inputs tak boleh exceed viewport width
7. Images: max-width: 100%, height: auto
Bagi saya CSS fixes dalam media queries @media (max-width: 480px)."
Guna apabila: Page size terlalu besar dan nak enforce performance budget yang ketat.
"Audit performance budget untuk page saya di [URL].
Set budget:
- Total page: <500KB
- Images: <200KB
- Fonts: <100KB
- CSS: <50KB
- JS: <50KB
- HTML: <100KB
Current usage:
[senarai current sizes]
Actions untuk reach budget:
1. Images: WebP format, resize to max 1920px, compress dengan 80% quality
2. Fonts: subset (hanya Latin + aksara yang digunakan), gunakan woff2 format
3. CSS: remove unused styles, minify, combine files
4. JS: remove unused code, minify, defer non-critical
5. HTML: minify, remove comments in production
6. Caching: set long cache untuk static assets (1 year for fonts, 1 month for images)
7. CDN: ensure Cloudflare/Netlify caching is optimal"
Final Pre-Launch Checklist
Sebelum launch, pastikan anda telah melengkapkan SEMUA langkah polishing. Gunakan jadual ini untuk tracking.