git:20260824.dfd64f3 to git:20260826.f28e6ab

31 added, 0 removed. Audit B to B.

---

title: Design

id: custom-design

role: custom

category: design-system

platform: universal

description: "UI/UX design system — skewed glass cards, neon border-trace buttons, translucent iOS aesthetic with per-category color gradients."

---

# Design — Skewed Glass + Neon Border System

## Overview

A unified design system combining:

1. **Skewed glass cards** — translucent panels with floating orbs and per-category color gradients

2. **Neon border-trace buttons** — animated border lines that chase clockwise, with glow on hover

Both systems use the same accent token `#0AF700` for consistency.

---

## Component 1: Skewed Glass Cards

### Architecture

```

.skill-card ← relative wrapper, no padding

::before ← skewed solid gradient (z:0)

::after ← skewed blurred glow (z:0, opacity:0.5)

.card-orb-top ← floating glass sphere (top-left)

.card-orb-bottom ← floating glass sphere (bottom-right)

.card-content ← frosted glass content panel (z:2)

```

### Color Tokens (per category)

| Category | Gradient |

|------------|---------------------------------------------|

| plan | `linear-gradient(315deg, #0AF700, #023A00)` |

| build | `linear-gradient(315deg, #ABFFA7, #07AE00)` |

| compact | `linear-gradient(315deg, #8FBA92, #14301A)` |

| capability | `linear-gradient(315deg, #00D237, #023A00)` |

| sub | `linear-gradient(315deg, #56FFC0, #07AE00)` |

| deep | `linear-gradient(315deg, #9BFF5A, #023A00)` |

| micro | `linear-gradient(315deg, #4DD8FF, #07AE00)` |

| custom | `linear-gradient(315deg, #FFB347, #FF6B00)` |

### Interaction States

- **Default**: skewed 12deg, orbs hidden, content padding tight

- **Hover**: skew 0deg, panels expand, orbs fade in + grow, content padding increases

- **Active**: `scale(0.97)` on content panel

- **Reduced motion**: all transitions and animations disabled

### Content Panel

- `backdrop-filter: blur(16px) saturate(1.3)`

- `background: rgba(10, 18, 11, 0.55)`

- `border: 1px solid rgba(10, 247, 0, 0.08)`

- `border-radius: 8px`

### Usage

```html

</div>

</article>

```

---

## Component 2: Neon Border-Trace Buttons

### Architecture

```

.btn ← relative, overflow hidden, no border

span:nth-child(1) ← top border line (left → right)

span:nth-child(2) ← right border line (top → bottom)

span:nth-child(3) ← bottom border line (right → left)

span:nth-child(4) ← left border line (bottom → top)

```

### Token

| Token | Value |

|--------------------|------------------------------------|

| accent-bright | `#0AF700` |

| btn-border-speed | `1.5s linear infinite` |

| btn-glow-hover | `0 0 5px, 0 0 20px, 0 0 40px` |

### Border Animation

Four `<span>` elements positioned absolutely, each rendering one edge as a 1.5px gradient line. They animate sequentially with 0.375s delay offsets, tracing clockwise around the button perimeter.

|---------|------------------|------------------|----------|

| top | left → right | `btn-border-top` | 0s |

### Interaction States

- **Default**: transparent bg, neon-green text, border traces animate

- **Hover**: bg fills `#0AF700`, text inverts to `#010502`, triple-layer box-shadow glow, `-webkit-box-reflect` below

- **Active**: `scale(0.97)`

- **Reduced motion**: `span { animation: none; }`

### Usage

```html

Click me

</button>

Download

</a>

```

Every `.btn` requires exactly 4 empty `<span>` children for the border-trace animation. Content goes after the spans as normal text.

---

## How to use?

### 1. Download

Go to the [AGENT KD SKILL gallery](https://ctaxnagomi.github.io/agent-kd-skill/) and find this skill card. Click **Download** to save the SKILL.md file to your computer.

### 2. Install

Copy the downloaded SKILL.md into your agent's skills directory:

| Agent | Path |

|-------|------|

| **opencode** | ~/.config/opencode/skills/<skill-name>/SKILL.md |

| **Claude Code** | ~/.claude/skills/<skill-name>/SKILL.md |

| **Codex CLI** | ~/.codex/skills/<skill-name>/SKILL.md |

| **Cursor** | ~/.cursor/skills/<skill-name>/SKILL.md |

| **Gemini CLI** | ~/.gemini/skills/<skill-name>/SKILL.md |

Example for opencode:

`ash

mkdir -p ~/.config/opencode/skills/<skill-name>

cp SKILL.md ~/.config/opencode/skills/<skill-name>/SKILL.md

### 3. Use

Restart your agent session. The skill will auto-load based on its description. You can also invoke it explicitly by typing @<skill-name> in your agent.

### 4. Verify

Ask your agent something related to the skill's purpose. If it responds using the skill's instructions, you're all set.

+ ---

+ ## Standard Workflow: Mobile Input Zoom Fix

+ ### Problem

+ On iOS/Android, tapping an `<input>`, `<select>`, or `<textarea>` with `font-size < 16px` triggers automatic viewport zoom, breaking fixed layouts.

+ ### Fix (apply to every project)

+ **1. Viewport meta tag** — add `maximum-scale=1`:

+ ```html

+ <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1">

+ ```

+ **2. CSS rule** — enforce 16px minimum on all form elements:

+ ```css

+ input, select, textarea, button {

+ font-size: 16px;

+ }

+ ```

+ Place this early in your stylesheet (after reset, before component styles).

+ ### Why both?

+ - `maximum-scale=1` blocks the zoom gesture at the browser level

+ - `font-size: 16px` prevents the zoom trigger at the CSS level (iOS Safari ignores `maximum-scale` on some versions)

+ - Together they cover all browsers and devices

+ ### Gotcha

+ Do NOT use `touch-action: manipulation` alone — it disables double-tap zoom but does not prevent input zoom on all devices.