feat: add a Claude skill for rendering a workspace as an artifact - #13
Merged
Conversation
Gives an agent the tools to turn a Structurizr workspace into something a person can look at: the npx one-liner, which of the two single-file outputs to hand over, how to get JSON out of a DSL workspace, and how to prove the result is self-contained before handing it over. Modeled on the scaffoldizr skill, and complementary to it — that one authors a workspace, this one renders it. The skill states plainly that it never writes to the model. Every command in it was run before it was written down, and the sizes are measured rather than estimated. The failure modes it warns about are the ones this project actually hit: artifact.html versus index.html, the emptied output directory, and that ordinary https:// hyperlinks in the output are content rather than a self-containment leak — a naive grep for them fails forever. .gitignore keeps ignoring agent scaffolding but opens a path to this skill. A negation cannot reach inside an excluded directory, so the parents are opened and their contents excluded instead; .claude/ and the local gauntlet-loop skill stay ignored, verified with git check-ignore. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
`npx skills add formulamonks/renderizr`, matching how scaffoldizr documents its own. Placed after the options reference and before the comparison, so it follows what the tool does rather than interrupting it, and it points at the skill in the tree for anyone who would rather read it than install it. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
A skill under
.agents/skills/renderizr, written in the shape of the scaffoldizr skill. The two are complementary: scaffoldizr authors a workspace, this one renders it. The skill says explicitly that it never writes to the model.Contents
SKILL.md— when to use it, the one command, how to get JSON from a DSL workspace, the recommended flow, and the failure modes.references/flags.md— every flag, what it does and what it costs, including which ones need network during a build.references/artifacts.md— the Claude artifact path:artifact.htmlversusindex.html, measured sizes, what the reader gets.references/verifying.md— proving an artifact is self-contained before handing it over.LICENSE— MIT, matching the project.Plus a README section pointing readers at
npx skills add, worded to match how scaffoldizr documents its own, and linking the skill in the tree for anyone who would rather read it than install it.Written from what was run, not from memory
Every command in the skill was executed first. The
npxone-liner and the verification grep were run verbatim against the Big Bank example, and the sizes in the tables are measured:artifact.htmlat 1.07 MB / ~327 KB gzipped, and 0 external asset references.The warnings are the failure modes this project actually hit, including the one worth the most:
https://in the output is not a leak. A rendered page is full of ordinary hyperlinks tostructurizr.comandc4model.com. Self-containment is about<script src>,<link href>and<img src>— a naivegrep https://fails forever and teaches you to ignore it.One repository change
.gitignoreexcludes/.agents/to keep agent scaffolding out of a public repository, which would also have hidden this skill. Git cannot negate a path inside an excluded directory, so the parents are opened and their contents excluded instead. Verified withgit check-ignore:.claude/and the local gauntlet-loop skill stay ignored,.agents/skills/renderizrdoes not.🤖 Generated with Claude Code