Is the generated UI accessible?

While retro styles favor high contrast, the skill provides specific guidelines for maintaining ARIA standards and motion preferences within the aesthetic.

Does it support CRT effects?

Yes, it includes recipes for scanline overlays, screen curvature, and phosphorescent neon glow effects using pure CSS for optimal performance.

Can I use this with modern frameworks like React or Tailwind?

Yes, the skill includes specific implementation patterns for Tailwind CSS, HTMX, and standard CSS-in-JS libraries while maintaining the retro aesthetic.

How does it handle responsiveness?

It utilizes integer-based scaling and image-rendering properties to ensure the retro look remains sharp and consistent across different screen sizes without blurring.

Does this skill provide actual pixel art assets?

It focuses on CSS-driven styling and layouts that simulate pixel art aesthetics, though it can guide you in using sprite sheets and pixelated images effectively.

Retro Pixel UI Design

Name: Retro Pixel UI Design
Author: biodoia

bybiodoia

0•

デザインツール

Architects distinctive retro-styled, 8-bit/16-bit, and cyberpunk neon user interfaces using specialized CSS effects and design systems.

Retro Pixel UI is a specialized design skill for Claude Code that transforms generic frontend requests into nostalgia-driven, high-fidelity visual experiences. It provides comprehensive patterns for classic gaming aesthetics, including pixel-perfect grid systems, CRT scanline effects, neon glow typography, and iconic RPG-style components. Whether you are building a boutique portfolio, a dashboard with a terminal vibe, or a browser-based game, this skill ensures consistent application of limited palettes and hardware-inspired constraints for an authentic retro-gaming feel.

主な機能

01Pixel-perfect CSS layouts with integer scaling and sharp rendering

02Advanced visual effects including CRT scanlines, chromatic aberration, and screen curvature

030 GitHub stars

04Integration guides for modern stacks like Tailwind CSS and HTMX

05Pre-configured palettes for NES, Game Boy, and neon-cyberpunk aesthetics

06Modular component library for RPG dialog boxes, HP bars, and terminal UIs

ユースケース

01Designing a dashboard with a high-density cyberpunk or terminal aesthetic

02Building nostalgic, pixel-art inspired landing pages or product sites

03Creating UI for web-based games and interactive retro experiences

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add biodoia/biodoia-skills-marketplace retro-pixel-ui

For use in Claude.ai and ChatGPT

主な機能

01Pixel-perfect CSS layouts with integer scaling and sharp rendering

02Advanced visual effects including CRT scanlines, chromatic aberration, and screen curvature

030 GitHub stars

04Integration guides for modern stacks like Tailwind CSS and HTMX

05Pre-configured palettes for NES, Game Boy, and neon-cyberpunk aesthetics

06Modular component library for RPG dialog boxes, HP bars, and terminal UIs

ユースケース

01Designing a dashboard with a high-density cyberpunk or terminal aesthetic

02Building nostalgic, pixel-art inspired landing pages or product sites

03Creating UI for web-based games and interactive retro experiences

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add biodoia/biodoia-skills-marketplace retro-pixel-ui

For use in Claude.ai and ChatGPT