How does it handle complex animations?

It implements a robust animation lifecycle using gsap.context() within React's useEffect, ensuring proper cleanup with ctx.revert() to prevent stale animations or memory leaks.

What tech stack does the Cinematic Website Builder use?

The skill generates code using React 19, Tailwind CSS v3.4.17, GSAP 3 with ScrollTrigger, and Lucide React icons.

Which design styles are available?

You can choose from four distinct presets: Organic Tech (Clinical), Midnight Luxe (Dark Editorial), Brutalist Signal (Raw Precision), and Vapor Clinic (Neon Biotech).

Are the generated websites mobile-responsive?

Yes, the skill follows a mobile-first approach, automatically stacking components vertically and reducing animation offsets to prevent layout overflow on smaller screens.

Cinematic Website & Landing Page Builder

Name: Cinematic Website & Landing Page Builder
Author: simplysmartai

bysimplysmartai

0•

디자인 도구

Generates high-fidelity, pixel-perfect landing pages featuring advanced GSAP animations and curated boutique aesthetic presets.

This skill empowers Claude to act as a Senior Creative Technologist, architecting cinematic marketing sites with a 'Clinical Boutique' identity. It leverages a modern frontend stack including React 19, Tailwind CSS, and GSAP 3 to deliver professional-grade interfaces that avoid generic AI patterns. By utilizing specialized design presets like 'Organic Tech' and 'Midnight Luxe,' the skill automates the creation of complex interactive elements, magnetic micro-interactions, and self-healing animation lifecycles for production-ready web development.

주요 기능

010 GitHub stars

02Advanced GSAP & ScrollTrigger integration for weighted, professional animations

03Interactive 'Functional Artifact' components like diagnostic shufflers and telemetry feeds

04Four curated design presets with unique typography, palettes, and imagery

05Self-healing guidance for animation cleanup and responsive layout management

06Standardized React 19 and Tailwind CSS v3.4 architecture

사용 사례

01Building high-end marketing sites for biotech, luxury, or technology brands

02Creating bespoke digital portfolios that require a high level of visual polish

03Rapidly prototyping cinematic landing pages with complex scroll-based interactions

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add simplysmartai/5cypressautomation website-builder

For use in Claude.ai and ChatGPT

주요 기능

010 GitHub stars

02Advanced GSAP & ScrollTrigger integration for weighted, professional animations

03Interactive 'Functional Artifact' components like diagnostic shufflers and telemetry feeds

04Four curated design presets with unique typography, palettes, and imagery

05Self-healing guidance for animation cleanup and responsive layout management

06Standardized React 19 and Tailwind CSS v3.4 architecture

사용 사례

01Building high-end marketing sites for biotech, luxury, or technology brands

02Creating bespoke digital portfolios that require a high level of visual polish

03Rapidly prototyping cinematic landing pages with complex scroll-based interactions

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add simplysmartai/5cypressautomation website-builder

For use in Claude.ai and ChatGPT