skills.rest
BlocUnited-LLC
BlocUnited-LLCOFFICIAL
Explore all skills by this author →
GitHub

add-branding

Customizes Mojaiks app shell branding by editing declarative JSON configs and validating assets and API responses.

14|1|Updated Jan 8, 2026
Search Tags:#branding#navigation#logos#declarative UI#theme configuration#app shell
One-click install
npx skills add https://github.com/BlocUnited-LLC/mozaiks --skill add-branding
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: add-branding
Source: https://github.com/BlocUnited-LLC/mozaiks/tree/main/.claude/skills/add-branding
Command: npx skills add https://github.com/BlocUnited-LLC/mozaiks --skill add-branding

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

It removes the guesswork and trial-and-error involved in customizing the Mozaiks app shell’s branding by showing exactly which declarative files control themes, navigation, and logos.

Core Features & Use Cases

  • Theme customization: Update visual design tokens (colors/fonts/spacing and dark-light behavior) via app/brand/theme_config.json to keep styling consistent.
  • Shell chrome configuration: Modify header, footer, profile, notifications, and mobile behavior using app/config/shell.json and its shortcuts/navigation/chrome sections.
  • Brand asset management: Replace or add logos, icons, and fonts in app/brand/assets/ and app/brand/fonts/ so UI references resolve correctly.
  • Use Case: You want a dashboard-first experience with a compact workspace feel, updated branding, and correct placement rules for navigation and chat/workflow entry.

Quick Start

Tell the AI what you want to change (theme colors, logos/icons, navigation placement, and which pages should use which shell mode), and apply the suggested edits to app/brand/ and app/config/ accordingly.

Frequently Asked Questions about add-branding

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

FAQPage Schema
How do I customize the app shell branding and theme configuration?▼

App shell branding is customized by updating declarative configuration files, specifically app/config/shell.json and app/brand/theme_config.json. You align theme tokens, navigation placement, and chrome behavior to modify the app-wide shell UI or route-level shell modes.

Where do I manage logos and fonts for theme customization?▼

Theme customization assets like logos, icons, and fonts are managed under the app/brand/assets/ and app/brand/fonts/ directories. The system validates that referenced assets exist and resulting API responses match expectations to ensure UI references resolve correctly.

Can I configure different shell modes for dashboards and immersive experiences?▼

Yes, shell chrome configuration supports route-level shell modes for dashboards, conversations, and focused or immersive experiences. You modify header, footer, profile, notifications, and mobile behavior using app/config/shell.json and its shortcuts, navigation, and chrome sections.

What is declarative UI branding and how does it handle dark-light behavior?▼

Declarative UI branding removes trial-and-error by explicitly defining visual design tokens for colors, fonts, spacing, and dark-light behavior. Updates are applied via app/brand/theme_config.json to keep styling consistent across the app shell.

Why does my navigation placement not update after changing the shell chrome?▼

Navigation placement issues occur when referenced brand assets are missing or declarative configuration files are misaligned. The system validates that assets under app/brand/ exist and that shell.json and theme_config.json updates match expected API responses.

Does this declarative branding approach work for a dashboard-first workspace?▼

Yes, declarative branding supports a dashboard-first experience with a compact workspace feel. You specify desired theme colors, logos, navigation placement rules, and chat or workflow entry points, then apply suggested edits to app/brand/ and app/config/ files.

Related Skills

Explore More Design & Creative Skills→
cometchatcometchat
512

cometchat-flutter-v5-theming

Configure CometChat Flutter v5 component themes via ThemeExtension overrides.

Official
Intermediate
Aurora-AIAurora-AI
1

r3f-bridge-engineer

Bridge React Three Fiber components with native Three.js for interactive 3D scenes.

Community
Intermediate
tcfialhotcfialho

nexus2-design

Generates static web UI prototypes and editable source from natural-language descriptions and/or reference images.

Community
Advanced
1k-off1k-off
1

umbraco-theme

Register Umbraco backoffice themes via manifests and CSS custom properties.

Community
Intermediate