skills.rest
ckorhonen
ckorhonenCOMMUNITY
Explore all skills by this author →
Website𝕏@ckorhonenGitHub

tui-designer

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

12|Updated Dec 13, 2025
Search Tags:#design#css#swiftui#terminal-ui#retro#tuimorphic
One-click install
npx skills add https://github.com/ckorhonen/claude-skills --skill tui-designer
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: tui-designer
Source: https://github.com/ckorhonen/claude-skills/tree/main/skills/tui-designer
Command: npx skills add https://github.com/ckorhonen/claude-skills --skill tui-designer

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Designing authentic retro/cyberpunk terminal UIs across React, SwiftUI, and CSS can be time-consuming and inconsistent without a cohesive pattern and guidance.

Core Features & Use Cases

  • Implement Tuimorphic-based terminal UIs in React with Tuimorphic components.
  • Apply SwiftUI with Metal shaders to produce CRT, neon glow, scanlines.
  • Use CSS techniques to add neon text, CRT curvature, and motion effects across web apps.
  • Use cases include building developer dashboards, admin terminals, or design prototypes with cyberpunk aesthetics.

Quick Start

Design a neon-green terminal UI with CRT scanlines using Tuimorphic, SwiftUI, and CSS.

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 retro cyberpunk terminal UI with CRT scanlines and neon glow?▼

This skill implements retro cyberpunk terminal UIs by combining React Tuimorphic components, SwiftUI Metal shaders, and CSS techniques to generate neon CRT effects, scanlines, and phosphor-green aesthetics consistently across platforms.

Can I use SwiftUI Metal shaders to build neon hacker-style interfaces for iOS?▼

Yes, you can apply SwiftUI with Metal shaders to produce authentic CRT effects, neon glow, and scanlines, enabling the creation of retro-futuristic hacker-style interfaces natively within your iOS projects.

What's the best way to apply consistent terminal aesthetics across web and mobile apps?▼

The best way to apply consistent terminal aesthetics is to integrate Tuimorphic React components for web, SwiftUI with Metal shaders for mobile, and CSS techniques to ensure cohesive retro-futuristic styling across different platforms.

Do I need React Tuimorphic to design terminal-inspired admin dashboards?▼

Using React Tuimorphic is the primary method provided for building terminal-inspired developer dashboards and admin terminals, supplying the specific components needed to achieve the cyberpunk aesthetic in web applications.

How does CSS contribute to the CRT curvature and motion effects in terminal UIs?▼

CSS contributes to terminal UIs by providing specific techniques to add neon text, CRT curvature, and motion effects, complementing the React Tuimorphic components and SwiftUI Metal shaders for a complete retro aesthetic.

Related Skills

Explore More Design & Creative Skills→
jamesrochabrunjamesrochabrun
194

swiftui-animation

Implement SwiftUI animations, transitions, matchedGeometryEffect, and Metal shaders.

Community
Advanced
danielorzeata83-a11ydanielorzeata83-a11y

frontend-design

Generates React components styled to match specified aesthetic directions such as retro-futuristic or maximalist.

Community
Advanced
mouratomourato

swiftui-animation

Implement advanced SwiftUI animations with transitions, matched geometry effects, and Metal shaders.

Community
Advanced
emilyLi2020emilyLi2020
2

Expo UI SwiftUI

Integrate native iOS SwiftUI views into Expo SDK 55 projects.

Community
Intermediate