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 para a instalação

Repositório: 4gray/iptvnator
Última atividade na origem: 2 de agosto de 2026 às 21:18
Idioma detectado do SKILL.md: inglês
Estrelas: 6.846
Forks: 877

Opções de instalação

Por padrão, está selecionado o prompt que primeiro revisa a origem. Você pode mudar para um comando direto ou baixar uma cópia local.

Instalar com Codex ou Claude Copie este prompt, cole no Codex, Claude ou outro assistente e deixe que ele revise a página da skill e instale para você.

Um comando direto ignora o prompt de revisão. Verifique a origem antes de executá-lo.

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

O comando permanece em uma só linha. Role horizontalmente para revisá-lo antes de copiar.

Prefere uma cópia local? Baixe os arquivos disponíveis atualmente no SkillsMP.

Revise os arquivos de origem

Leia o SKILL.md e os arquivos complementares exibidos pelo SkillsMP antes de decidir se vai instalar.

SKILL.md

Instruções da origem · Visualização somente leitura

Voltar à pesquisa Voltar à instalação

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 todas deste repositório

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.