skills.rest
TheBlueBear02
TheBlueBear02COMMUNITY
Explore all skills by this author →
GitHub

retro-terminal

Implement a terminal-inspired UI design system with tokens and typography rules.

Updated Feb 19, 2026
Search Tags:#terminal#tailwind#tokens#design-system#glow#monospace
One-click install
npx skills add https://github.com/TheBlueBear02/drip-skills --skill retro-terminal
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: retro-terminal
Source: https://github.com/TheBlueBear02/drip-skills/tree/main/drip-skills/retro-terminal
Command: npx skills add https://github.com/TheBlueBear02/drip-skills --skill retro-terminal

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This design framework provides a cohesive, terminal-inspired visual language that helps teams escape generic UI patterns by delivering a fully specified, constrained aesthetic—complete with tokens, typography, and behavior rules for React and Tailwind projects.

Core Features & Use Cases

  • A complete design system built around a phosphor-green palette, 0px borders, CRT glow, and a monospace grid, with tokens for colors, typography, spacing, borders, shadows, and motion.
  • Clear setup and usage guidance, including philosophy, token docs, component references, and example pages, so AI agents can reason about and extend the design language in a consistent world.
  • Real-world example pages (LandingPage.jsx) and a rigorous “What to verify” checklist to ensure the terminal aesthetic is preserved across implementations.

Quick Start

Create a sample page that boots a terminal-styled UI using the phosphor-green palette and a blinking heading.

Frequently Asked Questions about retro-terminal

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

FAQPage Schema
How do I build a retro terminal UI design system in React and Tailwind?▼

To build a retro terminal UI design system, apply a token-based framework enforcing 0px border radius, JetBrains Mono typography, and CRT glow using predefined tokens in your globals.css.

What design tokens are needed for a CRT terminal aesthetic?▼

A CRT terminal aesthetic requires design tokens for a phosphor-green color palette, monospace typography, 0px borders, shadows, and motion. These tokens guarantee visual consistency across dense layouts.

Can AI agents generate terminal-style interfaces consistently?▼

Yes, AI agents can generate terminal-style interfaces consistently by reasoning over documented philosophy, token references, and component rules, extending the monochrome aesthetic without breaking visual constraints.

Does this retro terminal design framework work for marketing pages and dashboards?▼

Yes, the retro terminal design framework works for marketing pages and dashboards, providing a cohesive visual language with strict layout rules and a rigorous verification checklist to preserve the aesthetic.

What are the limitations of using a strict monospace terminal design system?▼

Limitations of a strict monospace terminal design system include visual density constraints and a highly constrained aesthetic, meaning it suits specific retro themes but may not fit generic, highly illustrated UI patterns.

Related Skills

Explore More Design & Creative Skills→
zaid-khan-codezaid-khan-code
3

shadcn-setup

Configure shadcn/ui and Tailwind CSS v4 for Next.js and React projects.

Community
Advanced
TheBlueBear02TheBlueBear02

clay-premium

Enforce four-layer clay shadows and convex/concave interactions in web UIs.

Community
Advanced
ReshzyReshzy

tailwindcss-development

Fix Tailwind utility classes in Blade, JSX, or Vue templates for responsive layouts and dark mode support.

Community
Intermediate
270aldo270aldo

ngx-design-system

Design NGX UI components and tokens for dashboards and web interfaces.

Community
Basic