How to build a UI in the Neon style

:root {
  /* Neon style — extracted from neon.tech by taste-skill */
  --canvas: #000000;
  --surface: #131415;
  --text: #FFFFFF;
  --text-muted: #94979E;
  --accent: #34D59A;
  --border: #242628;
  --font-heading: Inter, Inter, system-ui, -apple-system, sans-serif;
  --font-body: Inter, Inter, system-ui, -apple-system, sans-serif;
  --font-mono: 'JetBrains Mono', 'JetBrains Mono', ui-monospace, monospace;
  --h1-size: 56px;
  --h1-tracking: -0.04em;
  --h1-weight: 400;
  --radius-button: 9999px;
  --radius-common: 4px;
  --shadow-common: rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, lab(100 -0.0000298023 0.0000119209 / 0.05) 0px 0px 0px 1px, rgba(0, 0, 0, 0) 0px 0px 0px 0px;
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --duration: 0.2s;
}

// tailwind.config.js — Neon style tokens (taste-skill)
module.exports = {
  theme: {
    extend: {
      colors: {
        canvas: "#000000",
        surface: "#131415",
        ink: "#FFFFFF",
        muted: "#94979E",
        accent: "#34D59A",
        line: "#242628",
      },
      fontFamily: {
        heading: ["Inter", 'Inter', 'system-ui', 'sans-serif'],
        sans: ["Inter", 'Inter', 'system-ui', 'sans-serif'],
        mono: ["JetBrains Mono", 'ui-monospace', 'monospace'],
      },
      fontSize: { display: ["56px", { letterSpacing: "-0.04em", fontWeight: "400" }] },
      borderRadius: { button: "9999px", card: "4px" },
      boxShadow: { brand: "rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, lab(100 -0.0000298023 0.0000119209 / 0.05) 0px 0px 0px 1px, rgba(0, 0, 0, 0) 0px 0px 0px 0px" },
      transitionTimingFunction: { brand: "cubic-bezier(0.4, 0, 0.2, 1)" },
    },
  },
};

---
name: neon-style
description: Build UI in the Neon visual style (Serverless Pitch-Black & Luminous Cyber-Mint Postgres). Use when the user asks for a Neon-like look.
---

# Neon Style — Quick Rules (source: neon.tech, extracted by taste-skill)

## Tokens
- canvasBg: #000000 — Primary Neon page canvas
- surfaceElevated: #131415 — Primary elevated card & bento surface
- surfaceSecondary: #CDDFD7 — Secondary interactive container / hover fill
- borderPrimary: #242628 — Primary structural divider (1px solid #242628)
- borderSecondary: #303236 — Secondary nested module or pill border
- textPrimary: #FFFFFF — Hero H1, section H2 & high-contrast foreground
- textMuted: #94979E — Lead paragraphs, descriptions & muted labels
- accentPrimary: #34D59A — Primary interactive CTA & brand highlight (9999px (Pill))
- accentSecondary: #34D59A — Secondary badge, syntax or telemetry highlight

## Typography
- Heading font: Inter; body: Inter; mono: JetBrains Mono
- Hero H1: 56px | line-height 63px (leading-[1.13]) | letter-spacing -2.24px (tracking-[-0.04em]) | weight 400 (font-[400]) | color #FFFFFF (text-white) | font Inter
- Section H2 (Primary): 64px | line-height 64px (leading-[1]) | letter-spacing -2.56px (tracking-[-0.04em]) | weight 400 (font-[400]) | color #000000 (text-black) | font Inter
- Section H2 (Secondary): 52px | line-height 58.5px (leading-[1.13]) | letter-spacing -2.08px (tracking-[-0.04em]) | weight 400 (font-[400]) | color #000000 (text-black) | font Inter
- Card / Feature H3: 28px | line-height 35px (leading-[1.25]) | letter-spacing -0.56px (tracking-[-0.02em]) | weight 400 (font-[400]) | color #000000 (text-black) | font Inter

## Components
- Primary button: height 36px, padding 0px 18px, radius 9999px, bg #FFFFFF, text #000000, 14px / 500
- Card: bg #131415, border 1px solid #242628

## Never
- NEVER substitute generic uncalibrated gray backgrounds for Neon’s exact #000000 canvas and #131415 surface pairing.
- NEVER replace Inter display typography or ignore its signature scale (56px / -0.04em (w400)).
- NEVER use thick opaque borders that clash with #242628 (1px solid #242628).
- NEVER deviate from the signature button geometry (9999px (Pill)) or introduce off-brand saturated gradients.
- NEVER use default browser monospace when rendering code or telemetry—always pair with JetBrains Mono.

Full 120-line spec: https://taste-skill.pages.dev/taste/neon/

npx taste-skill add neon