skills.rest
dtyq
dtyqOFFICIAL
Explore all skills by this author →
GitHub

ai-card-generator

Generate scheduled HTML visual cards with templates, data refresh, and history snapshots.

5.0k|557|Updated May 14, 2025
Search Tags:#Automation#scheduled task#echarts#Dashboard#html report#Data Visualization#card generator
One-click install
npx skills add https://github.com/dtyq/magic --skill ai-card-generator
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: ai-card-generator
Source: https://github.com/dtyq/magic/tree/main/backend/super-magic/agents/skills/ai-card-generator
Command: npx skills add https://github.com/dtyq/magic --skill ai-card-generator

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

Teams need recurring visual reports—hotspot trackers, daily digests, analytics panels—that stay current without manual rebuilding. This Skill automates the creation and scheduled refresh of HTML-based AI Cards, including data fetching, template rendering, history archiving, and optional notification delivery.

Core Features & Use Cases

  • Scheduled Card Generation: Creates folder-based or single-file HTML cards driven by magic.project.js config, with automatic updates via cron-style scheduled tasks.
  • Template System with Presets: Ships hotspot-tracker, daily-digest, and analytics-panel templates with ECharts charts, dark mode, responsive iframe layouts, and marked data sections for safe content replacement.
  • Source Provenance & Interactivity: Preserves source links with sandboxed iframe previews, and supports AI follow-up actions through window.Magic.* APIs with agent and model selectors.
  • Use Case: Ask for a daily competitor-intelligence card updated every morning at 9:00; the Skill builds the template, fetches fresh data each run, archives the previous version to history/, and optionally notifies a DingTalk or Lark group.

Quick Start

Create an AI card that tracks AI industry hotspots and updates it every day at 9am with source links preserved.

Frequently Asked Questions about ai-card-generator

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

FAQPage Schema
How do I create a scheduled HTML report card that updates automatically?▼

Define a card directory with magic.project.js set to type ai-card, add a template folder with marked DATA_SECTION comments, then create a scheduled task via the using-cron integration. Each run fetches fresh data, regenerates latest/index.html, and archives the previous version to history/.

What card templates are available for dashboards and digests?▼

Three preset folder-based templates are included: hotspot-tracker for rankings and trend charts, daily-digest for executive summaries and metric groups, and analytics-panel for KPIs, funnels, and channel breakdowns. Each contains index.html, styles.css, and scripts.js with ECharts visualizations.

Can AI cards send notifications to DingTalk or Lark after updating?▼

Yes. Add a notification.channels array in magic.project.js with channel values dingtalk, wecom, or lark plus a targetDescription. After each successful card update, the Skill routes delivery through dingtalk-cli or lark-cli; WeCom requires a separately configured group bot webhook.

Does the card template support dark mode and mobile iframe display?▼

Yes. Templates use the prefers-color-scheme media query for dark mode and CSS breakpoints at 420px and 768px so the same HTML renders a compact cover in narrow iframes and a full dashboard in wide detail views.

Why is my external chart library not loading in the card?▼

External resources are default-deny; only whitelisted ECharts CDN URLs (jsdelivr echarts@5 or 5.5.1) are permitted. Other third-party scripts will be blocked, so keep charts on ECharts or inline essential JavaScript.

When should I not use AI cards for content tasks?▼

Do not use it for social media post creation or self-media operations dashboards; those belong to the self-media-composer skill which owns the ops/ data files. AI cards are for scheduled visual reports, not one-off file generation without recurrence.

Related Skills

Explore More Data & Analytics Skills→
EvolutionAPIEvolutionAPI
520

pm-stakeholder-update

Generate audience-tailored stakeholder updates with risks, decisions, and next steps.

Official
Intermediate
ferazfhansurieferazfhansurie

scheduled-task

Manages scheduled tasks for automated execution with cron-based and one-time scheduling.

Community
Intermediate
growthxaigrowthxai
430

output-error-direct-io

Move direct I/O operations in Output SDK workflows into step functions.

Official
Intermediate
nexu-ionexu-io
8.2k

social-x-post-card

Render a realistic X post card with engagement data as a self-contained HTML document.

Official
Advanced