New: 98,000+ skills indexed from GitHub repos with 100+ stars · every skill safety-checkedBrowse top skillsTop skills
Esc to closeBrowse all skills
Submit a skillBrowse skills
Submit a skillBrowse skills

Agent skill

Show HTML Or Picture

by HuangPuStar in HuangPuStar/FenixAgent

当需要把本地 HTML 或图片文件展示给前端时使用。优先引用当前工作目录下的 user/ 目录中的文件；如果文件在其他位置，先复制到当前工作目录的 user/ 再展示。路径由前端自动改写为 /fs/ 路由代理，Agent 只需输出 user/ 相对路径即可。最终只输出可直接渲染的相对路径片段：HTML 输出 iframe，图片输出 Markdown 图片；路径不能是绝对路径，也不能以 /…

Apache-2.0Auto-check passed

Install Show HTML Or Picture

skills CLI
$ npx skills add HuangPuStar/FenixAgent --skill show-html-or-picture -a claude-code

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

GitHub CLI
$ gh skill install HuangPuStar/FenixAgent show-html-or-picture --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/HuangPuStar/FenixAgent.git skills-src && mkdir -p .claude/skills && cp -r skills-src/.agents/skills/show-html-or-picture .claude/skills/show-html-or-picture && 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/

Facts

Skill name
show-html-or-picture
GitHub stars
552
Token cost
~475 tokens
SKILL.md length
82 words
Files
1
Skills in repo
6
Repo updated
First seen
Licence
Apache-2.0

At a glance

当需要把本地 HTML 或图片文件展示给前端时使用。优先引用当前工作目录下的 user/ 目录中的文件；如果文件在其他位置，先复制到当前工作目录的 user/ 再展示。路径由前端自动改写为 /fs/ 路由代理，Agent 只需输出 user/ 相对路径即可。最终只输出可直接渲染的相对路径片段：HTML 输出 iframe，图片输出 Markdown 图片；路径不能是绝对路径，也不能以 /…

  • Works in 3 steps: 检查文件是否存在于 ./user/ 目录（包括子目录）下。 → 如果不存在，尝试查找文件的当前位置（用户可能提供了完整路径或文件名）。 → 如果找到文件但不在 ./user/，必须复制到 ./user/…
  • SKILL.md covers 路径基准, 执行流程, 复制命令示例 and 输出规范, plus 3 more sections
  • Instructions only: no scripts, shell commands, URLs or credentials in SKILL.md

What it does

Show HTML Or Picture is an agent skill from HuangPuStar/FenixAgent. 当需要把本地 HTML 或图片文件展示给前端时使用。优先引用当前工作目录下的 user/ 目录中的文件；如果文件在其他位置，先复制到当前工作目录的 user/ 再展示。路径由前端自动改写为 /fs/ 路由代理，Agent 只需输出 user/ 相对路径即可。最终只输出可直接渲染的相对路径片段：HTML 输出 iframe，图片输出 Markdown 图片；路径不能是绝对路径，也不能以 / 开头，且不要附加额外说明文字。

Its SKILL.md is about 480 tokens, which your agent loads only when the skill is triggered. It is a single SKILL.md file with no bundled scripts.

The licence is Apache-2.0.

Example prompts

  • “/show-html-or-picture”

Workflow steps

3 steps, taken from the first numbered list in SKILL.md.

  1. 检查文件是否存在于 ./user/ 目录（包括子目录）下。
  2. 如果不存在，尝试查找文件的当前位置（用户可能提供了完整路径或文件名）。
  3. 如果找到文件但不在 ./user/，必须复制到 ./user/ 目录（包括子目录）下。

What it can do on your machine

Read from SKILL.md and the folder at commit da5eb54. 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 html, bash and markdown).

    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

Show HTML Or Picture loads about 475 tokens when it runs. Until then it costs about 58 tokens; SKILL.md has 82 words of instructions outside code blocks.

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

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 HuangPuStar/FenixAgent at commit da5eb54, republished under its Apache-2.0 licence (© HuangPuStar). 82 words, ~475 tokens.

