Skills
.Work. You
Rest

frontend-design-spec

Community

Build UIs with a cinematic, broadcast studio aesthetic.

Design & Creative#typescript#frontend#design system#ui/ux#next.js#component library#animation
AuthorGunjanGrunge
Version1.0.0
Installs0

System Documentation

What problem does it solve?

This Skill provides a comprehensive design specification for building and maintaining the frontend of the YouTube & Instagram Content Factory UI, ensuring a consistent and professional user experience.

Core Features & Use Cases

  • Visual Language Definition: Establishes fonts, color palettes, and spacing.
  • Component Patterns: Details UI elements like buttons, cards, and status indicators.
  • Layout and Page Designs: Outlines the structure for various application screens and responsive behavior.
  • Animation System: Specifies the use of GSAP and Framer Motion for smooth, cinematic transitions.
  • Use Case: When developing new features or modifying existing ones for the Content Factory, consult this specification to adhere to the established "Mission Control" design direction.

Quick Start

Use this skill to understand the design tokens and layout structure for the Content Factory frontend.

Dependency Matrix

Required Modules

None required

Components

scriptsreferences

💻 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: frontend-design-spec
Download link: https://github.com/GunjanGrunge/rrq/archive/main.zip#frontend-design-spec

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 223,000+ vetted skills library on demand.