/design

Standardize Netflix-inspired dark UI with Tailwind tokens, Inter typography, and Heroicons.

1|Updated Mar 25, 2026

Search Tags:#design system #tailwind css #component design #heroicons #ui guidelines #dark theme #netflix inspired

Ready to run

npx skills add https://github.com/mkerchenski/hurrah-tv --skill design-mkerchenski

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: /design
Source: https://github.com/mkerchenski/hurrah-tv/tree/main/.claude/skills/design
Command: npx skills add https://github.com/mkerchenski/hurrah-tv --skill design-mkerchenski

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

It eliminates inconsistent, non-Hurrah.tv-looking UI by providing a single source of truth for Netflix-inspired dark design decisions.

Core Features & Use Cases

Netflix-inspired layout and motion rules: Defines hero/billboard structure, content row patterns, hover reveals, transitions, and loading behavior to keep pages feeling cohesive.
Tailwind-based color, typography, and icon conventions: Standardizes the dark-first palette, Inter typography hierarchy, and Heroicons usage so components match the app’s visual system.
Component-level guidance for common UI building blocks: Documents how core components like PosterCard, PosterGrid, ServicePicker, and navigation should behave and look.

Quick Start

Apply the Hurrah.tv design rules to the page or component you are editing so the dark theme, spacing, typography, and icon styles remain consistent.

Frequently Asked Questions about /design

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

FAQPage Schema

How do I implement a Netflix-inspired dark theme UI using Tailwind CSS?▼

To implement a Netflix-inspired dark theme, apply the standardized Tailwind surface and accent token scheme, use an Inter-based typography hierarchy, and follow Heroicons outline and solid conventions to ensure visual consistency across all components.

What are the UI guidelines for building streaming hero billboards and content rows?▼

UI guidelines for hero billboards and content rows define specific layout patterns, hover reveals, transition behaviors, and loading states to ensure streaming pages maintain a cohesive structure and motion design.

Can I use this design system for standardizing poster cards and grid layouts?▼

Yes, this design system standardizes component-level guidance for poster cards and grids by documenting specific layout structures, spacing rules, and visual behaviors required to keep UI building blocks consistent.

Does the component design system require specific icon conventions for navigation elements?▼

The component design system requires Heroicons for navigation elements, explicitly defining when to use outline versus solid icon styles to maintain a unified visual system across all application interfaces.

What is the best way to prevent inconsistent UI when modifying existing page components?▼

The best way to prevent inconsistent UI is to enforce a single source of truth for design decisions, requiring strict adherence to documented spacing, motion guidelines, and color tokens when creating or modifying pages.