一键在 Manus 中运行任何 Skill

simple-html-pages

星标2

分支0

更新时间2026年7月1日 18:51

Builds simple standalone HTML page pieces with embedded CSS and playful animated SVG illustrations. Use when the user asks to create, revise, or extend an HTML page, landing page, invite, card, section, mockup, or visual web snippet.

安装

用 Codex 或 Claude 帮你安装复制这段 Prompt，粘贴到 Codex、Claude 或其他助手里，让它检查 Skill 页面并帮你完成安装。

在 Manus 中运行

来源

TangleML

TangleML/tangent-shell

打开 GitHub 仓库查看创作者相关仓库

下载

在 Manus 中运行

Simple HTML pages

Use this skill to turn a short page brief into a small, polished HTML file.

Default assumptions

The first user prompt in a fresh session is the page brief.
Create index.html unless the user names another file.
Produce a complete standalone document, not a fragment, unless the user asks for a snippet.
Use embedded CSS and inline SVG; avoid external fonts, images, scripts, or CDNs by default.
Favor simple structure over framework patterns.

Build checklist

Every page should include:

semantic HTML (main, section, headings, buttons/links as appropriate),
responsive CSS with readable spacing and contrast,
one clear focal area that matches the user's brief,
at least one inline SVG illustration or decorative SVG accent,
animation in the SVG or CSS (@keyframes, animate, animateTransform, or similar),
accessible names for meaningful controls and non-decorative visuals.

SVG animation guidance

Use small, fun motion that supports the concept:

floating stars, bubbles, leaves, sparks, clouds, planets, pets, robots, or product icons,
looping transforms such as bobbing, twinkling, rotating, pulsing, drawing strokes, or drifting,
prefers-reduced-motion CSS to calm or disable nonessential motion.

Prefer inline SVG with CSS classes so the animation is easy to inspect and edit.

Response pattern

The page is the artifact. Save it under artifacts/ and verify it exists, then respond briefly with:

a direct Markdown link to the artifact, e.g. [Open artifact](artifacts/<descriptive-slug>.html),
what was built,
the animated SVG element(s),
how to open it locally.

Pin the artifact automatically: call the pin_artifact tool with the same workspace-relative path and a short title (e.g. pin_artifact(path: "artifacts/<descriptive-slug>.html", title: "<page title>")) so it shows in the quick-access sidebar.

Do not paste the entire HTML in chat if the file was written successfully, unless the user asks for it. Never report the page as done without both the Markdown link and the pin_artifact call.

同仓库更多 Skills

同仓库

reproduce-research

TangleML/tangent-shell

Reproduce a research paper / white paper / arXiv result as a Tangle pipeline. Use when the user asks to "reproduce", "replicate", or "implement" a paper, benchmark, or arXiv link as an experiment.

2026-07-012

tangle-cli

TangleML/tangent-shell

Drive the open-source Tangle CLI (`tangle-cli`) via Bash for local pipeline/component workflows and API-backed run submission, status, logs, and artifacts. Use whenever an agent needs to validate, hydrate, submit, inspect, or debug Tangle pipelines and runs from the command line.

2026-07-012

tangle-help

TangleML/tangent-shell

Answer Tangle product, docs, and how-to questions from a local RAG over the TangleML documentation. Use for conceptual / "what is" / "how do I" lookups, not live run or execution data.

2026-07-012

tanstack-router

TangleML/tangent-shell

TanStack Router patterns for routing, navigation, search params, and layouts. Use when creating routes, navigating, or working with URL state.

2026-07-012

revealjs

TangleML/tangent-shell

Comprehensive Reveal.js reference for building HTML slide decks. Use whenever the user wants to create, revise, or extend a presentation, slide deck, or talk — especially from Markdown — including transitions, Auto-Animate, Mermaid diagrams, animatable SVG, video, backgrounds, fragments, code highlighting, speaker notes, math, themes, configuration, and PDF export.

2026-07-012

web-research

TangleML/tangent-shell

Gather, vet, and cite sources for a research question. Use when answering factual questions, comparing options, or producing an evidence-backed write-up.

2026-07-012

name	simple-html-pages
description	Builds simple standalone HTML page pieces with embedded CSS and playful animated SVG illustrations. Use when the user asks to create, revise, or extend an HTML page, landing page, invite, card, section, mockup, or visual web snippet.

Simple HTML pages

Use this skill to turn a short page brief into a small, polished HTML file.

Default assumptions

The first user prompt in a fresh session is the page brief.
Create index.html unless the user names another file.
Produce a complete standalone document, not a fragment, unless the user asks for a snippet.
Use embedded CSS and inline SVG; avoid external fonts, images, scripts, or CDNs by default.
Favor simple structure over framework patterns.

Build checklist

Every page should include:

semantic HTML (main, section, headings, buttons/links as appropriate),
responsive CSS with readable spacing and contrast,
one clear focal area that matches the user's brief,
at least one inline SVG illustration or decorative SVG accent,
animation in the SVG or CSS (@keyframes, animate, animateTransform, or similar),
accessible names for meaningful controls and non-decorative visuals.

SVG animation guidance

Use small, fun motion that supports the concept:

floating stars, bubbles, leaves, sparks, clouds, planets, pets, robots, or product icons,
looping transforms such as bobbing, twinkling, rotating, pulsing, drawing strokes, or drifting,
prefers-reduced-motion CSS to calm or disable nonessential motion.

Prefer inline SVG with CSS classes so the animation is easy to inspect and edit.

Response pattern

The page is the artifact. Save it under artifacts/ and verify it exists, then respond briefly with:

a direct Markdown link to the artifact, e.g. [Open artifact](artifacts/<descriptive-slug>.html),
what was built,
the animated SVG element(s),
how to open it locally.

Do not paste the entire HTML in chat if the file was written successfully, unless the user asks for it. Never report the page as done without both the Markdown link and the pin_artifact call.