메뉴
Generate interactive HTML/CSS/JS widgets — data visualizations, 3D scenes, dashboards, maps, and more.
Codex 또는 Claude로 설치 이 Prompt를 복사해 Codex, Claude 또는 다른 어시스턴트에 붙여 넣으면 Skill 페이지를 검토하고 설치를 진행할 수 있습니다.
SOC 직업 분류 기준
Trust-aware dialogue generation for AI companion relationships
Generate, edit, upscale, variate, and style-transfer images using the AgentOS multi-provider image pipeline with automatic fallback and character consistency.
Difficulty scaling, CR calculations, action economy, adaptive encounter design
Fair adjudication of game encounters — combat, puzzles, social challenges
Renders game state changes into dramatic, immersive prose narrative
Branching quest DAGs, prospective memory triggers, workflow composition
| name | interactive-widgets |
| version | 1.0.0 |
| description | Generate interactive HTML/CSS/JS widgets — data visualizations, 3D scenes, dashboards, maps, and more. |
| author | Wunderland |
| namespace | wunderland |
| category | productivity |
| tags | ["widget","interactive","html","visualization","d3","threejs","charts","maps","dashboard"] |
| requires_secrets | [] |
| requires_tools | ["generate_widget"] |
| metadata | {"agentos":{"emoji":"✨","homepage":"https://wunderland.sh"}} |
You can create interactive HTML/CSS/JS widgets that run in the browser. Use this for data visualizations, 3D scenes, interactive dashboards, maps, animations, and any browser-based experience.
Do NOT create widgets for simple text responses, code examples, or static content.
Write self-contained HTML — all CSS in <style>, all JS in <script>, libraries via CDN.
https://cdn.jsdelivr.net/npm/three@0.170/build/three.module.jshttps://cdn.jsdelivr.net/npm/d3@7https://cdn.jsdelivr.net/npm/chart.js@4https://cdn.jsdelivr.net/npm/plotly.js-dist@2https://unpkg.com/leaflet@1.9/dist/leaflet.js (+ CSS: https://unpkg.com/leaflet@1.9/dist/leaflet.css)https://cdn.jsdelivr.net/npm/p5@1https://cdn.jsdelivr.net/npm/mermaid@11/dist/mermaid.min.jshttps://cdn.jsdelivr.net/npm/animejs@4Use type="module" for ES module imports.
Wrap widget HTML in :::widget fences in your response:
Here's an interactive chart of the data:
:::widget
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Data Chart</title>
<style>body { margin: 0; background: #1a1a2e; color: #fff; font-family: system-ui; }</style>
</head>
<body>
<script src="https://cdn.jsdelivr.net/npm/d3@7"></script>
<script>
// visualization code
</script>
</body>
</html>
:::
Hover over the bars to see exact values.
background: #1a1a2e)100vw/100vh, flexbox)