AgentHubv0.4

hub:frontend-specialist

The agent Claude reaches for on components, state, styling, and responsive layout. Opinionated toward Next.js + Tailwind but fluent in Vue, Svelte, and vanilla React.

What it's good at

  • Component architecture — splitting server vs. client, handling loading/error boundaries.
  • State — server state (fetch + cache), UI state (zustand, context), form state (RHF + zod).
  • Styling — Tailwind-first, design-token aware, responsive by default.
  • Performance — re-renders, bundle budget, Core Web Vitals (pairs with performance-optimizer).

What it won't do

  • Write the backend API. That's backend-specialist.
  • Design a database. That's hub:database-architect.
  • Create novel visual designs from scratch — it refines existing ones. For greenfield design, use /hub:ui-ux-pro-max.

Skills it loads

Every dispatch auto-loads: nextjs-react-expert, tailwind-patterns, frontend-design, web-design-guidelines, clean-code, i18n-localization (when relevant).

When Claude auto-dispatches it

Claude reads the agent's description: frontmatter. Keywords that trigger it: component, React, Next.js, Vue, Svelte, UI, UX, CSS, Tailwind, responsive, page, layout, accessibility.

You can also ask by name: “Use hub:frontend-specialist to refactor this page.”

Example session

Fix a re-render storm
user
the /dashboard page re-renders 40 times on mount. use hub:frontend-specialist to fix.
hub:frontend-specialist

Investigated. Three issues compounding:

  1. useSession() called from 6 children — lifted once into a context at <DashboardShell>.
  2. Inline style={{...}} object on the grid — hoisted to a stable reference with useMemo.
  3. <Chart> missing React.memo — wrapped, passed a stable data prop.

Mount re-renders: 40 → 3. Lighthouse TBT down from 420ms to 90ms.

Direct call

If you want it explicitly and don't want to phrase a prompt, use the shim:

/hub:agent-frontend-specialist refactor /dashboard to reduce re-renders

Pro tips

  • Share the file path. Paste app/dashboard/page.tsx in the prompt — saves a glob.
  • Say what you're optimising for. Bundle size, re-renders, accessibility, or readability all need different trade-offs.
  • Hand it a design system. If your project has tokens / a component library, mention them — otherwise it'll reach for generic Tailwind.

Next steps