Packet Sniffer Dev
Apply this design skill
Read the SKILL.md at https://joincommons.cc/api/items/packet-sniffer-dev and apply its design language to my project
Designed by humans. Applied by agents.
Design Language
All colors extracted from the exhibit's CSS custom properties. ### Surface Colors | Token | Value | Usage | |---|---|---| | `--capture-bg` | `oklch(0.12 0.005 260)` | Page/app background, deepest surface | | `--pane-bg` | `oklch(0.15 0.005 260)` | Pane interiors (packet list, protocol detail, hex dump) | | `--pane-border` | `oklch(0.25 0.01 260)` | All pane and element borders | | `--filter-bar` | `oklch(0.20 0.01 260)` | Filter input background | | `--selected-row` | `oklch(0.22 0.05 220)` | Selected packet row highlight | | `--menu-bg` | `oklch(0.17 0.005 260)` | Menu bar, table header, status bar background | | `--menu-border` | `oklch(0.28 0.01 260)` | Menu bar and status bar borders | | `--toolbar-bg` | `oklch(0.14 0.005 260)` | Toolbar strip background | | Title bar bg | `oklch(0.10 0.005 260)` | Darkest element, top of window | ### Text Colors | Token | Value | Usage | |---|---|---| | `--text-primary` | `oklch(0.88 0.02 220)` | Primary body text, selected row text | | `--text-muted` | `oklch(0.50 0.02 220)` | Labels, metadata, column headers, status text | ### Protocol Colors (Foreground / Background Pairs) Each protocol category uses a distinct hue. Foreground is bright (L~0.85), background is dark-tinted (L~0.18). | Protocol | Foreground | Background | Hue Angle | |---|---|---|---| | CAREER | `oklch(0.85 0.05 200)` | `oklch(0.18 0.02 200)` | 200 (cool blue) | | CTF | `oklch(0.85 0.08 150)` | `oklch(0.18 0.02 150)` | 150 (green) | | OSS | `oklch(0.85 0.08 60)` | `oklch(0.18 0.02 60)` | 60 (amber) | | EDU | `oklch(0.85 0.08 300)` | `oklch(0.18 0.02 300)` | 300 (purple) | | SPEAK | `oklch(0.85 0.06 30)` | `oklch(0.18 0.02 30)` | 30 (orange) | ### Hex Dump Colors | Token | Value | Usage | |---|---|---| | `--hex-offset` | `oklch(0.55 0.10 200)` | Offset column (teal), also proto field keys | | `--hex-data` | `oklch(0.75 0.03 220)` | Hex byte values | | `--hex-ascii` | `oklch(0.85 0.02 60)` | ASCII representation column | ### Accent / Interactive | Usage | Value | |---|---| | Filter focus border | `oklch(0.55 0.10 200)` | | Filter active state border | `oklch(0.60 0.12 150)` | | Filter active bg | `oklch(0.22 0.02 150)` | | Apply button bg | `oklch(0.35 0.08 150)` | | Apply button border | `oklch(0.45 0.10 150)` | | Apply button text | `oklch(0.90 0.04 150)` | | Status indicator (active) | `oklch(0.65 0.12 150)` | | Status indicator (stopped) | `oklch(0.55 0.10 25)` | | Bookmark marker | `oklch(0.70 0.10 60)` | ---
Agent instructions (SKILL.md)(advanced)
Design Skill
**Audience**: Security engineers, pentesters, detection engineers, CTF competitors, and infosec professionals who live in Wireshark, terminal emulators, and hex editors. They read hex dumps recreationally and find beauty in protocol headers. **Use cases**: Developer/hacker portfolios, security researcher CVs, CTF team pages, infosec conference speaker bios, open-source tool landing pages. **Brand personality**: Clinical precision meets hacker culture. The entire UI is a pixel-perfect Wireshark impersonation — title bar, menu bar, toolbar, display filter, three-pane split (packet list / protocol detail / hex dump), and status bar. Career events are literal network packets. The ONE memorable thing: **your resume is a pcap file** — every job, talk, cert, and CTF result is a captured packet you can click, inspect, and decode. ---
