skills.rest
jmagar
jmagarCOMMUNITY
Explore all skills by this author →
GitHub

aurora-design-system

Provide a shadcn-compatible design system for React/Next.js UI work.

1|Updated May 7, 2026
Search Tags:#React#design system#Next.js#UI design#shadcn
One-click install
npx skills add https://github.com/jmagar/aurora --skill aurora-design-system
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: aurora-design-system
Source: https://github.com/jmagar/aurora/tree/main/plugin/skills/aurora-design-system
Command: npx skills add https://github.com/jmagar/aurora --skill aurora-design-system

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires react, next, shadcn, and includes scripts (resource) and references (resource) and assets (resource) components.

What problem does it solve?

This Skill provides a comprehensive design system for React/Next.js UI development, ensuring consistency and efficiency across surfaces like Labby and Aurora operator console.

Core Features & Use Cases

  • Design Guidance: Offers visual and operational instructions for designing, implementing, and reviewing Aurora UI surfaces.
  • Component Inventory: Provides a detailed list of UI primitives and product blocks available for integration.
  • Setup Instructions: Includes guidance for adding Aurora to a project, including CSS and font configuration.
  • Static Artifacts: Shows how to create static HTML mockups and prototypes using Aurora tokens and assets.
  • Token Reference: Lists all tokens with their values for dark and light modes, and shadcn token bridge.

Quick Start

Run the aurora-design-system skill to review the design guidelines and component inventory for the Aurora Design System.

Frequently Asked Questions about aurora-design-system

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

FAQPage Schema
How do I implement a consistent UI design system in React and Next.js?▼

To implement a consistent React UI design system, you need standardized tokens, component primitives, and setup guidelines. This Skill provides an operator-console look using Aurora tokens and shadcn-compatible components for Next.js development.

Does the Aurora design system work with existing shadcn components?▼

Yes, the Aurora design system works with shadcn by providing a shadcn-compatible registry and a token bridge. It maps dark and light mode tokens directly to shadcn configurations for seamless integration.

What do I need to configure before adding Aurora design tokens to my project?▼

Before adding Aurora design tokens, you need React and Next.js installed, along with shadcn dependencies. You must also apply specific CSS and font configurations to ensure the UI primitives render correctly.

How do I create static HTML mockups using a React design system?▼

To create static HTML mockups using a React design system, you can use static artifacts and token references. This Skill shows how to build prototypes with Aurora assets and tokens without requiring a full runtime environment.

When should I use a shadcn-compatible registry for UI implementation?▼

You should use a shadcn-compatible registry for UI implementation when building operator or agent control-plane surfaces that require strict visual consistency. It provides a detailed inventory of product blocks and UI primitives for standardized review.

Related Skills

Explore More Software Engineering Skills→
jubalmjubalm
1

shadcn-init

Initialize shadcn/ui in React projects with Tailwind CSS v4 configuration.

Community
Advanced
musujmusuj

phase-3-mockup

Build HTML, CSS, and JavaScript UI mockups with simulated JSON data.

Community
Intermediate
vuanhtu1993vuanhtu1993

shadcn/ui Skills for Next.js 16

Integrate shadcn/ui into Next.js 16 projects with pnpm.

Community
Intermediate
themadorgthemadorg
6

bedrud-fe-ui-foundation

Standardize React frontend UI with a reusable design system and shadcn/ui primitives.

Official
Intermediate