CtrlK
BlogDocsLog inGet started
Tessl Logo

emil-design-eng

This skill encodes Emil Kowalski's philosophy on UI polish, component design, animation decisions, and the invisible details that make software feel great.

48

Quality

52%

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

Fix and improve this skill with Tessl

tessl review fix ./skills/emil-design-eng/SKILL.md

The canonical home for this skill is emil-design-eng in emilkowalski/skills

SKILL.md
Quality
Evals
Security

Quality

Content

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

The body delivers exceptionally concrete, executable design-engineering guidance — decision frameworks, exact values, and copy-paste code covering the common animation and component cases. Its weaknesses are verbosity (repeated examples, explanations of CSS fundamentals) and a total absence of progressive disclosure, with ~700 lines of content that could be split into focused reference files. Overall a strong single-file skill that would benefit from tightening and restructuring.

Suggestions

Split the large topical sections (CSS Transform Mastery, clip-path patterns, gesture/drag interactions, Sonner principles) into one-level-deep reference files linked from a concise SKILL.md overview.

Deduplicate repeated content: the `scale(0.97)` press-feedback example appears three times, the asymmetric enter/exit CSS twice, and perceived-performance guidance in two sections — state each once and cross-reference.

Remove explanations of CSS fundamentals Claude already knows (transform-origin basics, what scale() does to children, 3D transform capabilities) and keep only the opinionated rules and values.

DimensionReasoningScore

Conciseness

The ~700-line body is noticeably verbose: the `scale(0.97)` press-feedback code appears three times, perceived-performance points are stated in two separate sections, the hold-to-delete/asymmetric-timing CSS is duplicated, and CSS fundamentals Claude already knows are explained ('Every element has an anchor point from which transforms execute', '3D transforms... create real 3D effects in CSS'). This matches anchor 2 ('noticeably verbose; several unnecessary explanations or padded sections'); not 3 because the padding and repetition are multiple and material, and not 1 because most content is genuinely non-obvious opinionated guidance rather than filler.

2 / 5

Actionability

The guidance is highly concrete — decision tables, exact custom easing curves (`cubic-bezier(0.23, 1, 0.32, 1)`), duration tables, copy-paste CSS/JS/JSX, and a mandated before/after review table with correct and incorrect examples. Minor gaps keep it at anchor 4 rather than 5: `.tooltip[data-instant]` is shown without how the attribute gets set, the comparison-slider pattern has no code, and the velocity snippet references undeclared variables.

4 / 5

Workflow Clarity

The Animation Decision Framework provides an explicit ordered question sequence (should it animate → purpose → easing → duration), the review output format is mandated with wrong/right examples, and the review checklist and debugging sections add checkpoints. This fits anchor 4 ('clear sequence with most checkpoints present; minor validation gaps'); not 5 because there is no explicit error-recovery loop, and not 3 because the sequencing and checkpoints are largely explicit and coherent.

4 / 5

Progressive Disclosure

There are no bundle files (no references/, scripts/, or assets/) — everything is inlined in one ~700-line SKILL.md. Internal section structure is good (headers, tables, code blocks), but self-contained bodies of knowledge like 'CSS Transform Mastery', 'clip-path for Animation', gesture patterns, and the Sonner principles clearly belong in separate reference files. This matches anchor 3 ('some structure but... content that should be separate is inline'); not 4 because there is zero file-level disclosure, and not 2 because internal navigation via well-labeled sections is present.

3 / 5

Total

13

/

20

Passed

Description

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

The description identifies a distinctive niche (a named author's UI-polish and animation philosophy) but never says what the skill actually does or when to invoke it. There is no 'Use when...' clause and no concrete action verbs, leaving both completeness and specificity in the mid-to-low range. Adding explicit capabilities and trigger conditions would lift most dimensions.

Suggestions

Add an explicit 'when' clause, e.g. 'Use when the user asks about animation decisions, easing choices, UI polish, or reviewing component code for interaction quality.'

State concrete actions the skill performs, e.g. 'Reviews UI code for animation and interaction issues, recommends easing curves and durations, and guides component implementation' instead of only saying it 'encodes philosophy'.

Include natural trigger synonyms users would actually say — 'easing', 'transitions', 'motion', 'springs', 'CSS animation' — rather than the idiosyncratic phrase 'invisible details'.

DimensionReasoningScore

Specificity

The description names the domains ('UI polish, component design, animation decisions, and the invisible details') but states no concrete actions — it says the skill 'encodes' a philosophy rather than what it does (review, guide, build). It fits anchor 2 ('names the domain but actions are minimal or generic'): not 3 because no 1-2 concrete actions are stated, and not 1 because specific domains are clearly named.

2 / 5

Completeness

It has a moderate 'what' — 'encodes Emil Kowalski's philosophy on UI polish, component design, animation decisions' — but no 'when' at all; there is no 'Use when...' clause or equivalent explicit trigger guidance, which caps completeness at 3 per the judging guidelines. It is not 2 because the 'what' is clearly stated, not 4 because 'when' is entirely absent rather than merely imprecise.

3 / 5

Trigger Term Quality

Keywords like 'UI polish', 'component design', and 'animation decisions' are somewhat natural to the domain, but common variations users would actually say (easing, transitions, motion, springs, CSS animation) are missing, and 'invisible details' is an idiosyncratic phrase a user would not naturally utter. This matches anchor 3 ('some relevant keywords but missing common variations or synonyms') better than 4.

3 / 5

Distinctiveness Conflict Risk

The framing around a specific author's design-engineering philosophy ('Emil Kowalski's philosophy on UI polish... invisible details that make software feel great') carves a clear niche with minimal conflict risk, though generic terms like 'component design' could overlap with general design or component-library skills. This fits anchor 4 ('mostly distinct; minor overlap risk with closely related skills'); it is not 5 because a few trigger terms are broad enough to collide with sibling design skills.

4 / 5

Total

12

/

20

Passed

Validation

87%

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

Validation — 14 / 16 Passed

Validation for skill structure

CriteriaDescriptionResult

skill_md_line_count

SKILL.md is long (707 lines); consider splitting into references/ and linking

Warning

frontmatter_unknown_keys

Unknown frontmatter key(s) found; consider removing or moving to metadata

Warning

Total

14

/

16

Passed

Repository
nexu-io/open-design
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.