skills.rest
alissimore
alissimoreCOMMUNITY
Explore all skills by this author →
GitHub

ui-styling

Apply Nexus design system and Tailwind CSS tokens to UI components.

Updated Jan 1, 2026
Search Tags:#frontend#css#Nexus#Tailwind#design-system#dark-mode#ui-styling
One-click install
npx skills add https://github.com/alissimore/nexus-notes --skill ui-styling-alissimore
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: ui-styling
Source: https://github.com/alissimore/nexus-notes/tree/main/.claude/skills/ui-styling
Command: npx skills add https://github.com/alissimore/nexus-notes --skill ui-styling-alissimore

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill standardizes UI styling across the Nexus project by enforcing the Nexus design system and Tailwind CSS tokens, reducing visual inconsistencies and speeding up UI development.

Core Features & Use Cases

  • Tailwind-based styling: Use a shared set of utility classes aligned to the Nexus design tokens for consistency.
  • Design System Alignment: Apply predefined color palettes, typography, and dark-mode patterns to new components.
  • Reusable UI patterns: Reference common patterns like Buttons, Cards, Chips, and Wikilink chips to accelerate UI work without reinventing styles.

Quick Start

In a new Nexus component, apply the primary Nexus classes (e.g., bg-nexus-600 text-white rounded-lg) and ensure dark mode styles (e.g., dark:bg-navy-850) to maintain accessibility and visual consistency.