skills.rest
surfingalien
surfingalienCOMMUNITY
Explore all skills by this author →
GitHub

tui-designer

Design and implement retro terminal UIs with CRT effects across React, SwiftUI, and CSS.

1|Updated May 6, 2026
Search Tags:#cyberpunk#tuimorphic#terminal ui#retro design#crt effect#neon glow#swiftui metal shader
One-click install
npx skills add https://github.com/surfingalien/FinSurfing --skill tui-designer-surfingalien
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: tui-designer
Source: https://github.com/surfingalien/FinSurfing/tree/main/.claude/skills/tui-designer
Command: npx skills add https://github.com/surfingalien/FinSurfing --skill tui-designer-surfingalien

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) and references (resource) components.

What problem does it solve? Building authentic retro, cyberpunk, or hacker-style terminal interfaces requires deep knowledge of CRT effects, color palettes, typography, and platform-specific shader techniques that are scattered across many sources. ## Core Features & Use Cases - Multi-platform implementations: Ready-to-use code for React with Tuimorphic components, SwiftUI with Metal shaders, and pure CSS/WebGL effects including scanlines, neon glow, barrel distortion, and flicker. - Design system references: Complete color palettes (phosphor green, cyberpunk neon, amber CRT, synthwave), box-drawing typography, and terminal copywriting conventions with message prefixes and vocabulary. - Pitfall guidance: Documents real failure modes including terminal emulator compatibility, UTF-8 input handling, performance jank, and accessibility gaps with concrete fixes. - Use Case: When building a hacker-themed dashboard in React, apply Tuimorphic components with a phosphor green tint, add CSS scanlines and neon glow, and use the copywriting guide for authentic terminal-style status messages. ## Quick Start Use the tui-designer skill to build a retro CRT-styled terminal dashboard in React with phosphor green colors, scanlines, and neon glow effects.

Frequently Asked Questions about tui-designer

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I create a CRT scanline effect in CSS?▼

Use a repeating-linear-gradient on a pseudo-element overlay with alternating 1px dark and transparent lines. Set pointer-events to none so the overlay does not block interaction, and keep opacity around 10-15% so text stays readable.

How do I add Metal shader CRT effects in SwiftUI?▼

iOS 17+ supports Metal shaders via the .layerEffect() modifier with a stitchable shader function. The shader applies barrel distortion, scanlines via sin(position.y), chromatic aberration by offsetting RGB channel sampling, and time-based flicker.

What is Tuimorphic and how do I use it in React?▼

Tuimorphic is a React component library with 37 terminal-styled accessible components. Install it via npm, import components like Button, Card, and Input, then apply themes with classes like theme-dark and tint-green on a parent element.

Why do box-drawing characters break in some terminals?▼

Older terminals like VT100-only SSH sessions and legacy PowerShell lack Unicode support, rendering characters like ─ and ┌ as gibberish. Detect the TERM environment variable and fall back to ASCII characters like +, -, and | when needed.

How do I make neon glow effects accessible?▼

Limit text-shadow layers to 4-5 to preserve legibility, maintain at least a 4.5:1 contrast ratio, and respect prefers-reduced-motion by disabling flicker and glow animations. Always provide visible focus indicators for keyboard navigation.

Why does my terminal UI flicker animation cause jank?▼

JavaScript setInterval-driven opacity changes block the main thread and cause stutter. Use CSS @keyframes animations instead since they are GPU-accelerated, and debounce resize handlers that recompute gradient overlays.

Related Skills

Explore More Design & Creative Skills→
MoizIbnYousafMoizIbnYousaf
31

visual-style

Define a persistent visual brand identity and write it to brand/creative-kit.md for consistent image generation.

Community
Intermediate
daltoniamdaltoniam
15

mcp-benchmark

Run live tool-calling sequences to benchmark Switchboard MCP server reliability.

Community
Advanced
TimelessPTimelessP
2

web-game-optimization

Optimize HTML5 canvas and WebGL games for performance, accessibility, and cross-device compatibility.

Community
Advanced
ckorhonenckorhonen
12

tui-designer

Design retro/cyberpunk terminal UIs with React Tuimorphic, SwiftUI Metal shaders, and CSS.

Community
Advanced