kemiljk/skills

Personal agent skills distilled from Karl Koch's writing on design engineering, fluid interfaces, semantic HTML, and AI judgement.

Install selectively. Compose deliberately. Or run the full suite with dxe.

Install the full collection once, available in every project:

npx skills add kemiljk/skills -g --all

That installs every skill (including the dxe master pass) to all detected agents. Verify with:

npx skills ls -g

Update later with:

npx skills update -g

Share skills with a repo/team (committed into the project):

npx skills add kemiljk/skills --all

List what’s in the package:

npx skills add kemiljk/skills --list

Install only what you need (add -g for global):

npx skills add kemiljk/skills -g \
  --skill fluid-design \
  --skill modern-css-html \
  --skill ai-output-judgement

Target specific agents:

npx skills add kemiljk/skills -g -a cursor -a claude-code --all

dxe is the orchestrator — paired with d×e. One short name; one full-suite design-engineering pass on a repository or scoped path.

Prerequisite: install the full collection (-g --all above). dxe reads each sibling SKILL.md and will stop if any are missing.

In Cursor / Claude Code (or any agent that has the skills installed), ask for a pass:

Phases in order:

1. Intent — write-first-design, subtractive-design
   Hypothesis for the pass; cut unexplained chrome and generative residue.
2. Platform — semantic-html-first, modern-css-html
   Native elements and modern CSS/HTML before ARIA theatre or JS hacks.
3. Feel — fluid-design, interface-affordances, product-delight
   Interruptible motion, discoverable controls, care over novelty.
4. Bridge — design-engineering
   Map design structure to code structure; keep taste attached to materials.
5. Shipping — ai-output-judgement, prototype-to-production
   Name concrete AI-median failures; harden empty/error/auth/focus paths.

You get a single report: hypothesis, findings by severity (tied to skill names), subtractive cuts, and ordered next actions.

Use individual skills when you want a narrow lens. Use dxe when you want the full design-engineering pass on a repo.

Skills overlap on purpose. Use this order when several activate — or invoke dxe to run them as one pass:

1. Intent — write-first-design, subtractive-design
2. Platform — semantic-html-first, modern-css-html
3. Feel — fluid-design, interface-affordances, product-delight
4. Bridge — design-engineering
5. Shipping — ai-output-judgement, prototype-to-production

When motion taste and CSS purity disagree:

• fluid-design decides how the interaction should feel
• modern-css-html chooses the most native implementation that can deliver it
• JavaScript/Motion/SwiftUI remain appropriate for interruption, velocity, and gesture continuity CSS cannot express

fluid-design and modern-css-html previously lived in standalone repositories:

• https://github.com/kemiljk/fluid-design
• https://github.com/kemiljk/modern-css-html

Those names are preserved here with tighter activation files, clearer checklists, and on-demand references. New installs should use this collection.

These skills compress lessons from essays such as:

• 10 Principles for Fluid UI
• On the semantic web
• Write-first design
• The slop isn't the models
• Ten principles for product delight
• Beauty comes from absence
• Design for handshakes, not handovers
• On teaching AI how you work

Each skill should stay:

• trigger-precise in frontmatter description
• compact in activated SKILL.md
• actionable via prefer/reject rules and checklists
• progressively disclosed when examples are long enough for references/

MIT