{"id":23477,"date":"2026-08-25T05:13:06","date_gmt":"2026-08-25T05:13:06","guid":{"rendered":"https:\/\/scannn.com\/karl-koch-on-teaching-ai-how-you-work\/"},"modified":"2026-08-25T05:13:06","modified_gmt":"2026-08-25T05:13:06","slug":"karl-koch-on-teaching-ai-how-you-work","status":"publish","type":"post","link":"https:\/\/scannn.com\/lv\/karl-koch-on-teaching-ai-how-you-work\/","title":{"rendered":"Karl Koch | On teaching AI how you work"},"content":{"rendered":"\n
\n

I\u2019ve been writing down how interfaces should feel, how HTML should carry behaviour and how AI drafts should be judged. Essays are good at teaching people but awkward to paste into every new chat; skills package the same judgement so an agent can discover it, load the relevant slice and apply it without me re-explaining five years of notes.<\/p>\n

The collection<\/h2>\n

I published the set at kemiljk\/skills<\/code><\/a>: eleven skills, one repository, MIT licensed.<\/p>\n

Two of them already existed as standalone repos:<\/p>\n

Those remain the public names. The consolidated versions are tighter, with clearer triggers, smaller activated files, examples moved into references and an explicit precedence rule between motion taste and platform-native CSS.<\/p>\n

Eight more encode lessons from the writing that kept reappearing whenever I reviewed AI output:<\/p>\n\n\n\n\n\n\n\n\n\n\n\n\n
Skill<\/th>\nJob<\/th>\n<\/tr>\n<\/thead>\n
semantic-html-first<\/code><\/td>\nPrefer native elements and platform contracts<\/td>\n<\/tr>\n
interface-affordances<\/code><\/td>\nMake possible actions perceptible across input modes<\/td>\n<\/tr>\n
write-first-design<\/code><\/td>\nDecide in prose before pixels or code<\/td>\n<\/tr>\n
design-engineering<\/code><\/td>\nHandshake between design intent and production code<\/td>\n<\/tr>\n
product-delight<\/code><\/td>\nAnticipation and reliability over decorative novelty<\/td>\n<\/tr>\n
subtractive-design<\/code><\/td>\nRemove anything without a demonstrable purpose<\/td>\n<\/tr>\n
ai-output-judgement<\/code><\/td>\nTreat generated work as a draft with a last-mile review<\/td>\n<\/tr>\n
prototype-to-production<\/code><\/td>\nHarden happy paths for real edge cases<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n

The eleventh is dxe<\/code>, which doesn\u2019t encode taste of its own; it runs the other ten.<\/p>\n

Browse and compose them here:<\/p>\n

<\/astro-island><\/p>\n

Install the lot<\/h2>\n

Ten narrow lenses were fine while I was picking one at a time, but I kept reaching for the same install command in every new repo and then forgetting which machine had which subset. So the recommended path is now global and complete:<\/p>\n

npx skills add<\/span> kemiljk\/skills -g<\/span> --all<\/span>\n<\/code><\/pre>\n
Check what landed, and update later:<\/p>\n
npx skills ls<\/span> -g<\/span>\nnpx skills update -g<\/span>\n<\/code><\/pre>\n
Selective installs still work, and are still right when you\u2019re committing skills into a shared repo rather than onto your own machine:<\/p>\n
npx skills add<\/span> kemiljk\/skills --list<\/span>\n\nnpx skills add<\/span> kemiljk\/skills -g<\/span> \\<\/span>\n  --skill<\/span> fluid-design \\<\/span>\n  --skill<\/span> modern-css-html \\<\/span>\n  --skill<\/span> ai-output-judgement\n<\/code><\/pre>\n
Drop the -g<\/code> to commit them into a project so a team picks up the same constraints. You can also target particular agents with -a cursor -a claude-code<\/code>.<\/p>\n
One command for the whole pass<\/h2>\n
The thing I got wrong the first time was assuming I\u2019d compose skills by hand, but in practice I never did. I\u2019d invoke one, get a narrow answer, and forget that the subtractive pass or the production hardening existed until something shipped badly.<\/p>\n
dxe<\/code> is the fix, and it\u2019s named after d\u00d7e<\/a> because it\u2019s the same argument in executable form. One short name, one full-suite pass over a repo or a scoped path. It reads every sibling SKILL.md<\/code> and stops if any are missing, which is why the global --all<\/code> install is the prerequisite rather than a suggestion.<\/p>\n\n\n\n\n\n\n\n\n
Prompt<\/th>\nBehaviour<\/th>\n<\/tr>\n<\/thead>\n
dxe<\/code><\/td>\nFull workspace review; propose fixes<\/td>\n<\/tr>\n
dxe src\/components<\/code><\/td>\nScope to that path<\/td>\n<\/tr>\n
dxe review<\/code><\/td>\nFindings only; no edits<\/td>\n<\/tr>\n
dxe fix<\/code><\/td>\nFindings, then high-confidence fixes<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n
You get back one report rather than ten opinions: a hypothesis for what the pass is improving, findings by severity with each one tied to the skill that caught it, the subtractive cuts stated explicitly, and the remaining work ordered.<\/p>\n
Use a single skill when you want a narrow lens. Use dxe<\/code> when you want the argument applied end to end.<\/p>\n
Composition<\/h2>\n
Skills overlap on purpose, but without precedence they become noise. dxe<\/code> runs this order, and it\u2019s the same order to follow by hand:<\/p>\n
    \n
  1. Intent<\/strong>: write-first-design<\/code> and subtractive-design<\/code> decide whether the work should exist.<\/li>\n
  2. Platform<\/strong>: semantic-html-first<\/code> and modern-css-html<\/code> choose native materials.<\/li>\n
  3. Feel<\/strong>: fluid-design<\/code>, interface-affordances<\/code> and product-delight<\/code> shape interaction quality.<\/li>\n
  4. Bridge<\/strong>: design-engineering<\/code> maps design structure onto code structure, so taste stays attached to tokens and rendering rather than to a handoff document.<\/li>\n
  5. Shipping<\/strong>: ai-output-judgement<\/code> and prototype-to-production<\/code> catch the median draft before it escapes.<\/li>\n<\/ol>\n
    When motion taste and CSS purity disagree, fluid design owns the desired behaviour and modern CSS owns the most native implementation that can still deliver it. JavaScript earns its place for interruption, velocity and gesture continuity that CSS can\u2019t express.<\/p>\n
    Migration from the standalone repos<\/h2>\n
    If you already installed kemiljk\/fluid-design<\/code> or kemiljk\/modern-css-html<\/code>, point new installs at the collection:<\/p>\n
    npx skills add<\/span> kemiljk\/skills -g<\/span> --skill<\/span> fluid-design\nnpx skills add<\/span> kemiljk\/skills -g<\/span> --skill<\/span> modern-css-html\n<\/code><\/pre>\n
    The skill names stay the same, while the internals are improved: less repetition, clearer review checklists and references instead of one oversized file.<\/p>\n
    Essays and skills<\/h2>\n
    Essays still carry the stories, demos and reasons; skills carry the executable part: triggers, defaults, rejections and exit checks. If the collection works, I spend less time retyping \u201cuse tokens\u201d, \u201cprefer native buttons\u201d and \u201csprings not linear 300ms\u201d, and collaborators get the same constraints without sitting through the archive. dxe<\/code> is the version of that I actually use day to day; the individual skills are what it\u2019s made of.<\/p>\n
    When to steal this<\/h2>\n
    Build a personal skills collection when you notice yourself repeating the same review comments across AI drafts, pasting essay excerpts into prompts, maintaining multiple overlapping instruction files or teaching the same taste to different tools.<\/p>\n
    Start from writing you already trust. Compress it into triggers, rules and checks. Keep examples in references. Publish the set so other people can install the judgement without inheriting the whole archive.<\/p>\n<\/p><\/div>\n
    Source link <\/a><\/p>\n","protected":false},"excerpt":{"rendered":"
    I\u2019ve been writing down how interfaces should feel, how HTML should carry behaviour and how AI drafts should be judged. Essays are good at teaching people but awkward to paste into every new chat; skills package the same judgement so an agent can discover it, load the relevant slice and apply it without me re-explaining […]<\/p>\n","protected":false},"author":16,"featured_media":23478,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[143],"tags":[],"class_list":["post-23477","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-ai"],"_links":{"self":[{"href":"https:\/\/scannn.com\/lv\/wp-json\/wp\/v2\/posts\/23477","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/scannn.com\/lv\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/scannn.com\/lv\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/scannn.com\/lv\/wp-json\/wp\/v2\/users\/16"}],"replies":[{"embeddable":true,"href":"https:\/\/scannn.com\/lv\/wp-json\/wp\/v2\/comments?post=23477"}],"version-history":[{"count":0,"href":"https:\/\/scannn.com\/lv\/wp-json\/wp\/v2\/posts\/23477\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/scannn.com\/lv\/wp-json\/wp\/v2\/media\/23478"}],"wp:attachment":[{"href":"https:\/\/scannn.com\/lv\/wp-json\/wp\/v2\/media?parent=23477"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/scannn.com\/lv\/wp-json\/wp\/v2\/categories?post=23477"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/scannn.com\/lv\/wp-json\/wp\/v2\/tags?post=23477"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}