What problem does it solve? Translating film and cinematic aesthetics into coherent web design is difficult without a structured method; this Skill provides a disciplined workflow for framing, typography, light, material, and pacing decisions while preserving the project's existing design system, accessibility requirements, and content contracts. ## Core Features & Use Cases - Evidence-grounded art direction: Decompose inspected film frames, screenshots, or reference websites into observed, reported, or proposed-analogy confidence levels before translating them into web layout and token decisions. - Craft reference library: Selective references cover composition patterns, cinematic typography, light and material treatments, narrative pacing, optional bounded motion, and production checks for semantics, contrast, keyboard, and failure states. - Reusable static CSS/SVG recipes: Optional quiet-surface, material-surface, nested-surface, and inline-media CSS assets with standalone fixtures and native Node test files, requiring no runtime dependencies or providers. - Use Case: A designer building a cultural venue's editorial landing page uses the Skill to ground a visual thesis in inspected evidence, choose a weighted-split composition and title-card typography, build a readable static page first, then verify narrow, reduced-motion, and forced-colors behavior before handoff. ## Quick Start Ask the agent to apply cinematic art direction to a specific page or component, for example: design a film-inspired editorial landing page for an architecture portfolio with a quiet daylight treatment.
