Documentation Index
Fetch the complete documentation index at: https://code.claude.com/docs/llms.txt Use this file to discover all available pages before exploring further.
Prompt library
Copy-paste prompts for Claude Code, tagged by task and role.
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 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
{preview(p)}}
{open && .pl-search { display: flex; align-items: center; gap: 10px; padding: 14px 18px; background: var(--pl-surface); border: 1px solid var(--pl-border); border-radius: 12px; margin-bottom: 14px; } .pl-search input { flex: 1; border: none; outline: none; background: transparent; font-size: 16px; color: var(--pl-text); } .pl-search input::placeholder { color: var(--pl-text-4); }
.pl-tags { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-bottom: 18px; } .pl-tag { padding: 7px 14px; border: 1px solid var(--pl-border); background: var(--pl-bg); font-size: 14px; color: var(--pl-text-2); border-radius: 999px; } .pl-tag:hover { background: var(--pl-surface); } .pl-tag.pl-on { background: var(--pl-text); border-color: var(--pl-text); color: var(--pl-bg); } .pl-tag.pl-start { color: var(--pl-accent); font-weight: 500; } .pl-tag.pl-start.pl-on { background: var(--pl-accent); border-color: var(--pl-accent); color: #fff; } .pl-tags.pl-dim .pl-tag { opacity: 0.5; } .pl-tags.pl-dim .pl-tag:hover { opacity: 1; } .pl-sep { width: 1px; height: 22px; background: var(--pl-border); margin: 0 4px; } .pl-clear { border: none; background: none; font-size: 13px; color: var(--pl-text-4); padding: 4px 6px; } .pl-clear:hover { color: var(--pl-text-2); } .pl-count { margin-left: auto; font-size: 14px; color: var(--pl-text-4); }
.pl-group-h { font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--pl-text-4); margin: 24px 0 12px; } .pl-group-h .pl-phase { color: var(--pl-text-3); } .pl-card { border: 1px solid var(--pl-border-subtle); border-radius: 10px; margin-bottom: 12px; background: var(--pl-bg); overflow: hidden; padding: 14px 18px; } .pl-card.pl-open { border-color: var(--pl-border); background: var(--pl-surface); } .pl-head { width: 100%; display: flex; align-items: baseline; gap: 12px; border: none; background: transparent; text-align: left; padding: 0; } .pl-head:focus-visible { outline: 2px solid var(--pl-accent); outline-offset: 2px; border-radius: 6px; } .pl-title { flex: 1; font-size: 17px; font-weight: 500; color: var(--pl-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .pl-prompt-preview { display: block; font-family: var(--pl-mono); font-size: 13.5px; color: var(--pl-text-3); margin-top: 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .pl-chip { font-size: 11px; letter-spacing: 0.05em; text-transform: uppercase; padding: 3px 9px; border-radius: 999px; flex-shrink: 0; background: var(--pl-accent-bg); color: var(--pl-accent); }
.pl-body { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--pl-border-subtle); } .pl-label { font-size: 11.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--pl-text-4); margin: 12px 0 8px; } .pl-prompt-box { display: flex; align-items: center; gap: 10px; padding: 14px 16px; background: #141413; color: #f0eee6; border-radius: 8px; font-family: var(--pl-mono); font-size: 15px; } .pl-caret { color: var(--pl-accent); flex-shrink: 0; } .pl-prompt-box code { flex: 1; background: none; padding: 0; color: inherit; white-space: pre-wrap; line-height: 1.9; } .pl-slot { font-family: var(--pl-mono); font-size: inherit; background: rgba(217,119,87,0.15); color: #f0eee6; border: none; border-bottom: 1.5px dashed var(--pl-accent); border-radius: 4px 4px 0 0; padding: 2px 6px; margin: 0 1px; outline: none; min-width: 6ch; max-width: 100%; box-sizing: content-box; cursor: text; } .pl-slot:hover { background: rgba(217,119,87,0.22); } .pl-slot:focus { background: rgba(217,119,87,0.28); border-bottom-style: solid; } .pl-slot::placeholder { color: rgba(240,238,230,0.4); font-style: italic; } .pl-hint { font-size: 14px; color: var(--pl-text-3); margin: 0 0 10px; } .pl-paste { color: var(--pl-text-2); } .pl-needs { color: var(--pl-text-2); } .pl-needs-label { display: inline-block; font-size: 10.5px; letter-spacing: 0.06em; text-transform: uppercase; padding: 2px 7px; margin-right: 6px; border-radius: 4px; background: var(--pl-accent-bg); color: var(--pl-accent); } .pl-hint-chip { font-family: var(--pl-mono); font-size: 0.92em; background: var(--pl-accent-bg); color: var(--pl-accent); border-bottom: 1.5px dashed var(--pl-accent); border-radius: 3px 3px 0 0; padding: 1px 5px; } .pl-copy { font-size: 12.5px; padding: 6px 12px; border-radius: 6px; background: var(--pl-accent); color: #fff; border: none; flex-shrink: 0; } .pl-teaches { display: block; font-size: 15.5px; color: var(--pl-text-2); margin: 4px 0 0; line-height: 1.6; } .pl-match { display: block; font-size: 13.5px; color: var(--pl-text-3); margin-top: 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .pl-match mark { background: var(--pl-accent-bg); color: var(--pl-text); padding: 1px 2px; border-radius: 3px; } .pl-next { display: flex; align-items: baseline; gap: 10px; margin: 14px 0 0; padding: 10px 12px; background: var(--pl-accent-bg); border-radius: 8px; font-size: 14.5px; } .pl-next-label { font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--pl-accent); font-weight: 600; flex-shrink: 0; } .pl-src { display: block; font-size: 14px; color: var(--pl-text-4); margin: 14px 0 0; }
.pl-show-all { display: block; width: 100%; padding: 14px; margin-top: 4px; border: 1px dashed var(--pl-border); border-radius: 10px; background: transparent; font-size: 15px; color: var(--pl-accent); text-align: center; } .pl-show-all:hover { background: var(--pl-accent-bg); border-style: solid; }
.pl-empty { padding: 32px; text-align: center; color: var(--pl-text-4); border: 1px dashed var(--pl-border); border-radius: 10px; } `, []); if (!mounted) return
; return <div className="pl-search">
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" style={{
color: 'var(--pl-text-4)'
}}>
<div className={'pl-tags' + (ql ? ' pl-dim' : '')}>
<button type="button" className={'pl-tag pl-start' + (!ql && start ? ' pl-on' : '')} onClick={() => {
setQ('');
setStart(!start);
if (!start) setSel(null);
}}> ★ {L.startHere} {TAGS.map(k => )} {(start || sel || q) && } {results.length} {results.length === 1 ? L.prompt : L.prompts}