CtrlK
BlogDocsLog inGet started
Tessl Logo
SkillPublic

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.

2.16x
Quality

67%

Does it follow best practices?

Impact

91%

2.16x

Average score across 3 eval scenarios

SecuritybySnyk

Passed

No findings from the security scan

Fix and improve this skill with Tessl

tessl review fix ./.codex/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

71%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 is exceptionally actionable — exact values, executable CSS/JS, decision tables, and an enforced review format — and its workflow guidance is clearly sequenced. Its weaknesses are token efficiency (explaining basic CSS concepts and philosophical prose) and the complete absence of progressive disclosure: a 675-line monolith with no reference files.

Suggestions

Move deep-dive recipe material (clip-path patterns, gesture/drag handling, 3D transform examples, spring configuration, debugging techniques) into reference files (e.g. references/clip-path.md, references/gestures.md), keeping SKILL.md as the philosophy + decision framework + review format.

Cut explanations of concepts Claude already knows, such as translateY percentage semantics, scale() affecting children, and that CSS animations run off the main thread — keep only the opinionated rules and exceptions (e.g. modals keep center transform-origin).

Trim the motivational prose (Core Philosophy narrative, Paul Graham quote) to one-line principles so every remaining token carries actionable guidance.

DimensionReasoningScore

Conciseness

Mostly efficient, opinionated guidance with exact values (cubic-bezier curves, duration tables, the 0.11 velocity threshold), but it spends tokens on concepts Claude already knows — e.g. "Percentage values in translate() are relative to the element's own size", "scale() also scales an element's children", and that CSS animations run off the main thread — plus motivational prose (the Paul Graham quote, 'Taste is trained, not innate'). Not score 4 because these unnecessary explanations are more than minor trimmings in a 675-line body.

3 / 5

Actionability

Fully concrete and executable throughout: ready-to-use CSS (scale(0.97) on :active, @starting-style blocks, tooltip instant-skip pattern), exact easing variables like cubic-bezier(0.32, 0.72, 0, 1), a duration table per element type, a frequency-based animation decision table, a velocity-calculation snippet for swipe dismissal, and a required review table format with correct/incorrect examples. The specific examples cover the common cases (buttons, tooltips, popovers, modals, toasts, drawers) completely; remaining fragments (e.g. '// Start drag...') are peripheral illustrations.

5 / 5

Workflow Clarity

The Animation Decision Framework gives a clear ordered sequence (should this animate → purpose → easing → duration) with an explicit easing decision tree, and the review workflow is unambiguous — a mandatory Before/After/Why markdown table plus a closing Review Checklist mapping issues to fixes. Not score 5 because the 'review your work the next day' and debugging guidance lack concrete checkpoints, and no validation/verification loop exists for the review output itself.

4 / 5

Progressive Disclosure

The single 675-line SKILL.md has strong internal section structure, but no bundle files exist and everything is inlined — deep-dive recipe material (clip-path comparison sliders, orbit keyframes, gesture/drag patterns, spring configuration, debugging tips) that clearly belongs in reference files loads entirely into context on every invocation. Matches anchor 3 (hundreds of lines that could be in a separate file); not score 2 because the internal organization and navigation via headers and tables is genuinely good, and not score 4 because no content at all is split out.

3 / 5

Total

15

/

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 its domain distinctly and in third person, but it describes the skill's contents rather than what it does, and provides no trigger guidance for when to invoke it. It reads as a content summary rather than a capability statement with activation conditions.

Suggestions

Add a 'Use when...' trigger clause, e.g. 'Use when reviewing or building UI animations, transitions, hover/press states, or when the user asks for UI polish or micro-interaction guidance.'

Replace the contents-style framing with concrete actions, e.g. 'Reviews UI code for animation, easing, duration, and interaction-polish issues and applies design-engineering principles to fix them.'

Include natural synonyms users would say — 'motion', 'CSS transitions', 'micro-interactions', 'easing' — to improve trigger-term coverage.

DimensionReasoningScore

Specificity

The description says it "encodes Emil Kowalski's philosophy on UI polish, component design, animation decisions, and the invisible details" — it names the domain clearly but lists zero concrete actions the skill performs (no 'reviews', 'builds', 'applies'). It is not score 3 because no 1-2 concrete actions are named, and not score 1 because the domain is explicitly identified rather than pure abstraction.

2 / 5

Completeness

The 'what' is reasonably clear (a philosophy on UI polish, component design, and animation decisions), but the 'when' is entirely missing — there is no "Use when..." clause or equivalent trigger guidance, which caps this dimension at 3. Not score 2 because the 'what' is not vague; it names four concrete topical areas.

3 / 5

Trigger Term Quality

Phrases like "UI polish", "component design", and "animation decisions" are natural terms a user might say, but common synonyms such as "motion", "transitions", "micro-interactions", or "CSS animation" are absent, and "the invisible details that make software feel great" is aspirational rather than a trigger phrase. Not score 4 because keyword coverage stops at the domain nouns without variations.

3 / 5

Distinctiveness Conflict Risk

The Emil Kowalski attribution and the focus on animation decisions and UI polish carve out a fairly distinct niche with minor overlap risk against generic frontend-design skills. Not score 5 because without explicit trigger guidance it could fire on any UI/animation request that a general design skill also covers.

4 / 5

Total

12

/

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

skill_md_line_count

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

Warning

Total

15

/

16

Passed

Repository

jscraik/websites

Path

.codex/skills/emil-design-eng/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.