Verified:GitHub

design-taste-dark-luxe

Configure dark luxury UI design baselines for React or Next.js with Tailwind CSS.

Updated Aug 23, 2026

Search Tags:#react #tailwind css #ux design #ui design #dark mode #luxury aesthetics

One-click install

npx skills add https://github.com/Ashtoon95-R/paviments-catalunya --skill design-taste-dark-luxe-ashtoon95-r

Or copy as Structured Prompt for Agent▼

Please help me install this Agent Skill.
Skill: design-taste-dark-luxe
Source: https://github.com/Ashtoon95-R/paviments-catalunya/tree/main/taste-skill/dark-luxe
Command: npx skills add https://github.com/Ashtoon95-R/paviments-catalunya --skill design-taste-dark-luxe-ashtoon95-r

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires tailwindcss, react, next.js, and includes scripts (resource) and references (resource) and assets (resource) components.

What problem does it solve?

This Skill provides a framework for designing dark luxury interfaces with a focus on depth, texture, and controlled light, removing the need for neon or gamer aesthetics.

Core Features & Use Cases

Design Baseline Configuration: Allows setting design variance, motion intensity, and visual density to create a consistent and tailored user interface.
Architecture & Conventions: Defines best practices for dependency verification, interactivity, state management, and styling to ensure a cohesive and accessible design.
Typography & Color: Offers guidance on font pairing, color system creation, and visual hierarchy to maintain premium aesthetics.
Layout & Hierarchy: Ensures the hero reads as a complete scene and navigation fits cleanly at every breakpoint, using structured whitespace and content-driven breakpoints.
Materiality & Components: Provides rules for card usage, shadows, buttons, and other UI elements to reinforce hierarchy and avoid decoration.
States & Forms: Ensures loading, empty, error states, and forms are designed to provide a clear user experience.
Motion & Interaction: Specifies the use of slow fades, reveal masks, and weighted hover states for a cinematic and expensive feel.
Performance Guardrails: Encourages the use of GSAP, canvas, and WebGL sparingly and responsibly for optimal performance.
Technical Reference: Details the definitions and meanings of design variance, motion intensity, visual density, and other technical aspects.

Quick Start

To begin using the design-taste-dark-luxe skill, review the SKILL.md file and apply the baseline configuration settings to your project's design requirements.

Frequently Asked Questions about design-taste-dark-luxe

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

FAQPage Schema

How do I design dark luxury interfaces in React without relying on neon aesthetics?▼

Configure design variance, motion intensity, and visual density baselines to establish a consistent premium aesthetic, ensuring your Tailwind CSS and React project avoids gamer aesthetics in favor of atmospheric depth.

What typography and color guidelines work best for premium dark mode UI design?▼

Premium dark mode UI design utilizes specific guidance on font pairing and color system creation to maintain visual hierarchy, ensuring typography and colors reinforce a cohesive, atmospheric luxury feel.

Does this dark luxury design baseline require Next.js and Tailwind CSS?▼

Yes, this dark luxury design baseline requires Tailwind CSS and React or Next.js frameworks, with a preference for Server Components to ensure proper architecture and styling conventions.

How do I add cinematic motion and interactivity to dark UI components?▼

Add cinematic motion to dark UI components by specifying slow fades, reveal masks, and weighted hover states, using GSAP, canvas, and WebGL sparingly to maintain optimal performance.