Not in the top 1,000 by GitHub stars

moguzbulbul/blueprint-animation

Claude Design skill: animated before → after UX redesign, explained step by step through a blueprint drawing. By @moguzbulbul.

History

Review weekly changes to SKILL.md before updating. Dates mark the weeks in which we observed each version; checks apply to the recorded commits.

View weekly changes

SKILL.md

Week of Nov 2, 2026 · +0 / −0 lines

Before Network or broad shell → After Network or broad shell

29aa30b83db4 → 29aa30b83db4

Diff text is unavailable under the recorded licenses. Line counts and the GitHub link remain available.

Compare on GitHub

Week of Oct 26, 2026 · Line counts unavailable

Before Not checked yet → After Network or broad shell

First observation → 29aa30b83db4

No earlier version was observed for comparison.

Compare on GitHub

View on GitHubAdd to my skills

Verified commit 29aa30b83db4632daf586420c52a251e7dac2d92

430GitHub stars
0stars in 7 days
1skill in this repository
0commits in 30 days

Heat

0.4
  • Star growth, last 7 daysNot available
  • Star growth, last 24 hoursNot available
  • Rank movement, last 7 daysNot available
  • Commits, last 30 daysNot available
  • Accounts asking about it through MCP, last 7 daysNot available
  • Hot votes this weekNot available

Heat never changes the order by stars, and sponsorship never touches it. How heat works

Stars over time

Oct 25, 2026Nov 4, 2026431

30-day change not yet available: not enough history.

Individual skills in this repository

How it works

blueprint-animation

When your agent uses it

Blueprint animation that explains UX decisions step by step. With Before and After, changed parts rebuild. With one screen, each module is annotated with what and why. For case studies and posts.

What it loads into context

Frontmatter

64 tokens

Always available to the agent

SKILL.md

3,875 tokens

When the skill is activated

Reference documents

992 tokens

Loaded on request

Token counts are estimates. Scripts run separately; they are not counted as reference context.

The playbook

  1. 0. Fidelity — the Figma design is exact
  2. 1. Before you build — gather
  3. 2. The per-step sequence (never skip a phase)
  4. 3. Blueprint drawing style
  5. 4. Text and overlap rules (checked every time)
  6. 5. Architecture (animations_v3 starter)
  7. 6. Performance (required, or it stutters)
  8. 7. QA before handing over
  9. 8. Explain mode (one screen, no Before)

Scripts executed separately

  • example-scene.jsx

Files

  • LICENSEasset19,616 bytes
  • README.mddoc4,008 bytes
  • SKILL.mdcore14,793 bytes
  • SKILL.mdcore14,793 bytes
  • SKILL.mdcore14,793 bytes
  • example-scene.jsxruns42,903 bytes
  • media/example.mp4asset12,030,271 bytes
  • media/preview.gifasset7,137,500 bytes

No excerpt is shown for this license. Read the source on GitHub.

View the complete source on GitHub

Skills included

  • blueprint-animation

Repository facts

License
No license detected
Created
Sep 27, 2026
Last pushed
Sep 27, 2026
Forks
23
Open issues
1
Project activity
Active

Before you install

Network or broad shell

Automated signals, not a guarantee

Checked Nov 6, 2026

Not fully analyzed: some files were too long, unreadable or missing. This never lowers the level.

Show 3 notes
  • SKILL.md:1 Analysis incomplete: Referenced executable target unavailable; not analyzed
  • SKILL.md:1 Analysis incomplete: Referenced executable target unavailable; not analyzed
  • media/example.mp4:1 Analysis incomplete: Blob exceeds size or total-read limit; file skipped
  • No broad tool permissions
  • No dangerous shell commands
  • 13 network referencesin 3 files: README.md:5 LICENSE:1 SKILL.md:2
  • No hidden or obfuscated text
  • No instruction overrides
  • 1 executable scriptin 1 file: example-scene.jsx:1
  • No access to secrets
  • No requests to vote in Hot
Show all 14 signals by file

