Frontend & UI

Border Gradients

Feine Verlaufskanten für Karten, Panels und Navigationsleisten.

Worum es geht

Ein Skill für Oberflächendetails: dezente Verlaufsränder für Karten, Preis-Panels, Navigationsleisten, Modals, Buttons und Hero-Flächen, ganz ohne lautes Glühen.

Apply subtle gradient-border treatments for premium web surfaces. Use when cards, pricing panels, nav bars, modals, buttons, or hero surfaces need a refined edge highlight without a loud glow.
Aus der Upstream-SKILL.md

Warum das fürs Design zählt

  • Die Kante entscheidet, ob eine Fläche premium wirkt oder nach schlichtem Rahmenkasten aussieht.
  • Kodiert Geschmacksregeln, damit der Effekt dezent bleibt und nicht in Neon kippt.
  • Bringt eine Tailwind-Abkürzung mit und passt so in einen bestehenden Stack.

Was es abdeckt

  • Use when
  • Defaults
  • Simple CSS pattern
  • Masked pattern
  • Tailwind shortcut
  • Taste rules

So installierst du es

Border Gradients

  1. Klone das Repo.

    git clone https://github.com/MengTo/Skills
  2. Verweise Codex auf die Skill-Datei.

    agent-skills/web-design/css-border-gradient/SKILL.md
  3. Beschreibe dann das gewünschte UI. Codex folgt dem Skill.

So nutzt du es mit Codex

  1. Klone das Repo und verweise Codex auf diese Skill-Datei.

  2. Frag nach der Komponente. Der Skill liefert die Kantenbehandlung.

  3. Wähle je nach Fläche das einfache oder das maskierte Muster.

Jedes Plugin hier ist kostenlos, quelloffen und verlinkt auf seine echte Originalquelle.

Mehr auf der codex-design-Liste ↗

Nächster Schritt

Mit Open Design designen, ohne Setup

Installiere dieses Plugin selbst, oder leg mit Open Design eine ganze kuratierte Design-Ebene um Codex. Eigener Key, eigenes Ergebnis.