Agent skill

Create HTML Embed

Create self-contained D3 HTML embed charts for the research article template.

Apache-2.0Auto-check passedData & Analytics

Install Create HTML Embed

skills CLI

$ npx skills add adithya-s-k/FineEnvs --skill create-html-embed -a claude-code

Project install by default; add -g for ~/.claude/skills/.

GitHub CLI

$ gh skill install adithya-s-k/FineEnvs create-html-embed --agent claude-code

Project scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).

Manual copy

$ git clone --depth 1 https://github.com/adithya-s-k/FineEnvs.git skills-src && mkdir -p .claude/skills && cp -r skills-src/content/articles/geoguesser/.ai/skills/create-html-embed .claude/skills/create-html-embed && rm -rf skills-src

Use ~/.claude/skills/ instead of .claude/skills for a personal install. The folder must contain SKILL.md.

Claude Code skills documentation · loads skills from .claude/skills/

Paste into Claude Code

Install the "create-html-embed" agent skill from https://github.com/adithya-s-k/FineEnvs/tree/main/content/articles/geoguesser/.ai/skills/create-html-embed into .claude/skills/create-html-embed/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "create-html-embed", then confirm the skill loads.

Claude Code copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.

$skill-installer

$skill-installer install https://github.com/adithya-s-k/FineEnvs/tree/main/content/articles/geoguesser/.ai/skills/create-html-embed

Type this inside Codex. $skill-installer <name> installs a curated skill from openai/skills. The installer writes to $CODEX_HOME/skills (default ~/.codex/skills). Restart Codex if the skill does not show up.

skills CLI

$ npx skills add adithya-s-k/FineEnvs --skill create-html-embed -a codex

Project install goes to .agents/skills/; add -g for ~/.codex/skills/.

GitHub CLI

$ gh skill install adithya-s-k/FineEnvs create-html-embed --agent codex

Project scope by default (.agents/skills/); add --scope user for a personal install.

Manual copy

$ git clone --depth 1 https://github.com/adithya-s-k/FineEnvs.git skills-src && mkdir -p .agents/skills && cp -r skills-src/content/articles/geoguesser/.ai/skills/create-html-embed .agents/skills/create-html-embed && rm -rf skills-src

Use ~/.agents/skills/ instead of .agents/skills for a personal install.

Codex skills documentation · loads skills from .agents/skills/

Paste into Codex

Install the "create-html-embed" agent skill from https://github.com/adithya-s-k/FineEnvs/tree/main/content/articles/geoguesser/.ai/skills/create-html-embed into .agents/skills/create-html-embed/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "create-html-embed", then confirm the skill loads.

Codex copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.

skills CLI

$ npx skills add adithya-s-k/FineEnvs --skill create-html-embed -a cursor

Project install goes to .agents/skills/; add -g for ~/.cursor/skills/.

GitHub CLI

$ gh skill install adithya-s-k/FineEnvs create-html-embed --agent cursor

Project scope by default (.agents/skills/); add --scope user for a personal install.

Manual copy

$ git clone --depth 1 https://github.com/adithya-s-k/FineEnvs.git skills-src && mkdir -p .cursor/skills && cp -r skills-src/content/articles/geoguesser/.ai/skills/create-html-embed .cursor/skills/create-html-embed && rm -rf skills-src

Use ~/.cursor/skills/ instead of .cursor/skills for a personal install.

Cursor skills documentation · loads skills from .cursor/skills/, .agents/skills/, .claude/skills/, .codex/skills/

Paste into Cursor

Install the "create-html-embed" agent skill from https://github.com/adithya-s-k/FineEnvs/tree/main/content/articles/geoguesser/.ai/skills/create-html-embed into .cursor/skills/create-html-embed/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "create-html-embed", then confirm the skill loads.

Cursor copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.

gemini skills install

$ gemini skills install https://github.com/adithya-s-k/FineEnvs.git --path content/articles/geoguesser/.ai/skills/create-html-embed

--scope user (default) or --scope workspace; --path is the subfolder of the repo that holds the skill; --consent skips the security confirmation prompt.

skills CLI

$ npx skills add adithya-s-k/FineEnvs --skill create-html-embed -a gemini-cli

Project install goes to .agents/skills/; add -g for ~/.gemini/skills/.

