CtrlK
BlogDocsLog inGet started
Tessl Logo
SkillPublic

interface-craft

Interface Craft by Josh Puckett — a toolkit for building polished, animated interfaces in React. Includes Storyboard Animation (human-readable animation DSL with stage-driven sequencing), DialKit (live control panels for tuning animation values), and Design Critique (systematic UI review based on Josh Puckett's methodology). Triggers on: animate, animation, transition, storyboard, entrance, motion, spring, easing, timing, dialkit, sliders, controls, tune, tweak, critique, review, feedback, audit, improve, polish, refine, redesign.

Quality

84%

Does it follow best practices?

Run evals on this skill

Adds up to 20 points to the overall score

View guide
SecuritybySnyk

Low

Low-risk findings worth noting

SKILL.md
Quality
Evals
Security

Quality

Content

77%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 well-written routing overview: lean, concrete quick-start examples, an unambiguous sub-skill decision procedure, and clearly signaled one-level references. The critical flaw is bundle integrity — all three referenced sub-skill files are missing and the sole existing reference (references/config-patterns.json) is orphaned, so the skill's actual detail content is unreachable.

Suggestions

Ship the three referenced sub-skill files (storyboard-animation.md, dialkit.md, design-critique.md) in the bundle, or remove/repair the links — currently every "See X for the full spec" pointer is broken.

Reference references/config-patterns.json from the DialKit section (e.g. "See [references/config-patterns.json](references/config-patterns.json) for all control type formats") so the one existing bundle file is discoverable instead of orphaned.

De-duplicate the routing information between the Skills table's "When to Use/Invoke" columns and the Sub-Skill Routing section — keep the table as a one-line index and let the routing section own the decision logic.

DimensionReasoningScore

Conciseness

The body is lean — compact code tastes, a one-line-purpose table, a routing list, and five one-line principles — with no concept-teaching padding. Not 5 because the Skills table's "When to Use"/"Invoke" columns and the Sub-Skill Routing section restate the same routing information, and "By Josh Puckett" is duplicated from the frontmatter — minor redundancy that could be trimmed.

4 / 5

Actionability

Two concrete TSX snippets (the TIMING/storyboard comment block and the useDialKit call with real parameter shapes) plus a specific, executable routing procedure. Not 5 because the snippets are illustrative fragments with the complete pattern deferred to files that are not present in the bundle, and Design Critique gets no example of its process at all.

4 / 5

Workflow Clarity

Sub-Skill Routing is a clear, unambiguous decision list covering every invocation form (named argument, context, file path, plain description) with an explicit fallback ("Ambiguous → Ask which skill to use") — effectively a checklist. No destructive or batch operations exist, so no validation checkpoints are required.

5 / 5

Progressive Disclosure

Structurally the body is a clear overview with well-signaled one-level-deep links, but scored against the actual bundle: storyboard-animation.md, dialkit.md, and design-critique.md do not exist in the bundle, so navigation to all detailed content is broken, and the one file that does exist (references/config-patterns.json) is never referenced from SKILL.md. Broken links plus an orphaned reference file is more than the "minor organization gaps" of anchor 4.

3 / 5

Total

16

/

20

Passed

Description

87%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: explicit what-and-when structure with an unusually comprehensive, synonym-rich trigger list and third-person voice. Its main weakness is a set of very generic trigger terms (review, improve, feedback, audit) that create real conflict risk with code-review and general-improvement skills.

Suggestions

Trim or scope the generic trigger terms — replace "review, feedback, audit, improve, polish, refine, redesign" with design-scoped variants like "UI critique", "design review", "polish this interface/component" to reduce conflict with code-review and general-refactor skills.

Lead each sub-skill mention with an action verb (e.g. "Refactor multi-stage animations into a readable DSL", "Add live control panels", "Run systematic UI critiques") to sharpen specificity from noun-phrases to concrete actions.

DimensionReasoningScore

Specificity

"a toolkit for building polished, animated interfaces in React" plus three concretely characterized sub-skills ("human-readable animation DSL with stage-driven sequencing", "live control panels for tuning animation values", "systematic UI review") lists several specific capabilities. Not 5 because capabilities are noun-phrases of what's included rather than a comprehensive set of explicit actions (e.g. "refactor animations into storyboards", "add control panels", "run critiques").

4 / 5

Completeness

"What" is explicit (React toolkit with three named, concretely described sub-skills) and "when" is explicit via the "Triggers on:" clause with concrete trigger phrases — the equivalent explicit trigger guidance the rubric requires. Matches the anchor-5 example structure (what + when with concrete triggers).

5 / 5

Trigger Term Quality

The "Triggers on:" list gives 22 natural terms with rich synonym coverage (animate/animation/motion/transition/entrance; critique/review/audit/feedback; tune/tweak; improve/polish/refine/redesign), matching or exceeding the anchor-5 example's breadth. Not 4 because the coverage spans the full natural vocabulary across all three sub-skills, not just a few terms with some missing.

5 / 5

Distinctiveness Conflict Risk

The core niche (animation storyboard DSL, DialKit control panels) is distinct, but the trigger tail includes highly generic terms — "review", "feedback", "audit", "improve", "polish", "refine", "redesign", "controls", "timing" — that would fire on code reviews, general refactoring, and writing feedback, creating overlap with many unrelated skills. Not 4 because the overlap risk goes beyond "closely related skills"; not 2 because the DSL/dialkit terms are firmly niche-specific.

3 / 5

Total

17

/

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

frontmatter_unknown_keys

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

Warning

relative_links

Relative link issues: 8 missing

Warning

Total

14

/

16

Passed

Repository

jscraik/websites

Path

.codex/skills/interface-craft/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.