ui-themes

Generate and apply shadcn/ui theme variables from tweakcn presets to CSS.

9|2|Updated Jan 31, 2026

Search Tags:#ui-design #dark-mode #css-variables #design-systems #theme-generation #tweakcn #magic-ui

Ready to run

npx skills add https://github.com/aussiegingersnap/cursor-skills --skill ui-themes

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: ui-themes
Source: https://github.com/aussiegingersnap/cursor-skills/tree/main/skills/ui-themes
Command: npx skills add https://github.com/aussiegingersnap/cursor-skills --skill ui-themes

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

Theme generation and integration for web apps using tweakcn and Magic UI, enabling consistent UI design across projects.

Core Features & Use Cases

Generate theme variables from tweakcn presets and export them to CSS, then apply in globals.css.
Integrate Magic UI animated components to enhance theming with motion.
Enable dark mode setup and easy theme toggling for user-facing apps.

Quick Start

Create a new project theme by selecting a tweakcn preset, export CSS variables, and apply them in globals.css.

Frequently Asked Questions about ui-themes

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

FAQPage Schema

How do I generate shadcn/ui theme variables with tweakcn presets?▼

Generate shadcn/ui theme variables by selecting a tweakcn preset, exporting the resulting color tokens as CSS variables, and applying them directly into your project's globals.css file.

Can I export tweakcn theme colors in OKLCH, HSL, and RGB formats?▼

Yes, tweakcn theme generation supports exporting color formats in OKLCH, HSL, and RGB, allowing you to apply these CSS variables across various React app theming setups.

How do I set up dark mode toggling for a shadcn/ui React app?▼

Dark mode integration involves generating distinct light and dark theme CSS variables using tweakcn presets, then applying them in globals.css to enable easy user-facing theme toggling.

Does this theme generation process work with Magic UI animated components?▼

Magic UI component integration is supported alongside tweakcn theming, enabling you to apply generated CSS variables to animated components and enhance UI design with motion.

What is the best way to customize shadcn/ui colors for a design system?▼

Customizing shadcn/ui colors for design systems is best handled by generating consistent theme variables from tweakcn presets and exporting them as global CSS variables for uniform application.

Do I need to manually update globals.css when applying a new tweakcn theme?▼

Yes, applying a new tweakcn theme requires exporting the generated CSS variables and pasting them into your globals.css file to ensure the React app reflects the updated color tokens.