**Status**: Production Ready
Extracts reusable chatbot patterns for server actions, tools, AI providers, and state management.
npx claudepluginhub secondsky/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
You MUST use this before any creative work - creating features, building components, adding functionality, or modifying behavior. Explores user intent, requirements and design before implementation.