skills.rest
Emasoft
EmasoftCOMMUNITY
Explore all skills by this author →
Website𝕏@fmuaddibGitHub

amw-tui-designer

Applies terminal and CRT aesthetics to web UIs using CSS recipes and palettes.

Updated Jul 8, 2026
Search Tags:#css#web design#cyberpunk#terminal ui#scanlines#crt effect#neon glow
One-click install
npx skills add https://github.com/Emasoft/ai-maestro-webdesign --skill amw-tui-designer-emasoft
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: amw-tui-designer
Source: https://github.com/Emasoft/ai-maestro-webdesign/tree/main/skills/amw-tui-designer
Command: npx skills add https://github.com/Emasoft/ai-maestro-webdesign --skill amw-tui-designer-emasoft

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires tuimorphic, and includes references (resource) components.

What problem does it solve? Designing a deliberate retro terminal or CRT look for a web interface requires getting many details right at once: authentic phosphor or amber palettes, monospace and box-drawing typography, scanline and glow effects, and a terse terminal copy voice, all without breaking accessibility or performance. This Skill packages those recipes so the aesthetic is applied consistently instead of improvised. ## Core Features & Use Cases - Three signature palettes: Phosphor green, cyberpunk neon (cyan + magenta), and amber CRT, each with hex tables and pre-checked WCAG contrast ratios. - CSS CRT effect recipes: Scanline overlays, neon glow via text-shadow, CRT curvature, and flicker animations, with tuning limits and performance guidance. - Terminal copy voice and typography: Case rules, [SYS]/[ERR] message prefixes, terminal verb vocabulary, and box-drawing character guidance. - Tuimorphic React integration: Setup and theming for the 37-component Tuimorphic terminal UI library. - Use Case: A user asks for a cyberpunk terminal landing page; the Skill supplies the cyan/magenta palette, neon glow CSS, uppercase copy voice, and accessibility gates (reduced-motion fallbacks, focus indicators) so the result passes WCAG AA. ## Quick Start Ask the AI to design a phosphor-green terminal-style page with scanlines and neon glow for your web app.

Frequently Asked Questions about amw-tui-designer

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

FAQPage Schema
How do I add a CRT scanline effect to a website with CSS?▼

Use a repeating-linear-gradient on an ::after pseudo-element positioned over the container, with stripe alpha between 0.10 and 0.18 and a 2px period. Set pointer-events: none so the overlay never blocks clicks, and disable it under prefers-reduced-motion.

How do I create neon glow text in CSS?▼

Stack up to four text-shadow layers: a white inner core at 5-10px followed by outer layers in the accent color up to 20px for body text or 40px for headings. More than four layers blurs the text core and hurts mobile performance.

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

Tuimorphic is an MIT-licensed React library providing 37 pre-styled terminal components such as Button, Card, Input, and TreeView. Install it with npm install tuimorphic, then wrap your app in a div with theme-dark and a tint class like tint-green or tint-yellow.

Does CRT flicker animation cause accessibility problems?▼

Yes, flicker can trigger motion sickness and photosensitive epilepsy, so a prefers-reduced-motion media query that disables flicker, scanlines, and glow is mandatory. Flicker must also be CSS @keyframes only, never JavaScript setInterval, to avoid main-thread jank.

When should I not use a terminal or CRT aesthetic?▼

Avoid it for generic dark themes, HTML email, native terminal apps, and iOS or SwiftUI surfaces, which are out of scope. CRT curvature should never be applied to forms or data tables because the distortion makes layouts look broken.

Related Skills

Explore More Design & Creative Skills→
jimiryquaijimiryquai

teach-impeccable

Analyze codebase and branding assets to write design context to .impeccable.md.

Community
Intermediate
patrick-falveypatrick-falvey

design-system

Generate design systems, wireframes, and landing pages from product requirements.

Community
Advanced
panaversitypanaversity

ux-evaluator

Evaluates UI components on Position, Visual Weight, and Spacing UX heuristics.

Official
Advanced
hoainam183hoainam183

industrial-brutalist-ui

Create brutalist industrial telemetry UIs with rigid grids and CRT effects.

Community
Advanced