Design

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)

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

<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

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.

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

<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 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:

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 @ 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:

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

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

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.