Perpustakaan prompt

Salin-tempel prompt untuk Claude Code, diberi tag berdasarkan tugas dan peran.

export const PromptLibrary = ({text = {}, labels = {}, tagLabels = {}, phaseLabels = {}, sourceLabels = {}, catLabels = {}}) => { const RAW = useMemo(() => [{ id: 'get-oriented-in-a', sdlc: 'discover', cat: 'Onboard', startN: 1, roles: [], prompt: 'give me an overview of this codebase: architecture, key directories, and how the pieces connect', nextHref: '/en/memory', src: 'workflows' }, { id: 'explain-unfamiliar-code', sdlc: 'discover', cat: 'Understand', roles: [], prompt: 'explain what {path} does and how data flows through it. write it up as {format}', slots: { path: 'src/scheduler/queue.ts', format: 'an HTML page with a diagram, then open it in my browser' }, nextHref: '/en/output-styles', src: 'workflows' }, { id: 'find-where-something-happens', sdlc: 'discover', cat: 'Understand', startN: 2, roles: [], prompt: 'where do we {behavior}?', slots: { behavior: 'validate uploaded file types' }, src: 'workflows' }, { id: 'see-what-depends-on', sdlc: 'discover', cat: 'Understand', roles: [], prompt: 'what would break if I deleted {target}?', slots: { target: 'the retryWithBackoff helper' }, src: 'workflows' }, { id: 'trace-how-code-evolved', sdlc: 'discover', cat: 'Understand', roles: [], prompt: 'look through the commit history of {path} and summarize how it evolved and why', slots: { path: 'internal/auth/session.go' }, src: 'best-practices' }, { id: 'scope-a-change-before', sdlc: 'discover', cat: 'Understand', roles: ['pm', 'design'], prompt: 'which files would I need to touch to {change}?', slots: { change: 'add a dark mode toggle to settings' }, src: 'teams' }, { id: 'ask-the-codebase-a', sdlc: 'discover', cat: 'Understand', roles: ['pm'], prompt: 'I am a {role}. walk me through what happens when a user {action}, from the UI down to the result', slots: { role: 'PM', action: 'clicks Export to PDF' }, nextHref: '/en/output-styles', src: 'teams' }, { id: 'plan-a-multi-file', sdlc: 'design', cat: 'Plan', roles: ['pm', 'design'], prompt: 'plan how to refactor the {target} to {goal}. list the files you would change, but don't edit anything yet', slots: { target: 'payment module', goal: 'support multiple currencies' }, src: 'workflows' }, { id: 'draft-a-spec-by', sdlc: 'design', cat: 'Plan', roles: ['pm'], prompt: 'I want to build {feature}. interview me about implementation, UX, edge cases, and tradeoffs until we have covered everything, then write the spec to SPEC.md', slots: { feature: 'per-workspace rate limits' }, nextHref: '/en/skills', src: 'best-practices' }, { id: 'turn-a-meeting-into', sdlc: 'design', cat: 'Plan', roles: ['pm'], prompt: 'read {input} and write up the action items, then create a {tracker} ticket for each with acceptance criteria', slots: { input: '@meeting-notes.md', tracker: 'Linear' }, needs: 'tracker', nextHref: '/en/skills', src: 'teams' }, { id: 'map-edge-cases-before', sdlc: 'design', cat: 'Plan', roles: ['design', 'pm'], prompt: 'list the error states, empty states, and edge cases for {feature} that the design needs to cover', slots: { feature: 'the file upload flow' }, src: 'teams' }, { id: 'turn-a-mockup-into', sdlc: 'design', cat: 'Prototype', roles: ['design', 'pm', 'marketing'], paste: 'mockup', prompt: 'here is a mockup. build a working prototype I can click through, matching the layout and states shown', src: 'teams' }, { id: 'implement-from-a-screenshot', sdlc: 'design', cat: 'Prototype', roles: ['design'], paste: 'design', needs: 'browser', prompt: 'implement this design, then take a screenshot of the result, compare it to the original, and fix any differences', nextHref: '/en/goal', src: 'best-practices' }, { id: 'follow-an-existing-pattern', sdlc: 'build', cat: 'Implement', roles: [], prompt: 'look at how {example} is implemented to understand the pattern, then build {new} the same way', slots: { example: 'the GitHub webhook handler', new: 'a Stripe webhook handler' }, nextHref: '/en/memory', src: 'best-practices' }, { id: 'generate-docs-for-code', sdlc: 'build', cat: 'Implement', roles: ['docs'], prompt: 'find {scope} without {format} comments and add them, matching the style already used in the file', slots: { scope: 'the public functions in src/auth/', format: 'JSDoc' }, src: 'workflows' }, { id: 'add-a-small-well', sdlc: 'build', cat: 'Implement', roles: [], prompt: 'add a {endpoint} endpoint that returns {payload}', slots: { endpoint: '/health', payload: 'the app version and uptime' }, src: 'workflows' }, { id: 'build-a-small-internal', sdlc: 'build', cat: 'Implement', roles: ['pm', 'design', 'marketing', 'docs'], prompt: 'create a {tool} using HTML, CSS, and vanilla JavaScript, then open it in my browser', slots: { tool: 'drag-and-drop Kanban board with three columns' }, src: 'teams' }, { id: 'work-an-issue-end', sdlc: 'build', cat: 'Implement', roles: [], prompt: 'read issue #{issue}, implement the fix, and run the tests', slots: { issue: '312' }, needs: 'gh', src: 'workflows' }, { id: 'find-and-update-copy', sdlc: 'build', cat: 'Implement', roles: ['design', 'docs', 'marketing'], prompt: 'find every place we say "{copy}" or a close variant, show me each one in context, then update them all to "{new}". leave tests and the changelog alone', slots: { copy: 'Sign up free', new: 'Start free trial' }, src: 'teams' }, { id: 'draft-from-past-examples', sdlc: 'build', cat: 'Implement', roles: ['docs', 'marketing', 'pm'], prompt: 'read the {examples} in {folder} to learn the structure and voice, then draft a new one for {topic}', slots: { examples: 'privacy impact assessments', folder: 'legal/pia/', topic: 'the new analytics integration' }, nextHref: '/en/skills', src: 'legal' }, { id: 'write-tests-run-them', sdlc: 'build', cat: 'Test', startN: 4, roles: [], prompt: 'write tests for {path}, run them, and fix any failures', slots: { path: 'app/parsers/feed.py' }, nextHref: '/en/memory', src: 'workflows' }, { id: 'drive-implementation-from-tests', sdlc: 'build', cat: 'Test', roles: [], prompt: 'write tests for {feature} first, then implement it until they pass', slots: { feature: 'the password reset flow' }, src: 'ebook' }, { id: 'fill-gaps-from-a', sdlc: 'build', cat: 'Test', roles: [], prompt: 'read {report} and add tests for the lowest-covered files until each is above {target}%', slots: { report: 'coverage/coverage-summary.json', target: '80' }, nextHref: '/en/goal', src: 'workflows' }, { id: 'migrate-a-pattern-across', sdlc: 'build', cat: 'Refactor', roles: [], prompt: 'migrate everything from {from} to {to}: identify every place that needs to change, then make the changes', slots: { from: 'the old logging API', to: 'the structured logger' }, src: 'workflows' }, { id: 'port-code-between-languages', sdlc: 'build', cat: 'Refactor', roles: [], prompt: 'port {source} to {target}, keeping the same {keep}', slots: { source: 'this Python module', target: 'Rust', keep: 'public API and test behavior' }, src: 'teams' }, { id: 'optimize-against-a-measurable', sdlc: 'build', cat: 'Refactor', roles: ['data'], prompt: 'optimize {target} to bring {metric} from {current} down to under {goal}', slots: { target: 'the search query', metric: 'p95 latency', current: '2s', goal: '500ms' }, nextHref: '/en/goal', src: 'ebook' }, { id: 'fix-a-precise-visual', sdlc: 'build', cat: 'Refactor', roles: ['design'], prompt: 'the {element} extends {amount} beyond the {container} on {viewport}. fix it.', slots: { element: 'login button', amount: '20px', container: 'card border', viewport: 'mobile' }, nextHref: '/en/desktop#preview-your-app', src: 'ebook' }, { id: 'review-your-changes-before', sdlc: 'build', cat: 'Review', startN: 5, roles: [], prompt: 'review my uncommitted changes and flag anything that looks risky before I commit', nextHref: '/en/commands', src: 'workflows' }, { id: 'review-a-pull-request', sdlc: 'build', cat: 'Review', roles: [], prompt: 'review PR #{pr} and summarize what changed, then list any concerns', slots: { pr: '247' }, needs: 'gh', nextHref: '/en/code-review', src: 'workflows' }, { id: 'review-infrastructure-changes-before', sdlc: 'build', cat: 'Review', roles: ['security', 'ops'], paste: 'plan', prompt: 'here is my Terraform plan output. what is this going to do, and is anything here going to cause problems?', src: 'teams' }, { id: 'run-a-security-review', sdlc: 'build', cat: 'Review', roles: ['security'], prompt: 'use a subagent to review {path} for security issues and report what it finds', slots: { path: 'src/api/' }, nextHref: '/en/sub-agents', src: 'best-practices' }, { id: 'review-content-before-sending', sdlc: 'build', cat: 'Review', roles: ['marketing', 'docs'], prompt: 'review {file} for {concerns} and list anything I should fix before it goes to {reviewer}', slots: { file: 'launch-post.md', concerns: 'unsupported claims, missing attributions, and brand-guideline issues', reviewer: 'legal' }, nextHref: '/en/skills', src: 'legal' }, { id: 'course-correct-a-wrong', sdlc: 'build', cat: 'Steer', roles: [], prompt: 'that is not right: {feedback}. try a different approach', slots: { feedback: 'the function signature needs to stay backward-compatible' }, nextHref: '/en/checkpointing', src: 'best-practices' }, { id: 'narrow-the-scope-of', sdlc: 'build', cat: 'Steer', roles: [], prompt: 'that is too much. keep only the changes to {scope} and undo your other edits', slots: { scope: 'the validation logic in src/forms/' }, src: 'best-practices' }, { id: 'turn-a-correction-into', sdlc: 'build', cat: 'Steer', roles: [], prompt: 'you keep {mistake}. add a rule to CLAUDE.md so this stops happening', slots: { mistake: 'using default exports when this project uses named exports' }, nextHref: '/en/memory', src: 'best-practices' }, { id: 'resolve-merge-conflicts', sdlc: 'ship', cat: 'Git', roles: [], prompt: 'resolve the merge conflicts in this branch and explain what you kept from each side', src: 'workflows' }, { id: 'commit-with-a-generated', sdlc: 'ship', cat: 'Git', roles: [], prompt: 'commit these changes with a message that summarizes what I did', src: 'workflows' }, { id: 'open-a-pull-request', sdlc: 'ship', cat: 'Git', roles: [], prompt: 'find the {tracker} ticket about {topic} and open a PR that implements it', slots: { tracker: 'Linear', topic: 'the login timeout' }, needs: 'tracker', src: 'workflows' }, { id: 'draft-release-notes-from', sdlc: 'ship', cat: 'Release', roles: ['pm', 'docs', 'marketing'], prompt: 'compare {from} to {to} and draft release notes grouped by feature, fix, and breaking change', slots: { from: 'v2.3.0', to: 'v2.4.0' }, nextHref: '/en/skills', src: 'workflows' }, { id: 'write-a-ci-workflow', sdlc: 'ship', cat: 'Release', roles: ['ops'], prompt: 'write a GitHub Actions workflow that {steps} on every push to {branch}', slots: { steps: 'runs the tests and deploys to staging', branch: 'main' }, src: 'workflows' }, { id: 'find-and-fix-a', sdlc: 'operate', cat: 'Debug', startN: 3, roles: [], prompt: 'the {test} test is failing, find out why and fix it', slots: { test: 'UserAuth' }, src: 'workflows' }, { id: 'investigate-a-reported-error', sdlc: 'operate', cat: 'Debug', roles: ['ops'], prompt: 'users are seeing {symptom} on {where}. investigate and tell me what is going on', slots: { symptom: '500 errors', where: '/api/settings' }, nextHref: '/en/web-quickstart#pre-fill-sessions', src: 'workflows' }, { id: 'fix-a-build-error', sdlc: 'operate', cat: 'Debug', roles: ['ops'], paste: 'error', prompt: 'here is a build error. fix the root cause and verify the build succeeds', src: 'best-practices' }, { id: 'investigate-a-production-incident', sdlc: 'operate', cat: 'Incident', roles: ['ops', 'security'], prompt: '{symptom}. check the logs, recent deploys, and config changes, then tell me the most likely cause', slots: { symptom: 'the checkout endpoint started returning 500s an hour ago' }, nextHref: '/en/mcp', src: 'workflows' }, { id: 'diagnose-from-a-console', sdlc: 'operate', cat: 'Incident', roles: ['ops', 'data'], paste: 'screenshot', prompt: 'here is a screenshot of {console}. walk me through why {resource} is failing and give me the exact commands to fix it', slots: { console: 'the GCP Kubernetes dashboard', resource: 'this pod' }, src: 'teams' }, { id: 'query-logs-in-plain', sdlc: 'operate', cat: 'Incident', roles: ['security', 'ops', 'data'], prompt: 'show me all {events} for {scope} over {timeframe}. write the query, run it, and tell me what stands out', slots: { events: 'failed logins', scope: 'the auth service', timeframe: 'the past 24 hours' }, needs: 'db', src: 'cybersecurity' }, { id: 'analyze-a-data-file', sdlc: 'operate', cat: 'Data', roles: ['data', 'pm', 'marketing'], paste: 'csv', prompt: 'read {file}, summarize the key patterns, and write the results to {output}', slots: { file: '@reports/q1-signups.csv', output: 'an HTML page with charts, then open it in my browser' }, nextHref: '/en/mcp', src: 'teams' }, { id: 'generate-variations-from-performance', sdlc: 'operate', cat: 'Data', roles: ['marketing', 'data'], paste: 'csv', prompt: 'read {file}, find the underperforming {items}, and generate {n} new variations that stay under {limit} characters', slots: { file: '@ads-performance.csv', items: 'headlines', n: '20', limit: '90' }, nextHref: '/en/mcp', src: 'teams' }, { id: 'turn-a-recurring-task', sdlc: 'operate', cat: 'Automate', roles: [], prompt: 'create a /{name} skill for this project that {steps}', slots: { name: 'ship', steps: 'runs the linter and tests, then drafts a commit message' }, src: 'workflows' }, { id: 'add-a-hook-for', sdlc: 'operate', cat: 'Automate', roles: [], prompt: 'write a hook that {action} after every {event}', slots: { action: 'runs prettier', event: 'edit to a .ts or .tsx file' }, src: 'best-practices' }, { id: 'connect-a-tool-with', sdlc: 'operate', cat: 'Automate', roles: [], prompt: 'set up the {server} MCP server so you can read my {data} directly', slots: { server: 'Sentry', data: 'error reports' }, src: 'workflows' }, { id: 'capture-what-to-remember', sdlc: 'operate', cat: 'Automate', roles: ['pm', 'docs'], prompt: 'summarize what we did this session and suggest what to add to CLAUDE.md', src: 'teams' }], []); const PROMPTS = useMemo(() => { if (typeof window !== 'undefined') { const rawIds = new Set(RAW.map(p => p.id)); RAW.forEach(p => { if (!text[p.id]) console.warn('[prompt-library] no text[] entry for id:', p.id); }); Object.keys(text).forEach(k => { if (!rawIds.has(k)) console.warn('[prompt-library] orphaned text[] key:', k); }); } return RAW.map(p => ({ ...p, title: p.id, teaches: '', ...text[p.id] || ({}) })); }, [RAW, text]); const L = labels; const TL = k => tagLabels[k] || k; const CAT_TAG = useMemo(() => ({ Onboard: 'understand', Understand: 'understand', Plan: 'plan', Prototype: 'prototype', Implement: 'build', Test: 'test', Refactor: 'refactor', Review: 'review', Steer: 'steer', Git: 'git', Release: 'release', Debug: 'debug', Incident: 'debug', Data: 'data', Automate: 'automate' }), []); const TAGS = useMemo(() => ['understand', 'plan', 'prototype', 'build', 'test', 'refactor', 'review', 'steer', 'debug', 'git', 'release', 'data', 'automate', 'pm', 'design', 'docs', 'marketing', 'security', 'ops'], []); const tagsOf = p => [CAT_TAG[p.cat], ...p.roles || []]; const doc = useMemo(() => { const p = typeof window !== 'undefined' ? window.location.pathname : ''; const base = p.startsWith('/docs/') ? '/docs' : ''; const m = p.slice(base.length).match(/^/([a-z]{2}(?:-[A-Z]{2})?)//); const locale = m ? m[1] : 'en'; return href => { if (!href) return undefined; if (href[0] === '#' || href.startsWith('https://')) return href; if (!(/^/[A-Za-z0-9]/).test(href)) return undefined; return base + (href.startsWith('/en/') ? '/' + locale + href.slice(3) : href); }; }, []); const SAFE_HREF = /^(/(?![/\\s])|#|https?://)/; const linkify = s => { const out = []; let last = 0; const re = /[([^]]+)](([^)]+))/g; for (let m; m = re.exec(s); ) { if (m.index > last) out.push(s.slice(last, m.index)); out.push(SAFE_HREF.test(m[2]) ? {m[1]} : m[1]); last = re.lastIndex; } if (last < s.length) out.push(s.slice(last)); return out; }; const codeify = s => s.split(/([^]+)/g).map((part, i) => part[0] === '' ? {part.slice(1, -1)} : part); const SOURCES = useMemo(() => ({ 'workflows': '/en/common-workflows', 'teams': 'https://claude.com/blog/how-anthropic-teams-use-claude-code', 'legal': 'https://claude.com/blog/how-anthropic-uses-claude-legal', 'cybersecurity': 'https://claude.com/blog/how-anthropic-uses-claude-cybersecurity', 'best-practices': '/en/best-practices', 'ebook': 'https://resources.anthropic.com/hubfs/Scaling%20agentic%20coding%20across%20your%20organization.pdf' }), []); const [mounted, setMounted] = useState(false); const [q, setQ] = useState(''); const [start, setStart] = useState(true); const [sel, setSel] = useState(null); const [openId, setOpenId] = useState(null); const [copied, setCopied] = useState(null); const [fills, setFills] = useState({}); const copyTimer = useRef(null); useEffect(() => { setMounted(true); return () => clearTimeout(copyTimer.current); }, []); const setFill = (id, key, val) => setFills(f => ({ ...f, [id + '.' + key]: val })); const fillOf = (p, key) => { const v = fills[p.id + '.' + key]; return v !== undefined ? v : p.slots && p.slots[key] !== undefined ? p.slots[key] : ''; }; const assemble = p => p.prompt.replace(/{(\w+)}/g, (, k) => fillOf(p, k) || p.slots && p.slots[k] || k); const preview = p => p.prompt.replace(/{(\w+)}/g, (, k) => p.slots && p.slots[k] || k); const bodyText = p => preview(p) + ' ' + p.teaches.replace(/[([^]]+)]([^)]+)/g, '$1') + ' ' + (p.next || ''); const WIDE_RE = /[\u1100-\u115F\u2E80-\uA4CF\uAC00-\uD7A3\uF900-\uFAFF\uFE30-\uFE4F\uFF00-\uFF60\uFFE0-\uFFE6]/g; const widthFor = s => { const t = typeof s === 'string' ? s : ''; return t.length + (t.match(WIDE_RE) || []).length + 3 + 'ch'; }; const ql = q.trim().toLowerCase(); const toggleTag = k => { setStart(false); setSel(s => !ql && s === k ? null : k); }; const clear = () => { setStart(false); setSel(null); setQ(''); }; const results = useMemo(() => { const list = PROMPTS.filter(p => { if (ql) return p.title.toLowerCase().includes(ql) || bodyText(p).toLowerCase().includes(ql); if (start) return !!p.startN; if (sel) return tagsOf(p).includes(sel); return true; }); if (ql) return list; if (start) return list.sort((a, b) => a.startN - b.startN); if (sel) return list.sort((a, b) => (a.roles || []).length - (b.roles || []).length || (b.sdlc === 'operate') - (a.sdlc === 'operate')); return list; }, [PROMPTS, ql, start, sel]); const matchSnippet = p => { if (!ql || p.title.toLowerCase().includes(ql)) return null; const txt = bodyText(p); const at = txt.toLowerCase().indexOf(ql); if (at < 0) return null; const lo = Math.max(0, at - 30), hi = Math.min(txt.length, at + ql.length + 50); return [lo > 0 ? '…' : '', txt.slice(lo, at), {txt.slice(at, at + ql.length)}, txt.slice(at + ql.length, hi), hi < txt.length ? '…' : '']; }; const grouped = useMemo(() => { if (start && !q.trim()) return []; const g = {}; for (const p of results) { const key = p.sdlc + '|' + p.cat; (g[key] = g[key] || ({ sdlc: p.sdlc, cat: p.cat, items: [] })).items.push(p); } return Object.values(g); }, [results, start, q]); const copy = async (str, id) => { try { await navigator.clipboard.writeText(str); } catch { const ta = document.createElement('textarea'); ta.value = str; ta.setAttribute('readonly', ''); ta.style.position = 'fixed'; ta.style.opacity = '0'; document.body.appendChild(ta); ta.select(); document.execCommand('copy'); document.body.removeChild(ta); } clearTimeout(copyTimer.current); setCopied(id); copyTimer.current = setTimeout(() => setCopied(null), 1600); }; const promptBody = p => { if (!p.slots) return {p.prompt}; const parts = p.prompt.split(/({\w+})/g); return {parts.map((part, idx) => { const m = part.match(/^{(\w+)}$/); if (!m) return {part}; const k = m[1]; const val = fillOf(p, k); return <input key={idx} type="text" className="pl-slot" value={val} placeholder={p.slots[k] || k} aria-label={k} style={{ width: widthFor(val || p.slots[k]) }} onChange={e => setFill(p.id, k, e.target.value)} onFocus={e => e.target.select()} onClick={e => e.stopPropagation()} />; })} ; }; const card = p => { const open = openId === p.id; const srcHref = SOURCES[p.src]; const srcLabel = sourceLabels[p.src]; const snip = matchSnippet(p); return <div key={p.id} className={'pl-card' + (open ? ' pl-open' : '')}> <button type="button" className="pl-head" onClick={() => setOpenId(open ? null : p.id)} aria-expanded={open}> {p.title} {!!p.startN && {L.startHere} · {p.startN}} {snip ?