fix: graceful degradation for motion-heavy sites (closes #39)#56
Open
YAMRAJ13y wants to merge 1 commit into
Open
fix: graceful degradation for motion-heavy sites (closes #39)#56YAMRAJ13y wants to merge 1 commit into
YAMRAJ13y wants to merge 1 commit into
Conversation
Effect-saturated sites (WebGL/canvas, chained GSAP timelines, dozens of staggered animations) previously made the clone "completely fail": the skill treats every dynamic behavior as mandatory to reproduce, so the agent chases all of them, the build breaks, and the user is left with nothing. This adds a static-first / graceful-degradation model to the clone-website skill: - Guiding Principle 10 "Graceful Degradation Beats Total Failure": build a pixel-accurate static skeleton that compiles first, then layer motion back in priority order; use video/screenshot fallbacks for effects that can't be faithfully rebuilt; record anything deferred. Adds a per-section motion budget rule. - "Motion Complexity Triage" recon step: detect the animation stack (Framer Motion, GSAP/ScrollTrigger, Lenis, Three.js/WebGL/canvas, Lottie, particle systems, video backgrounds) with a per-technique fallback strategy table, and classify the page as light/moderate/heavy. - Two "What NOT to Do" guardrails and a motion-tier line in the completion report. Edited the source skill (.claude/skills/clone-website/SKILL.md) and regenerated all 9 platform command files via scripts/sync-skills.mjs. Docs-only change; lint/typecheck/build unaffected. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Problem (closes #39)
The root cause is in the
clone-websiteskill itself: it treats every dynamic behavior as mandatory to reproduce ("you must catch those too", "extract every state"). On an effect-saturated site — WebGL/canvas scenes, chained GSAP timelines, dozens of staggered entrance animations — the agent tries to rebuild all of them in one pass. That introduces runtime errors and layout thrash, the build breaks, and the user is left with nothing. There was no triage, no priority order, and no fallback path.Fix: static-first, degrade gracefully
This adds a graceful-degradation model so a heavy site produces a shippable static-but-accurate clone instead of a broken build:
Guiding Principle 10 — "Graceful Degradation Beats Total Failure." Build a pixel-accurate static skeleton that compiles first (zero animation), then layer motion back in priority order, verifying the build after each addition. Effects that can't be faithfully rebuilt get a looping-video/screenshot fallback. Anything deferred is recorded, never silently dropped. Includes a per-section motion budget rule.
"Motion Complexity Triage" reconnaissance step. Detect the animation stack (Framer Motion, GSAP/ScrollTrigger, Lenis/Locomotive, Three.js/WebGL/canvas, Lottie, particle systems, video backgrounds) via a per-technique fallback-strategy table, then classify the page as light / moderate / heavy and pick the matching strategy (static-first becomes mandatory for heavy).
Two new "What NOT to Do" guardrails (don't chase animations until the build breaks; don't reimplement WebGL/canvas/complex GSAP from scratch — use fallbacks) and a motion-tier line in the completion report.
Implementation notes
.claude/skills/clone-website/SKILL.mdand regenerated all 9 platform command files withnode scripts/sync-skills.mjs(perAGENTS.md).lint/typecheck/buildare unaffected.🤖 Generated with Claude Code