art-deco

Restyle modern UIs into an Art Deco aesthetic with gold glows and crosshatched textures.

Updated Feb 19, 2026
One-click install
npx skills add https://github.com/TheBlueBear02/drip-skills --skill art-deco
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: art-deco
Source: https://github.com/TheBlueBear02/drip-skills/tree/main/drip-skills/art-deco
Command: npx skills add https://github.com/TheBlueBear02/drip-skills --skill art-deco

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Provides a complete, opinionated Art Deco UI language to transform generic interfaces into a luxury, architecturally disciplined experience by enforcing strict visual rules and tokens for color, typography, borders, and motion.

Core Features & Use Cases

  • Zero border-radius everywhere to preserve geometry; gold glows (not drop shadows) to simulate neon lighting; diagonal crosshatch texture to create depth on a near-black surface; rotated diamond icon containers and corner L-brackets as signature motifs; uppercase Marcellus headings with extreme tracking; Roman numerals for steps and pricing; sunburst hero motifs; a comprehensive token set for color, typography, borders, and motion; all available as a reusable React/Tailwind skill.
  • Suitable for luxury brands, galleries, and premium software interfaces seeking a cohesive, heritage-rich aesthetic; ideal for marketing sites, landing pages, dashboards, or editorial components that must convey refinement and timeless craftsmanship.

Quick Start

Begin by reading philosophy.md to internalize the Art Deco rules, then wire up fonts and the crosshatched texture as described, and implement components according to the included examples.

Frequently Asked Questions about art-deco

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

FAQPage Schema
How do I apply an Art Deco design system to a React and Tailwind UI?

Apply an Art Deco design system to a React and Tailwind UI by enforcing strict visual rules: zero border-radius geometry, metallic gold (#D4AF37) glows, and obsidian backgrounds. It provides reusable tokens and components to transform generic interfaces into a luxury aesthetic.

What is the best way to create a luxury UI with gold glows and zero border-radius?

The best way to create a luxury UI with gold glows and zero border-radius is using an opinionated design system that enforces these constraints automatically. It replaces standard drop shadows with neon-style gold lighting and applies diagonal crosshatch textures for depth.

Can I use Art Deco typography and crosshatch textures for a product dashboard?

Yes, you can use Art Deco typography and crosshatch textures for a product dashboard. The design system supports dashboards and editorial UIs by providing uppercase Marcellus headings, extreme tracking, Roman numerals for steps, and sunburst hero motifs.

Does this Art Deco UI skill enforce specific color and motion constraints?

Yes, this Art Deco UI skill enforces non-negotiable design constraints including an obsidian background, metallic gold (#D4AF37) accents, 300–500ms transitions, and decorative corner L-brackets to ensure a consistent, architecturally precise look.

When do I need an Art Deco aesthetic for a marketing site?

You need an Art Deco aesthetic for a marketing site when conveying heritage, refinement, and timeless craftsmanship. It suits luxury brands and galleries by applying signature motifs like rotated diamond icon containers and sunburst heroes.

Why do my Art Deco UI components look inconsistent across different pages?

Art Deco UI components look inconsistent when strict design tokens are not enforced. This skill solves that by providing a comprehensive token set for color, typography, borders, and motion, ensuring zero-radius geometry and uniform gold glows across all pages.