Scaffold Dashboard Skill for Claude
Stand up the dashboard foundation (the platform layer — UI primitives, form system, charts, Repository + adapters, auth seam, theme, routing shell) into a new project as a zero-config runnable app. Run this FIRST when building a dashboard, then compose screens from the add-component catalogue's shapes (add-detail-page, add-kanban, …) and the add-backend operation skill.
Install
one command, takes just this skill from the repositorynpx skills add https://github.com/ahpxex/open-dashboard --skill scaffold-dashboardWhat comes with it
1 148 936 bytes besides the instructionThe instruction itself
6 sections, as written by the authorScaffold the dashboard foundation
The whole foundation is bundled at base/ — a clean, runnable app shell with
no demo content. Materialize it into a new project, then add screens from the
add-component catalogue's shapes (and the add-backend operation skill). You
don't read the foundation code — you scaffold it.
Scaffold
bash .claude/skills/scaffold-dashboard/scaffold.sh <target-dir>
Copies base/ → target and runs bun install. Then:
cd <target-dir>
bun run dev # zero-config: in-memory auth + data, no Postgres/Docker
Open it, click Dev quick login ([email protected] / password) → an empty,
branded dashboard.
What you get
TanStack Start + Router + Query + Table; shadcn-on-@base-ui/react primitives;
Tailwind v4 theme; the form system (TanStack Form + zod); chart components; the
Repository data layer (in-memory by default, Drizzle/Postgres when DATABASE_URL
is set); better-auth behind the AuthProvider seam; toast + useConfirm; and the
auth-guarded routing shell. Rebrand via src/config/app.ts (or the rebrand skill).
Compose a coherent product (not a demo dump)
You are building a real back-office for a specific domain — not showcasing the
catalogue. The fastest way to ship something that reads as a patchwork demo is to
copy a pile of gallery shapes into the nav. Don't. Instead:
- The home is an overview, never the placeholder. Replace
src/routes/_app/index.tsx (the "clean shell" welcome) with a real overview via
add-chart-page — KPIs + charts derived from your actual resources. Shipping the
scaffold welcome as the product home is the #1 tell of a demo.
- Nav = real product sections only: Overview, your resources, Settings. The
scaffold base ships clean (no demo resources, no Skills Gallery) — you add
product sections to src/lib/sidebar-items.ts, you don't prune sample ones.
- Pick the archetype that fits each resource's shape, don't add one of each:
flat list → CRUD table (add-backend); rich record → + add-detail-page;
an inbox you triage → add-master-detail; a staged pipeline → add-kanban;
people/visual items → add-card-list; date-bound items → add-calendar;
metrics → add-chart-page.
- Every nav item gets a distinct, meaningful Phosphor icon — never repeat one
icon (e.g. SquaresFourIcon) down the list.
- Use product language. Labels and page copy name the domain, not the
mechanism: "Feed", not "Feed (REST)"; "Manage your invoices", not "Generated
resource — customise the schema".
- Seed believable data — real names, dates, statuses, amounts. Three rows of
Alpha/Beta/Gamma read as a demo; a dozen realistic records read as a product.
Add screens (compose from the add-component catalogue)
The shapes below are references inside the single add-component catalogue (not
separate invocable skills); each copies a bundled template into the new project.
Data + CRUD comes from the add-backend operation skill.
- Resources (data + CRUD):
bun run create-resource <name>(oradd-backend),
then the catalogue's add-detail-page, add-master-detail, add-card-list,
add-form, add-chart-page.
- Shapes (all in
add-component):add-list-view,add-kanban,
add-tree-view, add-calendar, add-timeline, add-virtual-table,
add-inline-edit, add-filter-panel, add-wizard-form, add-field-combobox,
add-record-tabs, add-settings-page, add-empty-state, add-page-layout,
add-data-display, add-feedback-states.
After copying a template, add a sidebar entry in src/lib/sidebar-items.ts (above
the // create-resource:anchor) so it shows in the nav.
Verify
cd <target-dir>
bun run typecheck && bun run check && bun run test && bun run build
All green on the empty shell (and after each screen you add). bun run dev boots
zero-config.
Other skills for the same job
different authors, same section of the catalogue
Creating interactive data visualisations using d3.js. This skill should be used when creating custom charts, graphs, network diagrams, geographic visualisations, or any complex SVG-based data visualisation that requires fine-grained control over visual elements, transitions, or interactions. Use this for bespoke visualisations beyond standard charting libraries, whether in React, Vue, Svelte, vanilla JavaScript, or any other environment.
Comprehensive Python library for astronomy and astrophysics. This skill should be used when working with astronomical data including celestial coordinates, physical units, FITS files, cosmological calculations, time systems, tables, world coordinate systems (WCS), and astronomical data analysis. Use when tasks involve coordinate transformations, unit conversions, FITS file manipulation, cosmological distance calculations, time scale conversions, or astronomical data processing.
Convert laboratory instrument output files (PDF, CSV, Excel, TXT) to Allotrope Simple Model (ASM) JSON format or flattened 2D CSV. Use this skill when scientists need to standardize instrument data for LIMS systems, data lakes, or downstream analysis. Supports auto-detection of instrument types. Outputs include full ASM JSON, flattened CSV for easy import, and exportable Python code for data engineers. Common triggers include converting instrument files, standardizing lab data, preparing data for upload to LIMS/ELN systems, or generating parser code for production pipelines.
Quantum mechanics simulations and analysis using QuTiP (Quantum Toolbox in Python). Use when working with quantum systems including: (1) quantum states (kets, bras, density matrices), (2) quantum operators and gates, (3) time evolution and dynamics (Schrödinger, master equations, Monte Carlo), (4) open quantum systems with dissipation, (5) quantum measurements and entanglement, (6) visualization (Bloch sphere, Wigner functions), (7) steady states and correlation functions, or (8) advanced methods (Floquet theory, HEOM, stochastic solvers). Handles both closed and open quantum systems across various domains including quantum optics, quantum computing, and condensed matter physics.
Retrieve and display GitHub Copilot usage metrics for organizations and enterprises using the GitHub CLI and REST API.
Socratic mentoring for junior developers and AI newcomers. Guides through questions, never answers. Triggers: "help me understand", "explain this code", "I''m stuck", "Im stuck", "I''m confused", "Im confused", "I don''t understand", "I dont understand", "can you teach me", "teach me", "mentor me", "guide me", "what does this error mean", "why doesn''t this work", "why does not this work", "I''m a beginner", "Im a beginner", "I''m learning", "Im learning", "I''m new to this", "Im new to this", "walk me through", "how does this work", "what''s wrong with my code", "what''s wrong", "can you break this down", "ELI5", "step by step", "where do I start", "what am I missing", "newbie here", "junior dev", "first time using", "how do I", "what is", "is this right", "not sure", "need help", "struggling", "show me", "help me debug", "best practice", "too complex", "overwhelmed", "lost", "debug this", "/socratic", "/hint", "/concept", "/pseudocode". Progressive clue systems, teaching techniques, and success metrics.
Core Python library for astronomy and astrophysics workflows that need Astropy APIs, including units/quantities, coordinates, FITS I/O, tables, time systems, WCS, and cosmology. Use when implementing or debugging astronomical data analysis code with Astropy.
High-performance DataFrame library for Python ETL, analytics, and pandas migration. Use for expression-based data manipulation with lazy query optimization, parallel execution, streaming out-of-core processing, Arrow interoperability, and optional GPU execution.
How to use it
Take ahpxex/scaffold-dashboard from the repository into ~/.claude/skills for personal
use, or into .claude/skills inside a project.
The agent identifies a skill by the name field in its header. Two skills with the
same name cannot sit side by side — one of them will be ignored.