cyberflow-design-system

Name: cyberflow-design-system
Availability: InStock
Author: endlessblink

Develop cyberpunk design tokens and CSS for FlowState web interfaces.

Updated Nov 29, 2025

Search Tags:#typography #accessibility #design-system #cyberpunk #ui-tokens #augmented-ui #neon-glow

Ready to run

npx skills add https://github.com/endlessblink/flow-state --skill cyberflow-design-system

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: cyberflow-design-system
Source: https://github.com/endlessblink/flow-state/tree/main/.claude/skills/cyberflow-design-system
Command: npx skills add https://github.com/endlessblink/flow-state --skill cyberflow-design-system

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Cyberflow design system provides a complete foundation of tokens, patterns, and UI primitives to deliver a consistent cyberpunk aesthetic across FlowState's interfaces.

Core Features & Use Cases

Augmented-ui panel frames, neon glow recipes, scanlines, glitch text, and terminal animations for authentic cyberpunk visuals.
Centralized color palette, typography, and intensity scaling scoped under the .cyberflow namespace to ensure design consistency.
Use cases include mission cards, boss panels, dashboards, and player profiles with cohesive cyberpunk styling.

Quick Start

Import the cyberflow design system tokens and CSS into your app and begin building cyberpunk UI components.

Frequently Asked Questions about cyberflow-design-system

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

FAQPage Schema

How do I build a cyberpunk UI with neon glow effects and scanlines?▼

To build a cyberpunk UI with neon glow effects and scanlines, import the cyberflow design system tokens and CSS into your app, then apply the scoped .cyberflow namespace to access pre-built visual recipes and UI primitives for authentic aesthetics.

What is a cyberpunk design system and when do I need augmented-ui patterns?▼

A cyberpunk design system is a centralized foundation of color tokens, typography, and visual patterns. You need augmented-ui patterns when developing mission panels, boss dialogs, or dashboards that require cohesive cyberpunk styling and intensity scaling.

Does the cyberflow design system support different visual intensity levels?▼

The cyberflow design system supports visual intensity levels through scoped CSS classes including .cf-minimal, .cf-moderate, and .cf-intense, allowing you to scale neon glow and cyberpunk effects across different UI components.

Can I use cyberflow tokens for mission cards and player profiles?▼

You can use cyberflow tokens for mission cards and player profiles by applying the .cyberflow namespace, which provides a centralized color palette and typography system to ensure design consistency across web interfaces.

What's the best way to apply glitch text and terminal reveal animations?▼

The best way to apply glitch text and terminal reveal animations is to utilize the ready-made CSS recipes provided by the cyberflow design system, which are specifically scoped under the .cyberflow namespace for consistent cyberpunk visuals.

Do I need external dependencies to implement scanlines and glitch text effects?▼

You do not need external dependencies to implement scanlines and glitch text effects, as the cyberflow design system provides ready-made CSS recipes for these visual styles without requiring any external component libraries.