GitHub CLI

$ gh skill install adithya-s-k/FineEnvs create-html-embed --agent gemini-cli

Project scope by default (.agents/skills/); add --scope user for a personal install.

Manual copy

$ git clone --depth 1 https://github.com/adithya-s-k/FineEnvs.git skills-src && mkdir -p .gemini/skills && cp -r skills-src/content/articles/geoguesser/.ai/skills/create-html-embed .gemini/skills/create-html-embed && rm -rf skills-src

Use ~/.gemini/skills/ instead of .gemini/skills for a personal install, then run /skills reload.

Gemini CLI skills documentation · loads skills from .gemini/skills/, .agents/skills/

Paste into Gemini CLI

Install the "create-html-embed" agent skill from https://github.com/adithya-s-k/FineEnvs/tree/main/content/articles/geoguesser/.ai/skills/create-html-embed into .gemini/skills/create-html-embed/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "create-html-embed", then confirm the skill loads.

Gemini CLI copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.

GitHub CLI

$ gh skill install adithya-s-k/FineEnvs create-html-embed

Installs for Copilot at project scope by default; add --scope user for a personal install. Preview a skill first with gh skill preview. Needs GitHub CLI 2.90.0 or later (public preview).

skills CLI

$ npx skills add adithya-s-k/FineEnvs --skill create-html-embed -a github-copilot

Project install goes to .agents/skills/; add -g for ~/.copilot/skills/.

Manual copy

$ git clone --depth 1 https://github.com/adithya-s-k/FineEnvs.git skills-src && mkdir -p .github/skills && cp -r skills-src/content/articles/geoguesser/.ai/skills/create-html-embed .github/skills/create-html-embed && rm -rf skills-src

Use ~/.copilot/skills/ instead of .github/skills for a personal install. Commit .github/skills so cloud agent and code review can use it.

GitHub Copilot skills documentation · loads skills from .github/skills/, .claude/skills/, .agents/skills/

Paste into GitHub Copilot

Install the "create-html-embed" agent skill from https://github.com/adithya-s-k/FineEnvs/tree/main/content/articles/geoguesser/.ai/skills/create-html-embed into .github/skills/create-html-embed/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "create-html-embed", then confirm the skill loads.

GitHub Copilot copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.

skills CLI

$ npx skills add adithya-s-k/FineEnvs --skill create-html-embed -a opencode

OpenCode documents no install command of its own. Project install goes to .agents/skills/; add -g for ~/.config/opencode/skills/.

GitHub CLI

$ gh skill install adithya-s-k/FineEnvs create-html-embed --agent opencode

Project scope by default (.agents/skills/); add --scope user for a personal install.

Manual copy

$ git clone --depth 1 https://github.com/adithya-s-k/FineEnvs.git skills-src && mkdir -p .opencode/skills && cp -r skills-src/content/articles/geoguesser/.ai/skills/create-html-embed .opencode/skills/create-html-embed && rm -rf skills-src

Use ~/.config/opencode/skills/ instead of .opencode/skills for a personal install.

OpenCode skills documentation · loads skills from .opencode/skills/, .claude/skills/, .agents/skills/

Paste into OpenCode

Install the "create-html-embed" agent skill from https://github.com/adithya-s-k/FineEnvs/tree/main/content/articles/geoguesser/.ai/skills/create-html-embed into .opencode/skills/create-html-embed/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "create-html-embed", then confirm the skill loads.

OpenCode copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.

Facts

Skill name: create-html-embed
GitHub stars: 421
Token cost: ~1.1k tokens
SKILL.md length: 334 words
Files: 2
Skills in repo: 8
Repo updated: Oct 6, 2026
First seen: Oct 7, 2026
Licence: Apache-2.0

At a glance

Create self-contained D3 HTML embed charts for the research article template.

