New: 98,000+ skills indexed from GitHub repos with 100+ stars · every skill safety-checkedBrowse top skillsTop skills
Esc to closeBrowse all skills
Submit a skillBrowse skills
Submit a skillBrowse skills

Agent skill

Dashboard Builder for holaOS

by holaboss-ai in holaboss-ai/holaOS

Builds the visual layer of a holaOS dashboard app with TanStack Start and @holaboss/ui, starting from a bundled reference instead of a blank page.

Custom licenceAuto-check passedFrontend & Design

Install Dashboard Builder for holaOS

skills CLI
$ npx skills add holaboss-ai/holaOS --skill build-dashboard -a claude-code

Project install by default; add -g for ~/.claude/skills/.

GitHub CLI
$ gh skill install holaboss-ai/holaOS build-dashboard --agent claude-code

Project scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).

Manual copy
$ git clone --depth 1 https://github.com/holaboss-ai/holaOS.git skills-src && mkdir -p .claude/skills && cp -r skills-src/runtime/harnesses/src/embedded-skills/build-dashboard .claude/skills/build-dashboard && rm -rf skills-src

Use ~/.claude/skills/ instead of .claude/skills for a personal install. The folder must contain SKILL.md.

Claude Code skills documentation · loads skills from .claude/skills/

Facts

Skill name
build-dashboard
GitHub stars
11k
Token cost
~6.3k tokens
SKILL.md length
1,653 words
Files
10
Skills in repo
30
Repo updated
First seen
Licence
Custom licence

At a glance

Builds the visual layer of a holaOS dashboard app with TanStack Start and @holaboss/ui, starting from a bundled reference instead of a blank page.

  • Works in 2 steps: Copy the bundled reference. Don't… → Two style imports, not one.…
  • A holaOS app needs a dashboard, list view, kanban or calendar pane
  • SKILL.md covers When to use, The two non-negotiables, The shape catalog — pick one and Foundation — paste verbatim…, plus 11 more sections
  • Runs TypeScript scripts from its folder; calls bun, just and curl

What it does

The skill builds the src/client interface of a holaOS app once its data is already declared through the SDK. Its premise is that agents starting from a blank page produce generic dashboards, so the visual decisions are made in advance and the agent mostly supplies data and copy. It applies when someone asks for a dashboard, workspace pane, list view, kanban or calendar.

Two rules matter most. Copy the bundled reference in reference/messaging-dashboard/src/client rather than inventing a layout, and import two stylesheets, because @holaboss/ui/styles.css only includes utilities used inside the library, so the app needs its own Tailwind compile pass; a register-time lint rejects apps without it. The agent then picks one of five shapes by looking at the data: queue or feed (most apps), dense table, kanban, detail or form, and calendar week. The reference ships a header bar, connection pill, messages table and status badge, with sample data and routes.

Integration-only modules that use just the SDK skill, marketing landing pages and one-off static HTML reports are out of scope. The excerpt is cut off after the shape catalog.

When your agent uses it

  • A holaOS app needs a dashboard, list view, kanban or calendar pane
  • Choosing the right dashboard shape for an app's data
  • Adding a src/client interface to an app whose SDK resources are already wired

Example prompts

  • “Build the dashboard UI for my scheduled-posts app now that its SDK resources are declared.”
  • “Turn this CRM contact list into a dense table view in the app's client.”
  • “Make a kanban view for the ticket statuses.”

Requirements

  • A holaOS app with resources declared through the app-builder-sdk skill
  • TanStack Start and @holaboss/ui in the app

Workflow steps

2 steps, taken from the first numbered list in SKILL.md.

  1. Copy the bundled reference. Don't invent. reference/messaging-dashboard/src/client/ is the canonical starting point. Three files below are…
  2. Two style imports, not one. @holaboss/ui/styles.css only bakes in utilities used inside the library. Every Tailwind class your src/client/…

What it can do on your machine

Read from SKILL.md and the folder at commit 4684714. It shows what the files ask for, not the result of running them.

  • Tool permissions

    Pre-approves nothing: there is no allowed-tools line, so your agent's usual permission prompts apply.

    From allowed-tools in the SKILL.md frontmatter.

  • Runs code

    Ships script files (TypeScript), which the agent can run.

    Shell commands in SKILL.md call:

    • bun
    • just
    • curl

    From the folder's file list and the shell code blocks in SKILL.md.

  • Network

    No URLs in SKILL.md. Its commands use curl, which can reach the network depending on how they are called.

    From URLs in SKILL.md, links to its own repository left out.

  • Credentials

    Names no API keys, tokens, secrets or passwords.

    From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.

Context cost

Dashboard Builder for holaOS loads about 6.3k tokens when it runs. Until then it costs about 68 tokens; SKILL.md has 1,653 words of instructions outside code blocks.

