What is site-animado?

A tool for creating animated, responsive one-page websites as a single self-contained HTML file. It supports sections such as hero areas, cards, changing-on-scroll content, and animated numbers.

It helps build landing pages, promotional pages, portfolios, and other single-page websites with scroll-based animation.

It avoids setting up a larger web project when a standalone page is enough, and the result can be opened locally or hosted.

site-animado — Skill for Claude Code by DGatoM/DG-Claw

Install

Getting it into your agent

One page per mod, every tool's command on it. A separate URL per tool would split the same page into five that compete with each other.

Any agent

npx skills add DGatoM/DG-Claw --skill site-animado

Clone the repo

git clone --depth 1 https://github.com/DGatoM/DG-Claw

Made for: Claude Code.

Wrote this? Show the measurements

A badge with what this costs and how it scanned, read live from this page, so it follows the numbers instead of freezing them. Markdown for a README, HTML for a documentation site or a project page.

README.md

[![agentmods](https://agentmods.dev/badge/skills/dgatom/dg-claw/site-animado/github.svg)](https://agentmods.dev/skills/dgatom/dg-claw/site-animado)

Your own site

<a href="https://agentmods.dev/skills/dgatom/dg-claw/site-animado"><img src="https://agentmods.dev/badge/skills/dgatom/dg-claw/site-animado/github.svg" alt="Measured on agentmods" height="20"></a>

Or the 80×15 button, for a site that already has a row of RSS and ATOM ones. Only the verdict fits; the numbers stay here.

Your own site · 80×15

<a href="https://agentmods.dev/skills/dgatom/dg-claw/site-animado"><img src="https://agentmods.dev/badge/skills/dgatom/dg-claw/site-animado.svg" alt="Reviewed on agentmods" width="80" height="20"></a>

Per session 148 Skills are progressive disclosure: only the name and description are preloaded; the body loads when the skill is used.

When invoked 1,201 The whole file, excluding the scripts and references it only reads on demand.

Security scan A 0 findings. A grade says what 26 rules found in the file — not that it is safe.

Origin original No closer match found in the catalogue.

Token cost

What it costs to keep this loaded

Counted locally with the o200k_base tokenizer, which is exact for GPT models; Claude uses its own tokenizer and its counts differ. Treat this as one consistent yardstick across the catalogue rather than a bill. Prices are per million input tokens.

Model	Per session	Once invoked
Fable 5.1	$0.00148	$0.01201
Opus 5.5	$0.00059	$0.00480
Sonnet 5.5	$0.00030	$0.00240
Haiku 4.5	$0.00015	$0.00120

Measured 19d ago against content hash 371d7448a0fd, method: parsed. Prices are Anthropic first-party input rates as of 2026-10-07, from the pricing page.

Security

Grade A, and why

site-animado scanned grade A with 0 findings against 26 rules in 11 categories — prompt injection, anti-refusal, data exfiltration, privilege escalation, supply chain, agent snooping, system-prompt leakage, SSRF and excessive agency — measured 19d ago.

The scan reads SKILL.md. This mod also ships 1 executable file (scripts/conferir.py), listed below but not scanned — reading those needs a real analyzer, not pattern matching.

A static scan of the body, not an audit. Every finding is printed with the line that produced it so you can judge whether it matters here. A mod is markdown that instructs an agent; that is exactly why what it instructs is worth reading.

Nothing flagged

None of the 26 patterns this scan looks for appear in this file: no shell pipes, no recursive deletes, no credential paths, no hidden text, no instruction-override or anti-refusal phrasing, no agent-config snooping. That is not a guarantee, it is the absence of the things that are checkable.

skills/site-animado/SKILL.md · 58 lines

How it starts

The opening of the file, as written. The whole thing — 58 lines — stays where its author put it; the contents beside it link to each section on GitHub.

Site animado

Entrega um único .html autocontido (CSS e JS inline, sem dependência obrigatória de internet) que o aluno abre no navegador ou publica em qualquer hospedagem. Parte do template templates/site-base.html, que você copia e adapta.

Fluxo (siga a ordem)

Planejar antes de desenhar. Escreva o roteiro das seções e mostre em poucas linhas: para cada seção, o objetivo, o título e o que anima nela. Total de 4 a 6 seções: hero, uma frase de impacto (manifesto), números, uma seção sticky (passo a passo ou etapas), cartões e chamada final. Se o pedido for claro, siga sem esperar aprovação.
Escolher o estilo. Pedido sem detalhe usa o design system padrão. Instrução extra ("mais sóbrio", "mais colorido", "elegante", "com a minha marca") muda só o bloco DESIGN SYSTEM no topo do CSS (cores, fontes, raio, espaços, easings). Para marca do aluno, peça cores em hex, fonte e logo (logo em SVG inline).
Copiar e adaptar. cp templates/site-base.html ~/site-<tema>.html. Troque textos, números, cores e a ordem das seções. Mantenha o script do final.
Conferir (seção abaixo) e corrigir.
Entregar o arquivo ao aluno, dizendo que abre com duplo clique.

O que o template já faz

Hero: título que entra palavra por palavra (data-words), formas com parallax (data-parallax, data-p controla a intensidade).
Revelar ao rolar: classe reveal (use style="--d:120ms" para atrasar). Usa scroll-driven animations CSS (animation-timeline: view()) quando o navegador suporta e IntersectionObserver como fallback.
Manifesto: as palavras acendem conforme a rolagem.
Números que contam: <b data-count="92" data-suffix="°C">; data-dec define as casas decimais.
Seção sticky (.pin): o painel fica fixo e o conteúdo troca conforme a rolagem. Para mudar a quantidade de passos, altere os .step, os .dots i, o array look no JS e a altura 320vh (aprox. 100vh por passo).
Barra de progresso no topo e menu fixo.
Responsivo: fontes com clamp(), grades que viram uma coluna abaixo de 760px, nada de largura fixa. Testado em 390px sem rolagem horizontal.
prefers-reduced-motion: tudo aparece direto, sem animar.

Read the full file on GitHub · 58 lines

Files

What ships with it

2 files beside SKILL.md in the same directory: the scripts, references and assets a skill reads on demand. Not counted in the per-session cost; read them before you install if any of them is executable.

Changes

What this file has done since we first saw it

Hashed on every crawl. A supply-chain change to an agent config is a question of when, not whether, so the history is kept rather than the latest state alone.

19d ago First seen · 58 lines · 148 tokens per session scan A 371d7448a0fd

Subscribe to this mod's changes

site-animado is a skill published in the GitHub repository DGatoM/DG-Claw (20 stars, last pushed 2d ago), licensed MIT. It adds 148 tokens to every session and 1,201 once invoked, about $0.0006 per session on Opus 5.5. A static security scan graded it A with 0 findings. No closer match exists in the catalogue, so it is treated as the original; first seen 2026-10-18.

CSS and styling Design and UX Frontend

site-animado next to 6 skills from other repositories
Mod	Type	Stars	Last push	Licence	Scan	Tokens	Works with
site-animadoDGatoM/DG-Claw	Skill	20	2d ago	MIT	A	148	Claude Code
anti-slop-designsickn33/agentic-awesome-skills	Skill	49k	yesterday	MIT	A	34	Claude Code
chakra-ui-builderchakra-ui/chakra-ui	Skill	41k	yesterday	MIT	A	214	Claude Code, Codex
visual-ralphYeachan-Heo/oh-my-codex	Skill	34k	3d ago	MIT	A	52	Codex
open-design-setupcompozy/compozy	Skill	2.8k	yesterday	MIT	A	67	Claude Code, Codex
frontend-visual-qadaymade/claude-code-skills	Skill	1.5k	yesterday	MIT	A	125	Claude Code, Codex
prototype-webnexu-io/html-anything	Skill	9.4k	25d ago	Apache-2.0	A	24	Claude Code, Codex