Repository navigation
feat(registry): full width Skill page with a file explorer - #335
Merged
Merged
Conversation
The Skill page buried its files: below 1536px the tree sat fourth in the rail with no sizes, and the header showed the repository push date while Provenance showed the SKILL.md date. Borrowed from upm.sh's package page: the tree now sits under Use it with sizes, one sticky viewer bar replaces three stacked header rows, and the header carries fact chips, the commit SHA, and a star trend. Context cost in tokens per loading stage is the Skill equivalent of install size.
The tokens label took the width the third cell needed, so it wrapped without its divider.
A 16 KB reference file put its sideways scrollbar at the very bottom of the page. Code files keep their line breaks and still scroll.
Collaborator
Author
|
Checked in a local dev server against production Skill data (
|
Opening a file from deep inside a long SKILL.md left the new file mid-page. Folder rows now say how many files they hold, since a collapsed scripts folder gave no hint of its size.
Review of the prototype found: - The token tooltips opened on hover only. - The late star trend shifted the header between 768 and 890px. - Scoped chip CSS beat the warning tone. - Rose text fell to 3.76:1. - Server-rewritten links opened with the whole route as the file path. The token stages now open one popover that explains the loading model.
A sentence licence such as "Complete terms in LICENSE.txt" was cut to "Complete terms in LICEN…". The breadcrumb cut the file name before the folder name. The extension beside the size repeated the file name.
The page sat in a 1024px column, and the rail stacked nine sections, most of them reference data. From 1280px, files sit on the left and the Skill in the middle. The right rail keeps only what a visitor acts on: run, install, and what the Skill can do. Checks, provenance, capability detail, history, topics, and the badge move under the Skill. A Skill that is only SKILL.md drops the explorer and takes the width.
harlan-zw
changed the title
Only the body below the header needs the desktop width. The header reads as one block, and at full width it spread into the corners.
A row of "≈111 always · ≈1.9k when used" in the header needed a popover to make sense. The viewer now says what the open file costs: SKILL.md lists the three loading stages, a reference file says it loads on demand, and a script says only its output enters context. LICENSE no longer counts as an on-demand file.
Review feedback on the wide layout: - The file tree lists folders first, collapsed, then SKILL.md. LICENSE goes last. - The rail drops its "Use it" heading. It shows run, then install as the opt-in, with History below. - The checks chip opens the checks it links to. - Related Skills keep their contained width. - The description stops at two lines behind "more". Related card descriptions never clamped: `block` overrode the display that line-clamp needs, and the phone grid track grew to the full width of the truncated names.
"Run" as a bare heading lost the point of the block. "Hand it to your agent" says what to do, and one full-width outline button gives it the weight. The session labels repeated what the blurbs already say.
Run's main difference from install is that it leaves nothing behind. "This session only" now leads its blurb in the rail and in the mobile tabs. GLOSSARY bans "use once" and "ephemeral", so the wording stays with session.
- History moves to the left column, under the files. On smaller screens it follows the Skill. - The official badge set 10px text on solid rose and could not be read. It is now an outlined chip at 12px. - "Check it worked" leaves the command panel.
# Conflicts: # layers/registry/app/components/SkillFileTreeNode.vue
Claude and ChatGPT on the web take a Skill as an uploaded ZIP. skilld had no download, so those users had no install path. The rail now has "Run once off" and "Install as a Skill", with tabs for Local agent, Claude, and ChatGPT. The browser builds the ZIP from raw GitHub files at the pinned commit, so skilld serves no bytes and pays no Worker time. fflate loads on click. A row of monochrome agent marks shows that run works in any agent. The homepage and this page now share one logo list.
A /-/<file> link rendered a separate bare page. It now renders the Skill page with that file open, on the server. It stays noindex, and its canonical points at the Skill. Opening a file on the Skill page updates the address bar to that file's link with replaceState, so the link can be shared, and nothing remounts.
1 task done
- A failed file stuck the ZIP button at "Packing 5 of 12" until reload. The first failure now aborts the other fetches. - Back or a client navigation to a file link showed SKILL.md. The file fetch finishes after setup, so it now applies when it lands. A missing file answers 404. - The rail comes before the Skill in the markup. Run takes 22 Tab presses instead of 59. - Light mode: the warning chip and the stale provenance line fell under 4.5:1. - The tree dropped tree roles it had no arrow keys for. It marks the open file with aria-current, and long names wrap. - A single-file Skill lines up with the header. - "Local agent" became "Terminal": GLOSSARY uses local as a source status.
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
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.
❓ Type of change
📚 Description
This started from a look at upm.sh's package page. The Skill page had two problems. First, it sat in a 1024px column. Second, the right rail stacked nine sections: Use it, Files, License, Topics, Capability, Provenance, History, Checks and the badge. Files came fourth below 1536px and had no sizes. The header said "Updated yesterday", which was the repository push date, while Provenance said "updated 8 months ago" for SKILL.md.
Layout:
Taken from upm:
pdf › reference.md · 16.3 KB · source · copy · raw) replaces three stacked rows.@4e6907asits next to the name, in upm's version slot.It also fixes two bugs that are on production:
/gh/.../-/route as the file path.blockoverrodeline-clamp. On a phone the cards ran past the screen edge.Open questions:
≈. Is that enough, or do we want a tokenizer count at sync time?/-/deep links and editsSkillFileTreeNode.vuetoo, so whichever merges second needs a small conflict fix. After both merge, opening a file can update the URL.