**Status**: Production Ready
/plugin marketplace add secondsky/claude-skills/plugin install better-chatbot-patterns@claude-skillsThis skill inherits all available tools. When active, it can use any tool Claude has access to.
assets/example-template.txtreferences/example-reference.mdreferences/provider-integration-patterns.mdreferences/server-action-patterns.mdreferences/state-validation-patterns.mdreferences/tool-abstraction-patterns.mdscripts/example-script.shStatus: Production Ready Last Updated: 2025-11-21 Dependencies: None Latest Versions: next@16.0.3, ai@5.0.98, zod@3.24.2, zustand@5.0.8
This skill extracts reusable patterns from the better-chatbot project for use in custom AI chatbot implementations. Unlike the better-chatbot skill (which teaches project conventions), this skill provides portable templates you can adapt to any project.
Patterns included:
For complete implementation: Load references/server-action-patterns.md when implementing server action validators, auth validation, or FormData parsing.
What it solves: Inconsistent auth checks, repeated FormData parsing boilerplate, non-standard error handling, and type safety issues in server actions.
Three validator patterns:
validatedAction - Simple validation (no auth)validatedActionWithUser - With user context (auth required)validatedActionWithPermission - With permission checks (role-based)Quick example:
// Server action with automatic auth + validation
export const updateProfile = validatedActionWithUser(
z.object({ name: z.string(), email: z.string().email() }),
async (data, formData, user) => {
// user is authenticated, data is validated
await db.update(users).set(data).where(eq(users.id, user.id))
return { success: true }
}
)
Adapt to your auth: Better Auth, Clerk, Auth.js, or custom auth system.
For complete implementation: Load references/tool-abstraction-patterns.md when building multi-type tool systems, MCP integration, or extensible tool architectures.
What it solves: Type mismatches at runtime, repeated type checking boilerplate, and difficulty adding new tool types (TypeScript can't enforce runtime types).
How it works: Branded type tags enable runtime type narrowing with full TypeScript safety.
Quick example:
// Runtime type checking with branded tags
async function executeTool(tool: unknown) {
if (VercelAIMcpToolTag.isMaybe(tool)) {
return await tool.execute() // TypeScript knows tool is MCPTool
} else if (VercelAIWorkflowToolTag.isMaybe(tool)) {
return await executeWorkflow(tool.nodes) // TypeScript knows tool is WorkflowTool
}
throw new Error("Unknown tool type")
}
// Create tagged tools
const mcpTool = VercelAIMcpToolTag.create({
type: "mcp",
name: "search",
execute: async () => { /* ... */ }
})
Extensible: Add new tool types without breaking existing code.
For complete implementation: Load references/provider-integration-patterns.md when setting up multi-AI provider support, configuring Vercel AI SDK, or implementing provider fallbacks.
What it solves: Different SDK initialization patterns, provider-specific configurations, and unified interface for switching providers at runtime.
Supported providers: OpenAI, Anthropic (Claude), Google (Gemini), xAI (Grok), Groq.
Quick example:
// Provider registry in lib/ai/providers.ts
export const providers = {
openai: createOpenAI({ apiKey: process.env.OPENAI_API_KEY }),
anthropic: createAnthropic({ apiKey: process.env.ANTHROPIC_API_KEY }),
google: createGoogleGenerativeAI({ apiKey: process.env.GOOGLE_API_KEY })
}
// API route with user provider selection
export async function POST(req: Request) {
const { messages, provider, model } = await req.json()
const selectedModel = getModel(provider, model)
return streamText({ model: selectedModel, messages }).toDataStreamResponse()
}
Features: Fallback strategies, health checks, cost-aware selection.
For complete implementation: Load references/state-validation-patterns.md when implementing Zustand stores, workflow state, or complex nested state management.
What it solves: Managing complex nested state without mutations, avoiding re-render issues, and preventing state update bugs.
Quick example:
// Zustand store with shallow update pattern
export const useWorkflowStore = create<WorkflowStore>((set) => ({
workflow: null,
// Shallow update - no deep mutation
updateNodeStatus: (nodeId, status) =>
set(state => ({
workflow: state.workflow ? {
...state.workflow,
nodes: state.workflow.nodes.map(node =>
node.id === nodeId ? { ...node, status } : node
)
} : null
}))
}))
Patterns included: Multi-store organization, Immer integration, persist middleware.
For complete implementation: Load references/state-validation-patterns.md when implementing cross-field validation, password confirmation, or date ranges.
What it solves: Validating related fields (password confirmation, date ranges, conditional requirements) with consistent error messages and business rules.
Quick example:
// Zod superRefine for cross-field validation
const passwordSchema = z.object({
password: z.string().min(8),
confirmPassword: z.string()
}).superRefine((data, ctx) => {
if (data.password !== data.confirmPassword) {
ctx.addIssue({
path: ["confirmPassword"],
code: z.ZodIssueCode.custom,
message: "Passwords must match"
})
}
})
Use cases: Password match, date ranges, conditional fields, business rules, array validation.
Load reference files when implementing specific chatbot patterns:
Load when:
Load when:
Load when:
Load when:
✅ Adapt patterns to your auth system (Better Auth, Clerk, Auth.js, etc.)
✅ Use branded type tags for runtime type checking
✅ Use shallow updates for nested Zustand state
✅ Use Zod superRefine for cross-field validation
✅ Type your tool abstractions properly
❌ Copy code without adapting to your auth/role system ❌ Assume tool type without runtime check ❌ Mutate Zustand state directly ❌ Use separate validators for related fields ❌ Skip type branding for extensible systems
This skill prevents 5 common issues:
Prevention: Use validatedActionWithUser pattern (adapt to your auth)
Prevention: Use branded type tags with .isMaybe() checks
Prevention: Use shallow Zustand update pattern
Prevention: Use Zod superRefine for related fields
Prevention: Use provider registry with unified interface
templates/action-utils.ts - Complete server action validatorstemplates/tool-tags.ts - Complete tool abstraction systemtemplates/providers.ts - Multi-AI provider setuptemplates/workflow-store.ts - Zustand workflow storeCopy to your project and adapt placeholders (getUser(), checkPermission(), etc.)
Required:
Optional (based on patterns used):
These patterns are extracted from better-chatbot:
Token Efficiency: ~65% savings | Errors Prevented: 5 | Production Verified: Yes
Use when working with Payload CMS projects (payload.config.ts, collections, fields, hooks, access control, Payload API). Use when debugging validation errors, security issues, relationship queries, transactions, or hook behavior.
Applies Anthropic's official brand colors and typography to any sort of artifact that may benefit from having Anthropic's look-and-feel. Use it when brand colors or style guidelines, visual formatting, or company design standards apply.
Creating algorithmic art using p5.js with seeded randomness and interactive parameter exploration. Use this when users request creating art using code, generative art, algorithmic art, flow fields, or particle systems. Create original algorithmic art rather than copying existing artists' work to avoid copyright violations.