Design

---
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
<article class="skill-card" data-role="plan">
  <span class="card-orb card-orb-top"></span>
  <span class="card-orb card-orb-bottom"></span>
  <div class="card-content">
    <!-- card contents -->
  </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.

| Edge    | Direction        | Keyframe         | Delay    |
|---------|------------------|------------------|----------|
| top     | left → right     | `btn-border-top`    | 0s       |
| right   | top → bottom     | `btn-border-right`  | 0.375s   |
| bottom  | right → left     | `btn-border-bottom` | 0.75s    |
| left    | bottom → top     | `btn-border-left`   | 1.125s   |

### 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
<button class="btn">
  <span></span><span></span><span></span><span></span>
  Click me
</button>

<a href="#" class="btn btn-primary">
  <span></span><span></span><span></span><span></span>
  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.