CtrlK
BlogDocsLog inGet started
Tessl Logo
SkillPublic

ui-screenshots

Shoot polished, framed screenshots of the open-slide dev UI (editor, inspector, Arrange tab, comment mode, agent panel, assets manager, svgl search, themes, presenter, ⌘K menu, slide overview, export menu) as cropped webp images — the app as a rounded, shadowed window on a soft gray stage, with padding where the window edge shows and bleed where the crop cuts through. This is the house style for docs pages, the changelog, the landing site, and READMEs. Use it whenever the user asks for UI screenshots, docs or changelog images, "nice"/"framed"/"cropped" screenshots, or wants images under apps/web/public/assets refreshed because the UI changed — even if they don't name this skill or describe the style.

Quality

94%

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

92%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.

A tightly written, highly operational skill: every step is executable, batch output is explicitly validated with reshoot feedback loops, and the recipes are properly offloaded to the example shots file. The only slack is a couple of trimmable rationale sentences in the intro and crop-guidance sections.

DimensionReasoningScore

Conciseness

The body is dense with project-specific operational knowledge (ports, scratch paths, lockfile drift, mock endpoints) and never explains concepts Claude already knows, but a few rationale sentences ('That contrast is what makes a crop read as…') and the 56px padding detail — which the script already encodes — could be trimmed.

4 / 5

Actionability

Every step ships an exact, copy-paste-ready command ('node .claude/skills/ui-screenshots/scripts/setup-scratch.mjs', the server line with --port 43219, 'kill $(lsof -tiTCP:43219 -sTCP:LISTEN)'), and the bulk recipes plus field reference are provided as a working file (scripts/shots.example.mjs, verified present).

5 / 5

Workflow Clarity

A 9-step workflow with explicit validation ('Look at every image… Check for: a crop that slices through a label or pill… Fix and reshoot with --only'), error-recovery loops ('If it dies with Cannot find package…, run pnpm install --frozen-lockfile'), in-context verification via preview-web.mjs, and scoped cleanup.

5 / 5

Progressive Disclosure

SKILL.md is a clear workflow overview; the heavy material (shot recipes and the field reference) is offloaded exactly one level deep to scripts/shots.example.mjs, every referenced script path exists in the bundle, and sections are clearly headed with no nested references.

5 / 5

Total

19

/

20

Passed

Description

95%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 strong description with an explicit what and a rich, natural-language when clause that even handles unspoken requests. The single soft spot is mild padding: the framing-style parameters (56px padding, bleed rules) are body-level detail inflating an otherwise crisp capability statement.

DimensionReasoningScore

Specificity

'Shoot polished, framed screenshots of the open-slide dev UI (editor, inspector, Arrange tab, comment mode, agent panel, assets manager, svgl search, themes, presenter, ⌘K menu, slide overview, export menu) as cropped webp images' is concrete and enumerates twelve real UI targets, but the capability is essentially one action with elaborated style parameters (padding/bleed clause) rather than the multiple distinct actions of the top anchor.

4 / 5

Completeness

It explicitly answers both parts: the what ('Shoot polished, framed screenshots… as cropped webp images — the app as a rounded, shadowed window on a soft gray stage, with padding…') and the when ('Use it whenever the user asks for…') with concrete trigger phrases.

5 / 5

Trigger Term Quality

'Use it whenever the user asks for UI screenshots, docs or changelog images, "nice"/"framed"/"cropped" screenshots, or wants images under apps/web/public/assets refreshed because the UI changed' covers natural user phrasings, synonym variants, an indirect-request path, and a repo-specific trigger.

5 / 5

Distinctiveness Conflict Risk

It is scoped to 'the open-slide dev UI' and destinations like 'images under apps/web/public/assets', a clear niche with distinct triggers and minimal overlap risk against generic screenshot helpers.

5 / 5

Total

19

/

20

Passed

Validation

93%

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

Validation — 15 / 16 Passed

Validation for skill structure

CriteriaDescriptionResult

relative_links

Relative link issues: 1 suspicious

Warning

Total

15

/

16

Passed

Repository

1weiho/open-slide

Path

.claude/skills/ui-screenshots/SKILL.md

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.