nexus-design-system

Apply Nexus design tokens, patterns, and component catalog to UI tasks.

Updated Aug 27, 2026
One-click install
npx skills add https://github.com/JoaoBiomed/NEXUSEcosystem --skill nexus-design-system
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: nexus-design-system
Source: https://github.com/JoaoBiomed/NEXUSEcosystem/tree/main/.claude/skills/nexus-design-system
Command: npx skills add https://github.com/JoaoBiomed/NEXUSEcosystem --skill nexus-design-system

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

The Nexus Design System provides a single source of truth for UI tokens, patterns, and components to eliminate visual inconsistencies, accelerate design work, and ensure compliance with accessibility and dark mode requirements.

Core Features & Use Cases

  • Centralized design tokens (colors, typography, spacing, shadows) and a published component catalog to guide implementation.
  • Enforces dark-mode support, mobile-first patterns, and consistent visual language across pages, forms, and modules.
  • Use cases include designing new components, auditing existing pages, performing visual redesigns, and aligning with the design system references.

Quick Start

Audit a target UI element against Nexus tokens and patterns, then implement consistent design fixes across dark mode, responsiveness, and accessibility.

Frequently Asked Questions about nexus-design-system

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

FAQPage Schema
How do I fix UI inconsistency using design tokens?

Fix UI inconsistency by applying centralized design tokens for colors, typography, spacing, and shadows across your codebase. This enforces a consistent visual language and accelerates design work by providing a single source of truth for UI components.

What is the best way to audit existing pages for accessibility and dark mode?

Audit existing pages by comparing target UI elements against established design patterns and token references. This process identifies visual inconsistencies and ensures compliance with accessibility standards and dark mode requirements.

How do I implement responsive UI for a healthcare SaaS?

Implement responsive UI for a healthcare SaaS by applying mobile-first layout patterns and a published component catalog. This ensures visual consistency and accessibility across various device sizes and modules.

Can I use design system references to create new components?

Yes, you can use design system references to create new components. The references provide a centralized catalog of tokens and patterns that guide implementation to ensure visual consistency and accessibility compliance.

Why does my dark mode support look inconsistent across different modules?

Dark mode support appears inconsistent when UI elements are not aligned with centralized design tokens. Applying a unified token system for colors and shadows ensures consistent dark mode rendering across all pages and modules.

Does the NEXUS design system work for visual redesigns?

Yes, the NEXUS design system works for visual redesigns by applying its design token system and component catalog. This eliminates visual inconsistencies and ensures compliance with accessibility and dark mode requirements during the redesign process.