skills.rest
fm-dev-mx
fm-dev-mxCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

theme-architecture

Manage Celebra-me's 3-Layer Color Architecture with SCSS and Astro.

Updated Jun 21, 2024
Search Tags:#theming#frontend architecture#css#design tokens#astro#scss
One-click install
npx skills add https://github.com/fm-dev-mx/celebra-me --skill theme-architecture
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: theme-architecture
Source: https://github.com/fm-dev-mx/celebra-me/tree/main/.agent/skills/theme-architecture
Command: npx skills add https://github.com/fm-dev-mx/celebra-me --skill theme-architecture

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill manages the complex styling infrastructure of Celebra-me, ensuring a clear separation between theme definitions and UI component implementations.

Core Features & Use Cases

  • 3-Layer Color Architecture: Implements a robust system for managing colors across different themes.
  • Theme Presets: Defines and applies distinct visual themes using SCSS variables.
  • Design Tokens: Enforces the use of semantic tokens for consistent styling across the platform.
  • Use Case: When introducing a new brand theme for a client, this skill ensures all colors, fonts, and spacing are correctly defined and applied consistently across all UI elements, from buttons to sections.

Quick Start

Register a new theme variant named 'vintage-rose' in the quote section styles and update the Zod schema.

Frequently Asked Questions about theme-architecture

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

FAQPage Schema
How do I separate theme definitions from UI component implementation in Astro?▼

To separate theme definitions from UI component implementation in Astro, use a 3-layer color architecture that governs theme presets independently from components using SCSS variables and semantic design tokens.

What is a 3-layer color architecture for frontend theming?▼

A 3-layer color architecture for frontend theming is a system that separates theme definitions, semantic design tokens, and UI component styling to ensure consistent color management across different visual presets.

How do I register a new theme variant using SCSS design tokens?▼

To register a new theme variant using SCSS design tokens, define the preset variables in your styles file and update the Zod schema to validate the new data-variant attribute for the section.

Can I use semantic design tokens to apply consistent styling across Astro sections?▼

Yes, you can use semantic design tokens to apply consistent styling across Astro sections by mapping raw theme preset values to semantic variables and applying them via data-variant attributes.

Does this theming approach require updating the Zod schema when adding new presets?▼

Yes, adding new theme presets requires updating the Zod schema to validate the new data-variant attributes, ensuring the Astro frontend architecture correctly recognizes and applies the new styling configuration.

Related Skills

Explore More Design & Creative Skills→
yonetim258852yonetim258852

modular-scale-typography

Generate modular scale font size tokens as CSS variables for design systems.

Community
Intermediate
pythoninthegrassespythoninthegrasses
1

tailwind-design-system

Design Tailwind design systems with semantic tokens, CVA variants, and dark mode.

Official
Advanced
firstsun-devfirstsun-dev

astro-scss-best-practices

Enforce component-scoped SCSS Modules and namespaced token imports in Astro projects.

Official
Intermediate
caiohbfurtadocaiohbfurtado

tailwindcss

Apply Tailwind CSS v4 utility classes and theme variables to style web applications.

Community
Intermediate