Always · name and description, kept in context so the agent knows when to use it
~68
When it runs · the whole SKILL.md, loaded when a task matches
~6.3k

Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.

Safety

Auto-check passed

The automated check found no risky patterns in SKILL.md.

Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); files beside SKILL.md are not scanned.

SKILL.md

Its licence (Custom licence) doesn't allow us to republish the file, so here is its outline and opening line. It has 1,653 words (~6,335 tokens).

“The agent before you reliably produces ugly dashboards because it starts from a blank page and reaches for default shapes (single-column full-width cards, KPI strips that don't fit, sidebars that don't earn their space). This skill exists to bypass that…”

— opening of SKILL.md by holaboss-ai, Custom licence
name
build-dashboard

Read the full SKILL.md on GitHub

Files

SKILL.md and 9 other files in runtime/harnesses/src/embedded-skills/build-dashboard of holaboss-ai/holaOS.

  • SKILL.md
  • reference/messaging-dashboard/README.md
  • reference/messaging-dashboard/src/client/app.css
  • reference/messaging-dashboard/src/client/components/connection-pill.tsx
  • reference/messaging-dashboard/src/client/components/header-bar.tsx
  • reference/messaging-dashboard/src/client/components/messages-table.tsx
  • reference/messaging-dashboard/src/client/components/status-badge.tsx
  • reference/messaging-dashboard/src/client/lib/sample-data.ts
  • reference/messaging-dashboard/src/client/routes/__root.tsx
  • reference/messaging-dashboard/src/client/routes/index.tsx

Open the folder on GitHubat commit 4684714

Compare with similar skills

Dashboard Builder for holaOS next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.

Dashboard Builder for holaOS compared with similar skills
SkillStarsUsed inTokensAuto-checkLicenceRepo updated
Dashboard Builder for holaOS this skillholaboss-ai/holaOS11k—~6.3kAutomated safety check: PassCustom licence
React Frontend Development Guidelinesdiet103/claude-code-infrastructure-showcase10k2 repos~2.9kAutomated safety check: PassMIT
Senior FrontendOhh-889/skyroc7952 repos~1.1kAutomated safety check: NotesMIT
Shadmin Devahaodev/shadmin174—~2.8kAutomated safety check: PassMIT
Senior Frontendalirezarezvani/claude-skills28k5 repos~3.9kAutomated safety check: PassMIT
React ExpertJeffallan/claude-skills12k—~1.4kAutomated safety check: PassMIT

Similar skills

  • React Frontend Development Guidelines

    diet103/claude-code-infrastructure-showcase

    Guidelines for React 18 and TypeScript apps covering Suspense data fetching, lazy loading, feature folders, MUI v7 styling, TanStack Router and performance.

    10k GitHub starsUsed in 2 repos~2.9k tokens
    Frontend & DesignAuto-check passed

  • Senior Frontend

    Ohh-889/skyroc

    Comprehensive frontend development skill for building modern, performant web applications using ReactJS, NextJS, TypeScript, Tailwind CSS.

    795 GitHub starsUsed in 2 repos~1.1k tokens
    Frontend & DesignAuto-check: notes

  • Shadmin Dev

    ahaodev/shadmin

    Apply Shadmin feature-development standards (backend Go/Gin/Ent + frontend React/TS).

    174 GitHub stars~2.8k tokensUpdated 2 days ago
    Frontend & DesignAuto-check passed

  • Senior Frontend

    alirezarezvani/claude-skills

    Frontend development skill for React, Next.js, TypeScript, and Tailwind CSS applications.

    28k GitHub starsUsed in 5 repos~3.9k tokens
    Frontend & DesignAuto-check passed

  • React Expert

    Jeffallan/claude-skills

    Builds React 19 components in TypeScript with Server Components, useActionState forms, custom hooks and state libraries, checked with tsc and React Testing Library.

    12k GitHub stars~1.4k tokensUpdated 7 days ago
    Frontend & DesignAuto-check passed

  • Senior Frontend

    borghei/Claude-Skills

    Frontend development for React, Next.js, TypeScript, and Tailwind CSS.

    891 GitHub stars~1.7k tokensUpdated 3 days ago
    Frontend & DesignAuto-check passed

More from holaboss-ai/holaOS

