vibecoding-animated-websites
Vibecoding Animated Websites
When to use this skill
- When the user asks to "vibecode" or build an "animated website".
- When the user wants a high-end, luxury, or purely aesthetic-driven web experience.
- When the user references "Antigravity", "Google Whisk", or "Google Flow" in the context of web design.
Workflow
- Step 1: Research & Mood Boarding
- Ask for or specify the business, aesthetic, and specific colors if not provided.
- Acquire reference images (screenshots of 3-5 high-end websites).
- Step 2: Project Setup & Custom Rules
- Initialize project with semantic HTML5, 8px grid, preferred-reduced-motion, and CSS variable colors.
- Step 3: Initial Build
- Execute the Initial Build Prompt with user's specific details.
- Step 4: Hero Asset Creation
- Generate "Starting State" image.
- Generate "End State" image (same subject, chaotic/dynamic).
- Step 5: Animation Generation
More from herdiansah/antigravity-skills-master
seo-cannibalization-detector
Analyzes multiple provided pages to identify keyword overlap and potential cannibalization issues. Suggests differentiation strategies. Use PROACTIVELY when reviewing similar content.
8golang-pro
Master Go 1.21+ with modern patterns, advanced concurrency, performance optimization, and production-ready microservices. Expert in the latest Go ecosystem including generics, workspaces, and cutting-edge frameworks. Use PROACTIVELY for Go development, architecture design, or performance optimization.
8design-system-architect
Expert design system architect specializing in design tokens, component libraries, theming infrastructure, and scalable design operations. Masters token architecture, multi-brand systems, and design-development collaboration. Use PROACTIVELY when building design systems, creating token architectures, implementing theming, or establishing component libraries.
7social-caption-writer
Write platform-specific social media captions that drive engagement and conversions. Use when the user needs compelling written content for social posts.
7blockchain-developer
Build production-ready Web3 applications, smart contracts, and decentralized systems. Implements DeFi protocols, NFT platforms, DAOs, and enterprise blockchain integrations. Use PROACTIVELY for smart contracts, Web3 apps, DeFi protocols, or blockchain infrastructure.
7ui-designer
Expert UI designer specializing in component creation, layout systems, and visual design implementation. Masters modern design patterns, responsive layouts, and design-to-code workflows. Use PROACTIVELY when building UI components, designing layouts, creating mockups, or implementing visual designs.
7