6 6
7> Salin-tempel prompt untuk Claude Code, diberi tag berdasarkan tugas dan peran.7> Salin-tempel prompt untuk Claude Code, diberi tag berdasarkan tugas dan peran.
8 8
9export const PromptLibrary = ({text = {}, labels = {}, tagLabels = {}, phaseLabels = {}, sourceLabels = {}, catLabels = {}}) => {
10 const RAW = useMemo(() => [{
11 id: 'get-oriented-in-a',
12 sdlc: 'discover',
13 cat: 'Onboard',
14 startN: 1,
15 roles: [],
16 prompt: 'give me an overview of this codebase: architecture, key directories, and how the pieces connect',
17 nextHref: '/en/memory',
18 src: 'workflows'
19 }, {
20 id: 'explain-unfamiliar-code',
21 sdlc: 'discover',
22 cat: 'Understand',
23 roles: [],
24 prompt: 'explain what {path} does and how data flows through it. write it up as {format}',
25 slots: {
26 path: 'src/scheduler/queue.ts',
27 format: 'an HTML page with a diagram, then open it in my browser'
28 },
29 nextHref: '/en/output-styles',
30 src: 'workflows'
31 }, {
32 id: 'find-where-something-happens',
33 sdlc: 'discover',
34 cat: 'Understand',
35 startN: 2,
36 roles: [],
37 prompt: 'where do we {behavior}?',
38 slots: {
39 behavior: 'validate uploaded file types'
40 },
41 src: 'workflows'
42 }, {
43 id: 'see-what-depends-on',
44 sdlc: 'discover',
45 cat: 'Understand',
46 roles: [],
47 prompt: 'what would break if I deleted {target}?',
48 slots: {
49 target: 'the retryWithBackoff helper'
50 },
51 src: 'workflows'
52 }, {
53 id: 'trace-how-code-evolved',
54 sdlc: 'discover',
55 cat: 'Understand',
56 roles: [],
57 prompt: 'look through the commit history of {path} and summarize how it evolved and why',
58 slots: {
59 path: 'internal/auth/session.go'
60 },
61 src: 'best-practices'
62 }, {
63 id: 'scope-a-change-before',
64 sdlc: 'discover',
65 cat: 'Understand',
66 roles: ['pm', 'design'],
67 prompt: 'which files would I need to touch to {change}?',
68 slots: {
69 change: 'add a dark mode toggle to settings'
70 },
71 src: 'teams'
72 }, {
73 id: 'ask-the-codebase-a',
74 sdlc: 'discover',
75 cat: 'Understand',
76 roles: ['pm'],
77 prompt: 'I am a {role}. walk me through what happens when a user {action}, from the UI down to the result',
78 slots: {
79 role: 'PM',
80 action: 'clicks Export to PDF'
81 },
82 nextHref: '/en/output-styles',
83 src: 'teams'
84 }, {
85 id: 'plan-a-multi-file',
86 sdlc: 'design',
87 cat: 'Plan',
88 roles: ['pm', 'design'],
89 prompt: 'plan how to refactor the {target} to {goal}. list the files you would change, but don\'t edit anything yet',
90 slots: {
91 target: 'payment module',
92 goal: 'support multiple currencies'
93 },
94 src: 'workflows'
95 }, {
96 id: 'draft-a-spec-by',
97 sdlc: 'design',
98 cat: 'Plan',
99 roles: ['pm'],
100 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',
101 slots: {
102 feature: 'per-workspace rate limits'
103 },
104 nextHref: '/en/skills',
105 src: 'best-practices'
106 }, {
107 id: 'turn-a-meeting-into',
108 sdlc: 'design',
109 cat: 'Plan',
110 roles: ['pm'],
111 prompt: 'read {input} and write up the action items, then create a {tracker} ticket for each with acceptance criteria',
112 slots: {
113 input: '@meeting-notes.md',
114 tracker: 'Linear'
115 },
116 needs: 'tracker',
117 nextHref: '/en/skills',
118 src: 'teams'
119 }, {
120 id: 'map-edge-cases-before',
121 sdlc: 'design',
122 cat: 'Plan',
123 roles: ['design', 'pm'],
124 prompt: 'list the error states, empty states, and edge cases for {feature} that the design needs to cover',
125 slots: {
126 feature: 'the file upload flow'
127 },
128 src: 'teams'
129 }, {
130 id: 'turn-a-mockup-into',
131 sdlc: 'design',
132 cat: 'Prototype',
133 roles: ['design', 'pm', 'marketing'],
134 paste: 'mockup',
135 prompt: 'here is a mockup. build a working prototype I can click through, matching the layout and states shown',
136 src: 'teams'
137 }, {
138 id: 'implement-from-a-screenshot',
139 sdlc: 'design',
140 cat: 'Prototype',
141 roles: ['design'],
142 paste: 'design',
143 needs: 'browser',
144 prompt: 'implement this design, then take a screenshot of the result, compare it to the original, and fix any differences',
145 nextHref: '/en/goal',
146 src: 'best-practices'
147 }, {
148 id: 'follow-an-existing-pattern',
149 sdlc: 'build',
150 cat: 'Implement',
151 roles: [],
152 prompt: 'look at how {example} is implemented to understand the pattern, then build {new} the same way',
153 slots: {
154 example: 'the GitHub webhook handler',
155 new: 'a Stripe webhook handler'
156 },
157 nextHref: '/en/memory',
158 src: 'best-practices'
159 }, {
160 id: 'generate-docs-for-code',
161 sdlc: 'build',
162 cat: 'Implement',
163 roles: ['docs'],
164 prompt: 'find {scope} without {format} comments and add them, matching the style already used in the file',
165 slots: {
166 scope: 'the public functions in src/auth/',
167 format: 'JSDoc'
168 },
169 src: 'workflows'
170 }, {
171 id: 'add-a-small-well',
172 sdlc: 'build',
173 cat: 'Implement',
174 roles: [],
175 prompt: 'add a {endpoint} endpoint that returns {payload}',
176 slots: {
177 endpoint: '/health',
178 payload: 'the app version and uptime'
179 },
180 src: 'workflows'
181 }, {
182 id: 'build-a-small-internal',
183 sdlc: 'build',
184 cat: 'Implement',
185 roles: ['pm', 'design', 'marketing', 'docs'],
186 prompt: 'create a {tool} using HTML, CSS, and vanilla JavaScript, then open it in my browser',
187 slots: {
188 tool: 'drag-and-drop Kanban board with three columns'
189 },
190 src: 'teams'
191 }, {
192 id: 'work-an-issue-end',
193 sdlc: 'build',
194 cat: 'Implement',
195 roles: [],
196 prompt: 'read issue #{issue}, implement the fix, and run the tests',
197 slots: {
198 issue: '312'
199 },
200 needs: 'gh',
201 src: 'workflows'
202 }, {
203 id: 'find-and-update-copy',
204 sdlc: 'build',
205 cat: 'Implement',
206 roles: ['design', 'docs', 'marketing'],
207 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',
208 slots: {
209 copy: 'Sign up free',
210 new: 'Start free trial'
211 },
212 src: 'teams'
213 }, {
214 id: 'draft-from-past-examples',
215 sdlc: 'build',
216 cat: 'Implement',
217 roles: ['docs', 'marketing', 'pm'],
218 prompt: 'read the {examples} in {folder} to learn the structure and voice, then draft a new one for {topic}',
219 slots: {
220 examples: 'privacy impact assessments',
221 folder: 'legal/pia/',
222 topic: 'the new analytics integration'
223 },
224 nextHref: '/en/skills',
225 src: 'legal'
226 }, {
227 id: 'write-tests-run-them',
228 sdlc: 'build',
229 cat: 'Test',
230 startN: 4,
231 roles: [],
232 prompt: 'write tests for {path}, run them, and fix any failures',
233 slots: {
234 path: 'app/parsers/feed.py'
235 },
236 nextHref: '/en/memory',
237 src: 'workflows'
238 }, {
239 id: 'drive-implementation-from-tests',
240 sdlc: 'build',
241 cat: 'Test',
242 roles: [],
243 prompt: 'write tests for {feature} first, then implement it until they pass',
244 slots: {
245 feature: 'the password reset flow'
246 },
247 src: 'ebook'
248 }, {
249 id: 'fill-gaps-from-a',
250 sdlc: 'build',
251 cat: 'Test',
252 roles: [],
253 prompt: 'read {report} and add tests for the lowest-covered files until each is above {target}%',
254 slots: {
255 report: 'coverage/coverage-summary.json',
256 target: '80'
257 },
258 nextHref: '/en/goal',
259 src: 'workflows'
260 }, {
261 id: 'migrate-a-pattern-across',
262 sdlc: 'build',
263 cat: 'Refactor',
264 roles: [],
265 prompt: 'migrate everything from {from} to {to}: identify every place that needs to change, then make the changes',
266 slots: {
267 from: 'the old logging API',
268 to: 'the structured logger'
269 },
270 src: 'workflows'
271 }, {
272 id: 'port-code-between-languages',
273 sdlc: 'build',
274 cat: 'Refactor',
275 roles: [],
276 prompt: 'port {source} to {target}, keeping the same {keep}',
277 slots: {
278 source: 'this Python module',
279 target: 'Rust',
280 keep: 'public API and test behavior'
281 },
282 src: 'teams'
283 }, {
284 id: 'optimize-against-a-measurable',
285 sdlc: 'build',
286 cat: 'Refactor',
287 roles: ['data'],
288 prompt: 'optimize {target} to bring {metric} from {current} down to under {goal}',
289 slots: {
290 target: 'the search query',
291 metric: 'p95 latency',
292 current: '2s',
293 goal: '500ms'
294 },
295 nextHref: '/en/goal',
296 src: 'ebook'
297 }, {
298 id: 'fix-a-precise-visual',
299 sdlc: 'build',
300 cat: 'Refactor',
301 roles: ['design'],
302 prompt: 'the {element} extends {amount} beyond the {container} on {viewport}. fix it.',
303 slots: {
304 element: 'login button',
305 amount: '20px',
306 container: 'card border',
307 viewport: 'mobile'
308 },
309 nextHref: '/en/desktop#preview-your-app',
310 src: 'ebook'
311 }, {
312 id: 'review-your-changes-before',
313 sdlc: 'build',
314 cat: 'Review',
315 startN: 5,
316 roles: [],
317 prompt: 'review my uncommitted changes and flag anything that looks risky before I commit',
318 nextHref: '/en/commands',
319 src: 'workflows'
320 }, {
321 id: 'review-a-pull-request',
322 sdlc: 'build',
323 cat: 'Review',
324 roles: [],
325 prompt: 'review PR #{pr} and summarize what changed, then list any concerns',
326 slots: {
327 pr: '247'
328 },
329 needs: 'gh',
330 nextHref: '/en/code-review',
331 src: 'workflows'
332 }, {
333 id: 'review-infrastructure-changes-before',
334 sdlc: 'build',
335 cat: 'Review',
336 roles: ['security', 'ops'],
337 paste: 'plan',
338 prompt: 'here is my Terraform plan output. what is this going to do, and is anything here going to cause problems?',
339 src: 'teams'
340 }, {
341 id: 'run-a-security-review',
342 sdlc: 'build',
343 cat: 'Review',
344 roles: ['security'],
345 prompt: 'use a subagent to review {path} for security issues and report what it finds',
346 slots: {
347 path: 'src/api/'
348 },
349 nextHref: '/en/sub-agents',
350 src: 'best-practices'
351 }, {
352 id: 'review-content-before-sending',
353 sdlc: 'build',
354 cat: 'Review',
355 roles: ['marketing', 'docs'],
356 prompt: 'review {file} for {concerns} and list anything I should fix before it goes to {reviewer}',
357 slots: {
358 file: 'launch-post.md',
359 concerns: 'unsupported claims, missing attributions, and brand-guideline issues',
360 reviewer: 'legal'
361 },
362 nextHref: '/en/skills',
363 src: 'legal'
364 }, {
365 id: 'course-correct-a-wrong',
366 sdlc: 'build',
367 cat: 'Steer',
368 roles: [],
369 prompt: 'that is not right: {feedback}. try a different approach',
370 slots: {
371 feedback: 'the function signature needs to stay backward-compatible'
372 },
373 nextHref: '/en/checkpointing',
374 src: 'best-practices'
375 }, {
376 id: 'narrow-the-scope-of',
377 sdlc: 'build',
378 cat: 'Steer',
379 roles: [],
380 prompt: 'that is too much. keep only the changes to {scope} and undo your other edits',
381 slots: {
382 scope: 'the validation logic in src/forms/'
383 },
384 src: 'best-practices'
385 }, {
386 id: 'turn-a-correction-into',
387 sdlc: 'build',
388 cat: 'Steer',
389 roles: [],
390 prompt: 'you keep {mistake}. add a rule to CLAUDE.md so this stops happening',
391 slots: {
392 mistake: 'using default exports when this project uses named exports'
393 },
394 nextHref: '/en/memory',
395 src: 'best-practices'
396 }, {
397 id: 'resolve-merge-conflicts',
398 sdlc: 'ship',
399 cat: 'Git',
400 roles: [],
401 prompt: 'resolve the merge conflicts in this branch and explain what you kept from each side',
402 src: 'workflows'
403 }, {
404 id: 'commit-with-a-generated',
405 sdlc: 'ship',
406 cat: 'Git',
407 roles: [],
408 prompt: 'commit these changes with a message that summarizes what I did',
409 src: 'workflows'
410 }, {
411 id: 'open-a-pull-request',
412 sdlc: 'ship',
413 cat: 'Git',
414 roles: [],
415 prompt: 'find the {tracker} ticket about {topic} and open a PR that implements it',
416 slots: {
417 tracker: 'Linear',
418 topic: 'the login timeout'
419 },
420 needs: 'tracker',
421 src: 'workflows'
422 }, {
423 id: 'draft-release-notes-from',
424 sdlc: 'ship',
425 cat: 'Release',
426 roles: ['pm', 'docs', 'marketing'],
427 prompt: 'compare {from} to {to} and draft release notes grouped by feature, fix, and breaking change',
428 slots: {
429 from: 'v2.3.0',
430 to: 'v2.4.0'
431 },
432 nextHref: '/en/skills',
433 src: 'workflows'
434 }, {
435 id: 'write-a-ci-workflow',
436 sdlc: 'ship',
437 cat: 'Release',
438 roles: ['ops'],
439 prompt: 'write a GitHub Actions workflow that {steps} on every push to {branch}',
440 slots: {
441 steps: 'runs the tests and deploys to staging',
442 branch: 'main'
443 },
444 src: 'workflows'
445 }, {
446 id: 'find-and-fix-a',
447 sdlc: 'operate',
448 cat: 'Debug',
449 startN: 3,
450 roles: [],
451 prompt: 'the {test} test is failing, find out why and fix it',
452 slots: {
453 test: 'UserAuth'
454 },
455 src: 'workflows'
456 }, {
457 id: 'investigate-a-reported-error',
458 sdlc: 'operate',
459 cat: 'Debug',
460 roles: ['ops'],
461 prompt: 'users are seeing {symptom} on {where}. investigate and tell me what is going on',
462 slots: {
463 symptom: '500 errors',
464 where: '/api/settings'
465 },
466 nextHref: '/en/web-quickstart#pre-fill-sessions',
467 src: 'workflows'
468 }, {
469 id: 'fix-a-build-error',
470 sdlc: 'operate',
471 cat: 'Debug',
472 roles: ['ops'],
473 paste: 'error',
474 prompt: 'here is a build error. fix the root cause and verify the build succeeds',
475 src: 'best-practices'
476 }, {
477 id: 'investigate-a-production-incident',
478 sdlc: 'operate',
479 cat: 'Incident',
480 roles: ['ops', 'security'],
481 prompt: '{symptom}. check the logs, recent deploys, and config changes, then tell me the most likely cause',
482 slots: {
483 symptom: 'the checkout endpoint started returning 500s an hour ago'
484 },
485 nextHref: '/en/mcp',
486 src: 'workflows'
487 }, {
488 id: 'diagnose-from-a-console',
489 sdlc: 'operate',
490 cat: 'Incident',
491 roles: ['ops', 'data'],
492 paste: 'screenshot',
493 prompt: 'here is a screenshot of {console}. walk me through why {resource} is failing and give me the exact commands to fix it',
494 slots: {
495 console: 'the GCP Kubernetes dashboard',
496 resource: 'this pod'
497 },
498 src: 'teams'
499 }, {
500 id: 'query-logs-in-plain',
501 sdlc: 'operate',
502 cat: 'Incident',
503 roles: ['security', 'ops', 'data'],
504 prompt: 'show me all {events} for {scope} over {timeframe}. write the query, run it, and tell me what stands out',
505 slots: {
506 events: 'failed logins',
507 scope: 'the auth service',
508 timeframe: 'the past 24 hours'
509 },
510 needs: 'db',
511 src: 'cybersecurity'
512 }, {
513 id: 'analyze-a-data-file',
514 sdlc: 'operate',
515 cat: 'Data',
516 roles: ['data', 'pm', 'marketing'],
517 paste: 'csv',
518 prompt: 'read {file}, summarize the key patterns, and write the results to {output}',
519 slots: {
520 file: '@reports/q1-signups.csv',
521 output: 'an HTML page with charts, then open it in my browser'
522 },
523 nextHref: '/en/mcp',
524 src: 'teams'
525 }, {
526 id: 'generate-variations-from-performance',
527 sdlc: 'operate',
528 cat: 'Data',
529 roles: ['marketing', 'data'],
530 paste: 'csv',
531 prompt: 'read {file}, find the underperforming {items}, and generate {n} new variations that stay under {limit} characters',
532 slots: {
533 file: '@ads-performance.csv',
534 items: 'headlines',
535 n: '20',
536 limit: '90'
537 },
538 nextHref: '/en/mcp',
539 src: 'teams'
540 }, {
541 id: 'turn-a-recurring-task',
542 sdlc: 'operate',
543 cat: 'Automate',
544 roles: [],
545 prompt: 'create a /{name} skill for this project that {steps}',
546 slots: {
547 name: 'ship',
548 steps: 'runs the linter and tests, then drafts a commit message'
549 },
550 src: 'workflows'
551 }, {
552 id: 'add-a-hook-for',
553 sdlc: 'operate',
554 cat: 'Automate',
555 roles: [],
556 prompt: 'write a hook that {action} after every {event}',
557 slots: {
558 action: 'runs prettier',
559 event: 'edit to a .ts or .tsx file'
560 },
561 src: 'best-practices'
562 }, {
563 id: 'connect-a-tool-with',
564 sdlc: 'operate',
565 cat: 'Automate',
566 roles: [],
567 prompt: 'set up the {server} MCP server so you can read my {data} directly',
568 slots: {
569 server: 'Sentry',
570 data: 'error reports'
571 },
572 src: 'workflows'
573 }, {
574 id: 'capture-what-to-remember',
575 sdlc: 'operate',
576 cat: 'Automate',
577 roles: ['pm', 'docs'],
578 prompt: 'summarize what we did this session and suggest what to add to CLAUDE.md',
579 src: 'teams'
580 }], []);
581 const PROMPTS = useMemo(() => {
582 if (typeof window !== 'undefined') {
583 const rawIds = new Set(RAW.map(p => p.id));
584 RAW.forEach(p => {
585 if (!text[p.id]) console.warn('[prompt-library] no text[] entry for id:', p.id);
586 });
587 Object.keys(text).forEach(k => {
588 if (!rawIds.has(k)) console.warn('[prompt-library] orphaned text[] key:', k);
589 });
590 }
591 return RAW.map(p => ({
592 ...p,
593 title: p.id,
594 teaches: '',
595 ...text[p.id] || ({})
596 }));
597 }, [RAW, text]);
598 const L = labels;
599 const TL = k => tagLabels[k] || k;
600 const CAT_TAG = useMemo(() => ({
601 Onboard: 'understand',
602 Understand: 'understand',
603 Plan: 'plan',
604 Prototype: 'prototype',
605 Implement: 'build',
606 Test: 'test',
607 Refactor: 'refactor',
608 Review: 'review',
609 Steer: 'steer',
610 Git: 'git',
611 Release: 'release',
612 Debug: 'debug',
613 Incident: 'debug',
614 Data: 'data',
615 Automate: 'automate'
616 }), []);
617 const TAGS = useMemo(() => ['understand', 'plan', 'prototype', 'build', 'test', 'refactor', 'review', 'steer', 'debug', 'git', 'release', 'data', 'automate', 'pm', 'design', 'docs', 'marketing', 'security', 'ops'], []);
618 const tagsOf = p => [CAT_TAG[p.cat], ...p.roles || []];
619 const doc = useMemo(() => {
620 const p = typeof window !== 'undefined' ? window.location.pathname : '';
621 const base = p.startsWith('/docs/') ? '/docs' : '';
622 const m = p.slice(base.length).match(/^\/([a-z]{2}(?:-[A-Z]{2})?)\//);
623 const locale = m ? m[1] : 'en';
624 return href => {
625 if (!href || href[0] !== '/' || href[1] === '/') return href;
626 return base + (href.startsWith('/en/') ? '/' + locale + href.slice(3) : href);
627 };
628 }, []);
629 const linkify = s => {
630 const out = [];
631 let last = 0;
632 const re = /\[([^\]]+)\]\(([^)]+)\)/g;
633 for (let m; m = re.exec(s); ) {
634 if (m.index > last) out.push(s.slice(last, m.index));
635 out.push(<a key={m.index} href={doc(m[2])}>{m[1]}</a>);
636 last = re.lastIndex;
637 }
638 if (last < s.length) out.push(s.slice(last));
639 return out;
640 };
641 const codeify = s => s.split(/(`[^`]+`)/g).map((part, i) => part[0] === '`' ? <code key={i}>{part.slice(1, -1)}</code> : part);
642 const SOURCES = useMemo(() => ({
643 'workflows': '/en/common-workflows',
644 'teams': 'https://claude.com/blog/how-anthropic-teams-use-claude-code',
645 'legal': 'https://claude.com/blog/how-anthropic-uses-claude-legal',
646 'cybersecurity': 'https://claude.com/blog/how-anthropic-uses-claude-cybersecurity',
647 'best-practices': '/en/best-practices',
648 'ebook': 'https://resources.anthropic.com/hubfs/Scaling%20agentic%20coding%20across%20your%20organization.pdf'
649 }), []);
650 const [mounted, setMounted] = useState(false);
651 const [q, setQ] = useState('');
652 const [start, setStart] = useState(true);
653 const [sel, setSel] = useState(null);
654 const [openId, setOpenId] = useState(null);
655 const [copied, setCopied] = useState(null);
656 const [fills, setFills] = useState({});
657 const copyTimer = useRef(null);
658 useEffect(() => {
659 setMounted(true);
660 return () => clearTimeout(copyTimer.current);
661 }, []);
662 const setFill = (id, key, val) => setFills(f => ({
663 ...f,
664 [id + '.' + key]: val
665 }));
666 const fillOf = (p, key) => {
667 const v = fills[p.id + '.' + key];
668 return v !== undefined ? v : p.slots && p.slots[key] !== undefined ? p.slots[key] : '';
669 };
670 const assemble = p => p.prompt.replace(/\{(\w+)\}/g, (_, k) => fillOf(p, k) || p.slots && p.slots[k] || k);
671 const preview = p => p.prompt.replace(/\{(\w+)\}/g, (_, k) => p.slots && p.slots[k] || k);
672 const bodyText = p => preview(p) + ' ' + p.teaches.replace(/\[([^\]]+)\]\([^)]+\)/g, '$1') + ' ' + (p.next || '');
673 const widthFor = s => (s || '').length + 3 + 'ch';
674 const ql = q.trim().toLowerCase();
675 const toggleTag = k => {
676 setStart(false);
677 setSel(s => !ql && s === k ? null : k);
678 };
679 const clear = () => {
680 setStart(false);
681 setSel(null);
682 setQ('');
683 };
684 const results = useMemo(() => {
685 const list = PROMPTS.filter(p => {
686 if (ql) return p.title.toLowerCase().includes(ql) || bodyText(p).toLowerCase().includes(ql);
687 if (start) return !!p.startN;
688 if (sel) return tagsOf(p).includes(sel);
689 return true;
690 });
691 if (ql) return list;
692 if (start) return list.sort((a, b) => a.startN - b.startN);
693 if (sel) return list.sort((a, b) => (a.roles || []).length - (b.roles || []).length || (b.sdlc === 'operate') - (a.sdlc === 'operate'));
694 return list;
695 }, [PROMPTS, ql, start, sel]);
696 const matchSnippet = p => {
697 if (!ql || p.title.toLowerCase().includes(ql)) return null;
698 const txt = bodyText(p);
699 const at = txt.toLowerCase().indexOf(ql);
700 if (at < 0) return null;
701 const lo = Math.max(0, at - 30), hi = Math.min(txt.length, at + ql.length + 50);
702 return [lo > 0 ? '…' : '', txt.slice(lo, at), <mark key="m">{txt.slice(at, at + ql.length)}</mark>, txt.slice(at + ql.length, hi), hi < txt.length ? '…' : ''];
703 };
704 const grouped = useMemo(() => {
705 if (start && !q.trim()) return [];
706 const g = {};
707 for (const p of results) {
708 const key = p.sdlc + '|' + p.cat;
709 (g[key] = g[key] || ({
710 sdlc: p.sdlc,
711 cat: p.cat,
712 items: []
713 })).items.push(p);
714 }
715 return Object.values(g);
716 }, [results, start, q]);
717 const copy = async (str, id) => {
718 try {
719 await navigator.clipboard.writeText(str);
720 } catch {
721 const ta = document.createElement('textarea');
722 ta.value = str;
723 ta.setAttribute('readonly', '');
724 ta.style.position = 'fixed';
725 ta.style.opacity = '0';
726 document.body.appendChild(ta);
727 ta.select();
728 document.execCommand('copy');
729 document.body.removeChild(ta);
730 }
731 clearTimeout(copyTimer.current);
732 setCopied(id);
733 copyTimer.current = setTimeout(() => setCopied(null), 1600);
734 };
735 const promptBody = p => {
736 if (!p.slots) return <code>{p.prompt}</code>;
737 const parts = p.prompt.split(/(\{\w+\})/g);
738 return <code>
739 {parts.map((part, idx) => {
740 const m = part.match(/^\{(\w+)\}$/);
741 if (!m) return <span key={idx}>{part}</span>;
742 const k = m[1];
743 const val = fillOf(p, k);
744 return <input key={idx} type="text" className="pl-slot" value={val} placeholder={p.slots[k] || k} aria-label={k} style={{
745 width: widthFor(val || p.slots[k])
746 }} onChange={e => setFill(p.id, k, e.target.value)} onFocus={e => e.target.select()} onClick={e => e.stopPropagation()} />;
747 })}
748 </code>;
749 };
750 const card = p => {
751 const open = openId === p.id;
752 const srcHref = SOURCES[p.src];
753 const srcLabel = sourceLabels[p.src];
754 const snip = matchSnippet(p);
755 return <div key={p.id} className={'pl-card' + (open ? ' pl-open' : '')}>
756 <button type="button" className="pl-head" onClick={() => setOpenId(open ? null : p.id)} aria-expanded={open}>
757 <span className="pl-title">{p.title}</span>
758 {!!p.startN && <span className="pl-chip">{L.startHere} · {p.startN}</span>}
759 </button>
760 {snip ? <div className="pl-match">{snip}</div> : <code className="pl-prompt-preview">{preview(p)}</code>}
761 {open && <div className="pl-body">
762 <div className="pl-label">{p.slots ? L.fillAndCopy : L.copyThis}</div>
763 {p.needs && L.needs && L.needs[p.needs] && <div className="pl-hint pl-needs">
764 <span className="pl-needs-label">{L.needsLabel}</span> {linkify(L.needs[p.needs])}
765 </div>}
766 {p.paste && L.paste && L.paste[p.paste] && <div className="pl-hint pl-paste">{L.paste[p.paste]}</div>}
767 {p.slots && <div className="pl-hint">
768 {L.hintBefore} <span className="pl-hint-chip">{L.hintChip}</span> {L.hintAfter}
769 </div>}
770 <div className="pl-prompt-box">
771 <span className="pl-caret">{'❯'}</span>
772 {promptBody(p)}
773 <button type="button" className="pl-copy" onClick={() => copy(assemble(p), p.id)}>
774 {copied === p.id ? L.copied : L.copy}
775 </button>
776 </div>
777 <div className="pl-label">{L.whyWorks}</div>
778 <div className="pl-teaches">{linkify(p.teaches)}</div>
779 {p.nextHref && p.next && <div className="pl-next">
780 <span className="pl-next-label">{L.makeItStick}</span>
781 <a href={doc(p.nextHref)}>{codeify(p.next)} →</a>
782 </div>}
783 {srcLabel && <div className="pl-src">{L.from} {srcHref ? <a href={doc(srcHref)}>{srcLabel}</a> : srcLabel}</div>}
784 </div>}
785 </div>;
786 };
787 const STYLES = useMemo(() => `
788.pl {
789 --pl-accent: #D97757;
790 --pl-accent-bg: rgba(217,119,87,0.07);
791 --pl-bg: #fff;
792 --pl-surface: #FAFAF7;
793 --pl-border: #E8E6DC;
794 --pl-border-subtle: rgba(31,30,29,0.08);
795 --pl-text: #141413;
796 --pl-text-2: #5E5D59;
797 --pl-text-3: #73726C;
798 --pl-text-4: #9C9A92;
799 --pl-mono: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
800 font-family: 'Anthropic Sans', -apple-system, BlinkMacSystemFont, sans-serif;
801 font-size: 16px; color: var(--pl-text); margin: 8px 0 32px;
802}
803.dark .pl {
804 --pl-bg: #1f1e1d;
805 --pl-surface: #262624;
806 --pl-border: #3d3d3a;
807 --pl-border-subtle: rgba(240,238,230,0.08);
808 --pl-text: #f0eee6;
809 --pl-text-2: #bfbdb4;
810 --pl-text-3: #91908a;
811 --pl-text-4: #73726c;
812}
813.pl *, .pl *::before, .pl *::after { box-sizing: border-box; }
814.pl button { font-family: inherit; cursor: pointer; }
815.pl a { color: var(--pl-accent); text-decoration: none; }
816.pl a:hover { text-decoration: underline; }
817
818.pl-search {
819 display: flex; align-items: center; gap: 10px;
820 padding: 14px 18px; background: var(--pl-surface);
821 border: 1px solid var(--pl-border); border-radius: 12px;
822 margin-bottom: 14px;
823}
824.pl-search input {
825 flex: 1; border: none; outline: none; background: transparent;
826 font-size: 16px; color: var(--pl-text);
827}
828.pl-search input::placeholder { color: var(--pl-text-4); }
829
830.pl-tags { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-bottom: 18px; }
831.pl-tag {
832 padding: 7px 14px; border: 1px solid var(--pl-border); background: var(--pl-bg);
833 font-size: 14px; color: var(--pl-text-2); border-radius: 999px;
834}
835.pl-tag:hover { background: var(--pl-surface); }
836.pl-tag.pl-on { background: var(--pl-text); border-color: var(--pl-text); color: var(--pl-bg); }
837.pl-tag.pl-start { color: var(--pl-accent); font-weight: 500; }
838.pl-tag.pl-start.pl-on { background: var(--pl-accent); border-color: var(--pl-accent); color: #fff; }
839.pl-tags.pl-dim .pl-tag { opacity: 0.5; }
840.pl-tags.pl-dim .pl-tag:hover { opacity: 1; }
841.pl-sep { width: 1px; height: 22px; background: var(--pl-border); margin: 0 4px; }
842.pl-clear { border: none; background: none; font-size: 13px; color: var(--pl-text-4); padding: 4px 6px; }
843.pl-clear:hover { color: var(--pl-text-2); }
844.pl-count { margin-left: auto; font-size: 14px; color: var(--pl-text-4); }
845
846.pl-group-h {
847 font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase;
848 color: var(--pl-text-4); margin: 24px 0 12px;
849}
850.pl-group-h .pl-phase { color: var(--pl-text-3); }
851.pl-card {
852 border: 1px solid var(--pl-border-subtle); border-radius: 10px;
853 margin-bottom: 12px; background: var(--pl-bg); overflow: hidden;
854 padding: 14px 18px;
855}
856.pl-card.pl-open { border-color: var(--pl-border); background: var(--pl-surface); }
857.pl-head {
858 width: 100%; display: flex; align-items: baseline; gap: 12px;
859 border: none; background: transparent; text-align: left; padding: 0;
860}
861.pl-head:focus-visible { outline: 2px solid var(--pl-accent); outline-offset: 2px; border-radius: 6px; }
862.pl-title {
863 flex: 1; font-size: 17px; font-weight: 500; color: var(--pl-text);
864 white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
865}
866.pl-prompt-preview {
867 display: block; font-family: var(--pl-mono); font-size: 13.5px; color: var(--pl-text-3);
868 margin-top: 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
869}
870.pl-chip {
871 font-size: 11px; letter-spacing: 0.05em; text-transform: uppercase;
872 padding: 3px 9px; border-radius: 999px; flex-shrink: 0;
873 background: var(--pl-accent-bg); color: var(--pl-accent);
874}
875
876.pl-body { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--pl-border-subtle); }
877.pl-label {
878 font-size: 11.5px; letter-spacing: 0.08em; text-transform: uppercase;
879 color: var(--pl-text-4); margin: 12px 0 8px;
880}
881.pl-prompt-box {
882 display: flex; align-items: center; gap: 10px;
883 padding: 14px 16px; background: #141413; color: #f0eee6;
884 border-radius: 8px; font-family: var(--pl-mono); font-size: 15px;
885}
886.pl-caret { color: var(--pl-accent); flex-shrink: 0; }
887.pl-prompt-box code { flex: 1; background: none; padding: 0; color: inherit; white-space: pre-wrap; line-height: 1.9; }
888.pl-slot {
889 font-family: var(--pl-mono); font-size: inherit;
890 background: rgba(217,119,87,0.15); color: #f0eee6;
891 border: none; border-bottom: 1.5px dashed var(--pl-accent);
892 border-radius: 4px 4px 0 0; padding: 2px 6px; margin: 0 1px;
893 outline: none; min-width: 6ch; max-width: 100%;
894 box-sizing: content-box; cursor: text;
895}
896.pl-slot:hover { background: rgba(217,119,87,0.22); }
897.pl-slot:focus { background: rgba(217,119,87,0.28); border-bottom-style: solid; }
898.pl-slot::placeholder { color: rgba(240,238,230,0.4); font-style: italic; }
899.pl-hint { font-size: 14px; color: var(--pl-text-3); margin: 0 0 10px; }
900.pl-paste { color: var(--pl-text-2); }
901.pl-needs { color: var(--pl-text-2); }
902.pl-needs-label {
903 display: inline-block; font-size: 10.5px; letter-spacing: 0.06em;
904 text-transform: uppercase; padding: 2px 7px; margin-right: 6px;
905 border-radius: 4px; background: var(--pl-accent-bg); color: var(--pl-accent);
906}
907.pl-hint-chip {
908 font-family: var(--pl-mono); font-size: 0.92em;
909 background: var(--pl-accent-bg); color: var(--pl-accent);
910 border-bottom: 1.5px dashed var(--pl-accent);
911 border-radius: 3px 3px 0 0; padding: 1px 5px;
912}
913.pl-copy {
914 font-size: 12.5px; padding: 6px 12px; border-radius: 6px;
915 background: var(--pl-accent); color: #fff; border: none; flex-shrink: 0;
916}
917.pl-teaches { display: block; font-size: 15.5px; color: var(--pl-text-2); margin: 4px 0 0; line-height: 1.6; }
918.pl-match {
919 display: block; font-size: 13.5px; color: var(--pl-text-3);
920 margin-top: 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
921}
922.pl-match mark { background: var(--pl-accent-bg); color: var(--pl-text); padding: 1px 2px; border-radius: 3px; }
923.pl-next {
924 display: flex; align-items: baseline; gap: 10px;
925 margin: 14px 0 0; padding: 10px 12px;
926 background: var(--pl-accent-bg); border-radius: 8px; font-size: 14.5px;
927}
928.pl-next-label {
929 font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase;
930 color: var(--pl-accent); font-weight: 600; flex-shrink: 0;
931}
932.pl-src { display: block; font-size: 14px; color: var(--pl-text-4); margin: 14px 0 0; }
933
934.pl-show-all {
935 display: block; width: 100%; padding: 14px; margin-top: 4px;
936 border: 1px dashed var(--pl-border); border-radius: 10px;
937 background: transparent; font-size: 15px; color: var(--pl-accent);
938 text-align: center;
939}
940.pl-show-all:hover { background: var(--pl-accent-bg); border-style: solid; }
941
942.pl-empty {
943 padding: 32px; text-align: center; color: var(--pl-text-4);
944 border: 1px dashed var(--pl-border); border-radius: 10px;
945}
946`, []);
947 if (!mounted) return <div className="pl" style={{
948 minHeight: 480
949 }} />;
950 return <div className="pl">
951 <style>{STYLES}</style>
952
953 <div className="pl-search">
954 <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" style={{
955 color: 'var(--pl-text-4)'
956 }}>
957 <circle cx="11" cy="11" r="7" /><line x1="21" y1="21" x2="16.65" y2="16.65" />
958 </svg>
959 <input type="text" placeholder={L.search} value={q} onChange={e => {
960 setQ(e.target.value);
961 if (e.target.value) setStart(false);
962 }} aria-label={L.search} />
963 </div>
964
965 <div className={'pl-tags' + (ql ? ' pl-dim' : '')}>
966 <button type="button" className={'pl-tag pl-start' + (!ql && start ? ' pl-on' : '')} onClick={() => {
967 setQ('');
968 setStart(!start);
969 if (!start) setSel(null);
970 }}>
971 ★ {L.startHere}
972 </button>
973 <span className="pl-sep" />
974 {TAGS.map(k => <button key={k} type="button" aria-pressed={!ql && sel === k} className={'pl-tag' + (!ql && sel === k ? ' pl-on' : '')} onClick={() => {
975 setQ('');
976 toggleTag(k);
977 }}>
978 {TL(k)}
979 </button>)}
980 {(start || sel || q) && <button type="button" className="pl-clear" onClick={clear}>{L.clear}</button>}
981 <span className="pl-count">{results.length} {results.length === 1 ? L.prompt : L.prompts}</span>
982 </div>
983
984 {results.length === 0 ? <div className="pl-empty">
985 {L.noMatch} {ql ? <code>{q}</code> : null} <button type="button" className="pl-clear" onClick={clear}>{L.clear}</button>
986 </div> : !ql && start ? <div>
987 <div className="pl-group-h">{L.startHereHeader}</div>
988 {results.map(card)}
989 <button type="button" className="pl-show-all" onClick={clear}>
990 {L.showAll && L.showAll.replace('{n}', PROMPTS.length)} →
991 </button>
992 </div> : grouped.map(g => <div key={g.sdlc + '|' + g.cat}>
993 <div className="pl-group-h"><span className="pl-phase">{phaseLabels[g.sdlc] || g.sdlc}</span> · {catLabels[g.cat] || g.cat}</div>
994 {g.items.map(card)}
995 </div>)}
996 </div>;
997};
998
9Ini adalah perpustakaan prompt untuk disalin ke Claude Code. Gunakan untuk mengeksplorasi cara kerja yang belum pernah Anda coba, atau ketika Anda tidak yakin harus mulai dari mana.999Ini adalah perpustakaan prompt untuk disalin ke Claude Code. Gunakan untuk mengeksplorasi cara kerja yang belum pernah Anda coba, atau ketika Anda tidak yakin harus mulai dari mana.
10 1000
11Prompt dikumpulkan dari berbagai panduan Anthropic, termasuk [Common workflows](/id/common-workflows), [Best practices](/id/best-practices), dan [How Anthropic teams use Claude Code](https://claude.com/blog/how-anthropic-teams-use-claude-code). Ini adalah titik awal, bukan skrip. Buka **Why this works** di bawah prompt apa pun untuk melihat pola di baliknya sehingga Anda dapat menulis prompt Anda sendiri.1001Prompt dikumpulkan dari berbagai panduan Anthropic, termasuk [Common workflows](/id/common-workflows), [Best practices](/id/best-practices), dan [How Anthropic teams use Claude Code](https://claude.com/blog/how-anthropic-teams-use-claude-code). Ini adalah titik awal, bukan skrip. Buka **Why this works** di bawah prompt apa pun untuk melihat pola di baliknya sehingga Anda dapat menulis prompt Anda sendiri.
12 1002
1003export const labels = {
1004 startHere: "Mulai dari sini",
1005 startHereHeader: "Lima prompt untuk dicoba terlebih dahulu",
1006 showAll: "Tampilkan semua {n} prompt",
1007 search: "Cari prompt…",
1008 clear: "Hapus",
1009 prompt: "prompt",
1010 prompts: "prompt",
1011 noMatch: "Tidak ada prompt yang cocok",
1012 fillAndCopy: "Isi dan salin",
1013 copyThis: "Salin prompt ini",
1014 hintBefore: "Ketik di",
1015 hintChip: "bidang yang disorot",
1016 hintAfter: "untuk menyesuaikan, lalu salin.",
1017 copy: "Salin",
1018 copied: "Disalin",
1019 whyWorks: "Mengapa ini berhasil",
1020 makeItStick: "Buat tetap berkesan",
1021 from: "Dari",
1022 paste: {
1023 mockup: "Tempel, seret, atau @-mention gambar mockup Anda, lalu kirim ini:",
1024 design: "Tempel, seret, atau @-mention gambar desain Anda, lalu kirim ini:",
1025 screenshot: "Tempel, seret, atau @-mention tangkapan layar Anda, lalu kirim ini:",
1026 plan: "Tempel output rencana Anda ke prompt terlebih dahulu, lalu kirim ini:",
1027 error: "Tempel output kesalahan ke prompt terlebih dahulu, lalu kirim ini:",
1028 csv: "Seret file Anda ke prompt, atau ganti jalur di bawah dengan @-mention milik Anda sendiri:"
1029 },
1030 needsLabel: "Membutuhkan",
1031 needs: {
1032 tracker: "pelacak masalah Anda ditambahkan sebagai [konektor claude.ai](/id/mcp#use-mcp-servers-from-claude-ai) atau [server MCP](/id/mcp).",
1033 gh: "[gh CLI](https://cli.github.com) yang diautentikasi, atau GitHub ditambahkan sebagai [konektor claude.ai](/id/mcp#use-mcp-servers-from-claude-ai).",
1034 browser: "cara bagi Claude untuk merender dan mengambil tangkapan layar hasilnya. [Aplikasi Desktop](/id/desktop#preview-your-app) memiliki ini bawaan. Di terminal, instal [ekstensi Chrome](/id/chrome) atau server MCP [Playwright](/id/mcp).",
1035 db: "gudang data atau penyimpanan log Anda ditambahkan sebagai [konektor claude.ai](/id/mcp#use-mcp-servers-from-claude-ai) atau [server MCP](/id/mcp)."
1036 }
1037};
1038
1039export const tagLabels = {
1040 understand: "Pahami",
1041 plan: "Rencanakan",
1042 prototype: "Prototipe",
1043 build: "Bangun",
1044 test: "Uji",
1045 refactor: "Refaktor",
1046 review: "Tinjau",
1047 steer: "Kemudi",
1048 debug: "Debug",
1049 git: "Git",
1050 release: "Rilis",
1051 data: "Data",
1052 automate: "Otomatisasi",
1053 pm: "Produk",
1054 design: "Desain",
1055 docs: "Dokumen",
1056 marketing: "Pemasaran",
1057 security: "Keamanan",
1058 ops: "On-call"
1059};
1060
1061export const phaseLabels = {
1062 discover: "Temukan",
1063 design: "Desain",
1064 build: "Bangun",
1065 ship: "Kirim",
1066 operate: "Operasikan"
1067};
1068
1069export const sourceLabels = {
1070 workflows: "Common workflows",
1071 teams: "How Anthropic teams use Claude Code",
1072 legal: "How Anthropic uses Claude in Legal",
1073 cybersecurity: "How Anthropic uses Claude in Cybersecurity",
1074 "best-practices": "Best practices",
1075 ebook: "Scaling agentic coding guide"
1076};
1077
1078export const catLabels = {
1079 Onboard: "Onboard",
1080 Understand: "Pahami",
1081 Plan: "Rencanakan",
1082 Prototype: "Prototipe",
1083 Implement: "Implementasikan",
1084 Test: "Uji",
1085 Refactor: "Refaktor",
1086 Review: "Tinjau",
1087 Steer: "Kemudi",
1088 Git: "Git",
1089 Release: "Rilis",
1090 Debug: "Debug",
1091 Incident: "Insiden",
1092 Data: "Data",
1093 Automate: "Otomatisasi"
1094};
1095
1096export const text = {
1097 "get-oriented-in-a": {
1098 title: "Orientasi diri di repositori baru",
1099 teaches: "Jelaskan apa yang ingin Anda ketahui, bukan file mana yang harus dibaca. Claude mengeksplorasi proyek sendiri dan mengembalikan ringkasan tentang bagaimana semuanya cocok bersama.",
1100 next: "Jalankan `/init` untuk menyiapkan `CLAUDE.md` sehingga Claude mengingat ini setiap sesi"
1101 },
1102 "explain-unfamiliar-code": {
1103 title: "Jelaskan kode yang tidak familiar",
1104 teaches: "Sebutkan file dan katakan format apa yang Anda inginkan jawabannya. Tukar halaman HTML dengan diagram, poin-poin, atau apa pun yang sesuai dengan cara Anda belajar.",
1105 next: "Atur gaya output sehingga Claude selalu menjelaskan dalam format pilihan Anda"
1106 },
1107 "find-where-something-happens": {
1108 title: "Temukan di mana sesuatu terjadi",
1109 teaches: "Cari berdasarkan perilaku, bukan nama file. Pencarian bekerja bahkan ketika Anda tidak tahu apa nama file atau direktori mana yang ditempatinya."
1110 },
1111 "see-what-depends-on": {
1112 title: "Periksa apa yang rusak sebelum Anda menghapus",
1113 teaches: "Tanya sebelum Anda menghapus apa pun. Daftar pemanggil dan efek hilir memberi tahu Anda apakah Anda melihat pembersihan satu baris atau perubahan yang perlu Anda koordinasikan."
1114 },
1115 "trace-how-code-evolved": {
1116 title: "Lacak bagaimana kode berkembang",
1117 teaches: "Tunjuk riwayat komit ketika pertanyaannya adalah mengapa, bukan apa. Claude membaca log dan blame untuk versi kontrol apa pun yang Anda gunakan dan menjelaskan keputusan di balik implementasi saat ini."
1118 },
1119 "scope-a-change-before": {
1120 title: "Tentukan cakupan perubahan sebelum Anda mulai",
1121 teaches: "Ukur pekerjaan sebelum Anda berkomitmen pada roadmap. Daftar file memberi tahu Anda apakah Anda melihat satu komponen atau perubahan lintas-potong."
1122 },
1123 "ask-the-codebase-a": {
1124 title: "Tanyakan pertanyaan produk kepada basis kode",
1125 teaches: "Nyatakan peran Anda sehingga jawaban berada pada tingkat yang tepat. Claude menjelaskan apa yang sebenarnya dilakukan produk dari kode sumber, tanpa Anda perlu membacanya.",
1126 next: "Atur gaya output sehingga Claude selalu menyampaikan jawaban pada tingkat ini"
1127 },
1128 "plan-a-multi-file": {
1129 title: "Rencanakan perubahan multi-file sebelum menyentuh kode",
1130 teaches: "Menambahkan \"jangan edit dulu\" memisahkan eksplorasi dari perubahan, sehingga Anda melihat pendekatannya sebelum kode bergerak. Untuk membuat rencana-pertama menjadi default pada setiap prompt, tekan Shift+Tab untuk [plan mode](/id/permission-modes#analyze-before-you-edit-with-plan-mode)."
1131 },
1132 "draft-a-spec-by": {
1133 title: "Buat draf spesifikasi melalui wawancara",
1134 teaches: "Minta untuk diwawancarai alih-alih menulis spesifikasi sendiri. Claude mengajukan pertanyaan terstruktur kepada Anda sampai persyaratan lengkap, lalu menulis hasilnya ke file.",
1135 next: "Simpan pertanyaan wawancara Anda sebagai skill `/spec` sehingga setiap spesifikasi dimulai dengan cara yang sama"
1136 },
1137 "turn-a-meeting-into": {
1138 title: "Ubah pertemuan menjadi tiket",
1139 teaches: "Lewati langkah transkripsi. Claude menarik item tindakan dari input yang tidak terstruktur dan menulisnya langsung ke pelacak Anda melalui [MCP](/id/mcp), sehingga Anda meninjau tiket, bukan transkrip.",
1140 next: "Simpan ini sebagai skill `/tickets`"
1141 },
1142 "map-edge-cases-before": {
1143 title: "Petakan kasus tepi sebelum membangun",
1144 teaches: "Tanyakan apa yang hilang, bukan apa yang ada. Claude mencantumkan status kesalahan, status kosong, dan kasus tepi yang cenderung dilewatkan desain jalur bahagia."
1145 },
1146 "turn-a-mockup-into": {
1147 title: "Ubah mockup menjadi prototipe yang berfungsi",
1148 teaches: "Prototipe yang dapat diklik menjawab pertanyaan yang tidak dapat dijawab mockup statis. Serahkan kode yang berfungsi kepada teknik alih-alih menjelaskan interaksi dalam dokumen."
1149 },
1150 "implement-from-a-screenshot": {
1151 title: "Implementasikan dari tangkapan layar dan periksa sendiri",
1152 teaches: "Ini memberikan Claude loop verifikasi: ia merender, membandingkan dengan gambar sumber, dan mengulangi tanpa Anda menunjukkan setiap celah.",
1153 next: "Gunakan `/goal` untuk membuat Claude terus mengulangi sampai tangkapan layar cocok"
1154 },
1155 "follow-an-existing-pattern": {
1156 title: "Ikuti pola yang ada",
1157 teaches: "Tunjuk kode yang sudah Anda sukai. Tanpa referensi, Claude menggunakan praktik terbaik umum. Dengan satu, itu cocok dengan konvensi yang sebenarnya digunakan basis kode Anda.",
1158 next: "Minta Claude untuk menulis pola yang diikutinya ke `CLAUDE.md` sehingga sesi mendatang cocok tanpa referensi"
1159 },
1160 "add-a-small-well": {
1161 title: "Tambahkan fitur kecil yang terdefinisi dengan baik",
1162 teaches: "Nyatakan input dan output, bukan cara membangunnya. Claude menemukan di mana kode serupa berada dan menambahkan milik Anda di sampingnya."
1163 },
1164 "build-a-small-internal": {
1165 title: "Bangun alat internal kecil dari awal",
1166 teaches: "Anda tidak memerlukan proyek, kerangka kerja, atau langkah pembangunan. Jelaskan alat dan minta Claude untuk membukanya sehingga Anda melihatnya bekerja segera."
1167 },
1168 "work-an-issue-end": {
1169 title: "Kerjakan masalah dari awal hingga akhir",
1170 teaches: "Berikan nomor masalah, bukan ringkasan. Claude membaca tiket lengkap itu sendiri, sehingga persyaratan yang akan Anda lupakan untuk disebutkan muncul, dan itu memvalidasi perubahan sebelum melaporkan kembali."
1171 },
1172 "find-and-update-copy": {
1173 title: "Temukan dan perbarui salinan di seluruh basis kode",
1174 teaches: "Tanyakan varian dan katakan apa yang harus dilewati. Claude menemukan frasa yang akan dilewatkan pencarian literal dan meninggalkan fixture pengujian dan riwayat tidak tersentuh, sehingga Anda hanya meninjau salinan yang sebenarnya dilihat pengguna."
1175 },
1176 "draft-from-past-examples": {
1177 title: "Buat draf dokumen dari contoh masa lalu",
1178 teaches: "Tunjuk folder pekerjaan yang selesai alih-alih menjelaskan gaya Anda. Claude mempelajari struktur dan suara dari apa yang sudah Anda kirim, sehingga draf pertama terlihat seperti salah satu milik Anda.",
1179 next: "Simpan suara sebagai skill sehingga setiap draf dimulai di sana"
1180 },
1181 "write-tests-run-them": {
1182 title: "Tulis tes, jalankan, perbaiki kegagalan",
1183 teaches: "Minta untuk menulis, menjalankan, dan memperbaiki bersama-sama sehingga Claude mengulangi tanpa berhenti untuk instruksi.",
1184 next: "Jalankan `/init` sehingga Claude mempelajari perintah tes Anda secara otomatis"
1185 },
1186 "drive-implementation-from-tests": {
1187 title: "Dorong implementasi dari tes",
1188 teaches: "Pengembangan berbasis tes: tes mendefinisikan kapan pekerjaan selesai, dan Claude mengulangi implementasi sampai mereka lulus."
1189 },
1190 "fill-gaps-from-a": {
1191 title: "Isi celah dari laporan cakupan",
1192 teaches: "Tunjuk laporan cakupan alih-alih menebak apa yang tidak diuji. Claude membaca angka sebenarnya dan menulis tes untuk file yang paling membutuhkannya.",
1193 next: "Atur ini sebagai `/goal` sehingga Claude terus menulis tes sampai cakupan mencapai target"
1194 },
1195 "port-code-between-languages": {
1196 title: "Port kode ke bahasa lain",
1197 teaches: "Katakan apa yang harus dipertahankan, bukan hanya bahasa target. Menyebutkan API atau perilaku yang harus tetap sama memberikan Claude kontrak untuk memeriksa port."
1198 },
1199 "generate-docs-for-code": {
1200 title: "Hasilkan dokumen untuk kode yang tidak terdokumentasi",
1201 teaches: "Sebutkan cakupan dan format. Claude menemukan apa yang hilang dan cocok dengan gaya komentar yang sudah ada di file, sehingga dokumen baru terlihat seperti sisanya."
1202 },
1203 "migrate-a-pattern-across": {
1204 title: "Migrasikan pola di seluruh basis kode",
1205 teaches: "Jelaskan pola lama dan yang baru. Meminta Claude untuk mengidentifikasi setiap tempat terlebih dahulu berarti situs panggilan tercantum dalam respons, sehingga Anda dapat memeriksa tidak ada yang terlewat."
1206 },
1207 "optimize-against-a-measurable": {
1208 title: "Optimalkan terhadap target yang terukur",
1209 teaches: "Menyatakan metrik dan target memberikan Claude definisi yang jelas tentang selesai.",
1210 next: "Atur ini sebagai `/goal` sehingga Claude terus mengukur dan mengulangi sampai mencapai angka"
1211 },
1212 "fix-a-precise-visual": {
1213 title: "Perbaiki bug visual yang tepat",
1214 teaches: "Umpan balik visual yang tepat mendapat perbaikan yang tepat. Nyatakan elemen, pengukuran, dan viewport yang tepat.",
1215 next: "Tambahkan alat pratinjau sehingga Claude mengambil tangkapan layar dan memverifikasi perbaikan itu sendiri"
1216 },
1217 "review-your-changes-before": {
1218 title: "Tinjau perubahan Anda sebelum Anda berkomitmen",
1219 teaches: "Tangkap masalah saat masih murah untuk diperbaiki. Claude membaca file yang diubah sepenuhnya, bukan hanya baris diff, sehingga menemukan masalah yang ditinggalkan tinjauan diri cepat.",
1220 next: "Jalankan `/code-review` untuk pemeriksaan yang sama dalam satu perintah"
1221 },
1222 "review-a-pull-request": {
1223 title: "Tinjau permintaan tarik",
1224 teaches: "Claude meninjau dengan seluruh basis kode dalam konteks, bukan hanya diff. Ia membaca kode yang diubah dan apa yang dipanggilnya, sehingga menangkap masalah yang akan dilewatkan tinjauan hanya-diff.",
1225 next: "Aktifkan ini untuk setiap PR dengan Code Review"
1226 },
1227 "review-infrastructure-changes-before": {
1228 title: "Tinjau perubahan infrastruktur sebelum menerapkan",
1229 teaches: "Output rencana padat dan sulit dipindai. Menempelkannya memberi Anda ringkasan bahasa biasa tentang apa yang sebenarnya akan berubah sebelum Anda menerapkannya."
1230 },
1231 "run-a-security-review": {
1232 title: "Jalankan tinjauan keamanan dengan subagent",
1233 teaches: "[Subagent](/id/sub-agents) menjalankan audit dalam jendela konteksnya sendiri dan melaporkan kembali ringkasan, sehingga tinjauan keamanan yang panjang tidak mengisi sesi utama Anda. Subagent tujuan umum bawaan menangani ini tanpa penyiapan tambahan.",
1234 next: "Siapkan subagent tinjauan keamanan khusus yang dapat digunakan seluruh tim Anda"
1235 },
1236 "review-content-before-sending": {
1237 title: "Tangkap masalah sebelum tinjauan formal",
1238 teaches: "Dapatkan lintasan pertama sebelum manusia menghabiskan waktu untuk itu. Sebutkan kekhawatiran yang ingin Anda periksa sehingga tinjauan terfokus, lalu perbaiki apa yang ditemukannya dan kirim draf yang lebih bersih.",
1239 next: "Tangkap daftar periksa tinjauan Anda sebagai skill yang dapat dijalankan seluruh tim Anda"
1240 },
1241 "course-correct-a-wrong": {
1242 title: "Koreksi kursus pendekatan yang salah",
1243 teaches: "Sebutkan batasan yang dilewatkan Claude, bukan hanya bahwa itu salah. Alasan spesifik memberikan Claude batasan konkret untuk dipenuhi pada percobaan ulang, alih-alih menebak lagi.",
1244 next: "Tekan `Esc` dua kali untuk membuka menu rewind dan mengembalikan kode dan percakapan sehingga percobaan ulang dimulai bersih"
1245 },
1246 "narrow-the-scope-of": {
1247 title: "Persempit cakupan perubahan",
1248 teaches: "Ketika arahnya benar tetapi perubahan terlalu luas, minta Claude untuk menyimpan bagian darinya daripada membatalkan semuanya. Batas yang dinyatakan membuat perbaikan kecil dari menjadi refaktor."
1249 },
1250 "turn-a-correction-into": {
1251 title: "Ubah koreksi menjadi aturan",
1252 teaches: "Koreksi dalam obrolan tidak dibagikan dengan tim Anda. Aturan dalam [CLAUDE.md](/id/memory) proyek dibagikan setelah Anda berkomitmen, dan Claude membacanya di awal setiap sesi.",
1253 next: "Buka `/memory` untuk meninjau apa yang ditulis Claude"
1254 },
1255 "resolve-merge-conflicts": {
1256 title: "Selesaikan konflik penggabungan",
1257 teaches: "Katakan status apa yang Anda inginkan, bukan penanda mana yang harus disimpan. Meminta alasan membuat penggabungan dapat ditinjau alih-alih kotak hitam."
1258 },
1259 "commit-with-a-generated": {
1260 title: "Berkomitmen dengan pesan yang dihasilkan",
1261 teaches: "Biarkan Claude menurunkan pesan dari diff. Ini cocok dengan gaya komit yang ada di repositori Anda."
1262 },
1263 "open-a-pull-request": {
1264 title: "Buka permintaan tarik dari tiket",
1265 teaches: "Lewati pengalihan konteks antara pelacak, editor, dan GitHub. Satu prompt membaca spesifikasi, membuat perubahan, dan membuka PR."
1266 },
1267 "draft-release-notes-from": {
1268 title: "Buat draf catatan rilis dari riwayat git",
1269 teaches: "Berikan dua titik referensi dan struktur yang Anda inginkan. Claude membaca log komit di antara mereka dan membuat draf changelog yang dapat Anda edit.",
1270 next: "Simpan ini sebagai skill `/changelog`"
1271 },
1272 "write-a-ci-workflow": {
1273 title: "Tulis alur kerja CI",
1274 teaches: "Jelaskan kapan harus dijalankan dan apa yang harus dilakukan; YAML dihasilkan untuk Anda, cocok dengan perintah pembangunan dan pengujian proyek Anda."
1275 },
1276 "find-and-fix-a": {
1277 title: "Temukan dan perbaiki tes yang gagal",
1278 teaches: "Jelaskan gejala; Anda tidak perlu tahu file mana yang rusak. Claude menjalankan tes untuk melihat kegagalan, melacaknya ke sumber, dan memperbaikinya."
1279 },
1280 "investigate-a-reported-error": {
1281 title: "Selidiki kesalahan yang dilaporkan",
1282 teaches: "Jelaskan gejala dan lokasi; Claude membaca jalur kode yang relevan dan melacak kemungkinan penyebab. Tempel jejak tumpukan atau log jika Anda memilikinya.",
1283 next: "Letakkan deeplink dalam runbook Anda yang membuka Claude dengan prompt ini sudah diisi sebelumnya"
1284 },
1285 "fix-a-build-error": {
1286 title: "Perbaiki kesalahan pembangunan di akar",
1287 teaches: "Meminta penyebab akar dan verifikasi mencegah patch tingkat permukaan yang menekan kesalahan tanpa memperbaikinya."
1288 },
1289 "investigate-a-production-incident": {
1290 title: "Selidiki insiden produksi",
1291 teaches: "Daftar sumber bukti untuk berkorelasi, bukan langkah yang harus diambil. Claude membaca log, riwayat git, dan konfigurasi bersama untuk mempersempit penyebab.",
1292 next: "Hubungkan Sentry atau penyimpanan log Anda melalui MCP"
1293 },
1294 "query-logs-in-plain": {
1295 title: "Pertanyaan log dalam bahasa Inggris biasa",
1296 teaches: "Tanyakan pertanyaan alih-alih menulis SQL. Claude membangun kueri, menjalankannya terhadap log yang terhubung, dan menunjukkan kueri dan hasilnya sehingga Anda dapat memeriksa apa yang dijalankan."
1297 },
1298 "diagnose-from-a-console": {
1299 title: "Diagnosa dari tangkapan layar konsol",
1300 teaches: "Konsol cloud menunjukkan masalah tetapi bukan perintah untuk memperbaikinya. Claude membaca tangkapan layar dan menerjemahkan dasbor menjadi perintah kubectl, gcloud, atau aws untuk dijalankan."
1301 },
1302 "analyze-a-data-file": {
1303 title: "Analisis file data",
1304 teaches: "Pertanyaan sekali-jalan tidak memerlukan skrip sekali-jalan. Tunjuk file di folder proyek Anda dan Claude membacanya langsung, menemukan pola, dan menulis output di mana Anda minta.",
1305 next: "Hubungkan sumber data melalui MCP alih-alih mengekspor file"
1306 },
1307 "generate-variations-from-performance": {
1308 title: "Hasilkan variasi dari data kinerja",
1309 teaches: "Nyatakan batasan di awal sehingga generasi tetap dalam batas. Claude membaca metrik, memilih apa yang harus diganti, dan menghasilkan alternatif yang sesuai.",
1310 next: "Hubungkan platform iklan melalui MCP alih-alih mengekspor file"
1311 },
1312 "turn-a-recurring-task": {
1313 title: "Ubah tugas berulang menjadi skill",
1314 teaches: "Sebutkan langkah-langkah sekali; gunakan kembali sebagai perintah. Claude menulis [skill](/id/skills) yang dapat dijalankan siapa pun di tim Anda."
1315 },
1316 "add-a-hook-for": {
1317 title: "Tambahkan hook untuk perilaku berulang",
1318 teaches: "Hooks membuat perilaku otomatis alih-alih sesuatu yang harus Anda ingat untuk diminta. Jelaskan pemicu dan tindakan dan Claude menulis konfigurasi [hook](/id/hooks)."
1319 },
1320 "connect-a-tool-with": {
1321 title: "Hubungkan alat dengan MCP",
1322 teaches: "Hubungkan sumber sekali alih-alih menempel data setiap sesi. Setelah penyiapan [MCP](/id/mcp), Claude membaca dari alat secara langsung ketika Anda menanyakannya."
1323 },
1324 "capture-what-to-remember": {
1325 title: "Tangkap apa yang harus diingat untuk lain kali",
1326 teaches: "Tanya sebelum Anda lupa. Claude tahu apa yang harus dipikirkan sesi ini dan mengusulkan entri [CLAUDE.md](/id/memory) sehingga sesi berikutnya dimulai dengan konteks itu."
1327 }
1328};
1329
1330<PromptLibrary text={text} labels={labels} tagLabels={tagLabels} phaseLabels={phaseLabels} sourceLabels={sourceLabels} catLabels={catLabels} />
1331
13<h2 id="what-makes-these-prompts-work">1332<h2 id="what-makes-these-prompts-work">
14 Apa yang membuat prompt ini berhasil1333 Apa yang membuat prompt ini berhasil
15</h2>1334</h2>