All 30 skills in this repo

  • Interface Design for Dashboards and Apps

    holaboss-ai/holaOS

    Pushes an agent past generic defaults when designing dashboards, admin panels, SaaS apps and tools, with attention to structure, type, navigation and how data is shown.

    11k GitHub starsUsed in 3 repos~6k tokens
    Auto-check passed

  • Customize an Installed Capability

    holaboss-ai/holaOS

    Edits an already-installed workspace capability's manifest to add an MCP server, a skill, an integration or agent guidance, then reinstalls it so the change takes effect on the next run.

    11k GitHub stars~815 tokensUpdated 1 mo ago
    Auto-check passed

  • Capability Creator

    holaboss-ai/holaOS

    Bundles one or more existing skills and the integrations they need into a single named, installable capability.

    11k GitHub stars~385 tokensUpdated 1 mo ago
    Auto-check passed

  • Efficient Embedded Browser Loop

    holaboss-ai/holaOS

    Guidelines for driving a workspace's embedded browser with the fewest tool calls, smallest state reads and no needless screenshots or waits.

    11k GitHub stars~736 tokensUpdated 1 mo ago
    Auto-check passed

  • Browser QA Repro Loop

    holaboss-ai/holaOS

    Validates or debugs a workflow in the embedded browser with a reproducible, evidence-first loop that separates product failures from wait or locator problems.

    11k GitHub stars~712 tokensUpdated 1 mo ago
    Auto-check passed

  • holaOS MCP Configurator

    holaboss-ai/holaOS

    Adds, removes or updates MCP servers in a holaOS workspace by editing workspace.yaml in the mcp_registry format, with rules for headers, local servers and tool allowlists.

    11k GitHub stars~874 tokensUpdated 1 mo ago
    Auto-check passed

Works with

Categories

Questions about Dashboard Builder for holaOS

What does Dashboard Builder for holaOS do?

Builds the visual layer of a holaOS dashboard app with TanStack Start and @holaboss/ui, starting from a bundled reference instead of a blank page. The skill builds the src/client interface of a holaOS app once its data is already declared through the SDK. Its premise is that agents starting from a blank page produce generic dashboards, so the visual decisions are made in advance and the agent mostly supplies data and copy.

When should I use Dashboard Builder for holaOS?

Dashboard Builder for holaOS fits situations like: A holaOS app needs a dashboard, list view, kanban or calendar pane; choosing the right dashboard shape for an app's data; adding a src/client interface to an app whose SDK resources are already wired.

How do I install Dashboard Builder for holaOS in Claude Code?

Run `npx skills add holaboss-ai/holaOS --skill build-dashboard -a claude-code`. Or copy the skill folder (runtime/harnesses/src/embedded-skills/build-dashboard in holaboss-ai/holaOS) into .claude/skills/build-dashboard in your project. Claude Code loads it when a task matches its description.

How do I install Dashboard Builder for holaOS in Codex?

Run `npx skills add holaboss-ai/holaOS --skill build-dashboard -a codex`. Or copy the skill folder (runtime/harnesses/src/embedded-skills/build-dashboard in holaboss-ai/holaOS) into .agents/skills/build-dashboard in your project. Codex loads it when a task matches its description.

Can I use Dashboard Builder for holaOS in Cursor, Gemini CLI or GitHub Copilot?

Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add holaboss-ai/holaOS --skill build-dashboard -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/build-dashboard, .gemini/skills/build-dashboard, .github/skills/build-dashboard and .opencode/skills/build-dashboard in your project.

What does Dashboard Builder for holaOS need to run?

Going by SKILL.md and its folder, Dashboard Builder for holaOS needs TypeScript for the scripts in its folder and the command-line tools its instructions call (bun, just and curl). Our summary lists: A holaOS app with resources declared through the app-builder-sdk skill; TanStack Start and @holaboss/ui in the app.

Does Dashboard Builder for holaOS access the network?

SKILL.md contains no URLs. Its commands use curl, which can reach the network depending on how they are called. This is read from the text; nothing was executed.

Is Dashboard Builder for holaOS safe to install?

Our automated static check of SKILL.md found no risky patterns, such as piping downloads into a shell, reading credential files or hidden Unicode. It is not a guarantee. Review the folder before installing.

What licence does Dashboard Builder for holaOS use?

Dashboard Builder for holaOS has a licence file (the repository's licence) that doesn't match a standard licence. Read it on GitHub before reusing the skill.

How many tokens does Dashboard Builder for holaOS use?

About 6.3k tokens (SKILL.md is roughly 25k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full.

What are the alternatives to Dashboard Builder for holaOS?

Skills that share tags, products or a category with Dashboard Builder for holaOS: React Frontend Development Guidelines (diet103/claude-code-infrastructure-showcase, 10k stars), Senior Frontend (Ohh-889/skyroc, 795 stars), Shadmin Dev (ahaodev/shadmin, 174 stars) and Senior Frontend (alirezarezvani/claude-skills, 28k stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains Dashboard Builder for holaOS?

holaboss-ai (a GitHub organization) maintains it in holaboss-ai/holaOS, which has 11,448 GitHub stars. The repository holds 30 skills in this directory. The repository was last updated on August 21, 2026.

Source: holaboss-ai/holaOS on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.