Menü
Governs controlled GSAP usage for CCD web-demo component-scoped Level 1 and Level 2 motion.
Mit Codex oder Claude installieren Kopieren Sie diesen Prompt, fügen Sie ihn in Codex, Claude oder einen anderen Assistant ein und lassen Sie die Skill-Seite prüfen und installieren.
Basierend auf der SOC-Berufsklassifikation
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?