rzyfront/vendix-frontend-theme
skills/vendix-frontend-theme/SKILL.md
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.
$ install --global
skillsauthnpx skillsauth add rzyfront/vendix vendix-frontend-themeInstall this skill globally with one command. Works with Claude Code, Cursor, and Windsurf.
Security Scan Results
3 of 9 scanners reported clean
Some scanners were skipped, did not run, or reported a non-clean status. Review each row below.
3
Scanners Passed
9
Scanners in report
Clean
TrivyContainer and dependency vulnerability scanner
95%
Clean
SemgrepStatic code analysis for vulnerabilities
95%
Clean
mcp-scan (Snyk)Model Context Protocol security validation
95%
Skipped
Snyk (dep)Open source security scanning
50%
Skipped
Socket.devSupply chain security analysis
50%
Skipped
VirusTotalMulti-engine malware detection
50%
Skipped
CrowdStrikeAdvanced threat intelligence
50%
Skipped
OSV-ScannerOpen Source Vulnerability database check
50%
Skipped
OWASP Dep-Check
50%
Last scanned: May 16, 2026, 5:12 AM350.2s1 file scanned
SKILL.md
- name:
- vendix-frontend-theme
- description:
- >
- Frontend theme and branding patterns:
- ThemeService, CSS variables, tenant branding,
- license:
- MIT
- author:
- rzyfront
- version:
- 2.0
- scope:
- [root]
- auto_invoke:
- Styling and Theming
Vendix Frontend Theme
Source of Truth
apps/frontend/src/app/core/services/theme.service.tsapps/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-uxvendix-frontend-componentvendix-app-architecture
Related Skills
rzyfront/mobile-dev
development
VerifiedTrustedCommunity
Mobile app development rules for Vendix Expo/React Native project. Trigger: When editing, creating, or modifying any file under apps/mobile, or when developing mobile-specific features.
5SKILL.mdUpdated May 29, 2026
rzyfront/vendix-subscription-gate
development
VerifiedTrustedCommunity
Feature gating by store subscription state: global store write guard, AI feature gate, Redis feature resolution, quota consumption, frontend paywall interceptor, banner, and subscription UI states. Trigger: When adding feature gates, paywalls, subscription-based access control, protecting store write operations, AI feature gates, or rollout flags.
5SKILL.mdUpdated May 16, 2026
rzyfront/vendix-saas-billing
testing
VerifiedTrustedCommunity
SaaS subscription billing for Vendix stores: plan pricing, invoices, Wompi platform payments, manual payments, partner commissions, payouts, proration, and dunning. Trigger: When creating SaaS invoices, working with partner rev-share, margin/surcharge pricing, invoice sequence allocation, partner payout batches, subscription payments, manual payments, or dunning flows.
5SKILL.mdUpdated May 16, 2026
rzyfront/vendix-redis-quota
development
VerifiedTrustedCommunity
Periodic quota counters with Redis, UTC period keys, Lua-based idempotent AI quota consumption, request-id deduplication, and post-success consumption. Trigger: When building quota counters, enforcing monthly/daily feature caps, or reusing AI quota patterns for uploads, emails, exports, or rate-limited features.
5SKILL.mdUpdated May 16, 2026