skills.rest
aussiegingersnap
aussiegingersnapCOMMUNITY
Explore all skills by this author →
𝕏@jasontoevsGitHub

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
One-click install
npx skills add https://github.com/aussiegingersnap/cursor-skills --skill ui-themes
Or copy as Structured Prompt for Agent▼
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.

Related Skills

Explore More Design & Creative Skills→
ManuelvillarvieitesManuelvillarvieites

shadcn-ui-theme

Apply pre-configured shadcn/ui themes by replacing CSS variables in app/globals.css.

Community
Basic
BoristokaBoristoka

darkmode

Toggle website dark mode via HTML class and React component.

Community
Basic
freshtechbrofreshtechbro
682

animated-component-libraries

Provide pre-built animated React component libraries for UI development.

Community
Intermediate
gouravsingh311gouravsingh311

tailwind-v4

Configure Tailwind v4 design tokens using CSS-first @theme directives.

Community
Advanced