skills.rest
tanveerriaz
tanveerriazCOMMUNITY
Explore all skills by this author →
GitHub

cinematic-minimal-web

Builds restrained editorial websites with deliberate typography, art-directed imagery, and subtle motion.

1|Updated Jun 3, 2026
Search Tags:#typography#landing page#frontend#web design#motion design#editorial layout#minimal design
One-click install
npx skills add https://github.com/tanveerriaz/Skillz --skill cinematic-minimal-web-tanveerriaz
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: cinematic-minimal-web
Source: https://github.com/tanveerriaz/Skillz/tree/main/skills/cinematic-minimal-web
Command: npx skills add https://github.com/tanveerriaz/Skillz --skill cinematic-minimal-web-tanveerriaz

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? AI-generated websites often default to generic SaaS layouts, gradient-heavy aesthetics, and excessive animation. This Skill enforces a disciplined visual direction so web pages read as cohesive editorial presentations rather than assembled component collections. ## Core Features & Use Cases - Editorial Visual Direction: Treats sections as scenes with deliberate grids, negative space, and one idea per scene. - Typography-First Hierarchy: Uses clamp-based display sizing, tight line-height, negative letter spacing, and deliberate line breaks. - Restrained Motion System: Standardizes opacity/translate entrances at 550–800ms with a defined easing curve and reduced-motion support. - Use Case: A founder needs a premium landing page for a product launch. The Skill guides the AI to produce a quiet narrative page with one controlled reveal, art-directed imagery, and crisp responsive type instead of a generic dark template with glow effects. ## Quick Start Use the cinematic-minimal-web skill to build a premium landing page for my product with strong typography and subtle motion.

Frequently Asked Questions about cinematic-minimal-web

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I build a minimal editorial landing page with AI?▼

Define your page goal, audience, and brand constraints, then apply editorial principles: one idea per scene, typography as the primary graphic element, and restrained motion. Avoid card grids, gradients, and decorative elements that dilute hierarchy.

What animation settings work for subtle website motion?▼

Use opacity 0 to 1 with translateY 12–20px over 550–800ms, eased with cubic-bezier(0.22, 1, 0.36, 1). Stagger related elements by 50–100ms, animate only transform and opacity, and respect prefers-reduced-motion.

When should I use GSAP versus CSS for scroll animations?▼

Prefer native scrolling and CSS scroll snap by default, and use Motion for entrances and micro-interactions. Reserve GSAP/ScrollTrigger only when storytelling genuinely requires pinned or scrubbed timelines.

Does minimal web design work for dense product applications?▼

Yes, but adapt the approach: retain the typographic discipline and hierarchy while reducing cinematic sequencing around repeated tasks. Readability, accessibility, and performance always take priority over spectacle.

What typography settings create strong display headlines?▼

Use clamp-based sizing with line-height between 0.88 and 1.0, negative letter spacing, deliberate line breaks, and selective italic emphasis. One high-quality grotesk or display family is usually sufficient.

Related Skills

Explore More Design & Creative Skills→
labohemezlabohemez

frontend-design

Generate frontend interfaces with HTML, CSS, and JavaScript after collecting design context from the user.

Community
Advanced
summarybotngsummarybotng
2

compatibility-testing

Test web applications across browsers, platforms, and devices using BrowserStack and Playwright.

Official
Advanced
imkdwimkdw
1

Frontend Responsive

Implement Tailwind CSS v3 breakpoint-driven responsive UI layouts for Next.js applications.

Community
Intermediate
andersoncollabandersoncollab

app-design-system

Design application-specific design systems with navigation, state, form, and notification specifications.

Community
Advanced