SHELEG Design — design taste as an agent skill

Give coding agents a deliberate visual system: style packs, tokens, motion doctrine and a clean Figma seam.

npx skills add ssheleg/sheleg-design-skill

Ask: Design a calm dark dashboard and map its tokens into the component layer.

Detailed docs →

Docs, and every skill → · this skill's page · follow @sshlg93 on X

Loads in DeepSeek Harness (dsh) with no plugin to write: it reads the Agent Skills standard directly, scanning ~/.agents/skills — where npx skills add puts this pack — at rank 500.

Browse every style pack → — every card rendered in its own token layer, plus the collection audit. The site each pack was measured from stays in the pack; the published pages name none of them.

An agent can generate a landing page in under a minute, and it will look like every other generated landing page: three cards, a gradient, a hero that does nothing. Ask it for a dashboard and you get a different flavor of the same problem — invented colors, six accent hues, dark mode retrofitted later.

This skill is the taste layer. It gives a coding agent one motion methodology for cinematic, scroll-driven pages, a motion doctrine that decides whether to animate before it decides how, and thirty-nine locked style packs with ready-made design tokens, so what it builds reads as one system instead of a pile of effects.

npx sheleg-design-skill

That drops the bundle — SKILL.md, the SHELEG_DESIGN.md reference, the style packs and their token CSS — into .cursor/skills/ or .claude/skills/, where your agent discovers it on its own.

---

The two halves

Motion — for landings, heroes, scroll narratives. A page feels alive not from many animations but from a single source of truth (measured scroll position) driving many cheap, layered responses that are individually quiet and collectively cinematic. One scroll "clock" feeds a WebGL particle field, a 2D fallback, attention dimming, parallax, scrubbed instruments and a progress rail — each an independent, degrade-to-calm layer. Nothing crossfades; things redeploy.

Style packs — the visual identity, pluggable per project. Three of them are meant to be used standalone: workbench (quiet light/dark product UI for dashboards, admin panels, internal and dev tools) and briefing-room (a dark 16:9 presentation deck, where the presenter's voice is the timeline and slides therefore never animate) take none of the motion layer at all; field-notes is standalone by default — its reference carries no motion library — but may opt into the cinematic layer, and says so in its own Motion flavor section.

This is the beginning of the README. Read the rest at the original. Read the full README ↗