CtrlK
BlogDocsLog inGet started
Tessl Logo

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.

65

Quality

82%

Does it follow best practices?

Run evals on this skill

Adds up to 20 points to the overall score

View guide
SecuritybySnyk

Passed

No findings from the security scan

SKILL.md
Quality
Evals
Security

Quality

Content

86%Weight 40%Scale 1-5

Reviews the quality of instructions and guidance provided to agents. Good implementation is clear, handles edge cases, and produces reliable results.

An exemplary lean, repo-specific guideline skill: dense with non-obvious project knowledge, concrete commands and CSS mechanics, and a clear inspect-then-build-then-validate flow. The only gaps are minor: the primary validation instruction lacks example commands for selecting test/E2E targets, and there is no stated recovery step or recording location for validation outcomes.

Suggestions

Add a one-line example of how to run the focused component/unit target and the closest Playwright workflow (e.g. the exact pnpm test filter or Playwright command pattern), making the main validation step copy-paste executable.

State what to do when validation fails (fix and re-run) and where uncovered visual states should be recorded, closing the feedback loop in the Validation section.

DimensionReasoningScore

Conciseness

Every line carries project-specific, non-obvious knowledge — e.g. "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`" and "Stateful collection loading, persistence, and cross-provider orchestration belong in `@iptvnator/portal/shared/data-access`, not UI or util". Nothing explains concepts Claude already knows, and nothing can be trimmed without losing actionable information.

5 / 5

Actionability

Concrete and executable in most places: exact commands ("`pnpm run styles:icon-ligatures:validate` checks them", "also runs `pnpm run perf:compositing`"), specific CSS mechanics, and exact library/package paths to inspect. Not 5 because "Run the focused component/unit target and the closest Playwright workflow" gives no example of how to select or invoke those targets, and "Record any uncovered visual state" specifies no destination or format; not 3 because the guidance is largely copy-paste-ready and specific.

4 / 5

Workflow Clarity

A clear implicit sequence — Inspect First → Design Contract → Validation — with explicit and even conditional checkpoints ("Electron CDP is a fallback for Electron-only gaps", "A change that adds `backdrop-filter`, `filter`, animations or a rounded scroller also runs `pnpm run perf:compositing` ... and quotes the numbers"). Not 5 because there is no error-recovery loop for failed validation and "record any uncovered visual state" lacks a checkpoint destination; not 3 because the checkpoints are explicit and the conditional validation rules are precise.

4 / 5

Progressive Disclosure

A single-file skill under 50 lines with no bundle files, organized into three well-labeled sections. Its references are one level deep and clearly signaled — "Policy: `docs/architecture/iptvnator-ui-guidelines.md`", specific source paths, and "see the theme/style skill's Rendering Cost section" — so navigation is easy and nothing needs splitting.

5 / 5

Total

18

/

20

Passed

Description

70%Weight 40%Scale 1-5

Based on the skill's description, can an agent find and select it at the right time? Clear, specific descriptions lead to better discovery.

A highly distinctive, well-targeted trigger description with strong natural keywords and comprehensive surface enumeration. Its main weakness is that it is entirely a "when" clause: it never tells the reader what the skill actually provides (design conventions, inspection policy, validation workflow), which caps completeness.

Suggestions

Lead with a short 'what' clause before the trigger, e.g. "Applies IPTVnator's UI design conventions — shared components, density rules, theme tokens, and validation — when changing user-visible Angular UI..."

Add natural trigger synonyms users would say, such as "theme/theming", "styles/SCSS", or "component styling", to broaden keyword coverage.

DimensionReasoningScore

Specificity

Enumerates many concrete surfaces — "channel rows or lists, EPG views, settings and playlist surfaces, selection states, shared portal components, or light/dark styling" — which goes well beyond naming the domain. It is not 5 because it expresses a single action ("changing") applied to targets rather than multiple concrete capabilities, and it never states what the skill itself provides (design conventions, inspection pointers, validation); it is not 3 because the surface coverage is comprehensive, not just 1-2 items.

4 / 5

Completeness

The "when" is explicit and rich — "Use when changing user-visible Angular UI in IPTVnator, especially..." with concrete trigger phrases — but the "what" (apply IPTVnator's design conventions, inspect shared components, run validation) is never stated, only implied by the trigger context. Not 4 because the what is absent rather than merely under-specified; not 2 because unlike the vague "only when" anchor ("Use when working with documents"), this names the concrete activity and scope, so it sits above that anchor.

3 / 5

Trigger Term Quality

Contains natural terms a contributor would actually say: "Angular UI", "channel rows", "EPG", "settings", "playlist", "selection states", "light/dark styling". Not 5 because common synonyms and variations are missing — "theme/theming", "styles/SCSS/CSS", and generic "component styling" phrasing are absent; not 3 because the keyword coverage is genuinely good and domain-natural rather than merely "some relevant keywords".

4 / 5

Distinctiveness Conflict Risk

Scoped to a single application with app-specific vocabulary — "IPTVnator", "EPG views", "shared portal components" — creating a clear niche with distinct triggers and minimal risk of firing for an unrelated skill. No other generic skill would plausibly match this trigger set.

5 / 5

Total

16

/

20

Passed

Validation

100%

Checks the skill against the spec for correct structure and formatting. All validation checks must pass before discovery and implementation can be scored.

Validation — 16 / 16 Passed

Validation for skill structure

No warnings or errors.

Repository
4gray/iptvnator
Reviewed

Table of Contents

Is this your skill?

If you maintain this skill, you can claim it as your own. Once claimed, you can manage eval scenarios, bundle related skills, attach documentation or rules, and ensure cross-agent compatibility.