How do I install the Iptvnator Theme Style skill?

Run npx skillmds@latest add 4gray/iptvnator-theme-style in your terminal (requires Node.js), paste this page's agent-chat prompt into Claude, Cursor, or any MCP-connected agent, or download the SKILL.md file and copy it into your agent's skills directory.

Is Iptvnator Theme Style safe to use?

This skill has not completed SkillMD's automated safety review yet. SkillMD never runs a skill's scripts for you; review the SKILL.md before installing.

Which AI agents work with Iptvnator Theme Style?

This skill is tagged as working with Claude Code, Claude.ai, OpenAI Codex. SKILL.md is an open format, so most agents that read a skills directory can load it too.

Is Iptvnator Theme Style free to use?

Yes. Installing skills from SkillMD is free, and the skill stays under its author's original license.

Who published Iptvnator Theme Style?

4gray (@4gray) published this skill. Their other Agent Skills are listed on their SkillMD profile.

Iptvnator Theme Style by 4gray — Agent Skill

Name: Iptvnator Theme Style
Author: 4gray

File contents

IPTVnator Theme Style

Canonical Sources

Theme contexts and app tokens: apps/web/src/m3-theme.scss
Shared forwarding inventory: libs/ui/styles/_index.scss
Shared partials: libs/ui/styles/_portal-layout.scss, libs/ui/styles/_content-grid.scss, libs/ui/styles/_portal-sidebar.scss, libs/ui/styles/_panel-header.scss, libs/ui/styles/_detail-view.scss, and libs/ui/styles/_detail-view-actions.scss
UI policy and migration debt: docs/architecture/iptvnator-ui-guidelines.md

The index is a barrel, not a configured Sass include path. Production consumers currently use relative @use paths to the needed partial.

Token Boundary

App-owned surfaces, text, separators, hover states, selections, and provider accents use --app-* tokens from m3-theme.scss.
Use --app-selection-on-color for foregrounds placed on the selection accent; do not assume white has enough contrast in both themes.
Angular Material mixins and Material-component overrides may use Material tokens. Outside Material-owned components, use a --mat-sys-* token only after proving it is emitted in both light and dark contexts and supplying a real app-token or literal fallback.
Local semantic status colors are acceptable. Existing hard-coded layout, selection, and EPG surface colors are migration debt, not precedent.

Shared Layout Rules

Extend the matching partial instead of copying a large provider stylesheet. Provider-neutral services and UI use the existing shared data-access/UI libraries; repeated visual structure belongs in a shared Sass partial. Portal-shared consumers use their existing forwarding style modules instead of copied SCSS.
In an Electron drag region, every interactive descendant—buttons, links, inputs, overlays, and resize handles—must explicitly use app-region: no-drag. The shared directive-generated .resize-handle sets this centrally. Shared live sidebars reserve 8 px between their scroll content and the edge so scrollbar and resize hit areas stay independent.
A shared change must be checked across M3U, Xtream, Stalker, workspace, portal catalog/shared UI, and unified collections where relevant.

Validation

Run the affected consumer's Nx lint/test/build target. Inspect light and dark themes, selected/hover states, and Electron title-bar drag/no-drag behavior.

---name: iptvnator-theme-styledescription: Use when changing IPTVnator SCSS tokens, shared layout mixins, portal headers, sidebars, detail views, Electron drag regions, or cross-portal visual consistency.---# IPTVnator Theme Style## Canonical Sources- Theme contexts and app tokens: `apps/web/src/m3-theme.scss`- Shared forwarding inventory: `libs/ui/styles/_index.scss`- Shared partials: `libs/ui/styles/_portal-layout.scss`, `libs/ui/styles/_content-grid.scss`, `libs/ui/styles/_portal-sidebar.scss`, `libs/ui/styles/_panel-header.scss`, `libs/ui/styles/_detail-view.scss`, and `libs/ui/styles/_detail-view-actions.scss`- UI policy and migration debt: `docs/architecture/iptvnator-ui-guidelines.md`The index is a barrel, not a configured Sass include path. Productionconsumers currently use relative `@use` paths to the needed partial.## Token Boundary- App-owned surfaces, text, separators, hover states, selections, and provider accents use `--app-*` tokens from `m3-theme.scss`.- Use `--app-selection-on-color` for foregrounds placed on the selection accent; do not assume white has enough contrast in both themes.- Angular Material mixins and Material-component overrides may use Material tokens. Outside Material-owned components, use a `--mat-sys-*` token only after proving it is emitted in both light and dark contexts and supplying a real app-token or literal fallback.- Local semantic status colors are acceptable. Existing hard-coded layout, selection, and EPG surface colors are migration debt, not precedent.## Shared Layout Rules- Extend the matching partial instead of copying a large provider stylesheet. Provider-neutral services and UI use the existing shared data-access/UI libraries; repeated visual structure belongs in a shared Sass partial. Portal-shared consumers use their existing forwarding style modules instead of copied SCSS.- In an Electron drag region, every interactive descendant—buttons, links, inputs, overlays, and resize handles—must explicitly use `app-region: no-drag`. The shared directive-generated `.resize-handle` sets this centrally. Shared live sidebars reserve 8 px between their scroll content and the edge so scrollbar and resize hit areas stay independent.- A shared change must be checked across M3U, Xtream, Stalker, workspace, portal catalog/shared UI, and unified collections where relevant.## ValidationRun the affected consumer's Nx lint/test/build target. Inspect light and darkthemes, selected/hover states, and Electron title-bar drag/no-drag behavior.

Frequently asked questions

Iptvnator Theme Style