SkillsAdd

smithery/rzyfront

vendix-frontend-theme

Frontend theme and branding patterns: ThemeService, CSS variables, tenant branding, user theme presets, RGB variables, browser guards, and deprecated theme APIs. Trigger: When styling/theming frontend UI or working with branding configuration.

Installation

$ npx skills add smithery/rzyfront --skill vendix-frontend-theme
View on skills.sh ↗ Website ↗

Similar popular skills

Related neighbors and high-traction skills in the same topics — useful to compare before installing.

frontend-design Similar name
anthropics/skills

Guidance for distinctive, intentional visual design when building new UI or reshaping an existi…

866.4K installs
frontend-design Similar name
anthropics/claude-code 58.1K installs
frontend-design Similar name
anthropics/claude-plugins-official 14.3K installs
premium-frontend-ui Similar name
github/awesome-copilot

A comprehensive guide for GitHub Copilot to craft immersive, high-performance web experiences w…

4.5K installs
frontend-design Similar name
vercel-labs/agent-eval

Create distinctive, production-grade frontend interfaces with high design quality. Use this ski…

1.6K installs
frontend-skill Similar name
openai/skills

Use when the task asks for a visually strong landing page, website, app, prototype, demo, or ga…

1.6K installs

Also in this package

Other skills from smithery/rzyfront · top by installs.

npx skills add smithery/rzyfront
vendix-validation 0 vendix-prisma-seed 0 vendix-prisma-schema 0 vendix-naming-conventions 0 vendix-monorepo-workspaces 0 vendix-frontend-sticky-header 0 vendix-frontend-state 0 vendix-frontend-routing 0 vendix-frontend-module 0 vendix-frontend-domain 0

Browse all from smithery/rzyfront

More details

Agent compatibility

Declared targets from SKILL.md / docs. Unmarked agents are not listed — the skill may still install via the CLI.

Claude Code Not declared
Cursor Not declared
Codex Not declared
GitHub Copilot Not declared
Windsurf Not declared
Gemini CLI Not declared
Cline Not declared
OpenCode Not declared

Skill metadata

Parsed from SKILL.md frontmatter.

Version2.0
LicenseMIT
More metadata
author
rzyfront
version
2.0
scope
["root"]
auto_invoke
Styling and Theming

Package contents

Files included with this skill beyond the listing page.

  • skill md SKILL.md 2,050 B
  • docs SUMMARY.md 57 B

History

  1. First recorded snapshot · 0 installs

SKILL.md

Vendix Frontend Theme

Source of Truth

  • apps/frontend/src/app/core/services/theme.service.ts
  • apps/frontend/src/app/core/models/tenant-config.interface.ts
  • Global styles in apps/frontend/src/styles.scss

Current Model

ThemeService applies tenant branding plus user theme presets. Current presets include default, aura, monocromo, and glass.

The service generates CSS variables and RGB variants for dynamic alpha usage. It includes browser/SSR guards; do not access document directly from random services/components.

CSS Variables

Use variables instead of hardcoded colors:

  • --color-primary, --color-secondary, --color-accent
  • --color-background, --color-surface
  • --color-text-primary, --color-text-secondary, --color-text-muted
  • RGB variants for primary/secondary/accent/background/surface

--color-border exists globally in styles, but backend branding transform does not currently map border_color.

Branding Transform

Use ThemeService.transformBrandingFromApi() for API snake_case to frontend branding shape. Do not duplicate transform logic in components.

Deprecated APIs such as applyTheme() and transformThemeFromApi() should not be used in new code.

Component Rules

  • Use var(--color-*) with sensible fallbacks for reusable UI.
  • Use RGB variables when alpha is needed instead of hardcoded rgba colors.
  • Keep tenant branding and user theme overlay behavior centralized in ThemeService.
  • Do not add one-off theme mutation logic to feature components.

Related Skills

  • vendix-ui-ux
  • vendix-frontend-component
  • vendix-app-architecture