shashankswe2020-ux

Traceframe — Testing skill for Claude Code

Testing community

Animated architecture and system-flow diagrams for AI coding agents.

How to install Traceframe

This entry records only its repository, not the path inside it, so there is no exact command to give. Open shashankswe2020-ux/traceframe and copy the folder into ~/.claude/skills/, or the file into ~/.claude/agents/.

What Traceframe does

Animated architecture and system-flow diagrams for AI coding agents. A Claude Code, Codex, Cursor and Copilot skill that turns a JSON spec into an interactive HTML player or an animated SVG for GitHub READMEs. npx skills add shashankswe2020-ux/traceframe

Alternatives in Testing

Spec Kitty — Spec-Driven Development for serious software developers 1.6k ★
Spec Driven Develop — Spec-driven development workflow for AI coding agents: architecture-first planning, task decomposition, GitHub 975 ★
Spectra App — Spec-driven development for coding agents — a desktop app, a CLI, and skills for Codex, Claude Code, Cursor, C 735 ★

README

Traceframe: animated architecture diagrams for AI coding agents

**Turn system behavior into animated, step-by-step diagrams, straight from Claude Code, Codex, Cursor, or GitHub Copilot.**

Traceframe is an open-source [agent skill](https://agentskills.io/) that lets your coding agent draw animated system diagrams: request paths, data pipelines, RAG flows, agent loops, event-driven architectures, auth flows, and system design walkthroughs. The agent writes a small JSON spec; Traceframe renders it as an **interactive HTML diagram** or a **self-contained animated SVG** that plays inside GitHub READMEs, pull requests, and docs.

**[Website and live interactive demos →](https://shashankswe2020-ux.github.io/traceframe/)**

[![Install with npx skills](https://img.shields.io/badge/install-npx%20skills%20add%20shashankswe2020--ux%2Ftraceframe-111111?logo=npm&logoColor=white)](#install-the-skill) [![Works with Claude Code, Codex, Cursor, Copilot](https://img.shields.io/badge/works%20with-Claude%20Code%20%C2%B7%20Codex%20%C2%B7%20Cursor%20%C2%B7%20Copilot-6d28d9)](https://github.com/vercel-labs/skills#supported-agents) [![Output: HTML + animated SVG](https://img.shields.io/badge/output-HTML%20%2B%20animated%20SVG-0b7285)](#gallery-animated-diagram-examples) [![Node.js 22.18+](https://img.shields.io/badge/node-%E2%89%A522.18-339933?logo=node.js&logoColor=white)](https://nodejs.org/) [![MIT License](https://img.shields.io/badge/license-MIT-0b7285.svg)](LICENSE) [![GitHub stars](https://img.shields.io/github/stars/shashankswe2020-ux/traceframe?style=flat&logo=github)](https://github.com/shashankswe2020-ux/traceframe/stargazers)

![Animated OAuth 2.0 Authorization Code with PKCE sequence diagram generated by Traceframe](diagrams/oauth-pkce.svg)

Why Traceframe

One declarative JSON spec, with no hand-written SVG or React.
Animated packets, changing data cards, decisions, stores, nested systems, and narrated beats.
Interactive HTML with tabs, pause, speed, hover highlig