skills.rest
270aldo
270aldoCOMMUNITY
Explore all skills by this author →
GitHub

ngx-design-system

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

Updated Dec 23, 2025
Search Tags:#typography#UI#tokens#glassmorphism#design-system#dark-mode#NGX
One-click install
npx skills add https://github.com/270aldo/NGX_Sentinels --skill ngx-design-system
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: ngx-design-system
Source: https://github.com/270aldo/NGX_Sentinels/tree/main/.claude/skills/ngx-design-system
Command: npx skills add https://github.com/270aldo/NGX_Sentinels --skill ngx-design-system

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

The NGX Design System provides a cohesive, reusable visual language for NGX Genesis apps, enabling designers and developers to build consistent, accessible interfaces quickly and efficiently.

Core Features & Use Cases

  • Color tokens, typography, and components for dark-mode interfaces across NGX apps.
  • Glassmorphism, depth, neon glow accents, and brand visuals to create modern, cohesive UI.
  • Use case: Build dashboards, landing pages, and React components with a unified look-and-feel across the NGX ecosystem.

Quick Start

Install the ngx-design-system package into your project, import the tokens and components, and start applying the design system's color tokens, typography, and components to your UI.

Frequently Asked Questions about ngx-design-system

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

FAQPage Schema
How do I build a dark-mode dashboard with glassmorphism and neon glow accents?▼

To build a dark-mode dashboard with glassmorphism and neon glow accents, apply the ngx-design-system color tokens, depth cards, and brand visual components to your NGX Genesis interfaces for a cohesive, modern UI.

What design tokens are included for creating NGX Genesis web interfaces?▼

The design tokens included for creating NGX Genesis web interfaces consist of color tokens and typography rules specifically formatted for dark-mode UI, ensuring accessible and visually consistent React components and landing pages.

Can I use this design system for React components in NGX apps?▼

Yes, you can use this design system for React components in NGX apps. It provides a reusable visual language enabling you to quickly build unified dashboards and web interfaces within the NGX Genesis ecosystem.

How do I apply a unified visual language across multiple NGX apps?▼

Apply a unified visual language across multiple NGX apps by importing the ngx-design-system package into your project, utilizing its predefined color tokens, typography, and glassmorphism components to ensure interface consistency.

Does the NGX design system require any specific dependencies or component libraries?▼

The NGX design system does not require specific external dependencies or component libraries to function. You simply install the package into your project and import the tokens and components to start building.

What is the best way to style depth cards and brand visuals for dark-mode interfaces?▼

The best way to style depth cards and brand visuals for dark-mode interfaces is using the ngx-design-system's built-in color tokens and component guidelines, which provide cohesive depth and modern glassmorphism effects.

Related Skills

Explore More Design & Creative Skills→
PolicyEnginePolicyEngine

policyengine-frontend-builder-spec

Enforce Tailwind CSS v4, ui-kit, and Next.js App Router frontend specifications.

Official
Advanced
endlessblinkendlessblink

cyberflow-design-system

Develop cyberpunk design tokens and CSS for FlowState web interfaces.

Community
Advanced
AshesOfTheUndeadAshesOfTheUndead

visual-design-foundations

Establish design systems with typography scales, 8-point grids, and semantic color tokens.

Community
Intermediate
neverinfamousneverinfamous
19

tailwind-css

Configure Tailwind CSS v4 themes using @theme tokens and class-based dark mode.

Community
Advanced