Menu
Governs controlled GSAP usage for CCD web-demo component-scoped Level 1 and Level 2 motion.
Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.
Based on SOC occupation classification
Governs CCD local animate-lite route and wrapper transition usage without adding full Animate.css.
Defines CCD material, liquid-glass-inspired surfaces, depth, shadows, borders, and overlay usage while preserving token and readability rules.
Defines CCD motion levels, animation limits, reduced-motion behavior, and motion review rules.
Maps CCD page types to UIDesignState, layout archetypes, density, hierarchy, component choices, and UI quality expectations.
Defines CCD's product visual language so AI-generated UI feels premium, coherent, Apple/Google-quality, and CCD-specific while preserving architecture and governance.
A final UI review checklist for CCD visual work before staging, committing, or pushing.
| name | ccd-gsap-motion |
| description | Governs controlled GSAP usage for CCD web-demo component-scoped Level 1 and Level 2 motion. |
| version | 1.0.0 |
Use this skill when a task mentions GSAP, GreenSock, timeline animation, advanced interaction motion, or ScrollTrigger.
CCD allows GSAP only as a controlled app-local capability for apps/web-demo. CCD governance remains the source of truth even when official GSAP skills exist.
Use GSAP for controlled Level 1 or Level 2 interaction and timeline work when CSS, Vue <Transition>, or local animate-lite is insufficient.
Examples:
apps/web-demo/src/plugins/animation.context.revert() or the adapter cleanup helper on unmount.prefers-reduced-motion; pass reduced-motion state into the app-local helper instead of reading browser globals inside the GSAP adapter.packages/**.Before accepting GSAP usage, answer:
Why are CSS, Vue Transition, and animate-lite insufficient?
What state change does the timeline explain?
Is the selector scoped to a component root?
Where is cleanup called?
What happens under prefers-reduced-motion?
Does this avoid login/static background motion?