From 87a970c077cf6ed898d8cb5da22d2d7c057e026a Mon Sep 17 00:00:00 2001 From: Zhongwei Li Date: Sun, 30 Nov 2025 08:40:19 +0800 Subject: [PATCH] Initial commit --- .claude-plugin/plugin.json | 12 + README.md | 3 + plugin.lock.json | 133 ++++ skills/architecture-diagram-creator/SKILL.md | 82 ++ .../templates/architecture_components.html | 304 ++++++++ .../assets/templates/base_template.html | 306 ++++++++ .../references/example_architecture.html | 603 ++++++++++++++ skills/dashboard-creator/SKILL.md | 78 ++ .../assets/templates/base_template.html | 305 ++++++++ .../templates/dashboard_components.html | 324 ++++++++ .../references/design_patterns.md | 541 +++++++++++++ .../references/svg_library.md | 733 ++++++++++++++++++ skills/flowchart-creator/SKILL.md | 77 ++ .../assets/templates/base_template.html | 305 ++++++++ .../templates/flowchart_components.html | 264 +++++++ .../references/design_patterns.md | 541 +++++++++++++ .../references/svg_library.md | 733 ++++++++++++++++++ skills/technical-doc-creator/SKILL.md | 86 ++ .../assets/templates/base_template.html | 305 ++++++++ .../references/design_patterns.md | 541 +++++++++++++ .../references/svg_library.md | 733 ++++++++++++++++++ skills/timeline-creator/SKILL.md | 66 ++ .../assets/templates/base_template.html | 305 ++++++++ .../assets/templates/timeline_components.html | 477 ++++++++++++ .../references/design_patterns.md | 541 +++++++++++++ .../references/svg_library.md | 733 ++++++++++++++++++ 26 files changed, 9131 insertions(+) create mode 100644 .claude-plugin/plugin.json create mode 100644 README.md create mode 100644 plugin.lock.json create mode 100644 skills/architecture-diagram-creator/SKILL.md create mode 100644 skills/architecture-diagram-creator/assets/templates/architecture_components.html create mode 100644 skills/architecture-diagram-creator/assets/templates/base_template.html create mode 100644 skills/architecture-diagram-creator/references/example_architecture.html create mode 100644 skills/dashboard-creator/SKILL.md create mode 100644 skills/dashboard-creator/assets/templates/base_template.html create mode 100644 skills/dashboard-creator/assets/templates/dashboard_components.html create mode 100644 skills/dashboard-creator/references/design_patterns.md create mode 100644 skills/dashboard-creator/references/svg_library.md create mode 100644 skills/flowchart-creator/SKILL.md create mode 100644 skills/flowchart-creator/assets/templates/base_template.html create mode 100644 skills/flowchart-creator/assets/templates/flowchart_components.html create mode 100644 skills/flowchart-creator/references/design_patterns.md create mode 100644 skills/flowchart-creator/references/svg_library.md create mode 100644 skills/technical-doc-creator/SKILL.md create mode 100644 skills/technical-doc-creator/assets/templates/base_template.html create mode 100644 skills/technical-doc-creator/references/design_patterns.md create mode 100644 skills/technical-doc-creator/references/svg_library.md create mode 100644 skills/timeline-creator/SKILL.md create mode 100644 skills/timeline-creator/assets/templates/base_template.html create mode 100644 skills/timeline-creator/assets/templates/timeline_components.html create mode 100644 skills/timeline-creator/references/design_patterns.md create mode 100644 skills/timeline-creator/references/svg_library.md diff --git a/.claude-plugin/plugin.json b/.claude-plugin/plugin.json new file mode 100644 index 0000000..165798f --- /dev/null +++ b/.claude-plugin/plugin.json @@ -0,0 +1,12 @@ +{ + "name": "visual-documentation-skills", + "description": "Skills for creating stunning visual HTML documentation with modern UI design, SVG diagrams, flowcharts, dashboards, timelines, technical documentation, and comprehensive project architecture diagrams", + "version": "1.1.0", + "author": { + "name": "mhattingpete", + "email": "noreply@github.com" + }, + "skills": [ + "./skills" + ] +} \ No newline at end of file diff --git a/README.md b/README.md new file mode 100644 index 0000000..e372e5a --- /dev/null +++ b/README.md @@ -0,0 +1,3 @@ +# visual-documentation-skills + +Skills for creating stunning visual HTML documentation with modern UI design, SVG diagrams, flowcharts, dashboards, timelines, technical documentation, and comprehensive project architecture diagrams diff --git a/plugin.lock.json b/plugin.lock.json new file mode 100644 index 0000000..56ef1ed --- /dev/null +++ b/plugin.lock.json @@ -0,0 +1,133 @@ +{ + "$schema": "internal://schemas/plugin.lock.v1.json", + "pluginId": "gh:mhattingpete/claude-skills-marketplace:visual-documentation-plugin", + "normalized": { + "repo": null, + "ref": "refs/tags/v20251128.0", + "commit": "e1b921f8522763184ca4200be24f2b58cdf75b77", + "treeHash": "542c2f025cb160ae43f564aaa6edf2257caa32c33747a67afca7f8ead716dffe", + "generatedAt": "2025-11-28T10:27:05.608735Z", + "toolVersion": "publish_plugins.py@0.2.0" + }, + "origin": { + "remote": "git@github.com:zhongweili/42plugin-data.git", + "branch": "master", + "commit": "aa1497ed0949fd50e99e70d6324a29c5b34f9390", + "repoRoot": "/Users/zhongweili/projects/openmind/42plugin-data" + }, + "manifest": { + "name": "visual-documentation-skills", + "description": "Skills for creating stunning visual HTML documentation with modern UI design, SVG diagrams, flowcharts, dashboards, timelines, technical documentation, and comprehensive project architecture diagrams", + "version": "1.1.0" + }, + "content": { + "files": [ + { + "path": "README.md", + "sha256": "b1fce16439923f602bedee190a58fa2d501f1db361d38e8147fb4c5c6e5ed7ab" + }, + { + "path": ".claude-plugin/plugin.json", + "sha256": "647dd042914e2c9dde2dd0842f936d068ef6b6f137066aed64cb97cfbaa74b1c" + }, + { + "path": "skills/architecture-diagram-creator/SKILL.md", + "sha256": "7d506e3fc0beee3ba91f97df6465d0f4d0fe2daf7b5ffa369ba876c9ab193992" + }, + { + "path": "skills/architecture-diagram-creator/references/example_architecture.html", + "sha256": "d30537ade03fdf77fba19004a673c945fce48d32175bc80646c9b857f26db725" + }, + { + "path": "skills/architecture-diagram-creator/assets/templates/base_template.html", + "sha256": "d4d60f4945eb0ad841ff0c30509c17557a6fb21302a37edeb17489806ad59f41" + }, + { + "path": "skills/architecture-diagram-creator/assets/templates/architecture_components.html", + "sha256": "d92f415cfc672bbbc11bc658bdd99e80de0305313e3712a629ae4d7257725ea2" + }, + { + "path": "skills/flowchart-creator/SKILL.md", + "sha256": "84bba5e47c6efd797cf116b42d071244dadef72ddd87169b9eca3563a0db298b" + }, + { + "path": "skills/flowchart-creator/references/design_patterns.md", + "sha256": "d4f2515b217d367976e137baf1457efc96cbb2220b2ce900fa001a663691e19b" + }, + { + "path": "skills/flowchart-creator/references/svg_library.md", + "sha256": "545cb042119715e58f562f83759ed074946505a31eca9b9c177a297cfeb11f59" + }, + { + "path": "skills/flowchart-creator/assets/templates/base_template.html", + "sha256": "7c681b5d072500827175b17a67c71250e392c77e849bf3c349cc69f0bb1d224b" + }, + { + "path": "skills/flowchart-creator/assets/templates/flowchart_components.html", + "sha256": "2a572187626ae2243467db8a8ed5f6b9f0ecaaef02e1dcdaf42ce2880ed91f81" + }, + { + "path": "skills/timeline-creator/SKILL.md", + "sha256": "b74e45f70ccf06c069a3961ea828f92655e3f6ad70dff4f64271967d88c59a6e" + }, + { + "path": "skills/timeline-creator/references/design_patterns.md", + "sha256": "d4f2515b217d367976e137baf1457efc96cbb2220b2ce900fa001a663691e19b" + }, + { + "path": "skills/timeline-creator/references/svg_library.md", + "sha256": "545cb042119715e58f562f83759ed074946505a31eca9b9c177a297cfeb11f59" + }, + { + "path": "skills/timeline-creator/assets/templates/base_template.html", + "sha256": "7c681b5d072500827175b17a67c71250e392c77e849bf3c349cc69f0bb1d224b" + }, + { + "path": "skills/timeline-creator/assets/templates/timeline_components.html", + "sha256": "ed83636910941c9d46dc08989f2aa337a07db571680d6722749ebea195216015" + }, + { + "path": "skills/dashboard-creator/SKILL.md", + "sha256": "777b28c4a7bab88398292de458ecb603d017ce07f47da47dad210ae76d854333" + }, + { + "path": "skills/dashboard-creator/references/design_patterns.md", + "sha256": "d4f2515b217d367976e137baf1457efc96cbb2220b2ce900fa001a663691e19b" + }, + { + "path": "skills/dashboard-creator/references/svg_library.md", + "sha256": "545cb042119715e58f562f83759ed074946505a31eca9b9c177a297cfeb11f59" + }, + { + "path": "skills/dashboard-creator/assets/templates/base_template.html", + "sha256": "7c681b5d072500827175b17a67c71250e392c77e849bf3c349cc69f0bb1d224b" + }, + { + "path": "skills/dashboard-creator/assets/templates/dashboard_components.html", + "sha256": "21e7b4a9320bca11fecb455bdf47f36ca193c4130e22149c824ab071b26872a1" + }, + { + "path": "skills/technical-doc-creator/SKILL.md", + "sha256": "8fa5ccc6d5d11befaa90ffe2904d7bad4b56eb5ad5c701c2c14b60560f61f7e5" + }, + { + "path": "skills/technical-doc-creator/references/design_patterns.md", + "sha256": "d4f2515b217d367976e137baf1457efc96cbb2220b2ce900fa001a663691e19b" + }, + { + "path": "skills/technical-doc-creator/references/svg_library.md", + "sha256": "545cb042119715e58f562f83759ed074946505a31eca9b9c177a297cfeb11f59" + }, + { + "path": "skills/technical-doc-creator/assets/templates/base_template.html", + "sha256": "7c681b5d072500827175b17a67c71250e392c77e849bf3c349cc69f0bb1d224b" + } + ], + "dirSha256": "542c2f025cb160ae43f564aaa6edf2257caa32c33747a67afca7f8ead716dffe" + }, + "security": { + "scannedAt": null, + "scannerVersion": null, + "flags": [] + } +} \ No newline at end of file diff --git a/skills/architecture-diagram-creator/SKILL.md b/skills/architecture-diagram-creator/SKILL.md new file mode 100644 index 0000000..728f671 --- /dev/null +++ b/skills/architecture-diagram-creator/SKILL.md @@ -0,0 +1,82 @@ +--- +name: architecture-diagram-creator +description: Create comprehensive HTML architecture diagrams showing data flows, business objectives, features, technical architecture, and deployment. Use when users request system architecture, project documentation, high-level overviews, or technical specifications. +--- + +# Architecture Diagram Creator + +Create comprehensive HTML architecture diagrams with data flows, business context, and system architecture. + +## When to Use + +- "Create architecture diagram for [project]" +- "Generate high-level overview" +- "Document system architecture" +- "Show data flow and processing pipeline" + +## Components to Include + +1. **Business Context**: objectives, users, value, metrics +2. **Data Flow**: sources → processing → outputs with SVG diagram +3. **Processing Pipeline**: multi-stage visualization +4. **System Architecture**: layered components (data/processing/services/output) +5. **Features**: functional and non-functional requirements +6. **Deployment**: model, prerequisites, workflows + +## HTML Structure + +```html + + + + + + [Project] Architecture + + + +

