Skill

dashboard-generation

Use when generating any HTML dashboard or view for Software of You. Provides the design system, base template, and component patterns for consistent visual output across all modules.

From software-of-you

Install

Run in your terminal

npx claudepluginhub kmorebetter/better-software-of-you

Tool Access

This skill uses the workspace's default tool permissions.

Supporting Assets

View in Repository

references/activity-feed-patterns.md

references/component-patterns.md

references/delight-patterns.md

references/entity-page-reference.html

references/navigation-patterns.md

references/shared-html-patterns.md

references/staleness-queries.md

references/template-base.html

Skill Content

Similar Skills

payload

11 files

Guides Payload CMS config (payload.config.ts), collections, fields, hooks, access control, APIs. Debugs validation errors, security, relationships, queries, transactions, hook behavior.

payload

41.6k

data-engineer

Designs scalable batch/streaming data pipelines, warehouses, lakehouses using Spark, dbt, Airflow, Kafka/Flink, and cloud platforms like Snowflake, BigQuery, Databricks.

antigravity-bundle-data-engineering

30.8k

airflow-dag-patterns

1 file

Builds production Apache Airflow DAGs using best practices for operators, sensors, testing, and deployment. For data pipelines, workflow orchestration, and batch jobs.

antigravity-bundle-data-engineering

30.8k

Stats

Stars7

Forks5

Last CommitMar 4, 2026

Actions

View Source View Plugin View on GitHub View README

Design System

All views share a consistent visual language:

CSS: Tailwind CSS via CDN (<script src="https://cdn.tailwindcss.com"></script>)

Icons: Lucide via CDN (<script src="https://unpkg.com/lucide@latest/dist/umd/lucide.min.js"></script>)

Font: Inter from Google Fonts

Colors: zinc/slate palette (zinc-50 background, zinc-900 text, blue-600 accents)

Layout: max-w-7xl centered, responsive grid, card-based sections

Cards: bg-white rounded-xl shadow-sm border border-zinc-200 p-6

References

references/template-base.html — the HTML skeleton every view should start from (includes delight CSS/JS)

references/component-patterns.md — reusable snippets for stat cards, tables, timelines, badges

references/delight-patterns.md — micro-interactions, animations, copy personality, and empty state patterns

references/shared-html-patterns.md — cross-command patterns: header cards, stat pills, filter tabs, left-border cards, empty states, avatar/icon patterns, color/icon reference table, footer, nav badge query, view registration SQL

Dashboard & View Generation

Software of You generates self-contained HTML files on demand — no server, no build step. Every view is a single HTML file with inline styles via Tailwind CSS CDN.

When to Use

/dashboard — generate the unified home dashboard
/view <module> — generate a module-specific view
Any natural language request for a visual report or custom view

Design System

All views share a consistent visual language:

CSS: Tailwind CSS via CDN (<script src="https://cdn.tailwindcss.com"></script>)
Icons: Lucide via CDN (<script src="https://unpkg.com/lucide@latest/dist/umd/lucide.min.js"></script>)
Font: Inter from Google Fonts
Colors: zinc/slate palette (zinc-50 background, zinc-900 text, blue-600 accents)
Layout: max-w-7xl centered, responsive grid, card-based sections
Cards: bg-white rounded-xl shadow-sm border border-zinc-200 p-6

References

references/template-base.html — the HTML skeleton every view should start from (includes delight CSS/JS)
references/component-patterns.md — reusable snippets for stat cards, tables, timelines, badges
references/delight-patterns.md — micro-interactions, animations, copy personality, and empty state patterns
references/shared-html-patterns.md — cross-command patterns: header cards, stat pills, filter tabs, left-border cards, empty states, avatar/icon patterns, color/icon reference table, footer, nav badge query, view registration SQL

View Types

Home Dashboard (/dashboard) — unified overview of all modules
Module Views (/view contacts, /view projects) — specialized per-module layouts
Custom Views — ad-hoc reports from natural language ("show me overdue items")

Output

Write all HTML files to ${CLAUDE_PLUGIN_ROOT:-$(pwd)}/output/ Open with open <filepath> on macOS after writing.