Skill6.7k estrellas del repoactualizado 11d ago

sprite-animation

Sprite-animation is a pure CSS looping animation template for educational posters that combines pixel art mascots with kinetic typography in Chinese or Japanese. Use this when creating retro-styled explanatory animations featuring bold display text, animated timelines, and a vintage color palette without requiring JavaScript functionality.

Ver fuente Repositorio: html-anything

Instalar en Claude Code

Copiar

git clone --depth 1 https://github.com/nexu-io/html-anything /tmp/sprite-animation && cp -r /tmp/sprite-animation/next/src/lib/templates/skills/sprite-animation ~/.claude/skills/sprite-animation

Después abre una sesión nueva de Claude Code; el skill carga automáticamente.

Definición

SKILL.md

【模板: 像素 / 8-bit 动画解说】
【意图】教育型动画的单帧海报, 纯 CSS keyframes 循环, 不用 JS。
【布局】
- Full-bleed cream stage
- Bold display year / 大字数字
- 中心一个像素艺术 mascot (SVG 或纯 CSS 绘制)
- kinetic 中文 / 日文 display 字
- 底部 timeline ribbon 一直走
【设计细节】
- 动画用 @keyframes, 不依赖 JS
- 复古调色板: 红 / 米 / 墨绿

Del mismo repositorio

article-magazineSkill

Substack / Medium 高级感长文排版, 适合公众号、博客发布

blog-postSkill

杂志感长文, 含 masthead、hero、figures、pull quote、作者署名

card-twitterSkill

推特金句 / 数据卡, 适合配推文

card-xiaohongshuSkill

小红书风格知识卡片, 多张联排可滑动浏览

competitive-teardownSkill

定位图 + 功能矩阵 + 价格对比 + 机会窗口, 把竞品资料转成产品决策报告

dashboardSkill