Skip to content

docs: turn the srcset-cli skill into a skill for writing code - #38

Merged
dangreen merged 1 commit into
mainfrom
docs/srcset-skill
Sep 2, 2026
Merged

docs: turn the srcset-cli skill into a skill for writing code#38
dangreen merged 1 commit into
mainfrom
docs/srcset-skill

Conversation

@dangreen

@dangreen dangreen commented Sep 2, 2026

Copy link
Copy Markdown
Member

The two skills were split by package - one for the integrations, one for the cli. They now split by moment instead:

  • setup-srcset wires an integration into a project, once.
  • srcset is what an agent reads afterwards, when something has to display an image.

So srcset-cli is renamed to srcset and grows the half it was missing: the image module contract, rendering with the Picture and Image components or with getSourceProps / getImageProps, the per-framework differences in refs and prop casing, the sizes and retina reasoning, and the import query. The command line stays as the section that generates and bakes the variants, and the rules move up, since they are the same for the plugin, the loader, the cli config and a query.

The point the rename is for: an image module from a bundler integration and one baked by the cli have identical exports, so the rendering half applies to both. That was only true of the cli before.

Corrections along the way

Both skills carried claims that did not survive a check against the sources:

  • The style prop row was wrong for all three frameworks. React and Preact take an object; Svelte takes a string, because the placeholder is merged into it as a template literal.
  • -d src/baked with sources under src/images/ writes src/baked/src/images/photo.ts, not src/baked/images/photo.ts - output paths mirror the source tree relative to the current directory. The example and two recipes said otherwise.
  • The setup-srcset render example passed srcSet only to Picture, which is the first pitfall the srcset skill lists: the fallback <img> is then a single fixed url.
  • @srcset/runtime was installed with -D there, and the hashed asset url in its exports table was invented rather than a real Vite one.

The two skills split by moment rather than by package: `setup-srcset`
wires an integration into a project once, and `srcset` is what an agent
reads afterwards, when something has to display an image. So the cli
skill is renamed and gains the image module contract, rendering with the
components and the runtime helpers, the `sizes` and retina reasoning, and
the import query, with the command line kept as the section that
generates and bakes the variants. Both skills also lose a few claims that
did not survive a check against the sources.
@dangreen
dangreen merged commit 9b635a9 into main Sep 2, 2026
7 checks passed
@dangreen
dangreen deleted the docs/srcset-skill branch September 2, 2026 12:45
@coveralls

Copy link
Copy Markdown

Coverage Report for CI Build 33631606453

Coverage remained the same at 93.847%

Details

  • Coverage remained the same as the base build.
  • Patch coverage: No coverable lines changed in this PR.
  • No coverage regressions found.

Uncovered Changes

No uncovered changes found.

Coverage Regressions

No coverage regressions found.


Coverage Stats

Coverage Status
Relevant Lines: 888
Covered Lines: 841
Line Coverage: 94.71%
Relevant Branches: 656
Covered Branches: 608
Branch Coverage: 92.68%
Branches in Coverage %: Yes
Coverage Strength: 79534.67 hits per line

💛 - Coveralls

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants