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.
The English summary is being prepared. Showing the original description.
Run score Not tested
See how to installReview the instructions the agent will receive before you install.
Create interactive HTML dashboards with KPI cards and charts.
<!DOCTYPE html>
<html>
<head>
<title>[Project] Dashboard</title>
<style>
body { font-family: system-ui; background: #f7fafc; }
.kpi-card { background: white; padding: 20px; border-radius: 8px; box-shadow: 0 2px 4px rgba(0,0,0,0.1); }
.kpi-value { font-size: 36px; font-weight: bold; }
.trend-up { color: #48bb78; }
.trend-down { color: #e53e3e; }
</style>
</head>
<body>
<h1>[Dashboard Name]</h1>
<div class="grid">
<!-- KPI cards -->
<!-- Charts -->
<!-- Progress bars -->
</div>
</body>
</html>
<div class="kpi-card">
<div class="kpi-label">Revenue</div>
<div class="kpi-value">$124K</div>
<div class="trend-up">↑ 12.5%</div>
</div>
<svg viewBox="0 0 400 300">
<rect x="50" y="100" width="40" height="150" fill="#4299e1"/>
<rect x="120" y="80" width="40" height="170" fill="#48bb78"/>
<!-- bars for each data point -->
</svg>
[name]-dashboard.htmlUse semantic colors: green (positive), red (negative), blue (neutral).
No reviews yet. Tell others what you thought.
No login needed. Share how it worked for you, ask a question, or note where it did not run.
No comments yet. Be the first to write one.
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.
The English summary is being prepared. Showing the original description.
Performs comprehensive codebase analysis covering architecture, code quality, security, performance, testing, and maintainability. Use when user wants to audit code quality, identify technical debt, find security issues, assess test coverage, or get a codebase health check.
The English summary is being prepared. Showing the original description.
Execute Python code locally with marketplace API access for 90%+ token savings on bulk operations. Activates when user requests bulk operations (10+ files), complex multi-step workflows, iterative processing, or mentions efficiency/performance.
The English summary is being prepared. Showing the original description.
Perform bulk code refactoring operations like renaming variables/functions across files, replacing patterns, and updating API calls. Use when users request renaming identifiers, replacing deprecated code patterns, updating method calls, or making consistent changes across multiple locations.
The English summary is being prepared. Showing the original description.
Transfer code between files with line-based precision. Use when users request copying code from one location to another, moving functions or classes between files, extracting code blocks, or inserting code at specific line numbers.
The English summary is being prepared. Showing the original description.
Generates comprehensive documentation explaining how a codebase works, including architecture, key components, data flow, and development guidelines. Use when user wants to understand unfamiliar code, create onboarding docs, document architecture, or explain how the system works.
The English summary is being prepared. Showing the original description.