[Project Name] - Architecture Overview

+ + + + + + + + + +``` + +## SVG Pattern for Data Flow + +```html + + + + + + + + + + + + + +``` + +## Workflow + +1. Analyze project (README, code structure) +2. Extract: purpose, data sources, processing, tech stack, outputs +3. Create HTML with all 6 sections +4. Use semantic colors for visual hierarchy +5. Write to `[project]-architecture.html` + +Keep diagrams clear, use consistent styling, include real project details. diff --git a/skills/architecture-diagram-creator/assets/templates/architecture_components.html b/skills/architecture-diagram-creator/assets/templates/architecture_components.html new file mode 100644 index 0000000..8635e96 --- /dev/null +++ b/skills/architecture-diagram-creator/assets/templates/architecture_components.html @@ -0,0 +1,304 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + Source Name + Source Type + + + Details: + • Field 1 + • Field 2 + • Field 3 + + + + + + + + Processing Engine + + + • Step 1: Description + • Step 2: Description + • Step 3: Description + • Step 4: Description + + + + + + + + Output Name + Output Details: + + + • Format: Type + • Size: Amount + • Destination: Location + + + ✓ Status indicator + + + + + + + + AI Service + Model/Provider Name + • Capability 1 + • Capability 2 + + + + + + + + Configuration + Config file + • Settings + • Parameters + + + + + + + + Tool Name + Description + Purpose + + + + + + + + Stage Name + Operation + Technology + Output format + + + + + + + + + Layer 1: Data Sources + + + + Layer 2: Processing + + + + Layer 3: Services + + + + Layer 4: Output + + + + + + + + Label + + + + + + Label + + + + + + Label + + + + + + + + + + + Optional + + + + + + + + ⚠️ Important Note + Line 1 of note text + Line 2 of note text + Line 3 of note text + Line 4 of note text + + + + + + + + Column 1 + + + Column 2 + + + Column 3 + + + + + + Data 1 + + + Data 2 + + + Data 3 + + + + + diff --git a/skills/architecture-diagram-creator/assets/templates/base_template.html b/skills/architecture-diagram-creator/assets/templates/base_template.html new file mode 100644 index 0000000..fd3be7e --- /dev/null +++ b/skills/architecture-diagram-creator/assets/templates/base_template.html @@ -0,0 +1,306 @@ + + + + + + [PROJECT_NAME] Architecture + + + +
+ +

[PROJECT_ICON] [PROJECT_NAME]

+

[PROJECT_DESCRIPTION]

+ + +
+ +
+ + +
+

📊 Business Objectives & End Users

+
+ +
+
+ + +
+

📥 Data Input Overview

+
+ + + +
+
+ + +
+

⚙️ Data Processing Pipeline

+
+ + + +
+
+ + +
+

✨ Functional Features

+
+ +
+
+ + +
+

🛡️ Non-Functional Features

+
+ +
+
+ + +
+

🏗️ System Architecture

+
+ + + +
+
+ + +
+

🚀 Deployment & Usage

+
+ +
+
+ + +
+
+
+ Data Sources +
+
+
+ Processing Logic +
+
+
+ AI Services +
+
+
+ Output/Results +
+
+
+ Configuration +
+
+
+ Supporting Tools +
+
+ + +
+ [PROJECT_NAME] Architecture v[VERSION]
+ Generated: [DATE] | [SHORT_DESCRIPTION]
+ Technologies: [TECH_STACK] +
+
+ + diff --git a/skills/architecture-diagram-creator/references/example_architecture.html b/skills/architecture-diagram-creator/references/example_architecture.html new file mode 100644 index 0000000..2a72ca7 --- /dev/null +++ b/skills/architecture-diagram-creator/references/example_architecture.html @@ -0,0 +1,603 @@ + + + + + + DataFlow ETL Pipeline Architecture + + + +
+

🔄 DataFlow ETL Pipeline

+

Customer Data Integration & Analytics Platform

+ + +
+
+
3
+
Data Sources
+
+
+
5
+
Processing Stages
+
+
+
100K
+
Records/Day
+
+
+
99.9%
+
Uptime SLA
+
+
+ + +
+

📊 Business Objectives & End Users

+
+
+

Primary Objective

+
    +
  • Consolidate customer data from multiple sources
    • +
  • Provide unified view for analytics and reporting
    • +
  • Enable real-time data-driven decision making
    • +
  • Ensure data quality and consistency
    • +
+
+
+

End Users

+
    +
  • Business Analysts (data exploration)
    • +
  • Data Scientists (ML model training)
    • +
  • Marketing Team (campaign targeting)
    • +
  • Customer Success (account insights)
    • +
  • Executive Dashboard (KPI monitoring)
    • +
+
+
+

Business Value

+
    +
  • Reduce manual data reconciliation (80% time savings)
    • +
  • Improve data accuracy and completeness
    • +
  • Enable faster business insights
    • +
  • Scale data processing capacity
    • +
+
+
+
+ + +
+

📥 Data Input Overview

+
+ + + + + + + + + + + + + Source 1: CRM API + (Salesforce) + Format: JSON REST API + ~50K records/day + Customer profiles + Real-time sync + + + + Source 2: Orders DB + (MySQL) + Format: SQL queries + ~30K orders/day + Transaction data + Hourly batch + + + + Source 3: CSV Export + ~20K records/day + Support tickets (S3) + + + + ETL Pipeline + AWS Lambda + Airflow + • Data validation + • Schema transformation + • Deduplication + • Enrichment + + + + Data Warehouse + (BigQuery) + Unified customer view + 360° analytics + Historical trends + ML-ready datasets + ✓ GDPR compliant + + + + + + + + + Customer data + Order data + Support data + Processed + +
+
+ + +
+

⚙️ Data Processing Pipeline

+
+ + + + + + + + + + 1. Data Ingestion + Pull from sources + API + SQL + S3 + Raw data storage + + + + 2. Validation + Schema checks + Data quality rules + Error logging + + + + 3. Transformation + Normalize formats + Map fields + Type conversions + + + + 4. Deduplication + Fuzzy matching + Customer ID merge + Conflict resolution + Master record creation + + + + 5. Enrichment + Geo-location lookup + Industry tagging + Score calculations + + + + 6. Load + Write to warehouse + Update indexes + Trigger downstream + ✓ Complete + + + + + + + + + + + Pipeline Configuration + Orchestration: + • Apache Airflow (DAG scheduling) + • AWS Lambda (serverless compute) + • S3 (intermediate storage) + Monitoring: + • CloudWatch logs & metrics + • PagerDuty alerts + +
+
+ + +
+

✨ Functional Features

+
+
+

Data Validation

+
    +
  • JSON schema validation for API data
    • +
  • SQL constraint checks for database records
    • +
  • Custom business rule engine
    • +
  • Automated error notifications
    • +
+
+
+

Intelligent Deduplication

+
    +
  • Fuzzy string matching (Levenshtein distance)
    • +
  • Multi-field entity resolution
    • +
  • Confidence scoring for matches
    • +
  • Manual review queue for uncertain cases
    • +
+
+
+

Data Enrichment

+
    +
  • Geo-location from IP/address
    • +
  • Company firmographic data
    • +
  • Industry classification
    • +
  • Customer lifecycle scoring
    • +
+
+
+
+ + +
+

🛡️ Non-Functional Features

+
+
+

Performance

+
    +
  • Processes 100K records in <30 minutes
    • +
  • Parallel processing across 10 Lambda workers
    • +
  • Optimized SQL queries with indexes
    • +
  • Incremental data loading strategy
    • +
+
+
+

Reliability

+
    +
  • 99.9% uptime SLA
    • +
  • Automatic retry with exponential backoff
    • +
  • Dead-letter queue for failed records
    • +
  • Point-in-time recovery capability
    • +
+
+
+

Security & Compliance

+
    +
  • End-to-end encryption (TLS 1.3)
    • +
  • GDPR-compliant data handling
    • +
  • Role-based access control (RBAC)
    • +
  • Audit logging of all data access
    • +
+
+
+
+ + +
+

🏗️ System Architecture

+
+ + + + + + + + + Layer 1: Data Sources + + CRM API + Salesforce REST + OAuth 2.0 + + + Orders DB + MySQL 8.0 + Read replica + + + CSV Files + S3 Bucket + Daily exports + + + Layer 2: Processing + + Airflow DAGs + Python 3.11 + Orchestration & scheduling + + + Lambda Functions + Node.js 20 + Data transformations + + + Layer 3: External Services + + Geo API + Location enrichment + MaxMind GeoIP2 + + + Clearbit + Company data + Firmographics API + + + Layer 4: Output & Storage + + BigQuery + Data warehouse + + + Redis Cache + Query acceleration + + + + + + + + + + Technology Stack + + Languages & Frameworks: + • Python 3.11 (data processing) + • Node.js 20 (Lambda functions) + • SQL (data queries) + + AWS Services: + • Lambda (serverless compute) + • S3 (object storage) + • CloudWatch (monitoring) + • IAM (access control) + + Dependencies: + • pandas, SQLAlchemy (Python) + +
+
+ + +
+

🚀 Deployment & Usage

+
+
+

Deployment Model

+
    +
  • Cloud-hosted (AWS)
    • +
  • Serverless architecture
    • +
  • Multi-region for redundancy
    • +
  • Infrastructure as Code (Terraform)
    • +
+
+
+

Prerequisites

+
    +
  • AWS account with appropriate IAM roles
    • +
  • Salesforce API credentials
    • +
  • MySQL read replica access
    • +
  • BigQuery project setup
    • +
+
+
+

Typical Workflow

+
    +
  • 1. Configure data source connections
    • +
  • 2. Deploy Airflow DAGs
    • +
  • 3. Run initial backfill
    • +
  • 4. Monitor daily incremental runs
    • +
  • 5. Query unified data in BigQuery
    • +
+
+
+
+ + +
+
+
+ Data Sources +
+
+
+ Processing Logic +
+
+
+ External Services +
+
+
+ Output/Storage +
+
+
+ Data Quality +
+
+
+ Enrichment +
+
+ +
+ DataFlow ETL Pipeline Architecture v1.0
+ Generated: 2025-11-03 | Customer Data Integration Platform
+ Technologies: Python, Node.js, AWS Lambda, Apache Airflow, BigQuery, MySQL +
+
+ + diff --git a/skills/dashboard-creator/SKILL.md b/skills/dashboard-creator/SKILL.md new file mode 100644 index 0000000..afd4e05 --- /dev/null +++ b/skills/dashboard-creator/SKILL.md @@ -0,0 +1,78 @@ +--- +name: dashboard-creator +description: Create HTML dashboards with KPI metric cards, bar/pie/line charts, progress indicators, and data visualizations. Use when users request dashboards, metrics displays, KPI visualizations, data charts, or monitoring interfaces. +--- + +# Dashboard Creator + +Create interactive HTML dashboards with KPI cards and charts. + +## When to Use + +- "Create dashboard for [metrics]" +- "Show KPI visualization" +- "Generate performance dashboard" +- "Make analytics dashboard with charts" + +## Components + +1. **KPI Cards**: metric name, value, change %, trend icon +2. **Charts**: bar/pie/line using SVG or CSS +3. **Progress Bars**: completion indicators +4. **Data Tables**: tabular data display + +## HTML Structure + +```html + + + + [Project] Dashboard + + + +

