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

aurora-checklist

Validates Aurora design-system conformance in frontend code and UI changes.

Updated Aug 23, 2026
Search Tags:#checklist#accessibility#frontend#tokens#coding-standards#design-system#aurora
One-click install
npx skills add https://github.com/jmagar/rust-bin --skill aurora-checklist
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: aurora-checklist
Source: https://github.com/jmagar/rust-bin/tree/main/.claude/skills/aurora-checklist
Command: npx skills add https://github.com/jmagar/rust-bin --skill aurora-checklist

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This checklist provides a rigorous, design-system-aligned review guide to ensure apps and websites adhere to Aurora tokens, typography ramps, elevation, radius, scrollbar rules, import conventions, and accessibility standards.

Core Features & Use Cases

  • Enforces token-based color usage (var(--aurora-*)) and rejects raw hex/rgba in code, CSS, and stylesheets.
  • Flags and guides migration from shadcn tokens to Aurora equivalents in frontend code to maintain consistency.
  • Covers typography, elevation, radius, and scrollbar conventions, import rules, and dark-mode considerations during reviews.
  • Use Case: When reviewing a UI change, apply this checklist to validate conformance before merging.

Quick Start

Run the Aurora checklist on a UI change to verify token conformance, typography, and accessibility before merging.

Frequently Asked Questions about aurora-checklist

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

FAQPage Schema
How do I enforce design system token conformance in frontend code reviews?▼

To enforce design system token conformance in frontend code reviews, validate that styling uses designated variables like var(--aurora-*) and rejects raw hex or rgba color values across all components and stylesheets before merging changes.

What is an Aurora design system checklist used for?▼

An Aurora design system checklist is used to ensure apps and websites adhere to established design tokens, typography ramps, elevation, radius, scrollbar rules, import conventions, and accessibility standards during UI development and design reviews.

How do I migrate shadcn tokens to Aurora equivalents?▼

To migrate shadcn tokens to Aurora equivalents, apply a design review checklist that flags existing shadcn token usage in frontend code and guides the replacement with corresponding Aurora design system tokens to maintain visual consistency.

Does this design review checklist cover accessibility and dark mode?▼

Yes, this design review checklist covers accessibility standards and dark mode considerations, validating color tokens, typography ramps, elevation, radius, scrollbar conventions, and import rules to ensure comprehensive UI conformance across different themes.

Can I validate TanStack Query v5 consistency with a design system checklist?▼

Yes, you can validate TanStack Query v5 consistency using this design system checklist, which enforces import rules and coding standards across the codebase to ensure frontend data fetching aligns with Aurora design conventions during reviews.

Related Skills

Explore More Design & Creative Skills→
Aurora-AIAurora-AI

elysian-design

Generate branded UI components and assets using the Elysian design system.

Community
Advanced
zhouboyu-xrealzhouboyu-xreal

design-md

Create, validate, and export Google DESIGN.md design system files.

Community
Intermediate
adtecoadteco

adteco-frontend-guidelines

Standardize React/ShadCN/Tailwind build patterns for Next.js 15 TypeScript apps.

Official
Intermediate
SuperCorksSuperCorks

frontend-design

Enforce typography, spacing, color contrast, and interaction states in frontend UI design workflows.

Community
Basic