skills.rest
tapway
tapwayOFFICIAL
Explore all skills by this author →
WebsiteGitHub

add-profile-dashboard

Implements department dashboards in the Shogun OS web portal using FastAPI, React, and Recharts.

1|Updated Jun 21, 2026
Search Tags:#typescript#react#fastapi#dashboard#recharts#kpi#web portal
One-click install
npx skills add https://github.com/tapway/shogun-os --skill add-profile-dashboard-tapway
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: add-profile-dashboard
Source: https://github.com/tapway/shogun-os/tree/main/skills/hermes/add-profile-dashboard
Command: npx skills add https://github.com/tapway/shogun-os --skill add-profile-dashboard-tapway

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Adding a new department dashboard to the Shogun OS web portal requires coordinated changes across the FastAPI backend, TypeScript types, API client, and React components, and doing it inconsistently breaks the established CRM dashboard pattern. ## Core Features & Use Cases - Six-step workflow: Guides agents through backend aggregation endpoints, TypeScript types, API methods, React sub-tab components, and DashboardViewer registration. - Design conventions: Enforces shared chart wrappers, design tokens, color palette utilities, table patterns, and empty states so every department dashboard looks consistent. - Verification checklist: Includes TypeScript compilation, Vite build, Python syntax validation, and commit message conventions. - Use Case: A user asks to add a marketing dashboard; the agent follows the workflow to produce a /department/marketing?tab=dashboard page with Overview, Leads, and Analytics sub-tabs backed by gbrain data. ## Quick Start Ask the agent to add a marketing dashboard to the Shogun OS web portal following the CRM dashboard pattern.

Frequently Asked Questions about add-profile-dashboard

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

FAQPage Schema
How do I add a new department dashboard to the Shogun OS web portal?▼

Follow the six-step workflow: load the CRM dashboard as reference, add a backend aggregation endpoint in dashboard.py, add TypeScript types, add an API method in api.ts, create React sub-tab components, and register the dashboard in DashboardViewer.

How to build React dashboard charts with Recharts in Shogun OS?▼

Import charts from the shared wrappers in components/dashboards/charts rather than importing Recharts primitives directly. The wrappers accept data, xKey, yKey, color, unit, and height props and handle empty states automatically.

Where does dashboard aggregation logic live, frontend or backend?▼

Aggregation logic lives in Python on the FastAPI server, which fetches pages from gbrain and computes the stat shapes. The React frontend is a dumb renderer that fetches stats and displays them.

When should I not use this dashboard workflow?▼

Do not use it for one-off data queries, which belong in gbrain-query, or for non-dashboard UI changes handled by shogun-web-portal. It is also unsuitable for backend-only API work without a frontend component.

How do I verify a new dashboard implementation works?▼

Run npx tsc --noEmit and npm run build in the UI directory, validate dashboard.py with Python's ast parser, then navigate to /department/{key}?tab=dashboard to confirm sub-tabs render with data.

Related Skills

Explore More Software Engineering Skills→
HolymirHolymir

analytics-dashboard

Track API usage, page views, and user sessions in FastAPI and React apps.

Community
Advanced
rm2thaddeusrm2thaddeus
4

dashboard-creator

Generate interactive HTML dashboards with KPI cards and charts.

Community
Intermediate
patrykkopycinskipatrykkopycinski
6

esql-guide

Teach ES|QL query writing and interpretation for Elasticsearch indices.

Community
Intermediate
JinLee794JinLee794

deal-milestone-review

Generate consolidated milestone health reports for M1 managers.

Community
Advanced