feat(web): surface the sketchi CLI across the site#293
Merged
Conversation
Collaborator
Author
How to use the Graphite Merge QueueAdd either label to this PR to merge it via the merge queue:
You must have a Graphite account in order to use the merge queue. Sign up using this link. An organization admin has enabled the Graphite Merge Queue in this repository. Please do not merge from GitHub as this will restart CI on PRs being processed by the merge queue. This stack of pull requests is managed by Graphite. Learn more about stacking. |
Contributor
Sketchi Web PreviewStatus:
Preview Worker cleanup has completed. |
Contributor
Sketchi Icons PreviewStatus:
Preview Worker cleanup has completed. |
Contributor
Sketchi Excalidraw Workspace PreviewStatus:
Preview Worker cleanup has completed. |
Contributor
Sketchi Eval Harness PreviewStatus:
Preview Worker cleanup has completed. |
Contributor
Sketchi Playground / Studio PreviewStatus:
Preview Worker cleanup has completed. |
Merge activity
|
## The gap `sketchi` is published on npm and does real work, but `apps/web/src` mentioned `npm`, `npx`, `install.sh` or the CLI **zero** times — not the header, footer, homepage, docs or agents pages. A visitor to sketchi.app could not discover the CLI existed. This treats the terminal as a peer of the playground and the agent route. ## What's here - **`CliBand` homepage section** (`#cli`, after the feature grid) — a terminal card carrying both install commands copy-pasteable through the existing `CopyButton`, an example `generate` call, three honest capability claims, and a link to the package. - **Reachable from every page** — header nav (desktop + mobile sheet), footer Product column, footer npm package link, and a third route in the closing CTA. - **Docs** — a third path lane in the explainer plus a real `#cli` section: install, the command surface, and the agent-facing flags. - **`llms.txt`** — a CLI section so agents discover it the same way. - **npm mark** — pulled from our own library at `icons.sketchi.app/api/icons/npm.svg` into `public/brand/npm.svg`. ## Accuracy Every claim comes from `sketchi --help` and the published npm metadata. Both install commands were **run end-to-end against the published package** in an isolated HOME before shipping: the one-liner installed 0.3.0, wired zsh completions, and `create` / `list` / `export --format png` all produced real output. The install commands are pinned byte-for-byte in `cli-package.test.ts` so they cannot drift silently, and nothing names a version — npm shows the current one. ## Also fixed `.docs-section code` styled inline prose pills, which made commands inside a docs codeblock unreadable once docs actually had one. Caught in the browser pass, not by tests. ## Proof - `pnpm nx run-many -t typecheck,test,build` — green, 17 projects - `pnpm test:tools` — 64 pass (incl. the `workers.dev` public-surface guard) - `pnpm nx lint web`, `build-storybook` for `diagram-ui` and `web` — green - Component tests and Storybook stories for the new section, matching existing coverage; 57 web tests pass - Verified in a real browser at 1440px and 390px: copy controls, npm link, and the nav/footer entries from `/`, `/agents`, `/agents/codex`, `/docs` ## Review `codex review --base main` raised two valid P2 accuracy findings; both reproduced against the binary and are fixed in the second commit: 1. The lead claimed offline "for everything but generation" — `share` and `pull` are network commands too. 2. Docs and `llms.txt` claimed every command reads `--json` / `--file` — `list`, `show`, `export`, `restore` reject both. Scoped to create/edit/patch. ## Deliberately left out - No version number anywhere in copy. - Three docs lanes are **stacked, not side-by-side**: `.docs-article` is capped at `72ch`, so three columns would be ~200px each and could not hold the inline commands. - No hero button — the hero keeps its two-button conversion path; the CLI gets its own full section instead of crowding it. - Root README untouched, per the brief. ## Found, not fixed (pre-existing on `main`) The mobile header sheet has no background, so page content shows through the open menu. Identical on `main`; outside this slice.
graphite-app
Bot
force-pushed
the
feat/cli-visibility
branch
2 times, most recently
from
July 25, 2026 16:11
52552c4 to
bd1ceb3
Compare
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.
The gap
sketchiis published on npm and does real work, butapps/web/srcmentionednpm,npx,install.shor the CLI zero times — not the header, footer,homepage, docs or agents pages. A visitor to sketchi.app could not discover the
CLI existed.
This treats the terminal as a peer of the playground and the agent route.
What's here
CliBandhomepage section (#cli, after the feature grid) — a terminalcard carrying both install commands copy-pasteable through the existing
CopyButton, an examplegeneratecall, three honest capability claims, anda link to the package.
Product column, footer npm package link, and a third route in the closing CTA.
#clisection:install, the command surface, and the agent-facing flags.
llms.txt— a CLI section so agents discover it the same way.icons.sketchi.app/api/icons/npm.svginto
public/brand/npm.svg.Accuracy
Every claim comes from
sketchi --helpand the published npm metadata. Bothinstall commands were run end-to-end against the published package in an
isolated HOME before shipping: the one-liner installed 0.3.0, wired zsh
completions, and
create/list/export --format pngall produced realoutput.
The install commands are pinned byte-for-byte in
cli-package.test.tsso theycannot drift silently, and nothing names a version — npm shows the current one.
Also fixed
.docs-section codestyled inline prose pills, which made commands inside adocs codeblock unreadable once docs actually had one. Caught in the browser
pass, not by tests.
Proof
pnpm nx run-many -t typecheck,test,build— green, 17 projectspnpm test:tools— 64 pass (incl. theworkers.devpublic-surface guard)pnpm nx lint web,build-storybookfordiagram-uiandweb— greencoverage; 57 web tests pass
and the nav/footer entries from
/,/agents,/agents/codex,/docsReview
codex review --base mainraised two valid P2 accuracy findings; bothreproduced against the binary and are fixed in the second commit:
shareandpullare network commands too.llms.txtclaimed every command reads--json/--file—list,show,export,restorereject both. Scoped to create/edit/patch.Deliberately left out
.docs-articleis cappedat
72ch, so three columns would be ~200px each and could not hold theinline commands.
its own full section instead of crowding it.
Found, not fixed (pre-existing on
main)The mobile header sheet has no background, so page content shows through the
open menu. Identical on
main; outside this slice.