Works in 4 steps: Understand the request → Create the HTML file → Follow the mandatory structure → …
The user asks to create a chart
SKILL.md covers Before you start, Workflow, Key conventions (quick… and Data files, plus 1 more section
Instructions only: no scripts, shell commands, URLs or credentials in SKILL.md

What it does

Create HTML Embed is an agent skill from adithya-s-k/FineEnvs. Create self-contained D3 HTML embed charts for the research article template. Use when the user asks to create a chart, visualization, embed, D3 chart, line chart, bar chart, scatter plot, sankey diagram, or any data visualization as an HTML embed file.

Its SKILL.md is about 1.1k tokens, which your agent loads only when the skill is triggered. The skill folder holds 1 other file (for example `directives.md`).

It sits in Data & Analytics, covering Data visualization and Reinforcement learning. It works with D3.js. The repository describes itself as: FineEnvs — RL Environments 101: building and scaling RL environments in the age of LLMs. The licence is Apache-2.0.

When your agent uses it

The user asks to create a chart
Any data visualization as an HTML embed file

Example prompts

“/create-html-embed”

Workflow steps

4 steps, taken from the step headings in SKILL.md.

Understand the request
Create the HTML file
Follow the mandatory structure
Integrate in MDX

What it can do on your machine

Read from SKILL.md and the folder at commit b0f4c2f. It shows what the files ask for, not the result of running them.

Tool permissions
Pre-approves nothing: there is no allowed-tools line, so your agent's usual permission prompts apply.
From allowed-tools in the SKILL.md frontmatter.
Runs code
No scripts in the folder and no shell commands in SKILL.md (its code samples are mdx and html).
From the folder's file list and the shell code blocks in SKILL.md.
Network
No URLs in SKILL.md.
From URLs in SKILL.md, links to its own repository left out.
Credentials
Names no API keys, tokens, secrets or passwords.
From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.

Context cost

Create HTML Embed loads about 1.1k tokens when it runs. Until then it costs about 68 tokens; SKILL.md has 334 words of instructions outside code blocks.

Always · name and description, kept in context so the agent knows when to use it: ~68
When it runs · the whole SKILL.md, loaded when a task matches: ~1.1k

Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.

Safety

Auto-check passed

The automated check found no risky patterns in SKILL.md.

Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); files beside SKILL.md are not scanned.

SKILL.md

The full file from adithya-s-k/FineEnvs at commit b0f4c2f, republished under its Apache-2.0 licence (© adithya-s-k). 334 words, ~1,141 tokens.

