iptvnator-ui-design

Use when changing user-visible Angular UI in IPTVnator, especially channel rows or lists, EPG views, settings and playlist surfaces, selection states, shared portal components, or light/dark styling.

Jump to install

Repository: 4gray/iptvnator
Last source activity: August 2, 2026 at 21:18
Detected SKILL.md language: English
Stars: 6,846
Forks: 877

Install options

The review-first prompt is selected by default. You can switch to a direct command or download a local copy.

Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.

A direct command skips the review prompt. Inspect the source before running it.

npx skills add https://github.com/4gray/iptvnator --skill iptvnator-ui-design

The command stays on one line. Scroll horizontally to inspect it before copying.

Prefer a local copy? Download the files currently available to SkillsMP.

Review the source files

Read SKILL.md and any companion files shown by SkillsMP before deciding whether to install.

SKILL.md

Source instructions · Read-only preview

Back to search Back to installation

stalker-portal

Use when changing Stalker or Ministra routes, stores, catalog or series shapes, playback progress, favorites and recent items, EPG, or remote control.

2026-08-08

release-cut

Use when preparing, cutting, tagging, publishing, or verifying an IPTVnator release or its release assets.

2026-07-31

release-notes

Use when a change may need a .changes note, the Release note gate fails, or deciding whether type: internal or no-release-note applies.

2026-07-31

View all from this repository

IPTVnator UI Design

Inspect First

Policy: docs/architecture/iptvnator-ui-guidelines.md

Theme and navigation: apps/web/src/m3-theme.scss, libs/ui/styles/_nav-list.scss

Channel row: libs/ui/components/src/lib/channel-list-container/channel-list-item/

Shared EPG timeline/list: libs/ui/epg/src/lib/epg-timeline/, libs/ui/epg/src/lib/epg-list-view/

Before adding local markup, inspect @iptvnator/ui/components, @iptvnator/ui/epg, @iptvnator/ui/playback, @iptvnator/ui/shared-portals, @iptvnator/portal/shared/ui, and @iptvnator/playlist/shared/ui. Stateful collection loading, persistence, and cross-provider orchestration belong in @iptvnator/portal/shared/data-access, not UI or util.

Design Contract

Prefer dense, scannable application UI. Behavior-only work must not include an opportunistic visual rewrite.

App chrome uses app-owned selection, surface, and text tokens in both themes. Do not extend the known hard-coded EPG/surface styling debt.

Dense rows use minimum dimensions rather than a fixed width: the text column needs min-width: 0 plus ellipsis, while logos and trailing actions use flex-shrink: 0.

Assign one scroll owner per pane. Preserve sticky controls, keyboard/focus feedback, and loading, empty, error, disabled, hover, and selected states.

Providers supply controlled data to shared EPG timeline/list/panel components instead of rebuilding those views.

Shared changes require checking every affected M3U, Xtream, Stalker, workspace, and collection consumer in light and dark themes.

Validation

Run the focused component/unit target and the closest Playwright workflow for a visible change. Electron CDP is a fallback for Electron-only gaps, not a replacement for an available E2E flow. Record any uncovered visual state.

name	iptvnator-ui-design
description	Use when changing user-visible Angular UI in IPTVnator, especially channel rows or lists, EPG views, settings and playlist surfaces, selection states, shared portal components, or light/dark styling.