How to build a UI in the Trigger.dev style

:root {
  /* Trigger.dev style — extracted from trigger.dev by taste-skill */
  --canvas: #121317;
  --surface: #15171A;
  --text: #D7D9DD;
  --text-muted: #878C99;
  --accent: #A8FF53;
  --border: #1C1E21;
  --font-heading: Satoshi-Variable, Inter, system-ui, -apple-system, sans-serif;
  --font-body: 'Inter / Satoshi', Inter, system-ui, -apple-system, sans-serif;
  --font-mono: 'Geist Mono', 'JetBrains Mono', ui-monospace, monospace;
  --h1-size: 60px;
  --h1-tracking: 0em;
  --h1-weight: 600;
  --radius-button: 4px;
  --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, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.05) 0px 1px 2px 0px;
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --duration: 0.15s;
}

// tailwind.config.js — Trigger.dev style tokens (taste-skill)
module.exports = {
  theme: {
    extend: {
      colors: {
        canvas: "#121317",
        surface: "#15171A",
        ink: "#D7D9DD",
        muted: "#878C99",
        accent: "#A8FF53",
        line: "#1C1E21",
      },
      fontFamily: {
        heading: ["Satoshi-Variable", 'Inter', 'system-ui', 'sans-serif'],
        sans: ["Inter / Satoshi", 'Inter', 'system-ui', 'sans-serif'],
        mono: ["Geist Mono", 'ui-monospace', 'monospace'],
      },
      fontSize: { display: ["60px", { letterSpacing: "0em", fontWeight: "600" }] },
      borderRadius: { button: "4px", 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, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.05) 0px 1px 2px 0px" },
      transitionTimingFunction: { brand: "cubic-bezier(0.4, 0, 0.2, 1)" },
    },
  },
};

---
name: trigger-style
description: Build UI in the Trigger.dev visual style (Industrial Dark Slate & Electric Acid-Lime Telemetry). Use when the user asks for a Trigger.dev-like look.
---

# Trigger.dev Style — Quick Rules (source: trigger.dev, extracted by taste-skill)

## Tokens
- canvasBg: #121317 — Primary Trigger.dev page canvas
- surfaceElevated: #15171A — Primary elevated card & bento surface
- surfaceSecondary: #15171A — Secondary interactive container / hover fill
- borderPrimary: #1C1E21 — Primary structural divider (1px solid #1C1E21)
- borderSecondary: #3B3E45 — Secondary nested module or pill border
- textPrimary: #D7D9DD — Hero H1, section H2 & high-contrast foreground
- textMuted: #878C99 — Lead paragraphs, descriptions & muted labels
- accentPrimary: #A8FF53 — Primary interactive CTA & brand highlight (4px)
- accentSecondary: #A8FF53 — Secondary badge, syntax or telemetry highlight

## Typography
- Heading font: Satoshi-Variable; body: Inter / Satoshi; mono: Geist Mono
- Hero H1: 60px | line-height 60px (leading-[1]) | letter-spacing 0px (tracking-[0em]) | weight 600 (font-[600]) | color #E8E9EC (text-[#E8E9EC]) | font Satoshi-Variable
- Section H2 (Primary): 30px | line-height 36px (leading-[1.2]) | letter-spacing 0px (tracking-[0em]) | weight 600 (font-[600]) | color #D7D9DD (text-[#D7D9DD]) | font Satoshi-Variable
- Card / Feature H3: 36px | line-height 40px (leading-[1.11]) | letter-spacing 0px (tracking-[0em]) | weight 600 (font-[600]) | color #878C99 (text-[#878C99]) | font Satoshi-Variable
- Body Copy (Paragraph): 18px | line-height 28px (leading-[1.56]) | letter-spacing 0px (tracking-[0em]) | weight 400 (font-[400]) | color #B5B8C0 (text-[#B5B8C0]) | font Geist

## Components
- Primary button: height 40px, padding 0px 12px, radius 4px, bg #212327, text #D7D9DD, 16px / 400
- Card: bg #15171A, border 1px solid #1C1E21, radius 4px, padding 0px 0px

## Never
- NEVER substitute generic uncalibrated gray backgrounds for Trigger.dev’s exact #121317 canvas and #15171A surface pairing.
- NEVER replace Satoshi-Variable display typography or ignore its signature scale (60px / 1.0 (w600)).
- NEVER use thick opaque borders that clash with #1C1E21 (1px solid #1C1E21).
- NEVER deviate from the signature button geometry (4px) or introduce off-brand saturated gradients.
- NEVER use default browser monospace when rendering code or telemetry—always pair with Geist Mono.

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

npx taste-skill add trigger