Download SKILL.mdSave it as .claude/skills/create-html-embed/SKILL.md (or your agent's skills folder). This skill also uses 1 other file; get the full folder from GitHub.

name: create-html-embed
description: Create self-contained D3 HTML embed charts for the research article template. Use when the user asks to create a chart, visualization, embed, D3 chart, line chart, bar chart, scatter plot, sankey diagram, or any data visualization as an HTML embed file.

Create HTML Embed

Create self-contained D3.js chart embeds for the research article template.

Before you start

Read the full directives file for all conventions, patterns, and checklists:

directives.md — single source of truth for embed authoring rules

This covers: colors & palettes, layout, SVG scope, mounting, theming, controls, tooltips, data loading, responsiveness, legends, accessibility, performance, error handling, printing, and the full agent checklist.

Workflow

Step 1: Understand the request

Clarify with the user:

What type of chart? (line, bar, scatter, sankey, waffle, heatmap, custom)
What data source? (CSV path, JSON, inline data)
Interactive controls needed? (metric selector, filters)
Any specific design requirements?

Step 2: Create the HTML file

Location: app/src/content/embeds/
Naming: d3-<descriptive-name>.html (e.g., d3-training-loss.html)
Root class: .d3-<descriptive-name> (must match filename)

Step 3: Follow the mandatory structure

Every embed must have this structure:

html

<div class="d3-yourname"></div>
<style>
  .d3-yourname { /* scoped styles */ }
</style>
<script>
  (() => {
    const ensureD3 = (cb) => { /* D3 CDN loader */ };
    const bootstrap = () => {
      /* mount guard + container selection */
      /* tooltip setup */
      /* SVG scaffolding */
      /* data loading */
      /* render function with ResizeObserver */
    };
    if (document.readyState === 'loading') {
      document.addEventListener('DOMContentLoaded', () => ensureD3(bootstrap), { once: true });
    } else { ensureD3(bootstrap); }
  })();
</script>

Step 4: Integrate in MDX

Import and use the HtmlEmbed component:

mdx

import HtmlEmbed from '../../components/HtmlEmbed.astro';

<HtmlEmbed src="d3-yourname.html" title="Chart Title" desc="Description text" />

HtmlEmbed props

Prop	Type	Description
`src`	string	Path to HTML file in `embeds/` (required)
`title`	string	Title above the card
`desc`	string	Description below (supports HTML)
`frameless`	boolean	Removes card background/border
`wide`	boolean	Wide layout (~1100px)
`data`	string or string[]	Path(s) to data files
`config`	object	JSON config passed via `data-config` attribute

Usage examples

mdx

<!-- Simple embed -->
<HtmlEmbed src="d3-training-loss.html" title="Training Loss" />

<!-- With external data -->
<HtmlEmbed src="d3-line-simple.html" title="Attention" data="attention_loss.csv" />

<!-- With config -->
<HtmlEmbed
  src="d3-line-simple.html"
  title="Learning Rate"
  data="lr_loss.csv"
  config={{ defaultMetric: 'loss', xDomain: [0, 45e9] }}
/>

<!-- Multiple data files -->
<HtmlEmbed
  src="d3-comparison.html"
  title="A vs B"
  data={['formatting_filters.csv', 'relevance_filters.csv']}
/>

<!-- Frameless -->
<HtmlEmbed frameless src="d3-banner.html" />

Key conventions (quick reference)

Full details in the directives file. The critical ones:

Colors: Use window.ColorPalettes.getColors('categorical', n) — never hardcode palettes
CSS variables: --text-color, --surface-bg, --border-color, --axis-color, --tick-color, --grid-color
Dark mode: Check document.documentElement.getAttribute('data-theme') === 'dark'
Mount guard: Always set container.dataset.mounted = 'true'
Data loading: Try /data/<file> first, then ./assets/data/<file> — use fetchFirstAvailable()
Responsiveness: ResizeObserver on container, recompute on resize
Legend: HTML-based, title "Legend", swatch 14x14px
Controls: HTML only (no SVG UI), selects labeled "Metric" when applicable
Tooltip: Single .d3-tooltip absolutely positioned inside container
No globals: Everything in IIFE, nothing on window

Data files

Store data in: app/src/content/assets/data/
Served from: /data/ (public) at build time
Formats: CSV (preferred for tabular), JSON (for nested/hierarchical)

Post-creation checklist

After creating the embed, verify against the Agent Checklist (section 14.1) and Definition of Done (section 14.2) in directives.md.

Files

SKILL.md and 1 other file in content/articles/geoguesser/.ai/skills/create-html-embed of adithya-s-k/FineEnvs.

SKILL.md
directives.md

Open the folder on GitHubat commit b0f4c2f

Compare with similar skills

Create HTML Embed next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.

Create HTML Embed compared with similar skills
Skill	Stars	Used in	Tokens	Auto-check	Licence	Repo updated
Create HTML Embed this skilladithya-s-k/FineEnvs	421	—	~1.1k	Automated safety check: Pass	Apache-2.0	yesterday
D3 Vizcalesthio/OpenMontage	65k	3 repos	~5.4k	Automated safety check: Pass	AGPL-3.0	3 days ago
Tufte Data Vizcaylent/tufte-data-viz	222	—	~3.5k	Automated safety check: Pass	MIT	7 mo ago
Advanced Data VisualizationHack23/cia	239	—	~1.5k	Automated safety check: Pass	Apache-2.0	today
D3 Visualizationbenchflow-ai/skillsbench	1.8k	—	~1.5k	Automated safety check: Pass	Apache-2.0	2 mo ago
Cs448b Visualizationsundial-org/skills	152	—	~684	Automated safety check: Pass	None	2 mo ago

Similar skills

D3 Viz
calesthio/OpenMontage
Creating interactive data visualisations using d3.js. An agent skill from calesthio/OpenMontage.
65k GitHub starsUsed in 3 repos~5.4k tokens
Data & AnalyticsAuto-check passed
Tufte Data Viz
caylent/tufte-data-viz
A skill your agent uses when creating, reviewing, or styling charts, graphs, dashboards, sparklines, or any data visualization.
222 GitHub stars~3.5k tokensUpdated 7 mo ago
Data & AnalyticsAuto-check passed
Advanced Data Visualization
Hack23/cia
Advanced chart types, D3.js/Vaadin Charts patterns, political data visualization, time series analysis
239 GitHub stars~1.5k tokensUpdated today
Data & AnalyticsAuto-check passed
D3 Visualization
benchflow-ai/skillsbench
Build deterministic, verifiable data visualizations with D3.js (v6).
1.8k GitHub stars~1.5k tokensUpdated 2 mo ago
Data & AnalyticsAuto-check passed
Cs448b Visualization
sundial-org/skills
Data visualization design based on Stanford CS448B. An agent skill from sundial-org/skills.
152 GitHub stars~684 tokensUpdated 2 mo ago
Data & AnalyticsAuto-check passed
Datavis
foryourhealth111-pixel/Vibe-Skills
Comprehensive data visualization toolkit for creating beautiful, mathematically elegant visualizations with D3.js, Chart.js, and custom SVG.
3.6k GitHub stars~1.1k tokensUpdated 1 mo ago
Data & AnalyticsAuto-check passed

Questions about Create HTML Embed

What does Create HTML Embed do?

Create self-contained D3 HTML embed charts for the research article template. Create HTML Embed is an agent skill from adithya-s-k/FineEnvs. Create self-contained D3 HTML embed charts for the research article template.

When should I use Create HTML Embed?

Create HTML Embed fits situations like: the user asks to create a chart; any data visualization as an HTML embed file.

How do I install Create HTML Embed in Claude Code?

Run `npx skills add adithya-s-k/FineEnvs --skill create-html-embed -a claude-code`. Or copy the skill folder (content/articles/geoguesser/.ai/skills/create-html-embed in adithya-s-k/FineEnvs) into .claude/skills/create-html-embed in your project. Claude Code loads it when a task matches its description.

How do I install Create HTML Embed in Codex?

Run `npx skills add adithya-s-k/FineEnvs --skill create-html-embed -a codex`. Or copy the skill folder (content/articles/geoguesser/.ai/skills/create-html-embed in adithya-s-k/FineEnvs) into .agents/skills/create-html-embed in your project. Codex loads it when a task matches its description.

Can I use Create HTML Embed in Cursor, Gemini CLI or GitHub Copilot?

Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add adithya-s-k/FineEnvs --skill create-html-embed -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/create-html-embed, .gemini/skills/create-html-embed, .github/skills/create-html-embed and .opencode/skills/create-html-embed in your project.

What does Create HTML Embed need to run?

SKILL.md names no scripts, command-line tools or credentials: Create HTML Embed is instructions for the agent only.

Does Create HTML Embed access the network?

SKILL.md contains no URLs. Any network use would come from the scripts or tools the agent runs. This is read from the text; nothing was executed.

Is Create HTML Embed safe to install?

Our automated static check of SKILL.md found no risky patterns, such as piping downloads into a shell, reading credential files or hidden Unicode. It is not a guarantee. Review the folder before installing.

What licence does Create HTML Embed use?

Create HTML Embed is published under the Apache-2.0 licence (the repository's licence). It allows redistribution, so the full SKILL.md is shown on this page.

How many tokens does Create HTML Embed use?

About 1.1k tokens (SKILL.md is roughly 4.6k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full.

What are the alternatives to Create HTML Embed?

Skills that share tags, products or a category with Create HTML Embed: D3 Viz (calesthio/OpenMontage, 65k stars), Tufte Data Viz (caylent/tufte-data-viz, 222 stars), Advanced Data Visualization (Hack23/cia, 239 stars) and D3 Visualization (benchflow-ai/skillsbench, 1.8k stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains Create HTML Embed?

adithya-s-k (a GitHub user) maintains it in adithya-s-k/FineEnvs, which has 421 GitHub stars. The repository holds 8 skills in this directory. The repository was last updated on October 6, 2026.

Source: adithya-s-k/FineEnvs on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.

Install Create HTML Embed

Facts

At a glance

What it does

When your agent uses it

Example prompts

Workflow steps

What it can do on your machine

Tool permissions

Runs code

Network

Credentials

Context cost

Safety

SKILL.md

Create HTML Embed

Before you start

Workflow

Step 1: Understand the request

Step 2: Create the HTML file

Step 3: Follow the mandatory structure

Step 4: Integrate in MDX

HtmlEmbed props

Usage examples

Key conventions (quick reference)

Data files

Post-creation checklist

Files

Compare with similar skills

Similar skills

More from adithya-s-k/FineEnvs

Related

Questions about Create HTML Embed