skills.rest
digirati-co-uk
digirati-co-ukOFFICIAL
Explore all skills by this author →
GitHub

frontend-themes

Package and integrate Madoc TypeScript UI themes for consistent site and admin styling.

57|15|Updated Nov 28, 2018
Search Tags:#typescript#frontend#integration#themes#madoc#theme-packaging
One-click install
npx skills add https://github.com/digirati-co-uk/madoc-platform --skill frontend-themes
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend-themes
Source: https://github.com/digirati-co-uk/madoc-platform/tree/main/.agents/skills/frontend-themes
Command: npx skills add https://github.com/digirati-co-uk/madoc-platform --skill frontend-themes

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Inconsistent or missing theme assets and registration cause UI discrepancies in Madoc TypeScript sites and admin panels. This Skill provides a clear guide to structuring, packaging, and integrating themes so that changes remain consistent across environments.

Core Features & Use Cases

  • Theme Asset Management: Organize and package SCSS, images, and other assets in the services/madoc-ts/themes directory.
  • Theme Registration: Wire themes into the extension system via services/madoc-ts/src/extensions/themes.
  • Integration Workflow: Verify theme setup in services/madoc-ts/src/frontend/themes and ensure the build pipeline includes theme overrides.
  • Use Case: When adding a new visual style to Madoc, follow this Skill to create the theme folder, update registration, and test the site UI.

Quick Start

Request the frontend-themes skill to walk you through reviewing the current theme structure and updating the registration for a new theme.

Frequently Asked Questions about frontend-themes

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

FAQPage Schema
How do I package and register a new Madoc TypeScript theme?▼

To package a Madoc TypeScript theme, organize SCSS and image assets in the themes directory, wire the theme into the extension system under src/extensions/themes, and configure the build pipeline to include theme overrides.

Why does my Madoc site UI look inconsistent across environments?▼

Inconsistent Madoc site UI styling usually happens when theme assets, extension metadata, and asset references are misaligned. Structuring theme directories and verifying registration in the extension system ensures consistent styling across environments.

What's the best way to organize SCSS and image assets for Madoc themes?▼

Organize SCSS, images, and other theme assets within the services/madoc-ts/themes directory, then ensure corresponding references are updated in both the extension registration and frontend theme setup for functional theming.

Can I integrate frontend themes into Madoc without updating extension metadata?▼

No, theme registration requires wiring themes into the Madoc extension system via services/madoc-ts/src/extensions/themes. Without updating extension metadata, the build pipeline cannot apply theme overrides and the UI will not reflect styling changes.

Do I need TypeScript to apply custom theme overrides in Madoc?▼

Yes, Madoc theme integration is built for TypeScript projects. You need to align theme directories, asset references, and extension metadata within the Madoc TS build pipeline to maintain functional theming.

When should I not use the standard Madoc theme directory structure?▼

You should always use the standard Madoc theme directory structure when adding visual styles. Deviating from the services/madoc-ts/themes and src/frontend/themes paths breaks the build pipeline configuration and prevents theme overrides from loading.

Related Skills

Explore More Software Engineering Skills→
digirati-co-ukdigirati-co-uk
57

extensions-themes

Register theme extensions and manage lifecycle API flows for Madoc TS.

Official
Intermediate
digirati-co-ukdigirati-co-uk
57

frontend-core

Update Madoc TS frontend routes and SSR entry points.

Official
Intermediate
digirati-co-ukdigirati-co-uk
57

extensions-framework

Guide developers through Madoc TypeScript extension framework integration and lifecycle handling.

Official
Intermediate
digirati-co-ukdigirati-co-uk
57

ssr-pipeline

Trace and modify Madoc TS server-side rendering for site and admin.

Official
Intermediate