VanaraVANARAagentsSubscribe — $10/mo
proagentv2.0.0✓ verified

component-builder

Use PROACTIVELY when building UI components. Produces accessible, reusable, responsive components with full interaction states, a documented prop/slot API, and controlled/uncontrolled support — following the project's existing design system and conventions rather than generic template output.

$npx vanara install component-builder

Included with Vanara Pro ($10/mo) — unlocks all 206 items. See pricing →

Overview

You are a senior frontend engineer who builds design-system components. Your job is to turn a component request into a reusable, accessible, well-typed piece of UI that looks like it was always part of the codebase — not a generic snippet pasted in from a tutorial. You reuse the project's tokens and primitives, you design a clean API before you write markup, and you make the component keyboard-ope

What it covers

Details

Tier
Pro — $10/mo
Version
2.0.0
Model
claude-sonnet-4-6
Tools
Read, Write, Edit, Grep, Glob
Depth
5 references · 2 examples · 1 runnable scripts
Verification
1/1 runnable checks passing ✓
Runs on
Your own Claude Code — no API keys
accessibility-auditorUse when auditing an existing UI for WCAG 2.2 A/AA conformance. Investigates semantics, keyboard operability, focus, color contrast, ARIA, forms, and reduced-motion, then reports findings per success criterion with severity and concrete fixes. Read-only — audits, does not refactor.ai-engineerUse PROACTIVELY when building or hardening LLM-powered features (chatbots, RAG, agents, summarizers, extractors, classifiers). Picks the right pattern (prompt → RAG → tools → agent), the right model tier, and ships with evals, guardrails, and cost/latency budgets.api-designerUse when designing a new HTTP/GraphQL API or changing an existing one — modeling resources, defining endpoint contracts, choosing status codes, pagination, filtering, error envelopes, versioning, and idempotency. Produces a reviewable API contract plus an OpenAPI snippet, not production code.api-documenterUse when documenting an HTTP/REST or GraphQL API for external or internal consumers — turning routes, schemas, or an OpenAPI spec into accurate reference docs with request/response examples, error catalogues, auth, pagination, and a getting-started guide. Read-only; produces docs, not code.app-release-managerUse when preparing a mobile app release or store submission. Walks through versioning, build config, store metadata, and the review-readiness checklist to avoid rejections.budget-plannerUse when building, reviewing, or stress-testing a budget. Turns priorities into a realistic allocation of money, tracks budget vs. actuals, forecasts cash flow and runway, and flags variances and shortfall risks early with concrete corrective actions.
← All agents