LICENSE

  • Network accessline 1
    Copyright (c) 2026 Oğuz (@moguzbulbul, https://oguz.design)
  • Network accessline 3
    This work is licensed under the Creative Commons Attribution-NonCommercial 4.0 International License (CC BY-NC 4.0). Commercial use requires written
  • Network accessline 4
    International License (CC BY-NC 4.0). Commercial use requires written

README.md

  • Network accessline 5
    Created by **Oğuz** · [@moguzbulbul](https://x.com/moguzbulbul) · [oguz.design](https://oguz.design)
  • Network accessline 7
    Inspired by [Arjun Mahesh](https://x.com/arjmahesh).
  • Network accessline 9
    Free for non-commercial use ([CC BY-NC 4.0](LICENSE)). Commercial use needs written permission.
  • Network accessline 49
    1. Download [`blueprint-animation.zip`](https://github.com/moguzbulbul/blueprint-animation/releases/download/v1.3.1/blueprint-animation.zip) (v1.3.1).
  • Network accessline 61
    © 2026 Oğuz ([@moguzbulbul](https://x.com/moguzbulbul)). Licensed under [CC BY-NC 4.0](https://creativecommons.org/licenses/by-nc/4.0/). See [`LICENSE`](LICENSE).
  • Network accessline 63
    - **You may** use, share and adapt this skill for non-commercial purposes, with credit to Oğuz (@moguzbulbul) and a link to this repo. - **Commercial use**, for example selling the skill or including it in a paid product or service, needs w
  • Network accessline 64
    - **Commercial use**, for example selling the skill or including it in a paid product or service, needs written permission. Ask on X: [@moguzbulbul](https://x.com/moguzbulbul).

SKILL.md

  • Network accessline 2
    name: blueprint-animation description: Blueprint animation that explains UX decisions step by step. With Before and After, changed parts rebuild. With one screen, each module is annotated with what and why. For case studies and posts. licen
  • Network accessline 3
    description: Blueprint animation that explains UX decisions step by step. With Before and After, changed parts rebuild. With one screen, each module is annotated with what and why. For case studies and posts. license: CC BY-NC 4.0, non-comm
  • Network accessline 4
    license: CC BY-NC 4.0, non-commercial use only. See LICENSE.

example-scene.jsx

  • Executable scriptline 1
    Executable file

How the signals fit together

Facts from a static read of the files at the pinned commit. They describe what the code does, not why.

Some files could not be read; the facts below still hold.

Signal confidence: 11 facts
  • Network access in prose of documentationREADME.md:5Low confidence
  • Network access in prose of documentationREADME.md:7Low confidence
  • Network access in prose of documentationREADME.md:9Low confidence
  • Network access in prose of documentationREADME.md:49Low confidence
  • Network access in prose of documentationREADME.md:61Low confidence
  • Network access in prose of documentationREADME.md:63Low confidence
  • Network access in prose of documentationREADME.md:64Low confidence
  • Network access in the frontmatter of the SKILL.mdSKILL.md:2Low confidence
  • Network access in the frontmatter of the SKILL.mdSKILL.md:3Low confidence
  • Network access in the frontmatter of the SKILL.mdSKILL.md:4Low confidence
  • Executable script in code of a file that runsexample-scene.jsx:1High confidence

Works with

Agent compatibility, from the files in this repository
AgentStatusEvidenceInstall to
Claude CodeCompatibleStandard SKILL.md SKILL.md.claude/skills/<skill-name>/
CodexCompatibleStandard SKILL.md SKILL.md.agents/skills/<skill-name>/
CursorCompatibleStandard SKILL.md SKILL.md.cursor/skills/<skill-name>/
Gemini CLICompatibleStandard SKILL.md SKILL.md.gemini/skills/<skill-name>/
GitHub CopilotCompatibleStandard SKILL.md SKILL.md.github/skills/<skill-name>/
OpenCodeCompatibleStandard SKILL.md SKILL.md.opencode/skills/<skill-name>/
  • Native The repository ships a manifest, folder or frontmatter field for this agent.
  • Compatible A standard SKILL.md that this agent can read.
  • Unknown No evidence either way.

Derived automatically from paths, manifests and frontmatter. Not tested on each agent.