retro-futurism

Implements retro-futurism UI styling with CSS, SwiftUI, Flutter, React Native, and Jetpack Compose code examples.

3|Updated Jul 17, 2026
One-click install
npx skills add https://github.com/Javeria-Javaid/Alkhidmat_foundation_lahore --skill retro-futurism-javeria-javaid
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: retro-futurism
Source: https://github.com/Javeria-Javaid/Alkhidmat_foundation_lahore/tree/main/Users/Javeria/Desktop/Alkhidmat_foundation_lahore/.agents/skills/design-it/retro-futurism
Command: npx skills add https://github.com/Javeria-Javaid/Alkhidmat_foundation_lahore --skill retro-futurism-javeria-javaid

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Applying a consistent 1950s-60s retro-futurism (atompunk) aesthetic across web and mobile apps is hard because each framework handles asymmetric corners, chrome gradients, and hard shadows differently. This Skill provides ready-to-adapt styling guidance and code for each platform. ## Core Features & Use Cases - Visual Design System: Defines the retro-futurism palette (Turquoise, Atomic Tangerine, Mint Green, Chrome), typography (Futura, geometric sans-serifs), and motifs (starbursts, atoms, aerodynamic curves). - Cross-Platform Code Examples: Provides implementation snippets for CSS, SwiftUI, Flutter, React Native, and Jetpack Compose covering asymmetric corner radii, chrome gradient borders, and offset hard shadows. - Use Case: A designer asks for a landing page with a 1950s space-age look; use this Skill to generate a cream-background page with a turquoise swoop header, atompunk cards with sweeping corners, and starburst accents. ## Quick Start Apply the retro-futurism style to my app's card component using the atompunk color palette and aerodynamic asymmetric corners.

Frequently Asked Questions about retro-futurism

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

FAQPage Schema
How do I create a retro-futurism UI design for my website?▼

Use a cream background with turquoise and atomic tangerine accents, Futura typography, and sweeping curved shapes. The Skill provides CSS for Googie-style swoop backgrounds, atompunk cards with asymmetric border-radius, and starburst clip-path motifs.

How to make asymmetric rounded corners in Flutter and React Native?▼

Flutter supports asymmetric corners natively via BorderRadius.only with different Radius values per corner. React Native uses independent props like borderTopLeftRadius and borderBottomRightRadius to achieve the aerodynamic teardrop shape.

How do I create a chrome gradient border in Jetpack Compose?▼

Jetpack Compose supports gradient borders natively through Modifier.border with a Brush, such as Brush.verticalGradient of light gray, white, and gray. This makes metallic chrome effects easier than in Flutter or React Native, which need custom painters or solid fallbacks.

What colors and fonts define the retro-futurism aesthetic?▼

The palette uses Turquoise (#40E0D0), Atomic Tangerine (#FF9966), and Mint Green (#98FF98) paired with silver chrome and deep space black. Typography relies on Futura, Century Gothic, or clean mid-century geometric sans-serifs.

When should I not use the retro-futurism style?▼

Avoid it when you want a dirty, distressed, or grungy look, since retro-futurism is clean, optimistic, and shiny. It is also a styling reference only and does not replace accessibility testing, contrast validation, or responsive design review.