Download SKILL.mdSave it as .claude/skills/show-html-or-picture/SKILL.md (or your agent's skills folder).
name
show-html-or-picture
description
当需要把本地 HTML 或图片文件展示给前端时使用。优先引用当前工作目录下的 user/ 目录中的文件；如果文件在其他位置，先复制到当前工作目录的 user/ 再展示。路径由前端自动改写为 /fs/ 路由代理，Agent 只需输出 user/ 相对路径即可。最终只输出可直接渲染的相对路径片段：HTML 输出 iframe，图片输出 Markdown 图片；路径不能是绝对路径，也不能以 / 开头，且不要附加额外说明文字。

把本地 HTML 或图片展示给前端。

由于本系统只允许将 ./user/ 目录（包括子目录）下的文件在对话中显示预览，所以要以当前工作目录为基准，将要预览的文件以及它的全部依赖文件全部原样复制到 ./user/ 或其子目录中。

路径基准

  • 基准目录: 当前工作目录（pwd/cwd 输出的路径）下的 user/ 子目录
  • 示例: 如果当前工作目录是 /app/workspaces/env_xxx，则文件应放在 /app/workspaces/env_xxx/user/
  • 常见错误: 不要使用 /app/workspaces/user/（这是 workspace root 下的 user 目录，不是当前工作目录）

执行流程

  1. 检查文件是否存在于 ./user/ 目录（包括子目录）下。
  2. 如果不存在，尝试查找文件的当前位置（用户可能提供了完整路径或文件名）。
  3. 如果找到文件但不在 ./user/，必须复制到 ./user/ 目录（包括子目录）下。

复制命令示例

bash
# 从其他位置复制到当前工作目录的 user/
cp /path/to/source/file.html ./user/

# 如果 user/ 目录不存在，先创建
mkdir -p ./user/
cp /path/to/source/file.html ./user/

对于交互式图表、地图等复杂网页，注意要将 HTML 文件及其所有相关的 CSS, Javascript, 图片等文件全部原样复制。

输出规范

  • 只输出一行可渲染内容，不要加解释、代码块或其他文字
  • 路径必须是相对路径，格式为 ./user/<filename>
  • 不能使用绝对路径或 / 开头路径
HTML 输出
html
<iframe src="./user/xxx.html" width="100%" height="400" />

或根据内容调整高度：

html
<iframe src="./user/xxx.html" width="100%" height="600" />
图片输出
markdown
![description](./user/xxx.png)

错误处理

如果文件未找到，返回明确的错误信息：

注意事项

  • 默认复制，不移动；除非用户明确要求，否则不要输出复制命令
  • 如果文件已经在 ./user/ 中，直接使用，无需再次复制
  • 文件名应包含用途，时间戳或日期，避免覆盖现有文件
  • 前端会自动将 ./user/xxx 改写为 /web/environments/{envId}/fs/user/xxx?preview=true

示例

示例 1：文件已在 user/ 目录

用户输入：展示飞行报告 文件位置：./user/flight_report_20260810.html

输出：

html
<iframe src="./user/flight_report_20260810.html" width="100%" height="600" />
示例 2：文件在其他位置，需要复制

用户输入：展示 /tmp/heatmap.html 文件位置：/tmp/heatmap.html

执行：

bash
cp /tmp/heatmap.html ./user/

输出：

html
<iframe src="./user/heatmap.html" width="100%" height="400" />

© HuangPuStar, Apache-2.0. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file

Files

Just SKILL.md in .agents/skills/show-html-or-picture of HuangPuStar/FenixAgent.

Open the folder on GitHubat commit da5eb54

Compare with similar skills

Show HTML Or Picture 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.

Show HTML Or Picture compared with similar skills
SkillStarsUsed inTokensAuto-checkLicenceRepo updated
Show HTML Or Picture this skillHuangPuStar/FenixAgent552—~475Automated safety check: PassApache-2.0
Picture Elementthedaviddias/Front-End-Checklist74k—~777Automated safety check: PassMIT
ShowZimoLiao/scholaraio577—~356Automated safety check: PassMIT
Show Me Your Work Decision Logcursor/plugins11k8 repos~1.6kAutomated safety check: PassNone
Picture Itgeongeorge/picture-it132—~3.7kAutomated safety check: PassMIT
Show Metellahq/opensession394—~1.6kAutomated safety check: PassMIT

Similar skills

  • Picture Element

    thedaviddias/Front-End-Checklist

    A skill your agent uses when reviewing image assets, markup, and CDN or build transforms related to Use <picture with an <img fallback.

    74k GitHub stars~777 tokensUpdated 5 days ago
    Auto-check passed

  • Show

    ZimoLiao/scholaraio

    A skill your agent uses when the user wants to read a paper or inspect metadata, abstract, conclusion, full text, figures, or detail levels L1 through L4.

    577 GitHub stars~356 tokensUpdated 15 days ago
    Auto-check passed

  • Show Me Your Work Decision Log

    cursor/plugins

    Official

    Keeps a TSV decision log for long or unattended agent runs, one row per decision with what, why, evidence and result, so a reviewer can check the work later.

    11k GitHub starsUsed in 8 repos~1.6k tokens
    Agent WorkflowsAuto-check passed

  • Picture It

    geongeorge/picture-it

    Generate and edit images from the CLI using picture-it. An agent skill from geongeorge/picture-it.

    132 GitHub stars~3.7k tokensUpdated 6 mo ago
    Media & CreativeAuto-check passed

  • Show Me

    tellahq/opensession

    Help the user understand the current topic visually with concise diagrams, code-shape sketches, and focused HTML artifacts.

    394 GitHub stars~1.6k tokensUpdated today
    Frontend & DesignAuto-check passed

  • Event Run Of Show

    mohitagw15856/pm-claude-skills

    Build the minute-by-minute run of show that lets an event run without the planner being asked anything — every cue, who owns it, what happens if it slips, and the version each supplier actually needs.

    1.4k GitHub stars~1.4k tokensUpdated 2 days ago
    Auto-check passed

More from HuangPuStar/FenixAgent

  • Auto Devflow

    HuangPuStar/FenixAgent

    A skill your agent uses when starting an issue, bugfix, feature, or refactor that should be driven by multiple coordinated subagents: explore → plan → code → review, with the main agent acting as…

    552 GitHub stars~3k tokensUpdated yesterday
    Auto-check passed

  • Zentao Manager

    HuangPuStar/FenixAgent

    通过 zentao 命令行工具查询和操作禅道（ZenTao）数据，覆盖项目集、产品、项目、执行、需求、Bug、任务、测试用例、测试单、产品计划、版本、发布、反馈、工单、应用、用户、附件等模块的增删改查及状态流转。当用户提到禅道、zentao、查询项目进展、获取 Bug 列表、创建任务、更新需求状态等项目管理操作时使用本技能。

    552 GitHub starsUsed in 1 repo~2.5k tokens
    Auto-check passed

  • Agent Platform API

    HuangPuStar/FenixAgent

    RCS Platform API 完整参考。Agent 通过 curl + jq 调用 REST API 操作平台资源：环境、工作流、配置、任务、知识库、组织等。

    552 GitHub stars~565 tokensUpdated yesterday
    Auto-check: notes

  • Fenix Code Review

    HuangPuStar/FenixAgent

    执行 FenixAgent 项目专用代码审查。手动触发，默认审查已暂存改动，或按用户提供的文件路径、提交范围、分支 diff 范围进行审查，并生成审查报告。

    552 GitHub stars~1.7k tokensUpdated yesterday
    Auto-check passed

  • Skill Creator

    HuangPuStar/FenixAgent

    帮助用户创建、编辑和优化 Agent Skill 指令文件。当用户提到"创建 skill"、"写技能"、"编辑 skill"、"优化技能"、"新建技能"或需要生成 SKILL.md 文件时使用。

    552 GitHub stars~469 tokensUpdated yesterday
    Auto-check passed

Questions about Show HTML Or Picture

What does Show HTML Or Picture do?

当需要把本地 HTML 或图片文件展示给前端时使用。优先引用当前工作目录下的 user/ 目录中的文件；如果文件在其他位置，先复制到当前工作目录的 user/ 再展示。路径由前端自动改写为 /fs/ 路由代理，Agent 只需输出 user/ 相对路径即可。最终只输出可直接渲染的相对路径片段：HTML 输出 iframe，图片输出 Markdown 图片；路径不能是绝对路径，也不能以 /…. Show HTML Or Picture is an agent skill from HuangPuStar/FenixAgent.

How do I install Show HTML Or Picture in Claude Code?

Run `npx skills add HuangPuStar/FenixAgent --skill show-html-or-picture -a claude-code`. Or copy the skill folder (.agents/skills/show-html-or-picture in HuangPuStar/FenixAgent) into .claude/skills/show-html-or-picture in your project. Claude Code loads it when a task matches its description.

How do I install Show HTML Or Picture in Codex?

Run `npx skills add HuangPuStar/FenixAgent --skill show-html-or-picture -a codex`. Or copy the skill folder (.agents/skills/show-html-or-picture in HuangPuStar/FenixAgent) into .agents/skills/show-html-or-picture in your project. Codex loads it when a task matches its description.

Can I use Show HTML Or Picture 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 HuangPuStar/FenixAgent --skill show-html-or-picture -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/show-html-or-picture, .gemini/skills/show-html-or-picture, .github/skills/show-html-or-picture and .opencode/skills/show-html-or-picture in your project.

What does Show HTML Or Picture need to run?

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

Does Show HTML Or Picture 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 Show HTML Or Picture 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 Show HTML Or Picture use?

Show HTML Or Picture 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 Show HTML Or Picture use?

About 475 tokens (SKILL.md is roughly 1.9k 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 Show HTML Or Picture?

Skills that share tags, products or a category with Show HTML Or Picture: Picture Element (thedaviddias/Front-End-Checklist, 74k stars), Show (ZimoLiao/scholaraio, 577 stars), Show Me Your Work Decision Log (cursor/plugins, 11k stars) and Picture It (geongeorge/picture-it, 132 stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains Show HTML Or Picture?

HuangPuStar (a GitHub organization) maintains it in HuangPuStar/FenixAgent, which has 552 GitHub stars. The repository holds 6 skills in this directory. The repository was last updated on October 10, 2026.

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