ワンクリックでManusで任意のスキルを実行

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 リポジトリを開く Creator のリポジトリを見る

ダウンロード

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

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.

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.