skills.rest
hotovo
hotovoOFFICIAL
Explore all skills by this author →
WebsiteGitHub

theme-factory

Create and register SCSS color themes with i18n display names.

1.4k|128|Updated Jan 7, 2025
Search Tags:#theming#theme#i18n#scss#css-variables#ui-theme#aider-desk
One-click install
npx skills add https://github.com/hotovo/aider-desk --skill theme-factory-hotovo
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: theme-factory
Source: https://github.com/hotovo/aider-desk/tree/main/.aider-desk/skills/theme-factory
Command: npx skills add https://github.com/hotovo/aider-desk --skill theme-factory-hotovo

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

AiderDesk theming requires precise SCSS color definitions and proper integration steps. This Skill provides a guided workflow to define new themes, register them across the theme system, and localize display names for international users.

Core Features & Use Cases

  • Define new themes by creating a complete SCSS color variable set and a corresponding theme class (e.g. .theme-<name>).
  • Register themes in the theme aggregator, update the THEMES registry, and add i18n display names so the UI can present and apply the new theme at runtime.
  • Create dark/light variants and new color schemes that adapt across UI surfaces, ensuring consistent contrast and accessible design.

Quick Start

Create a new theme by copying an existing one, update its SCSS color variables, register it in the theme aggregator and THEME list, and add i18n display names.

Frequently Asked Questions about theme-factory

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

FAQPage Schema
How do I create a new UI theme for AiderDesk using SCSS?▼

To create a new AiderDesk UI theme, you define SCSS color variables within a theme class, register it in the theme aggregator, update the THEMES registry, and add i18n display names for runtime selection.

What steps are needed to add i18n support to a custom theme?▼

Adding i18n support to a custom theme requires adding localized display name entries to the locale files, ensuring the UI can present the theme name correctly for international users at runtime.

How do I add dark and light variants to an existing SCSS theme?▼

To add dark and light variants, you copy an existing SCSS theme file, update its color variables to adapt across UI surfaces, and register the new variants to ensure consistent contrast and accessible design.

Do I need to update a theme registry every time I add new SCSS color schemes?▼

Yes, every new SCSS color scheme requires a registry update in the theme aggregator and THEMES list to ensure the theme is properly wired into the theming pipeline and selectable at runtime.

Why is my new SCSS theme not showing up as selectable in the UI?▼

A new SCSS theme will not appear if it lacks a complete aggregator entry, THEMES registry update, or i18n display names, which are all required to make the theme selectable and applied at runtime.

Related Skills

Explore More Software Engineering Skills→
jezwebjezweb
961

tailwind-v4-shadcn

Automate Tailwind v4 and shadcn/ui setup in Vite React projects.

Community
Intermediate
roderikroderik
2

rams

Analyze UI components for WCAG accessibility and visual design issues.

Community
Basic
HankanmanHankanman
1

nextjs-nextintl-localized-link

Replace next/link with a localized Link component for next-intl routing.

Community
Intermediate
gouravsingh311gouravsingh311

tailwind-v4

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

Community
Advanced