skills.rest
Javeria-Javaid
Javeria-JavaidCOMMUNITY
Explore all skills by this author →
GitHub

cyber-y2k

Implements Cyber Y2K holographic and glitch aesthetics across web and mobile UI frameworks.

3|Updated Jul 17, 2026
Search Tags:#swiftui#flutter#ui styling#css animation#glitch effect#y2k#holographic gradient
One-click install
npx skills add https://github.com/Javeria-Javaid/Alkhidmat_foundation_lahore --skill cyber-y2k-javeria-javaid
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: cyber-y2k
Source: https://github.com/Javeria-Javaid/Alkhidmat_foundation_lahore/tree/main/Users/Javeria/Desktop/Alkhidmat_foundation_lahore/.agents/skills/design-it/cyber-y2k
Command: npx skills add https://github.com/Javeria-Javaid/Alkhidmat_foundation_lahore --skill cyber-y2k-javeria-javaid

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires react-native-linear-gradient.

What problem does it solve? Designers and developers often struggle to translate the Cyber Y2K aesthetic—holographic gradients, RGB glitch text, and tribal-tech visuals—into working code across different platforms. This Skill provides concrete implementation patterns so the style renders consistently on web and mobile. ## Core Features & Use Cases - Holographic Gradient Effects: Animated oil-slick gradients using CSS keyframes, SwiftUI AngularGradient, Flutter ShaderMask, and Compose sweep gradients. - RGB Glitch Text: Channel-split text effects built by stacking offset text layers in cyan and magenta across all supported frameworks. - Use Case: A developer building a music event landing page can apply the glitch headline and holographic call-to-action button in React, then replicate the same look in the companion iOS app using the SwiftUI snippets. ## Quick Start Apply the Cyber Y2K style to my landing page with a glitch headline and a holographic animated button.

Frequently Asked Questions about cyber-y2k

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

FAQPage Schema
How do I create RGB glitch text effect in CSS?▼

Create RGB glitch text by using ::before and ::after pseudo-elements with the same content via attr(data-text), colored cyan and magenta, then offset by a few pixels in opposite directions. This produces the channel-split chromatic aberration look.

How to make an animated holographic gradient in Flutter?▼

Use a ShaderMask with a SweepGradient whose rotation is driven by an AnimationController via GradientRotation. This creates a continuously rotating oil-slick holographic effect over any widget, such as a button container.

Can React Native animate holographic gradients natively?▼

React Native cannot animate gradient angles natively. Use a static multi-stop LinearGradient from react-native-linear-gradient as a fallback, or integrate @shopify/react-native-skia for true animated sweep gradients.

Does SwiftUI support rotating holographic gradients?▼

Yes, SwiftUI supports this with an AngularGradient bound to a rotating @State variable animated with a repeating linear animation. The gradient rotates continuously, producing the iridescent CD-ROM effect.

When should I avoid using the Cyber Y2K style?▼

Avoid Cyber Y2K when the project requires clean, minimal, or corporate geometric layouts, since the style is intentionally chaotic and rebellious. Also verify contrast ratios and accessibility separately, as the dark holographic palette may fail readability standards.

Related Skills

Explore More Design & Creative Skills→
sanky369sanky369
29

creative-strategist

Define brand visual direction and generate mood boards and style guides.

Community
Advanced
tuanemuytuanemuy

polish

Audit frontend UI alignment, spacing, typography, and micro-interactions across breakpoints.

Community
Advanced
hjung3113hjung3113

animate

Add purposeful animations and micro-interactions to user interfaces.

Community
Intermediate
wzyxdwllwzyxdwll
14

neubrutalism

Define a Neubrutalism design system with tokens.css for front-end components.

Community
Intermediate