Skills
.Work. You
Rest

remotion-designer

Community

Define brand-correct layouts for Remotion

Design & Creative#design system#remotion#typography hierarchy#visual QA#token-driven design#WCAG contrast#layout spec
AuthorCleanExpo
Version1.0.0
Installs0

System Documentation

What problem does it solve?

remotion-designer prevents off-brand, unreadable, or cramped Remotion compositions by generating a validated, token-driven visual layout spec from a brand design system and the composition context.

Core Features & Use Cases

  • Brand-token layout specs: Produces layout spec JSON that references design.md tokens by name for grid, typography, spacing, color application, and component slot styles.
  • 5-D design critique gate: Runs an Opus-based adversary scoring pass across philosophy consistency, visual hierarchy, detail execution, functionality, and innovation, producing a critique artifact and blocking output on failed gates.
  • Design QA edits for TSX: Applies inline fixes to an existing composition’s TSX when performing QA, without taking over motion or narrative responsibilities.

Quick Start

Use remotion-designer to generate a token-referenced layout spec for your Remotion composition by providing the brandSlug, compositionId, and aspectRatio.

Dependency Matrix

Required Modules

None required

Components

Standard package

đź’» Claude Code Installation

Recommended: Let Claude install automatically. Simply copy and paste the text below to Claude Code.

Please help me install this Skill:
Name: remotion-designer
Download link: https://github.com/CleanExpo/Pi-Dev-Ops/archive/main.zip#remotion-designer

Please download this .zip file, extract it, and install it in the .claude/skills/ directory.
View Source Repository

Agent Skills Search Helper

Install a tiny helper to your Agent, search and equip skill from 471,000+ vetted skills library on demand.