skills.rest
TheBlueBear02
TheBlueBear02COMMUNITY
Explore all skills by this author →
GitHub

linear-modern

Create a dark UI design system for React apps with layered backgrounds and tokens.

Updated Feb 19, 2026
Search Tags:#react#tailwind#tokens#design-system#framer-motion#dark-ui
One-click install
npx skills add https://github.com/TheBlueBear02/drip-skills --skill linear-modern
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: linear-modern
Source: https://github.com/TheBlueBear02/drip-skills/tree/main/drip-skills/linear-modern
Command: npx skills add https://github.com/TheBlueBear02/drip-skills --skill linear-modern

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Linear Modern provides a complete, opinionated design language to build premium dark UIs for developer tooling, dashboards, and marketing pages, solving inconsistent aesthetics and slow iteration.

Core Features & Use Cases

  • Four-layer background system (gradient, noise, blobs, grid) to create depth without flat surfaces
  • Multi-layer shadows and ambient glow for tactile, glassy surfaces
  • Gradient text accents, expo-out motion, and precise transitions for a premium feel
  • Tokens for color, typography, borders, and motion, plus a responsive, asymmetric bento grid
  • Use cases include dashboards, developer tool UIs, and marketing pages that demand cinematic, high-fidelity aesthetics

Quick Start

Bootstrap a Linear Modern UI scaffold in your React project by applying the four-layer background, token system, and sample components.

Frequently Asked Questions about linear-modern

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

FAQPage Schema
How do I build a premium dark UI design system for a React dashboard?▼

Build a premium dark UI design system for a React dashboard by applying a four-layer background, multi-layer shadows, gradient borders, and token-driven typography. This approach creates a cinematic, high-fidelity aesthetic for developer tooling.

What's the best way to create depth in a dark mode React application without flat surfaces?▼

Create depth in a dark mode React application by implementing a four-layer background system featuring gradients, noise, blobs, and grids. Multi-layer shadows and ambient glow add tactile, glassy surfaces to prevent flat visuals.

Can I use Tailwind and Framer Motion to implement token-driven design tokens in React?▼

Yes, you can use Tailwind and Framer Motion to implement token-driven design tokens in React. This combination supports precise expo-out motion transitions, gradient text accents, and consistent color typography across your application.

Does this dark UI design system include a responsive layout grid for marketing pages?▼

Yes, the dark UI design system includes a responsive asymmetric bento grid for marketing pages. It uses token-driven borders and motion to deliver a consistent, high-fidelity layout for developer tools and marketing sites.

When should I use a cinematic dark UI with multi-layer shadows for developer tooling?▼

Use a cinematic dark UI with multi-layer shadows for developer tooling when your dashboards or marketing pages demand a premium aesthetic. It solves inconsistent visuals and slow iteration by providing a complete, opinionated design language.

Related Skills

Explore More Design & Creative Skills→
secondskysecondsky
204

aceternity-ui

Provide animated React components for Next.js applications with Tailwind CSS and Framer Motion.

Community
Advanced
Mohamed-ElkahefMohamed-Elkahef

ui-design

Generate self-contained single-file HTML UI prototypes with Tailwind CSS and Chart.js.

Community
Intermediate
Higashi-KotaHigashi-Kota

ui-component

Build accessible React UI components with design tokens and ARIA patterns.

Community
Advanced
suhwansuhwan

theme-system

Implement a three-tier token system enabling dark mode in Next.js and Tailwind apps.

Community
Advanced