skills.rest
adam-s
adam-sCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

dashboard-builder

Build Next.js dashboard pages that consume domain proxy API endpoints.

Updated Mar 16, 2026
Search Tags:#frontend#react#next.js#dashboard#shadcn/ui#api integration#screenshot testing
One-click install
npx skills add https://github.com/adam-s/api-interceptor --skill dashboard-builder-adam-s
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: dashboard-builder
Source: https://github.com/adam-s/api-interceptor/tree/main/.claude/skills/dashboard-builder
Command: npx skills add https://github.com/adam-s/api-interceptor --skill dashboard-builder-adam-s

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Building frontend dashboards on top of freshly discovered website APIs is slow and error-prone: data shapes are unverified, browser-dependent routes are slow to iterate against, and UI quality drifts without objective checks. This Skill provides a gated, screenshot-verified workflow for creating Next.js dashboard pages that consume /api/<domain>/ proxy endpoints. ## Core Features & Use Cases - Design-by-reference workflow: Screenshot a real website as a template, then iterate until your dashboard matches its layout, typography, and interactive controls. - Fixture-based development: Cache API responses as JSON fixtures so UI iteration reloads instantly instead of waiting 30-60 seconds per live browser request. - Multi-domain composition: Sequentially fetch and merge data from multiple browser-dependent sources with progress narration, entity deduplication, and per-source error states. - Use Case: After discovering the Hacker News API, build a dashboard with search, a story list, and a nested comment tree, verifying every state (loading, empty, error, mobile at 375px) with Patchright screenshots before committing. ## Quick Start Ask the agent to build a dashboard page for a discovered domain, for example: build a Hacker News dashboard with search, story list, and comments using the existing proxy routes.

Frequently Asked Questions about dashboard-builder

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I build a Next.js dashboard that calls a proxy API?▼

Create a page under apps/web/src/app/(dashboard)/ with a client component that fetches relative URLs like /api/<domain>/<endpoint>. Verify each endpoint with curl first, cache responses as fixtures, and use shadcn/ui components with Skeleton, empty, and error states.

How do I combine data from multiple APIs in one dashboard?▼

Fetch each source sequentially rather than with Promise.all, because browser-dependent routes share a singleton browser whose navigation clobbers prior page state. Merge results by a normalized compound key, show per-source progress messages, and handle each source's errors independently.

Why does my dashboard fetch return a 503 error?▼

A 503 from the proxy means no browser is connected for that domain. Connect a browser at /browser?profile=<domain> before calling browser-dependent routes, and curl the endpoint directly to confirm it returns data before building UI on top of it.

How do I speed up UI iteration against slow browser-based APIs?▼

Cache API responses as JSON fixtures with curl into data/fixtures/<domain>/, then run the dev server with FIXTURE_DIR=data/fixtures. This makes every reload instant instead of waiting 30-60 seconds per live browser request.

When should I use shadcn/ui versus custom CSS for matching a reference site?▼

Use shadcn/ui components for structure and behavior (Input, Button, Alert, Sheet) and override only visual tokens with Tailwind classes or inline styles for brand fonts and colors. Avoid writing large custom CSS files that replace shadcn primitives, since you lose focus management and ARIA handling.

Why does my dashboard show undefined fields even though TypeScript compiles?▼

Type assertions like as ResponseType do not validate at runtime, so mismatched fields silently become undefined. Compare the curl JSON output field names against your TypeScript interface and fix any mismatch before writing component code.

Related Skills

Explore More Software Engineering Skills→
adam-sadam-s

api-discovery

Discover website APIs by capturing browser traffic and generate typed proxy routes.

Community
Advanced
RonanCodesRonanCodes

cf-ship

Automate TanStack Start and Cloudflare Workers deployments with pre-flight checks.

Community
Advanced
seal-harnessseal-harness
1

visual-review

Capture screenshots of web pages and UI with Playwright for visual inspection.

Official
Intermediate
Joel-barriosnuevoJoel-barriosnuevo

frontend-design

Design production-grade frontend interfaces with cohesive aesthetics and accessibility.

Community
Basic