skills.rest
pkirsanov
pkirsanovCOMMUNITY
Explore all skills by this author →
GitHub

bubbles-cinematic-design

Applies cinematic UI design presets and interaction patterns through a repository's design tokens.

1|Updated Mar 17, 2026
Search Tags:#frontend#design system#design tokens#wireframing#ui design#interaction patterns#aesthetic presets
One-click install
npx skills add https://github.com/pkirsanov/bubbles --skill bubbles-cinematic-design-pkirsanov
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: bubbles-cinematic-design
Source: https://github.com/pkirsanov/bubbles/tree/main/skills/bubbles-cinematic-design
Command: npx skills add https://github.com/pkirsanov/bubbles --skill bubbles-cinematic-design-pkirsanov

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve? Premium UI work often drifts into generic, inconsistent styling when agents hardcode colors and invent components. This Skill supplies a fixed cinematic design vocabulary — four aesthetic presets and an interaction-pattern library — that agents apply strictly through the host repository's own design tokens and shared components. ## Core Features & Use Cases - Four Aesthetic Presets: Organic Tech, Midnight Luxe, Brutalist Signal, and Vapor Clinic, each defining palette, typography, identity, and image mood. - Interaction-Pattern Library: Floating-island navbar, opening-shot hero, functional artifact cards, manifesto section, sticky stacking archive, pricing grid, and terminal footer. - Token-First Composition: All concrete colors, spacing, and components come from the repo's UI skill and design tokens; on any conflict the project UI skill wins. - Use Case: A feature's spec.md declares ### Design Language: cinematic; the implement agent auto-loads this Skill and builds a premium landing page using the repo's tokens and component library. ## Quick Start Enable cinematic design by listing it under designLanguages in .github/bubbles-project.yaml, then ask the ux agent to wireframe a premium landing page for your feature.

Frequently Asked Questions about bubbles-cinematic-design

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

FAQPage Schema
How do I enable the cinematic design language in a repository?▼

Enable it by listing bubbles-cinematic-design (or cinematic) under designLanguages in .github/bubbles-project.yaml. Repos that have not opted in never receive the skill and use only their local UI skills.

How is the active design language selected for a UI feature?▼

Selection resolves in order: an explicit design-language option on the current invocation, the feature's recorded Design Language field in spec.md, then the repo default in bubbles-project.yaml. The choice is sticky and auto-loaded on later ux and implement runs.

Does the cinematic design skill hardcode colors and components?▼

No. All concrete colors, typography, spacing, radii, and components come from the host repo's design tokens and shared component library. On any conflict, the project UI skill and its instructions win.

What presets does the cinematic design language include?▼

It includes four presets: Organic Tech (clinical boutique), Midnight Luxe (dark editorial), Brutalist Signal (raw precision), and Vapor Clinic (neon biotech). Each defines palette, typography, identity, and image mood.

When should I not use the cinematic design language?▼

Avoid it for standard or non-premium UI work, pure backend tasks, and repositories that have not opted in via designLanguages. Those cases should use only the repo's local UI skills.

Related Skills

Explore More Design & Creative Skills→
vobasevobase
59

extract

Extract reusable UI components, design tokens, and patterns from frontend codebases.

Official
Intermediate
firefly-eventsfirefly-events

ui-audit

Audit UI artifacts for accessibility and motion findings into a unified report.

Official
Advanced
wondelaiwondelai
1.9k

refactoring-ui

Generate design tokens and layout patterns for web UI systems.

Official
Basic
letxbrace-droidletxbrace-droid

high-end-visual-design

Enforce premium typography, spacing, Double-Bezel cards, and cinematic motion in UI designs.

Community
Advanced