Data2motion Lite

Lightweight, script-driven variant of data2motion for turning data into a smooth, on-brand animated chart (one self-contained HTML) — built for a TEXT-ONLY model that cannot see its own output. You never write HTML/CSS/SVG/animation; you extract the data, pick a chart, fill a small JSON spec, and run one build script that owns 100% of the look and the motion, so the result cannot drift from the house template style or lose its smoothness. Use to turn a number/stat/table/CSV/paragraph into a quick animated chart, data reveal, or KPI when you want guaranteed template fidelity with minimal reason

92 stars 11 forksFrontend & Design

Install

skills CLI (Claude Code, Cursor, Codex and more)

npx skills add nolangz/data2motion --skill data2motion-lite

Manual install

git clone --depth 1 https://github.com/nolangz/data2motion.git /tmp/data2motion
mkdir -p ~/.claude/skills
cp -r /tmp/data2motion/. ~/.claude/skills/data2motion-lite

Personal skills live in ~/.claude/skills. Use .claude/skills in a project folder to share a skill with your team.

From the SKILL.md

# data2motion-lite

Turn data into a **smooth, on-brand animated chart** in one self-contained HTML file.

This is the *lite* variant. It assumes **you are a text model that cannot see images**, so it puts **all** of the design and animation into a deterministic script. **You never write HTML, CSS, SVG, or animation code.** You do four things — get the data, pick a chart, write a spec, run the build — and the script makes the result look like the template every single time. Your output cannot drift from the house style or lose its smoothness, because you don't author the pixels: the script does.

## Use it in 4 steps

1. **Get the data.** From a table, CSV, a paragraph, or a single number — pull out the labels and values. Group them into rows (or series / points, depending on the chart you'll pick).
2. **Pick a chart — your call, no rules.** Choose whatever form shows the data best. The supported forms (and the data each needs) are in `references/spec.md`:
   **kpi · bar · column · diverging · line · multiline · area · stacked · scatter · lollipop · dumbbell**.

Read the full skill on GitHub

Details

Skill name: data2motion-lite
Repository: nolangz/data2motion
Repo updated: 28 June 2026

FAQ

What does the Data2motion Lite skill do?

How do I install the Data2motion Lite skill?

skills CLI (Claude Code, Cursor, Codex and more): npx skills add nolangz/data2motion --skill data2motion-lite. Skills go in ~/.claude/skills (personal) or .claude/skills (project), and Claude loads them automatically when a task matches the description.

Is Data2motion Lite popular?

It lives in nolangz/data2motion, which has 92 GitHub stars and 11 forks.

Related skills

Shader for Interfaces

120

v2space-labs/shader-for-interfaces

Decide whether an interface effect should stay in CSS, SVG, or Canvas 2D or needs WebGL or WebGPU, then create, integrate, diagnose, and visually verify focused GPU effects inside product interfaces. Use for contained Three.js/WebGL2/GLSL or vgpu/WebGPU/WGSL surfaces, modest particles, GPU data views, and responsive canvases in TypeScript or React. Do not use for dependent passes, persistent simulations, formal render graphs, adaptive-quality systems, or renderer migrations.

Frontend & Design

Frontend Textbooks

108

onepixelaway/frontend-textbooks

Create designed US Letter HTML textbooks, manuals, field guides, business books, and coffee-table books from supplied manuscripts, then verify and export matching PDFs. Use for new manuscript-to-book work, existing HTML book enhancement, print/mobile layout repair, manuscript-preserving diagrams or editorial imagery, and final book production.

Frontend & Design

Design Taste

h3nryprod01/design-taste

Elite frontend design taste for building, reviewing, and polishing web interfaces. Use whenever the user wants to design, redesign, shape, critique, audit, polish, or improve any UI (landing pages, portfolios, dashboards, product UI, components, forms, onboarding, empty states) or asks to make something look better / premium / modern, fix the styling, add or fix animations, or make a design feel less generic ("AI slop"). Covers typography, color, spacing, layout, visual hierarchy, motion, micro-interactions, component states, accessibility, responsive behavior, UX copy, and anti-pattern detect

Frontend & Design

Cinematic UI

akseolabs-seo/cinematic-ui

Direct a website the way a film is made: cast a director and a film, choose the medium the film calls for (photoreal 3D, hand-drawn, ink wash, print, pixel, neon, type, photography…), cast a lead, ask for the assets, write a shot list for every section, then shoot it with a scroll-driven camera, designed cuts, a grade, and a screening pass on rendered frames. Use for Awwwards / Framer-grade landing pages, brand, product, portfolio and studio sites, immersive or WebGL / 3D sites, scrollytelling, "cinematic", "film style", "director style", "電影感", "導演風格", "分鏡", "像拍電影一樣做網站", a director's colour o

Frontend & Design24

Nextjs App Architecture

aurorascharff/nextjs-app-architecture-skill

Build or audit Next.js 16 App Router apps using a next-beats-style React Server Components architecture. Use when scaffolding a new app, adding a feature, reviewing an existing app, refactoring route-loader-shaped pages into feature-owned async server components, deciding where queries/actions/components live, keeping pages synchronous with `params.then()`, placing Suspense boundaries, choosing the client/server boundary, designing skeletons, preventing CLS, or enabling Cache Components. Also use when the user asks about RSC composition, components receiving IDs instead of route params, `'use

Frontend & Design

Anti UI Slop

uizze/uizze

Stop coding agents from shipping generic UI. Use UIZZE's 800,000+ real web and iOS screens to build product-specific interfaces, define a design contract, cover required states, and run a hard finish gate. Use when designing, implementing, redesigning, critiquing, or pre-ship reviewing a web or iOS interface in Codex, Claude Code, Cursor, Copilot, or another coding agent. Trigger with "anti-ui-slop", "stop UI slop", "ground this UI in real screens", or "run the UI finish gate".

Frontend & DesignIn 1 list

Browse the most popular Claude skills, all frontend & design skills, or write your own with the skills generator.