skills.rest
mkerchenski
mkerchenskiCOMMUNITY
Explore all skills by this author →
GitHub

/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
One-click install
npx skills add https://github.com/mkerchenski/hurrah-tv --skill design-mkerchenski
Or copy as Structured Prompt for Agent▼
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.

Related Skills

Explore More Design & Creative Skills→
jubscodesjubscodes
49

gsp-typography

Generate a typography system with type scale, font pairing, and CSS files.

Community
Advanced
motormetricsmotormetrics
21

ui-design-system

Standardize dashboard UI components, typography, and color usage.

Official
Advanced
heysuhasheysuhas
2

baoyu-infographic

Generate infographics from structured content using predefined layout and style templates.

Community
Advanced
mahg-esmahg-es
3

theme-design

Design CSS theme systems with design tokens, color palettes, and typography scales.

Official
Intermediate