Menü
Governs CCD local animate-lite route and wrapper transition usage without adding full Animate.css.
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 controlled GSAP usage for CCD web-demo component-scoped Level 1 and Level 2 motion.
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-animate-lite |
| description | Governs CCD local animate-lite route and wrapper transition usage without adding full Animate.css. |
| version | 1.0.0 |
Use this skill when a task mentions animate-lite, AnimateWrapper, route transition, page transition, or animate.css-style class transitions.
CCD uses a local animate-lite subset, not the full Animate.css dependency.
animate-lite is for route/page enter-leave and small wrapper transitions.
Prefer:
fadeIn;fadeOut;fadeInUp;fadeOutDown;fadeOutUp;zoomIn and zoomOut only for existing component contracts that require them.animate-lite.scss and AnimateWrapper types.Do not use strong attention animations for new work:
bounce, flip, rotate, jello, shake, flash, heartBeat, tada
If a legacy route or component still needs one of these, treat it as a migration candidate rather than expanding the local runtime.