feat(skills): render Skill embeds through one SkillCard by harlan-zw · Pull Request #453 · skilld-dev/skilld.dev

harlan-zw · 2026-10-06T02:07:28Z

🔗 Linked issue

None.

❓ Type of change

📚 Description

Skills rendered through twelve markups: SkillCard, SkillTable, the repository card, the trending board row, and hand-written rows on curator profiles, /me, collections, the reviewed list, the trending archive, both home feeds and the community page. Names, bylines and controls drifted apart. One page showed /name, the next showed the display name, and some cards had no author at all.

SkillCard now renders every one of them. A page passes its context as props:

layout: card for grid tiles and article embeds, row for ledgers and boards, compact for indexes and feeds.
byline: full, or repo or none where the page header already names the owner or Repository.
metric: one of stars, likes or updated, or none.
actions: run by default. like and source are opt-in.
rank, note and trending, plus meta, footer, actions and aside slots for facts only one page has, such as repository dependencies or the posts about a trending Skill.

buildSkillCardView resolves the facts once, so every layout shows the same ones.

Each layout opens with the same identity unit: the avatar beside the mono name, over one byline. At most two lines of description follow. Then comes one line of facts, with a dashed run pill that copies the full run command. Rows read in three zones (who, what, facts) and stack at full width under 40rem.

Hearts and the SKILL.md icon are now opt-in. With few accounts so far, rows of zero hearts read as empty.

TrendingBoardItem is now a thin adapter. The reason a Skill ranked fills the meta line, and the post carousel sits in the aside slot under the Skill's words. Board rows gained repo and name, so the card can address the Skill. SkillCard emits avatarError, which the boards already use to drop deleted GitHub accounts.

Harlan compared four takes in a lab, one drawn by Fable, and picked parts of three for this merge. /_playground/skill-cards renders every context in development and 404s in production. DESIGN.md records the decision and binds Skill embeds to SkillCard.

Kept on purpose:

Search results stay a keyboard picker with grid cells. A linked card inside a grid cell would break its keyboard model.
Repository rows in the home update feed are not Skills, so they keep their own line.
Skill page Related stays on SkillSourceList until the 2026-11-11 SEO gate.

🤖 AI disclosure: Harlan Agent Kit modified this description. My AI open-source policy.

Skills rendered through eight markups: SkillCard, SkillTable, the repository card, and hand-written rows on curator profiles, /me, collections, the reviewed list and the trending archive. Names, bylines and controls drifted apart. SkillCard now takes the context as props: a card, row or compact layout, how much byline the page already carries, one metric, and opt-in controls. A pure view builder resolves the facts once, so every layout shows the same ones. The design merges the takes Harlan picked from the lab: one identity unit, at most two lines of description, and a dashed run pill. Hearts and the SKILL.md icon are opt-in now.

harlan-zw · 2026-10-06T02:08:28Z

🤖 Agent comment. Checked in a browser, since CI cannot show it: local dev server with a local D1, Chrome headless at 1440 and 390 wide.

/skills now renders rows instead of the table. On narrow screens each row stacks, and the description gets the full width.

`/skills` at 1440	`/skills` at 390

Directory grid and collection ledger in the dev-only lab, with production Skill data:

Repository page, where the cards carry no byline and show the update time, and a comparison article embed with its spelled SKILL.md link:

Repository page	Comparison embed

harlan-github-agent · 2026-10-06T02:13:52Z

🤖 MERGED

Harlan Agent Kit posted this automated review. It is not Harlan's personal review or approval. AI open source policy. Last updated: 2026-10-06 04:52 UTC.

GitHub merged this pull request.

Logged (35/100): Every screenshot backing this PR's visual claims is inaccessible to this Review, so the layout claims are unverified by pixels; only the code paths behind them were verified.
- Ask an agent to verify and fix this finding
Logged (25/100): The run pill swallows copy failure and gives the visitor no feedback or fallback, regressing the failure path the run chip already designed. View code
- Ask an agent to verify and fix this finding
Logged (10/100): The likes metric column can overflow its reserved width and break row alignment once any Skill passes 9,999 likes. View code
- Ask an agent to verify and fix this finding

Review completed. No finding above 80/100.

Selected findings run after merge and open separate pull requests.

The trending and track boards, both home freshness feeds and the community top Skill still drew their own Skill markup. They now render SkillCard too. The board row becomes a thin adapter: its ranking reason fills the meta line and its posts fill a new aside slot. Board rows carry repo and name so the card can address the Skill, and SkillCard re-emits avatar errors so the boards still drop deleted GitHub accounts. Wide rows reserve the run pill's width, so rows with and without one line up. One star now reads "1 GitHub star". Search results keep their own rows: they are a keyboard picker, and a linked card inside a grid cell would break it.

harlan-zw · 2026-10-06T02:22:09Z

🤖 Agent comment. Second commit, checked in a browser at 1440 and 390 wide.

The trending board now renders SkillCard rows through TrendingBoardItem. These are three production feed rows with their posts, shown in the dev lab: the ranking reason sits in the meta line, and the posts sit under the Skill's words.

Board at 1440	Board at 390

The live /skills/trending page on local data, where rows with and without a run pill now share one description column, and the home "New to skilld" feed in compact entries:

Rows without a run pill pushed their star count to the row's edge, so a board mixing single and multi Skill repositories showed two metric columns. Every wide row now keeps the control slot, empty or not.

harlan-zw · 2026-10-06T02:24:06Z

🤖 Agent comment. The trending page screenshot in the comment above predates c785cff. It showed star counts in two columns: rows without a run pill pushed theirs to the edge. Every wide row now keeps the pill's slot, so stars and pills each sit in one column:

harlan-github-agent

Harlan Agent Kit posted this automated review. AI open source policy.

Automated Review: READY.

Read the Review results

The global override lost to SkillCard's scoped styles, so each entry kept its -0.5rem bleed and ran 8px past the ledger on both sides. The rule now lives in the page's scoped styles, which outrank the card's. The Review logged this at 15/100.

harlan-zw · 2026-10-06T02:57:41Z

🤖 Agent comment. The Review's 15/100 finding was real. In the browser, a home ledger entry measured 8px past the ledger on each side: entry 917 to 1280, ledger 925 to 1272. After 03845a7 the edges match: 925 to 1272. The hovered first entry below fills its line.

harlan-github-agent

Harlan Agent Kit posted this automated review. AI open source policy.

Automated Review: BLOCKED.

Read the Review results

Resolves the a11y skip list: main added OgLines, and SkillCard now has its own axe tests in place of its skip.

Co-authored-by: Harlan GitHub Agent <harlan-github-agent[bot]@users.noreply.github.com>