**Status**: Production Ready | **SDK**: @anthropic-ai/sdk@0.70.1
Integrates Anthropic's Claude API for AI conversations with streaming, caching, and tool use.
npx claudepluginhub secondsky/claude-skillsThis skill inherits all available tools. When active, it can use any tool Claude has access to.
references/api-reference.mdreferences/prompt-caching-guide.mdreferences/rate-limits.mdreferences/setup-guide.mdreferences/tool-use-patterns.mdreferences/top-errors.mdreferences/vision-capabilities.mdscripts/check-versions.shtemplates/basic-chat.tstemplates/cloudflare-worker.tstemplates/error-handling.tstemplates/extended-thinking.tstemplates/nextjs-api-route.tstemplates/nodejs-example.tstemplates/package.jsontemplates/prompt-caching.tstemplates/streaming-chat.tstemplates/tool-use-advanced.tstemplates/tool-use-basic.tstemplates/vision-image.tsStatus: Production Ready | SDK: @anthropic-ai/sdk@0.70.1
import Anthropic from '@anthropic-ai/sdk';
const client = new Anthropic({
apiKey: process.env.ANTHROPIC_API_KEY,
});
const message = await client.messages.create({
model: 'claude-sonnet-4-5-20250929',
max_tokens: 1024,
messages: [
{ role: 'user', content: 'Hello, Claude!' },
],
});
console.log(message.content[0].text);
const response = await fetch('https://api.anthropic.com/v1/messages', {
method: 'POST',
headers: {
'x-api-key': env.ANTHROPIC_API_KEY,
'anthropic-version': '2023-06-01',
'content-type': 'application/json',
},
body: JSON.stringify({
model: 'claude-sonnet-4-5-20250929',
max_tokens: 1024,
messages: [{ role: 'user', content: 'Hello!' }],
}),
});
const data = await response.json();
console.log(data.content[0].text);
Load references/setup-guide.md for complete setup with streaming, caching, and tools.
claude-sonnet-4-5-20250929, not claude-3-5-sonnet-latest)stream: true) for better UXtool_use, end_turn, max_tokenscontent is an arraySymptom: 429 Too Many Requests: Number of request tokens has exceeded your per-minute rate limit
Solution: Implement exponential backoff with retry-after header
async function handleRateLimit(requestFn, maxRetries = 3) {
for (let attempt = 0; attempt < maxRetries; attempt++) {
try {
return await requestFn();
} catch (error) {
if (error.status === 429) {
const retryAfter = error.response?.headers?.['retry-after'];
const delay = retryAfter ? parseInt(retryAfter) * 1000 : 1000 * Math.pow(2, attempt);
await new Promise(resolve => setTimeout(resolve, delay));
} else {
throw error;
}
}
}
}
Prevention: Monitor rate limit headers, upgrade tier, implement backoff
Symptom: High costs despite cache_control blocks, cache_read_input_tokens: 0
Solution: Place cache_control on LAST block with >= 1024 tokens
// ❌ Wrong - cache_control not at end
{
type: 'text',
text: DOCUMENT,
cache_control: { type: 'ephemeral' }, // Wrong position
},
{
type: 'text',
text: 'Additional text',
}
// ✅ Correct - cache_control at end
{
type: 'text',
text: DOCUMENT + '\n\nAdditional text',
cache_control: { type: 'ephemeral' }, // Correct position
}
Prevention: Ensure content >= 1024 tokens, keep cached content identical, monitor usage
Load references/prompt-caching-guide.md for complete caching strategy.
Symptom: invalid_request_error: tools[0].input_schema is invalid
Solution: Valid tool schema with proper JSON Schema
// ✅ Valid tool schema
{
name: 'get_weather',
description: 'Get current weather',
input_schema: {
type: 'object', // Must be 'object'
properties: {
location: {
type: 'string', // Valid JSON Schema types
description: 'City' // Optional but recommended
}
},
required: ['location'] // List required fields
}
}
// ✅ Valid tool result
{
type: 'tool_result',
tool_use_id: block.id, // Must match tool_use id
content: JSON.stringify(result) // Convert to string
}
Prevention: Validate schemas, match tool_use_id exactly, stringify results
Load references/tool-use-patterns.md + references/top-errors.md for all 12 errors.
const stream = await client.messages.stream({
model: 'claude-sonnet-4-5-20250929',
max_tokens: 1024,
messages: [{ role: 'user', content: 'Write a story.' }],
});
for await (const event of stream) {
if (event.type === 'content_block_delta' && event.delta.type === 'text_delta') {
process.stdout.write(event.delta.text);
}
}
Load: templates/streaming-chat.ts
const message = await client.messages.create({
model: 'claude-sonnet-4-5-20250929',
max_tokens: 1024,
system: [
{
type: 'text',
text: 'Long system prompt...',
cache_control: { type: 'ephemeral' },
},
],
messages: [{ role: 'user', content: 'Question?' }],
});
Cache lasts 5 minutes, 90% savings on cached tokens
Load: references/prompt-caching-guide.md + templates/prompt-caching.ts
const message = await client.messages.create({
model: 'claude-sonnet-4-5-20250929',
max_tokens: 1024,
tools: [{
name: 'get_weather',
description: 'Get weather for a location',
input_schema: {
type: 'object',
properties: { location: { type: 'string' } },
required: ['location'],
},
}],
messages: [{ role: 'user', content: 'Weather in SF?' }],
});
if (message.stop_reason === 'tool_use') {
const toolUse = message.content.find(b => b.type === 'tool_use');
// Execute tool and send result back...
}
Load: references/tool-use-patterns.md + templates/tool-use-basic.ts
const message = await client.messages.create({
model: 'claude-sonnet-4-5-20250929',
max_tokens: 1024,
messages: [{
role: 'user',
content: [
{
type: 'image',
source: {
type: 'base64',
media_type: 'image/jpeg',
data: base64Image,
},
},
{ type: 'text', text: 'What is in this image?' },
],
}],
});
Supports: JPEG, PNG, WebP, GIF (max 5MB)
Load: references/vision-capabilities.md + templates/vision-image.ts
const message = await client.messages.create({
model: 'claude-sonnet-4-5-20250929',
max_tokens: 4096,
thinking: {
type: 'enabled',
budget_tokens: 2000,
},
messages: [{ role: 'user', content: 'Solve complex problem...' }],
});
const thinking = message.content.find(b => b.type === 'thinking')?.thinking;
const answer = message.content.find(b => b.type === 'text')?.text;
Load: templates/extended-thinking.ts
Latest models:
claude-sonnet-4-5-20250929 - Recommended (best performance)claude-sonnet-4-20250514 - Stable versionclaude-3-7-sonnet-20250219 - Previous generationclaude-3-5-sonnet-20241022 - LegacyAlways pin to specific version (not -latest suffix)
references/setup-guide.md when:references/prompt-caching-guide.md when:references/tool-use-patterns.md when:references/vision-capabilities.md when:references/api-reference.md when:references/top-errors.md when:references/rate-limits.md when:Node.js: bun add @anthropic-ai/sdk → Use templates: nodejs-example.ts, basic-chat.ts
Cloudflare Workers: Use fetch API → Use templates: cloudflare-worker.ts
Next.js: bun add @anthropic-ai/sdk → Use templates: nextjs-api-route.ts
Questions? Issues?
references/top-errors.md for error solutionsreferences/setup-guide.md for complete setupreferences/prompt-caching-guide.md for cost optimizationtemplates/ for working examplesThis skill should be used when the user asks about libraries, frameworks, API references, or needs code examples. Activates for setup questions, code generation involving libraries, or mentions of specific frameworks like React, Vue, Next.js, Prisma, Supabase, etc.
UI/UX design intelligence. 50 styles, 21 palettes, 50 font pairings, 20 charts, 9 stacks (React, Next.js, Vue, Svelte, SwiftUI, React Native, Flutter, Tailwind, shadcn/ui). Actions: plan, build, create, design, implement, review, fix, improve, optimize, enhance, refactor, check UI/UX code. Projects: website, landing page, dashboard, admin panel, e-commerce, SaaS, portfolio, blog, mobile app, .html, .tsx, .vue, .svelte. Elements: button, modal, navbar, sidebar, card, table, form, chart. Styles: glassmorphism, claymorphism, minimalism, brutalism, neumorphism, bento grid, dark mode, responsive, skeuomorphism, flat design. Topics: color palette, accessibility, animation, layout, typography, font pairing, spacing, hover, shadow, gradient. Integrations: shadcn/ui MCP for component search and examples.