skills.rest
shiaho777
shiaho777COMMUNITY
Explore all skills by this author →
Website𝕏@shiaho777GitHub

module-style

Inject CSS-only themes into websites using URL-based scoping and a manifest.

5.5k|794|Updated Nov 26, 2025
Search Tags:#ui#css#styling#injection#theme#module#web
One-click install
npx skills add https://github.com/shiaho777/web-to-app --skill module-style
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: module-style
Source: https://github.com/shiaho777/web-to-app/tree/main/app/src/main/assets/skills/module-style
Command: npx skills add https://github.com/shiaho777/web-to-app --skill module-style

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Designers want to restyle sites without changing their behavior, allowing rapid visual experimentation and branding.

Core Features & Use Cases

  • CSS-only styling modules inject scoped styles without JavaScript logic.
  • Enables themes like dark mode, palette swaps, and brand-aligned styling across multiple sites.
  • Use Case: quickly prototype a new look for client sites without altering functionality.

Quick Start

Use this CSS-only module by supplying a scoped style.css and a minimal main.js stub, then configure module.json to target the desired URLs.

Frequently Asked Questions about module-style

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

FAQPage Schema
How do I inject CSS to restyle a website without altering its functionality?▼

You can restyle a website by injecting CSS-only themes using a manifest-based workflow that preserves existing functionality. This approach applies visual changes across static pages and dynamic apps through URL-based scoping and a minimal runtime.

Can I apply a dark mode theme across multiple sites using CSS injection?▼

Yes, CSS injection supports themes like dark mode, palette swaps, and brand-aligned styling across multiple sites. You configure a manifest with urlMatches to target desired URLs and supply a scoped style.css to apply the visual changes.

What do I need to configure to scope CSS styling to specific URLs?▼

You need to configure a module.json manifest containing an id, name, description, icon, category, version, runAt, urlMatches, and permissions. This manifest works with your style.css and a tiny main.js stub to enable safe, self-contained styling.

Does CSS-only styling work with dynamic web apps or just static pages?▼

CSS-only styling works with both static pages and dynamic apps. The manifest-based workflow uses URL-based scoping and a minimal runtime to apply visual changes safely across various web project types without JavaScript logic.

What is the best way to prototype a new visual look for client sites?▼

The best way to prototype a new look is using CSS-only styling modules that inject scoped styles without JavaScript logic. This allows rapid visual experimentation and branding changes while keeping the underlying site behavior completely intact.

Why do I need a main.js stub if the styling is CSS-only?▼

A tiny main.js stub is required to enable safe, self-contained styling alongside the style.css. Even though the styling is CSS-only, this minimal JavaScript runtime facilitates the manifest-based workflow and URL-based scoping for the injected themes.

Related Skills

Explore More Design & Creative Skills→
shiaho777shiaho777
5.5k

module-js

Create JavaScript extension modules with module.json and IIFE-wrapped main.js for WebToApp.

Community
Basic
EzioPeterEzioPeter
1

theme-factory

Apply cohesive themes to standardize styling across presentations, documents, and web artifacts.

Community
Intermediate
deadlock-mod-managerdeadlock-mod-manager
408

skill-scanner

Analyze agent skills for injection points, malicious code, and secret leaks.

Official
Intermediate
mgd34msumgd34msu
4

css-variables

Implement and manage CSS custom properties for theming and runtime customization.

Community
Intermediate