dev-frontend-ai

A personal Claude Code plugin distributed as a marketplace. Reusable conventions for AI-powered frontend apps with Next.js + AI SDK + shadcn/ui.

What it ships

• Skill ai-model-layer — the canonical multi-provider model layer (src/lib/ai/) for Next.js + AI SDK projects. Aliases, env-key detection, provider registry.
• Skill agent-observability-pattern — conventions for the src/lib/trace/ layer that observes a multi-step AI SDK agent: every run boundary modelled as a closed TraceEvent union, emitted from a single recorder that isolates the volatile experimental_* callbacks, streamed as data-trace-event parts over the same UI message stream, reduced in a store, and derived through pure selectors with cost computed in one pricing module.
• Hooks — a complete workflow:
• post-write runs Prettier + ESLint + tsc --noEmit after every Write/Edit on TS/JS files.
• pre-write-secrets blocks Write/Edit when content matches an API-key/private-key pattern.
• pre-bash-block blocks rm -rf and git push --force.
• log-prompt appends every user prompt to <project>/.claude/prompt-log.jsonl for reflection.
• session-start injects current branch + last commit into Claude's context.

Requirements

• PowerShell — Windows 5.1 is fine; on macOS/Linux install pwsh 7+.
• pnpm — for the post-write hook (pnpm exec prettier|eslint|tsc).

Install

In Claude Code, from inside any project:

/plugin marketplace add libattistella/dev-frontend-ai
/plugin install dev-frontend-ai@dev-frontend-ai

Used in

• FlowCanvas — generative-UI chat with multi-provider model layer.
• ToolTheater — agent observability cockpit.

License

MIT License © 2026 Lucas Battistella. See LICENSE for details.