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.

Ir a la instalación

Repositorio: 4gray/iptvnator
Última actividad en el origen: 2 de agosto de 2026 a las 21:18
Idioma detectado de SKILL.md: inglés
Estrellas: 6846
Forks: 877

Opciones de instalación

De forma predeterminada está seleccionado el prompt que primero revisa el origen. Puedes cambiar a un comando directo o descargar una copia local.

Instalar con Codex o Claude Copia este prompt, pégalo en Codex, Claude u otro asistente, y deja que revise la página de la skill y la instale por ti.

Un comando directo omite el prompt de revisión. Revisa el origen antes de ejecutarlo.

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

El comando permanece en una sola línea. Desplázate horizontalmente para revisarlo antes de copiarlo.

¿Prefieres una copia local? Descarga los archivos que SkillsMP tiene disponibles ahora.

Revisa los archivos de origen

Lee SKILL.md y los archivos complementarios que muestra SkillsMP antes de decidir si quieres instalarlo.

SKILL.md

Instrucciones de origen · Vista previa de solo lectura

Volver a la búsqueda Volver a la instalación

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

Ver todos los de este repositorio

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.