web-dev-expert

web-dev-expert is an agent for Claude Code from patrickserrano/lacquer. It costs 0 tokens per session (1,072 once invoked), scanned A, original, MIT.

An expert agent for making architecture and implementation decisions in TypeScript, React, Next.js, and Vercel projects. It emphasizes strict types, reusable interface components, and type-safe data access.

In plain words
What is it for?
Use it for web architecture, TypeScript design, React and Next.js implementation, database choices, styling, validation, and deployment guidance.
Why use it?
It gives developers a consistent technical reference when choosing tools, structuring a web app, or checking code quality.

Agent for Claude Code

Written for Claude Code: a Claude Code subagent (agents/*.md).

Good fit Use it for web architecture, TypeScript design, React and Next.js implementation, database…

Compare 6 agents from other repositories ↓
Install with agentmods
npx agentmods add agents/patrickserrano/lacquer/web-dev-expert
Install

Getting it into your agent

One page per mod, every tool's command on it. A separate URL per tool would split the same page into five that compete with each other.

Clone the repo
git clone --depth 1 https://github.com/patrickserrano/lacquer

Made for: Claude Code.

Wrote this? Show the measurements

A badge with what this costs and how it scanned, read live from this page, so it follows the numbers instead of freezing them. Markdown for a README, HTML for a documentation site or a project page.

agentmods badge for web-dev-expert

README.md
[![agentmods](https://agentmods.dev/badge/agents/patrickserrano/lacquer/web-dev-expert.svg)](https://agentmods.dev/agents/patrickserrano/lacquer/web-dev-expert)
Your own site
<a href="https://agentmods.dev/agents/patrickserrano/lacquer/web-dev-expert"><img src="https://agentmods.dev/badge/agents/patrickserrano/lacquer/web-dev-expert.svg" alt="Measured on agentmods" height="20"></a>
Per session 0 Only the description is in the session, so the agent can decide to use it. The body loads when it is invoked.
When invoked 1,072 The whole file, excluding the scripts and references it only reads on demand.
Security scan A 0 findings. A grade says what 26 rules found in the file — not that it is safe.
Origin original No closer match found in the catalogue.
Token cost

What it costs to keep this loaded

Counted locally with the o200k_base tokenizer, which is exact for GPT models; Claude uses its own tokenizer and its counts differ. Treat this as one consistent yardstick across the catalogue rather than a bill. Prices are per million input tokens.

ModelPer sessionOnce invoked
Fable 5.1 $0.00000 $0.01072
Opus 5 $0.00000 $0.00536
Sonnet 5 $0.00000 $0.00214
Haiku 4.5 $0.00000 $0.00107

Measured 3d ago against content hash 8f16c01354f4, method: parsed. Prices are Anthropic first-party input rates as of 2026-09-06, from the pricing page.

Security

Grade A, and why

web-dev-expert scanned grade A with 0 findings against 26 rules in 11 categories — prompt injection, anti-refusal, data exfiltration, privilege escalation, supply chain, agent snooping, system-prompt leakage, SSRF and excessive agency — measured 3d ago.

A static scan of the body, not an audit. Every finding is printed with the line that produced it so you can judge whether it matters here. A mod is markdown that instructs an agent; that is exactly why what it instructs is worth reading.

Nothing flagged

None of the 26 patterns this scan looks for appear in this file: no shell pipes, no recursive deletes, no credential paths, no hidden text, no instruction-override or anti-refusal phrasing, no agent-config snooping. That is not a guarantee, it is the absence of the things that are checkable.

profiles/web/agents/web-dev-expert.md · 86 lines

How it starts

The opening of the file, as written. The whole thing — 86 lines — stays where its author put it; the contents beside it link to each section on GitHub.

You are an expert web developer with deep expertise in modern TypeScript, React, Next.js, and Vercel deployment. You champion best practices, type safety, and developer experience while maintaining a strong focus on user experience and performance.

Core Technology Preferences

Primary Stack: TypeScript + React + Next.js + Vercel Database: Supabase or Neon (PostgreSQL with generous free tiers) Styling: Tailwind CSS or CSS Modules, never inline styles Linting: Biome.js (strongly preferred over ESLint) UI Library: Mantine (primary recommendation) or shadcn/ui Code Quality: Strict TypeScript, comprehensive type safety

Strict Guidelines

TypeScript Rules:

  • Never suggest 'any' types unless absolutely no alternative exists
  • Always provide proper type definitions and interfaces
  • Use discriminated unions, generics, and utility types effectively
  • Implement type guards and runtime validation when needed
  • Favor code generation tools (like Prisma, tRPC, or GraphQL codegen) for type safety

Technology Restrictions:

  • NEVER recommend Material-UI (MUI) or any Material Design derivatives
  • Avoid heavy, expensive SaaS solutions when free-tier alternatives exist
  • Prefer modern, lightweight solutions over legacy approaches

Architecture Principles:

  • Server-side rendering and static generation with Next.js
  • API routes for backend functionality when possible
  • Edge functions for performance-critical operations
  • Proper error boundaries and loading states
  • Accessibility-first development (WCAG 2.1 AA compliance)

Deployment: Vercel (generous free tier, excellent Next.js integration) Database: Supabase (PostgreSQL + auth + real-time) or Neon (serverless PostgreSQL) Authentication: Supabase Auth or NextAuth.js Analytics: Vercel Analytics or Plausible Monitoring: Vercel monitoring or Sentry (free tier) Email: Resend or SendGrid (free tiers) File Storage: Supabase Storage or Vercel Blob

Read the full file on GitHub · 86 lines

Changes

What this file has done since we first saw it

Hashed on every crawl. A supply-chain change to an agent config is a question of when, not whether, so the history is kept rather than the latest state alone.

  1. 3d ago First seen · 86 lines · 0 tokens per session scan A 8f16c01354f4

Subscribe to this mod's changes

web-dev-expert is an agent published in the GitHub repository patrickserrano/lacquer (3 stars, last pushed yesterday), licensed MIT. It costs nothing until one of its globs matches a file; then it loads 1,072 tokens. A static security scan graded it A with 0 findings. No closer match exists in the catalogue, so it is treated as the original; first seen 2026-09-03.

Related

Other agents, from other repositories

migration-specialist

Use this agent when upgrading React versions, migrating between frameworks (CRA to Vite, Pages to App Router), updating major dependencies, running codemods, or handling breaking changes. This agent specializes in safe, incremental migration strategies.

PMDevSolutions/Aurelius · 50 tokens

senior-frontend-engineer

Senior Frontend Engineer specialising in React/TypeScript component architecture, accessibility, Core Web Vitals, and design systems. Use when: building UI components, "React component", "Next.js", "Tailwind", "accessibility", "WCAG", "keyboard navigation", "state management", "Zustand", "Redux", "component…

Ghosteken/agent-harness · 0 tokens

astro-developer

SCOPE: ASTRO LANDING PAGE ONLY This agent is EXCLUSIVELY for the Dingo landing page (Astro, React, TypeScript in /langingpage/ directory). ❌ DO NOT USE for: Dingo transpiler/language development (use golang-developer instead) Go code in /cmd/, /pkg/, /internal/ (use golang-developer instead) Parser or AST work (use…

MadAppGang/dingo · 753 tokens

Expert React Frontend Engineer

Expert React 19.2 frontend engineer specializing in modern hooks, Server Components, Actions, TypeScript, and performance optimization.

archubbuck/workspace-architect · 30 tokens

Expert React Frontend Engineer

Expert React 19.2 frontend engineer specializing in modern hooks, Server Components, Actions, TypeScript, and performance optimization.

github/awesome-copilot · 30 tokens

frontend-dev

Frontend Developer (Aria Chen) - React, Next.js, TypeScript, accessibility, performance.

vibeeval/vibecosystem · 22 tokens