[Dashboard Name]

+
+ + + +
+ + +``` + +## KPI Card Pattern + +```html +
+
Revenue
+
$124K
+
↑ 12.5%
+
+``` + +## Chart Pattern (SVG Bar Chart) + +```html + + + + + +``` + +## Workflow + +1. Extract metrics and data +2. Create KPI cards grid +3. Generate charts (bar/pie/line) as SVG +4. Add progress indicators +5. Write to `[name]-dashboard.html` + +Use semantic colors: green (positive), red (negative), blue (neutral). diff --git a/skills/dashboard-creator/assets/templates/base_template.html b/skills/dashboard-creator/assets/templates/base_template.html new file mode 100644 index 0000000..784590a --- /dev/null +++ b/skills/dashboard-creator/assets/templates/base_template.html @@ -0,0 +1,305 @@ + + + + + + [DOCUMENT_TITLE] + + + +
+

[DOCUMENT_TITLE]

+

[DOCUMENT_SUBTITLE]

+ + +
+
+
[VALUE_1]
+
[LABEL_1]
+
+
+
[VALUE_2]
+
[LABEL_2]
+
+
+
[VALUE_3]
+
[LABEL_3]
+
+
+ + +
+

1. [SECTION_TITLE]

+ +
+ + + + +
+ +
+
[EXAMPLE_TITLE]
+

[EXAMPLE_CONTENT]

+
+ +
+[HIGHLIGHTED_TERM]: [CODE_CONTENT] +
+
+ + +
+
+
+ [LEGEND_ITEM_1] +
+
+
+ [LEGEND_ITEM_2] +
+
+
+ [LEGEND_ITEM_3] +
+
+ + +
+

[FOOTER_MAIN_TEXT]

+

[FOOTER_SUB_TEXT]

+

[FOOTER_META_TEXT]

+
+
+ + diff --git a/skills/dashboard-creator/assets/templates/dashboard_components.html b/skills/dashboard-creator/assets/templates/dashboard_components.html new file mode 100644 index 0000000..af38a42 --- /dev/null +++ b/skills/dashboard-creator/assets/templates/dashboard_components.html @@ -0,0 +1,324 @@ + + + + + + +
+
1,234
+
Total Items
+
+ + +
+
89%
+
Completion Rate
Last 30 days
+
+ + +
+
✓ 456
+
Completed Tasks
+
+ +
+
⚠ 23
+
Critical Issues
+
+ + + + + + + Distribution by Category + + + + + + + + 0 + 200 + 400 + 600 + 800 + + + + + + + + + + 645 + + + Category A + + + + + + 428 + + + Category B + + + + + + 167 + + + Category C + + + + + + + + Progress by Module + + + + + Module A + + + + + 80% + + + + + Module B + + + + + 70% + + + + + Module C + + + + + 45% + + + + + Module D + + + + + 25% + + + + + 0% + + + 50% + + + 100% + + + + + + + + Task Distribution + + + + + + + + + + + 1,240 + + + Total Tasks + + + + + + Complete (50%) + + + + In Progress (25%) + + + + Pending (15%) + + + + Blocked (10%) + + + + + + + + Performance Trend + + + + + + + + + + + + + 0 + 25 + 50 + 75 + 100 + + + Jan + Feb + Mar + Apr + May + Jun + + + + + + + + + + + + + + + + + + + + + + + 45 + 58 + 67 + 78 + 84 + 92 + + + + + + + System Health + + + + + + + + + + + 75% + + + Excellent + + + + + + +
+
+
+
Good
89%
+
+
+
+
Warning
8%
+
+
+
+
Critical
3%
+
+
+ + + +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
MetricCurrentTargetStatus
Response Time245ms< 300ms✓ On Track
Uptime99.8%99.9%⚠ Below Target
Error Rate0.02%< 0.1%✓ Exceeding
+
diff --git a/skills/dashboard-creator/references/design_patterns.md b/skills/dashboard-creator/references/design_patterns.md new file mode 100644 index 0000000..10d32da --- /dev/null +++ b/skills/dashboard-creator/references/design_patterns.md @@ -0,0 +1,541 @@ +# Design Patterns Reference + +Complete design system guidelines for creating visually stunning HTML documentation. + +## Color System + +### Primary Palette + +**Gradient Background:** +```css +background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); +``` +- Use for: Body background, primary branding elements +- Creates depth and visual interest + +**Accent Colors:** +- Primary Purple-Blue: `#667eea` +- Secondary Purple: `#764ba2` +- Use for: Headings, borders, key UI elements + +### Semantic Color Scales + +#### Success / Confirmed / Positive +- **Base:** `#48bb78` (green) +- **Dark:** `#2f855a` (darker green, for strokes) +- **Light:** `#e6f4ea` (pale green, for backgrounds) +- Use for: Completed tasks, success messages, positive metrics + +#### Warning / Uncertain / Attention +- **Base:** `#f59e0b` (amber) +- **Dark:** `#d97706` (darker amber, for strokes) +- **Light:** `#fffbeb` (pale amber, for backgrounds) +- Use for: In-progress items, warnings, items needing attention + +#### Info / Primary / Standard +- **Base:** `#4299e1` (blue) +- **Dark:** `#2b6cb0` (darker blue, for strokes) +- **Light:** `#e6f2ff` (pale blue, for backgrounds) +- Use for: Standard information, primary actions, neutral states + +#### Error / Critical / Negative +- **Base:** `#f56565` (red) +- **Dark:** `#c53030` (darker red, for strokes) +- **Light:** `#fff5f5` (pale red, for backgrounds) +- Use for: Errors, critical issues, failed states + +#### Process / Action / Secondary +- **Base:** `#ed8936` (orange) +- **Dark:** `#c05621` (darker orange, for strokes) +- **Light:** `#fff5e6` (pale orange, for backgrounds) +- Use for: Processing states, secondary actions + +#### Special / Highlight / Tertiary +- **Base:** `#9f7aea` (purple) +- **Dark:** `#6b46c1` (darker purple, for strokes) +- **Light:** `#f3e6ff` (pale purple, for backgrounds) +- Use for: Special features, highlights, premium items + +### Neutral Palette + +**Text Colors:** +- **Dark (Primary text):** `#2d3748` - Headings, important content +- **Medium (Secondary text):** `#718096` - Body text, labels +- **Light (Tertiary text):** `#a0aec0` - Captions, metadata + +**UI Elements:** +- **Dark border:** `#cbd5e0` +- **Light border:** `#e2e8f0` +- **Dark background:** `#edf2f7` +- **Light background:** `#f7fafc` +- **White:** `#ffffff` + +### Color Contrast Guidelines + +**WCAG AA Compliance:** +- Minimum contrast ratio: 4.5:1 for normal text +- Large text (18pt+ or 14pt+ bold): 3:1 minimum +- Safe combinations: + - Dark text (#2d3748) on light backgrounds (#f7fafc, #ffffff) + - White text on colored backgrounds (all semantic base colors pass) + - Medium text (#718096) on white only + +## Typography + +### Font Families + +**Primary (Sans-serif):** +```css +font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; +``` +- Use for: All body text, headings, UI elements +- Fallback chain ensures availability across platforms + +**Code (Monospace):** +```css +font-family: 'Courier New', monospace; +``` +- Use for: Code blocks, technical data, fixed-width content + +### Type Scale + +**Display / Hero:** +- Size: `2.5em` (40px at 16px base) +- Weight: Bold (700) +- Use for: Page title (h1) +- Special effect: Gradient text clip + +**Section Heading:** +- Size: `1.8em` (28.8px) +- Weight: Bold (700) +- Color: `#2d3748` +- Use for: Major sections (h2) +- Decoration: Bottom border `3px solid #667eea` + +**Subsection:** +- Size: `1.4em` (22.4px) +- Weight: Bold (700) +- Color: `#2d3748` +- Use for: Subsections (h3) + +**Body:** +- Size: `1em` (16px base) +- Weight: Normal (400) +- Line height: 1.6 +- Color: `#2d3748` or `#4a5568` +- Use for: Paragraphs, general content + +**Label / Caption:** +- Size: `0.9-0.95em` (14.4-15.2px) +- Weight: Normal (400) or Medium (500) +- Color: `#718096` +- Use for: Metric labels, chart labels, form labels + +**Small / Meta:** +- Size: `0.85em` (13.6px) +- Weight: Normal (400) +- Color: `#a0aec0` +- Use for: Footnotes, timestamps, metadata + +**SVG Text:** +- Small labels: `11-12px` +- Standard text: `13-14px` +- Emphasis: `15-16px` +- Large values: `18-24px` +- Metric displays: `48px+` + +### Text Effects + +**Gradient Text (for h1):** +```css +h1 { + background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; + background-clip: text; +} +``` + +**Code Highlighting:** +```css +.highlight { + color: #fbbf24; /* Amber highlight */ + font-weight: bold; +} +``` + +## Spacing & Layout + +### Container Sizing + +**Max Width:** +- Container: `1400px` +- Comfortable reading: `800-1000px` +- Full width sections: No max-width + +**Padding:** +- Desktop container: `40px` +- Mobile container: `20px` +- Diagram containers: `30px` +- Content boxes: `20px` +- Metric cards: `25px` + +**Margins:** +- Section bottom: `60px` +- Element groups: `30px` +- Individual elements: `20px` +- Small gaps: `10px` + +### Grid Systems + +**Metric Grid:** +```css +display: grid; +grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); +gap: 20px; +``` +- Automatically responsive +- Minimum card width: 200px +- Equal width distribution + +**Custom Grids:** +- 2-column: `grid-template-columns: 1fr 1fr;` +- 3-column: `grid-template-columns: repeat(3, 1fr);` +- Sidebar layout: `grid-template-columns: 300px 1fr;` + +### Flexbox Patterns + +**Horizontal Center:** +```css +display: flex; +justify-content: center; +align-items: center; +``` + +**Space Between:** +```css +display: flex; +justify-content: space-between; +align-items: center; +``` + +**Wrapped Row:** +```css +display: flex; +flex-wrap: wrap; +gap: 20px; +``` + +## Visual Effects + +### Shadows + +**Card Shadow:** +```css +box-shadow: 0 20px 60px rgba(0,0,0,0.3); +``` +- Use for: Main container, elevated cards + +**Metric Card Shadow:** +```css +box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3); +``` +- Use for: Metric cards, smaller elevation + +**Subtle Shadow:** +```css +box-shadow: 0 2px 8px rgba(0,0,0,0.1); +``` +- Use for: Buttons, small cards, hover states + +### Border Radius + +**Large (Containers):** +- Container: `20px` +- Diagram containers: `15px` + +**Medium (Cards & Boxes):** +- Metric cards: `15px` +- Content boxes: `10px` +- SVG shapes: `10px` + +**Small (UI Elements):** +- Buttons: `8px` +- Small badges: `5px` + +**Pills / Rounded:** +- Full rounded: `50%` (circles) or `9999px` (pills) +- Timeline progress bars: `20px` + +### Opacity + +**Overlays:** +- Light overlay: `0.3` +- Medium overlay: `0.5-0.6` +- Strong overlay: `0.8-0.9` + +**Hover States:** +- Slight fade: `0.9` +- Clear fade: `0.7-0.8` + +**Disabled:** +- `0.5-0.6` + +## Responsive Breakpoints + +### Mobile First Strategy + +**Breakpoints:** +```css +/* Mobile: default styles, no media query needed */ + +/* Tablet */ +@media (min-width: 768px) { ... } + +/* Desktop */ +@media (min-width: 1024px) { ... } + +/* Large Desktop */ +@media (min-width: 1440px) { ... } +``` + +**Common Pattern (Desktop First):** +```css +@media (max-width: 768px) { + .container { padding: 20px; } + h1 { font-size: 1.8em; } + .section-title { font-size: 1.4em; } + .metric-grid { grid-template-columns: 1fr; } +} +``` + +### Responsive Typography + +**Desktop:** +- h1: `2.5em` +- h2: `1.8em` +- h3: `1.4em` +- body: `1em` + +**Mobile (max-width: 768px):** +- h1: `1.8em` +- h2: `1.4em` +- h3: `1.2em` +- body: `0.95em` + +**SVG Text Scaling:** +- Use `viewBox` for automatic scaling +- Font sizes in px remain constant +- Increase viewBox dimensions rather than reducing font sizes + +## Component Patterns + +### Metric Cards + +**Standard Pattern:** +```html +
+
[LARGE NUMBER]
+
[DESCRIPTION]
+
+``` + +**With Custom Color:** +```html +
+
✓ [NUMBER]
+
[DESCRIPTION]
+
+``` + +### Code Blocks + +**Standard:** +```html +
+Key term: Regular code text + Indented content +
+``` + +**CSS:** +```css +.code-block { + background: #2d3748; + color: #e2e8f0; + padding: 20px; + border-radius: 10px; + font-family: 'Courier New', monospace; + font-size: 0.9em; + overflow-x: auto; + line-height: 1.6; +} +``` + +### Example Boxes + +**Pattern:** +```html +
+
[TITLE]
+

[CONTENT]

+
+``` + +**CSS:** +```css +.example-box { + background: #fff; + border: 2px solid #667eea; + border-radius: 10px; + padding: 20px; + margin: 20px 0; +} +``` + +### Legends + +**Pattern:** +```html +
+
+
+ [DESCRIPTION] +
+ +
+``` + +**CSS:** +```css +.legend { + display: flex; + flex-wrap: wrap; + gap: 20px; + padding: 20px; + background: #edf2f7; + border-radius: 10px; +} +``` + +## SVG Styling + +### Default SVG Styles + +**Container:** +```css +svg { + width: 100%; + height: auto; +} +``` + +**Text:** +```css +svg text { + font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; +} +``` + +### Common Stroke/Fill Combinations + +**Primary Box:** +- Fill: `#4299e1` +- Stroke: `#2b6cb0` +- Stroke-width: `3` + +**Success Box:** +- Fill: `#48bb78` +- Stroke: `#2f855a` +- Stroke-width: `3` + +**Warning Box:** +- Fill: `#f59e0b` +- Stroke: `#d97706` +- Stroke-width: `3` + +**Neutral/Pending:** +- Fill: `#cbd5e0` +- Stroke: `#a0aec0` +- Stroke-width: `2-3` + +### ViewBox Guidelines + +**Common Aspect Ratios:** +- Wide: `viewBox="0 0 1200 400"` (3:1) +- Standard: `viewBox="0 0 1200 600"` (2:1) +- Balanced: `viewBox="0 0 1200 800"` (3:2) +- Square: `viewBox="0 0 600 600"` (1:1) +- Portrait: `viewBox="0 0 800 1000"` (4:5) + +**Coordinate System:** +- Origin: Top-left (0, 0) +- X increases rightward +- Y increases downward +- Units are relative to viewBox + +## Accessibility + +### Color Blindness + +**Safe Patterns:** +- Don't rely on color alone (use icons, labels, patterns) +- Use both fill and stroke for differentiation +- Ensure shapes differ (circle vs square vs diamond) +- Add text labels to all visual elements + +**Color Combinations to Avoid:** +- Red/green alone (common color blindness) +- Blue/purple alone (hard to distinguish) +- Low contrast combinations + +### Screen Readers + +**HTML Structure:** +- Use semantic tags: `
`, `
`, `
`, `