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.

여기까지가 README 앞부분입니다. 나머지는 원문에서 읽을 수 있습니다. README 전문 보기 ↗