| name | skilld | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| description | Quiet editorial registry. Warm stone neutrals, sparing rose accent, mono-first chrome, border-driven hierarchy. | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| colors |
|
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| typography |
|
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| rounded |
|
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| spacing |
|
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| components |
|
Generated by
nuxt-frontend-design. Source of truth for visual tokens. Compatible with@google/design.md.Front matter holds the machine-readable tokens. Prose below holds the visual system: principles, components, motion, the brand system, and the Avoid list. Voice and copy rules live in
COPY.md. Token refs use{path.to.token}.
"Confidence is quiet. The interface recedes; the content speaks."
Quiet means restraint at every level: fewer colors, smaller type in chrome, compact containers, solid defined edges. Character and polish come from precision, not volume. A quiet interface earns trust by never shouting.
Practically:
- One accent color used sparingly (10% of surface area, max)
- UI chrome in monospace at small sizes; content in the sans-serif
- Borders, not shadows, define boundaries
- No glow, no gradient, no blur, no decorative flourish in UI chrome. The textures in "Brand System" are the only decoration, and each has one job. The Make a skill card in the header's Developers menu is the one exception: it carries one atmosphere layer and the File minimap
- Compact components: tight padding, defined shapes, minimal radius
- Whitespace is intentional structure, not generous filler
"Show the signal. Let curiosity reveal the detail."
We have data on everything. Giving it all at once overwhelms. Top-level views present simplified, scannable summaries. Complexity lives one interaction away: hovers, collapsibles, expandable rows, detail panels.
Practically:
- First-level: one key metric or label per item (e.g. "12 skills" not a full breakdown)
- Hover: secondary data appears in tooltips or inline expansions (version, last updated, source)
- Click/expand: full detail view with all metadata, changelogs, compatibility matrices
- Never hide critical decision data; hide supplementary context
- Data density increases as the user drills in, never on the landing surface
- Collapsible sections default closed for reference data (API changes, type signatures)
"Warm enough to feel curated by a person."
Every surface has warm undertone. The accent is coral/rose. The voice is editorial, not corporate. But warmth is the undertone, not the headline; it lives in the color temperature and the copy, not in decoration.
- Theme: quiet editorial (warm surfaces, border-driven, compact monospace chrome)
- Mode: both (dark-first preference, light fully supported)
- Vibe: restrained technical curation
- Influences: npmx.dev (compact mono UI, OKLCH neutrals), Are.na (institutional minimalism), Wirecutter (editorial trust), Letterboxd (people-first discovery)
- Design principle: We prioritise restraint and editorial clarity over visual impact. The interface recedes; the curation speaks.
- Personality of motion: crisp and quiet. 200ms ease-out, 4px translateY rises, 60ms stagger. Total motion budget under 400ms. No bounce, no elastic, no slow drama.
| Role | Value | Why |
|---|---|---|
| Primary | rose ({colors.primary}) |
warm coral signals people and curation; used as ≤10% accent only |
| Neutral | stone ({colors.neutral}) |
warm grays at OKLCH chroma 0.005–0.014, hue 60, never pure gray |
| Surface light | #fafaf9 |
warm bg-default, oklch(0.98 0.005 60) |
| Surface dark | #1c1917 |
warm bg-default, oklch(0.14 0.008 60), never pure black |
| Extended | none | semantic colors (success/warning/error) added when first needed |
- Neutral tinting: every neutral is OKLCH at hue 60, chroma 0.005–0.014. Pure 0-chroma grays are banned.
- Color budget: 90% warm stone, 10% rose. The accent is rare so it stays meaningful. Solid rose appears on primary CTAs, active nav, featured-content badges, and the one rose dot of the mark, a texture or a motif.
- Primary darkening:
--color-rose-500is overridden tooklch(0.555 0.225 17.32)so white-on-primary buttons clear WCAG AA.
- Body text contrast:
oklch(0.93)onoklch(0.14)≈ 11:1 in dark mode, exceeds AAA. Light modeoklch(0.18)onoklch(0.98)≈ 14:1. - Muted text:
--ui-text-mutedatoklch(0.62)(dark) /oklch(0.45)(light) holds 4.5:1 against the matching bg-default. - High contrast:
@media (prefers-contrast: more)strengthens text and borders; tested for both modes. - Known risks: rose on warm-stone surface in small badges; verify per usage. Solid rose buttons are pre-cleared via the darkened primary token.
| Role | Font | Why |
|---|---|---|
Body (--font-sans) |
Plus Jakarta Sans | warm geometric sans, editorial body voice |
Mono (--font-mono) |
IBM Plex Mono | UI chrome (buttons, inputs, nav, badges, metadata); the single biggest contributor to the quiet feel |
| Display | Plus Jakarta Sans 600, larger sizes | mono handles display duties at smaller scales; Jakarta only at hero/page-heading scale |
- Type system: fixed rem scale. UI chrome stays at
text-xstotext-sm; body attext-smtotext-base; large type reserved for page headings. - OpenType features:
tabular-numson every numeric display (install counts, collection sizes, version strings). - Heading pattern: small section headings and list group labels use the
.section-labelutility (mono,text-xs, uppercase, widest tracking, muted color). It is a heading, never a label stacked above one. - Mono rule: if it's chrome (action, label, metadata, navigation), it's mono. If it's content, it's sans.
- Collection: lucide
- Why: 2px strokes pair with the compact mono chrome and avoid decorative weight
- Size:
size-4(16px) default,size-3.5(14px) inline with small text - Color rule: monochrome via
text-current. Colour only for semantic states (success/error/warning) and primary on active or selected states.
- Global radius: rounded-lg (8px). Not rounded-xl (too soft), not rounded-md (too tight for cards)
- Button padding: px-3 py-1.5 (sm), px-4 py-2 (md). Compact, defined
- Card padding: p-4 default, p-5 for detail views. Not p-6 (too generous)
- Input padding: px-3 py-2 with monospace font
- Buttons: solid primary for main CTAs; outline neutral for secondary; ghost for inline actions. All buttons use mono font
- Cards: rounded-lg with 1px border, warm surface. Hover transitions on border-color only, no glow, no shadow
- Avatars: rounded-full, stacked with -space-x-2 for curator groups, border-2 border-[var(--ui-bg)]
- Badges: subtle variant, size xs, mono font. Used for stack labels and agent compatibility. xs keeps badges subordinate to content
- Focus rings: Nuxt UI default ring behavior
Use UiTooltip (not UTooltip) for any tooltip that needs more than a plain string. Built on UPopover in hover mode.
- Label mode:
<UiTooltip label="Verified" title="Source status" description="..." />renders the label text with a small info icon; hovering the icon shows the rich tooltip - Wrapper mode: wrap any element in
<UiTooltip title="..." description="...">to attach a tooltip to it - Sizes: xs, sm, md (default), lg, xl control max-width
- Style: text-xs font-mono, bg-elevated border-default, pointer-events-none
- Use
UTooltiponly for simple single-line hints on icon buttons (e.g. "Copy to clipboard")
- Hover cards: secondary metadata (version, updated date, source) appears on hover via tooltip or popover. Content is text-xs mono
- Collapsible sections: API changes, type signatures, compatibility matrices default to collapsed. Trigger is a text button with chevron icon
- Expandable rows: list items show one-line summary; click expands inline to show full detail without navigation
- Detail panels: slide-over or dedicated route for full metadata view. This is where data density peaks
- Data labels: top-level metrics are singular and labeled ("12 skills", "3 curators"); expanded views show the full breakdown
- Skill embeds: every Skill shown as an item uses
<SkillCard :skill />. Do not hand-write Skill markup. Props fit it to the context:layout:cardfor a grid tile or an article embed,rowfor a ledger line,compactfor a sidebar or an index.byline:fullby default,repowhere the page names the owner,nonewhere it names the Repository.metric: one ofstars,likesorupdated, ornone.actions:runby default.likeandsourceare opt-in.rank,noteandtrending, plus themeta,footer,actionsandasideslots for facts only one context has./_playground/skill-cardsrenders every context in development.
- Skill source lists: use
SkillSourceListwhen a shortlist needs visible author, handle, repository, and source-linked skill name.streamis a vertically scrollable discovery preview;gridis for bounded related-skill groups. Idle auto-scroll pauses for hover, focus, touch, and reduced motion. Mixed 20-item discovery streams should represent at least 10 people and cap each person at 2 skills. - Install commands: never render one as raw text. Use
<InstallCommand :command="cmd" />sonpx skilld addstays quiet and the target carries the accent. Long commands wrap (wrap); they never get a horizontal scrollbar inside a card.
- Spacing system: 4pt base. 4, 8, 12, 16, 24, 32, 48px.
- Spacing philosophy: compact and structural. Sections separate with
py-12 md:py-16(notpy-16 md:py-24). Cards atp-4. Whitespace is structure, never decoration. - Vertical rhythm:
gap-3togap-4between list items;gap-6togap-8between sections within a page. - Container width:
max-w-5xlwithpx-4 sm:px-6. Wider feels institutional in the wrong way. - Transition speed: 200ms for every micro-interaction (hover, focus, expand/collapse).
- Animation style: fade +
translateY(4px)rise, 60ms stagger between siblings viamotion-v. Total under 400ms. - Reduced motion:
prefers-reduced-motion: reducecollapses to opacity-only crossfades. Each brand texture draws one still frame, and the lockup dot does not blink.
- Approach: mobile-first, three breakpoints (
sm/md/lg). - Input method: hover effects gated behind
@media (hover: hover); touch targets ≥ 44px. - Navigation: mobile hamburger with slide drawer; desktop horizontal nav.
- Progressive disclosure on touch: every hover-revealed datum gets a tap-to-expand path on touch devices. No hover-only data ever.
COPY.md owns every user-facing string, the register per context, and the banned language. Read it before writing copy.
Things that break the aesthetic. Check this list before adding new patterns.
- Glow, drop-shadows on cards, backdrop-blur on surfaces. The brand textures are flat dots and need none.
- Cold accents (blue, cyan, purple) as primary or feature colors.
- Pure black (
#000) or pure 0-chroma gray anywhere. - Dense data tables on first-level views; density grows with depth.
- Emoji or playful illustrations. The trending flame exception is retired; the braille spark marks trending.
- A second rose element in a motif or on an OG card. One rose dot is one pick.
- Braille glyphs, canvas, or any font other than Plus Jakarta Sans and IBM Plex Mono in an OG image. Draw dots as SVG.
- The retired rose chevron, or the mark redrawn by hand. Every placement comes from
shared/brand-mark.ts. - Gradient text effects.
- Cards nested in cards.
rounded-xlon components.- Accent rails. A 2px coloured border down the leading edge of a card reads as an alert state, not as editorial emphasis. Use
.lead-emphasisinstead. - Large font sizes in UI chrome; reserve large type for page headings.
- Generous "breathing room" padding; padding is structural.
- Showing all data at once; layer through progressive disclosure (hover, expand, detail panel).
Non-obvious classes unique to this system. Reference these instead of reinventing.
| Class/Token | What it does | When to use |
|---|---|---|
.section-label |
font-mono text-xs uppercase tracking-widest text-[var(--ui-text-muted)] |
The heading of a small section, or a group label inside a list, menu, or modal. Never an eyebrow above a larger heading |
.data-label |
font-mono text-xs text-[var(--ui-text-muted)] tabular-nums |
Inline metric labels in lists and cards |
.surface-warm |
warm dark bg oklch(0.16 0.01 60) + warm border |
Card or panel backgrounds in dark mode |
.surface-warm-elevated |
slightly lighter warm bg oklch(0.20 0.014 60) + warm border |
Elevated panels, dropdowns, popovers in dark mode |
.lead-emphasis |
masked rose corner wash plus an igniting top hairline, clipped to the card radius | The one lead pick on a page. Never more than one per page |
.install-command |
six syntax roles for npx skilld add ...; add --wrap to break instead of scroll |
Every rendered install command, everywhere |
.editorial-band / __content |
isolated section shell that keeps atmosphere behind readable content | Full-width journey bands and page mastheads |
.editorial-atmosphere |
mode-aware rose, ember, or stone edge gradient with masked geometry | One low-strength atmosphere layer per major band |
.editorial-ledger |
border-block list with divided rows and no outer card chrome | Results, evidence, updates, and directory lists |
.editorial-state |
consistent bordered loading, empty, or error panel | Async sections that need an explicit fallback |
.outcome-index / __item |
numbered task-first choice grid with clear action affordance | Routes where users should start from intent |
.skill-prose |
typographic shell for rendered SKILL.md markdown | Wrap rendered markdown content (skill detail views) |
.skill-markdown .shiki |
shiki dual-theme styling via --shiki-light / --shiki-dark vars |
Raw markdown view with code highlighting |
.skip-link |
offscreen-until-focus accessibility skip link | Keyboard navigation bypass to main content |
Homepage patterns become system primitives only when they help a user make the next decision. Reuse their hierarchy and interaction rules, then compose each route around its specific job.
- Page opening: use
CompactPageHeaderon first-level discovery and curation routes. It renders oneh1, one explanatory paragraph, and optional controls. Lead with a plain-language outcome, not the taxonomy name. Titles stay under 16 characters per line where practical. - Atmosphere: use one
.editorial-atmospherelayer per band. Choose rose for discovery, ember for curation, stone for evidence or directories. Keep data on the quiet centre of the mask. Atmosphere never replaces borders or surface contrast. - Outcome index: use
OutcomeClusterGridwhen visitors know their problem but not the registry vocabulary. Numbered routes explain the result in user voice, then state how many real skills are available. - Evidence ledger: use
.editorial-ledgerfor long or changing inventory. Each row answers what it is, who or where it came from, why it matters, and where the click goes. Prefer rows over repeated cards once more than six items are visible. - Lead and supporting picks: curation pages may feature one dominant recommendation and up to two supporting picks. Show rationale before metadata. Do not duplicate featured items in the following directory.
- Directional actions: the next useful action belongs at the end of the relevant row or band, with a 44px minimum target. Avoid detached CTA cards that repeat the section heading.
- Section openings: a section opens with its heading, never with a label above its heading. Four sanctioned openings: (1) heading plus a
.data-labelline below carrying count, freshness, or authorship; (2) a 1px top rule with the next route at the end of the heading row; (3) a mono01 / 05sequence marker, only where band order is real information; (4).lead-emphasison a single lead pick, at most one per page. Prefer (1) by default. - Provenance line: author or organization avatar, handle, source path, and freshness are evidence. Keep them visually quieter than the skill or collection name, but never hide all provenance behind hover.
- Async states: follow the craft rules in the
nuxt-frontend-designskill. Here.editorial-stateis the fallback panel, and errors offer a scoped retry. - Responsive ownership: shared compositions are container-aware, with a readable single-column default. The
nuxt-frontend-designskill covers the@containerandcontent-visibilitysetup. - Journey flow: intent → shortlist → provenance → inspect → install or watch. Each first-level route should make its position in this sequence obvious.
- Depth rule: first-level discovery pages can use large editorial type and atmosphere. Skill detail pages stay dense and evidence-led; do not wrap
/gh/...pages in a marketing masthead.
This section is the visual identity spec: the mark, the textures and the motifs. COPY.md owns the words that go with them.
The dot is the atom. Stone dots are the noise: every other Skill in the registry. One rose dot is the Skill you picked. The mark, the textures and the motifs all draw from that one idea, so a visitor learns it once and reads it everywhere.
The rule that follows: one rose element per motif. A second rose dot means two picks, and the picture stops making sense.
The mark is a prompt caret with one rose dot after it. The caret is a terminal prompt, because a Skill starts as a command. The dot is the cursor, and the Skill you picked.
| Part | Spec |
|---|---|
| Box | 100 units, viewBox="5 0 100 100". The box starts at x 5 so the caret and the dot sit optically centred |
| Caret | M58 50 L18 82 L18 68 L40.5 50 L18 32 L18 18 Z, in ink |
| Dot | circle at (80, 50), r 10, in rose |
| 16px cut | heavier caret M58 50 L18 82 L18 62 L33 50 L18 38 L18 18 Z, dot r 12. Use it where the mark renders at 16px |
| Ink | stone 900 #1c1917 on light surfaces, stone 100 #f5f5f4 on dark ones |
| Dot colour | rose #f43f5e on light surfaces, #fb7185 on dark ones |
| Tile | stone 900 rounded square behind raster icons, where the background is unknown |
Lockup. The ink caret, then the skilld wordmark in IBM Plex Mono 600, lowercase, tracked at −0.02em, then a trailing rose dot. The dot is 0.3em across, sits 0.32em after the word, and centres at half the x-height. At that size and gap it reads as a cursor. Closer and smaller, it reads as a full stop. The caret box is 1.05em tall, centred on the line, with a 0.38em gap before the word.
Motion. The lockup's dot blinks once when its link is hovered: off at 25% of 900ms, back on at 75%. Nothing blinks under prefers-reduced-motion, and nothing else in the mark moves.
Source. shared/brand-mark.ts holds every coordinate, the outlined wordmark, and the colours. AppLogo, the OG lockup and every file in public/ draw from it. To change the mark, change that module, then run pnpm brand:assets. Never hand-edit a file in public/.
| File | Use |
|---|---|
favicon.svg |
Browser tabs. The 16px cut, ink and dot switch with prefers-color-scheme |
favicon.ico |
Legacy tabs and crawlers. 16, 32 and 48px on the stone tile |
logo-icon.png, logo-icon.svg |
The weekly email header, the Discord avatar, app icons. 512px stone tile. Gmail strips SVG, so email takes the PNG |
logo.svg, logo-light.svg |
The lockup, outlined, for dark and light backgrounds. READMEs and other repositories link these names |
logo-mark.svg, logo-mark-light.svg |
The mark alone, for dark and light backgrounds |
Placement. The lockup is the site header, the account and auth layouts, and every OG card. The mark alone goes where a square fits and a wordmark does not: favicons, avatars, app icons. The homepage H1 ends on the rose dot in place of a typed full stop. The page draws that dot, and it counts as the hero's rose element.
Never:
- Never move the dot into the
i. The trailing dot won in the brand lab because it reads as a cursor. - Never draw the caret in rose, or the dot in stone. The dot is the only rose part.
- Never set the wordmark as live text beside a separate icon. The lockup is one drawing, so the gaps hold.
- Never bring back the rose chevron. The caret replaced it on 2026-10-06.
Three textures replace the noise field. Each has one job, and none appears outside it.
| Texture | Job | What it shows |
|---|---|---|
| Braille names | Hero, OG cards, CLI | Rows of real Skill names in braille. Far from the rose dot they thin to sparse dots. Near it they resolve into letters. Each hop of the pick sends three rings outward, half a second apart. Every cell is a real character, so the same field prints in a terminal |
| Converge | Dividers and loading | Scattered dots fall into one line and end on a rose dot. Many Skills in, one out. It reads as progress |
| File minimap | Skill pages | Each Skill as its own SKILL.md: frontmatter, headings, lists and code drawn as rows of dots. The rose dot is the cursor on the last changed line |
Rules for every texture:
- Stone dots, one rose dot. Ink at four or five alpha steps. No glow, no blur, no gradient fill.
- Behind content. Measure text contrast against the surface, never against the dots. Keep a clear area behind text.
- Still under reduced motion.
prefers-reduced-motion: reducedraws one still frame, with the rings frozen mid-travel so the frame still shows a ripple. - Paused when unseen. Stop drawing when the texture is offscreen or the tab is hidden. Start after hydration, never before first paint.
- One per region. No other motion runs in the same viewport region as a moving texture.
- Converge is the loader. At small sizes the file minimap looks like a skeleton loader. Do not use it as one.
On OG cards. An OG card is the homepage hero as one still frame, drawn server side. The OG renderer has only Plus Jakarta Sans and IBM Plex Mono, and neither has braille glyphs, so the texture is SVG dots, never a glyph or a canvas. OgLayout draws the frame for every card: the lockup centred at the top, the content centred under it, and a sparse Braille names field in the margins. The content column stays clear from top to bottom, so the field reads as a quiet dusting and never resolves into letters. The lockup's dot is the card's one rose element. The title takes the hero H1's face, Plus Jakarta Sans 600 at −0.045em. A Skill name has no space to wrap at, so it shrinks to fit one line. Text that needs two lines breaks into two of even length, since the renderer's text-wrap: balance pushes the lines off centre. app/utils/og-texture.ts draws the dots, app/utils/og-style.ts holds the type, and OgLines draws the even lines.
| Card | Content |
|---|---|
| Page | Title and description. / uses it with the hero H1 and caption |
| Skill | Name, then owner, then the curator note or the curator count |
| Collection | Name, description, curator, then the curator note or the first Skills |
| Curator | Avatar, name, handle with counts, description, then the first Skills |
| Demo | The demo's picture under a band: the lockup, then "What /{name} made" and the recording line. Its own frame, below |
Demo card. A demo page shares what the Agent made, so its card is a picture first, and OgLayout does not frame it. OgImage/Demo.takumi.vue puts the film's poster frame, or the page's first screen, in a window that fills the card below a band. The band has the lockup on the left. On the right, it has "What /{name} made" and the recording line. It has no Braille names field: the picture is the content. Rose inside the picture is depicted content, so the lockup's dot stays the card's one rose element.
Motifs carry data. Each answers one pitch line from COPY.md and spends one rose element.
Run chip. It pairs with "No more skill bloat". Run and install sit side by side, and run is preselected. Run has a dashed border and a hollow rose dot, because nothing stays. Install has a solid border and a filled dot, because files land. A consequence line under the chip says what each choice leaves on disk.
Braille spark. It pairs with "Stay hyped". Seven columns of braille dots show seven days of social mentions, filled from the bottom, with today in rose. The mention count sits beside it, with its noun from sparkCount, so one mention reads "1 mention". On the site, SparkDots draws each day as one SVG column of up to four dots, about 20px for the week. A day with no mentions draws one dot at 40% opacity as a track, so a lone column still reads as one day of seven. Plain text prints the same levels as braille bars (⣀⣤⣶⣿) and keeps the blank cell, so the spark works in the weekly email, in Discord and in a terminal. The trending mark is four rising columns of the same dots. The spark replaces the trending flame emoji.
Change grid. It pairs with "Keep updated". A 13-week grid of days, today at the bottom right. Each change is a stone dot, and the newest change is rose. A ring around a dot shows the size of the version bump, only where a version is known.
- Textures and motifs never appear in navigation, buttons, tooltips, footers or other UI chrome.
- The
/ghSkill detail template is frozen until the SEO gate on 2026-11-11. Do not add the file minimap to Skill pages before that gate. - A page uses at most one texture above the fold.
- If a design needs a second rose element, split it into two surfaces.
The homepage leads with a plain explanation and task-first discovery, then makes a small number of high-value, author-led skill sets feel installable. This is equivalent to the current Collection system, but the editorial unit may contain one repo, several skills across compatible repos, or a single standout skill. The user-facing promise is: source-backed skills, grouped by the job they help your agent do better.
Use these as the first homepage editorial inventory. Counts and rankings below are from the production registry on 2026-05-10 and should be refreshed before hard-coding copy.
| Priority | Developer / repo | Strong skills to surface | Why it belongs on the homepage |
|---|---|---|---|
| 1 | Addy Osmani, addyosmani/web-quality-skills |
performance, core-web-vitals, accessibility, seo, web-quality-audit, best-practices |
Recognisable web quality authority; tight repo; every skill maps to a concrete frontend outcome. |
| 1 | Matt Pocock, mattpocock/skills |
grill-me, improve-codebase-architecture, grill-with-docs, tdd, diagnose, zoom-out, write-a-skill |
High-trust TypeScript educator; strong skills for planning, architecture, TDD, diagnosis, and agent discipline. |
| 1 | Paul Bakaus, pbakaus/impeccable |
impeccable |
Single-skill collection candidate. A large, opinionated frontend UX/design quality skill is easier to understand as one premium install than as a category. |
| 1 | Anthony Fu, antfu/skills |
vite, vitest, vue-best-practices, vue, pinia, vueuse-functions, nuxt, pnpm, antfu |
Best first example of an author-led framework/tooling stack. Pairs naturally with Vue/Nuxt-specific repos. |
| 2 | Steph Ango, kepano/obsidian-skills |
obsidian-bases, json-canvas, obsidian-markdown, obsidian-cli, defuddle |
Recognisable product author; coherent knowledge-work and markdown/canvas workflow. |
| 2 | Garry Tan, garrytan/gstack |
retro, browse, benchmark, canary, careful, codex, cso, ship |
High social proof and broad workflow skills; needs editorial restraint because repo is large and mixed. |
| 2 | Thomas Ricouard, dimillian/skills |
swiftui-liquid-glass, swiftui-performance-audit, swiftui-ui-patterns, swiftui-view-refactor, swift-concurrency-expert |
Clear Apple/Swift specialist set with practical development outcomes. |
| 2 | Julien Thibeaut, ibelick/ui-skills |
fixing-motion-performance, fixing-accessibility, baseline-ui, fixing-metadata |
Strong companion to impeccable and Addy's web quality skills for UI polish. |
| 3 | Brian Lovin, brianlovin/claude-config |
deslop, rams, agent-browser, sentry, react-doctor, simplify, playwriter |
Good product/design engineering angle; use as supporting pairings rather than first hero item. |
| 3 | Yunfei He, hyf0/vue-skills |
vue-debug-guides, vue-best-practices, vue-router-best-practices, vue-pinia-best-practices, create-adaptable-composable |
Strong Vue companion inventory, especially when paired with Anthony Fu and Nuxt skills. |
| 3 | Max, onmax/nuxt-skills |
nuxt, nuxt-ui, nuxt-content, nuxt-seo, vue, vueuse, vite, vitest |
Nuxt-specific extension to the Vue/tooling stack; lower author proof, higher topical usefulness. |
| 3 | Paul Bakaus, pbakaus/agent-reviews |
resolve-agent-reviews, resolve-reviews, resolve-human-reviews, agent-reviews |
Useful PR-review workflow set; best shown as a companion to diagnosis/TDD/review skills. |
These are editorial sets, not necessarily database collections yet. If a set has one skill, render it the same way but show 1 skill and make the rationale carry the value.
| Set | Skills / repos | Homepage angle |
|---|---|---|
| Web quality stack | Addy: performance, core-web-vitals, accessibility, seo, web-quality-audit, best-practices |
"Make your agent catch the things Lighthouse, WCAG, and search bots care about." |
| Frontend taste stack | Paul: impeccable; Julien: baseline-ui, fixing-accessibility, fixing-motion-performance; Brian: rams, deslop |
"For making shipped UI sharper, calmer, more accessible, and less AI-generic." |
| TypeScript engineering stack | Matt: improve-codebase-architecture, tdd, diagnose, grill-with-docs, zoom-out; Anthony: pnpm, vitest |
"For planning, testing, and debugging real TypeScript codebases." |
| Vue/Nuxt stack | Anthony: vue, vue-best-practices, vite, vitest, pinia, vueuse-functions; Yunfei: vue-debug-guides; Max: nuxt, nuxt-ui, nuxt-content |
"A coherent Vue/Nuxt agent setup from framework people and ecosystem specialists." |
| Agent workflow stack | Garry: retro, careful, codex, ship, browse, canary; Matt: grill-me; Thomas: review-swarm, bug-hunt-swarm |
"For running an agent like an engineering workflow, not a chat box." |
| Apple app stack | Thomas: swiftui-liquid-glass, swiftui-performance-audit, swiftui-ui-patterns, swiftui-view-refactor, swift-concurrency-expert |
"For SwiftUI and Swift concurrency work with modern iOS defaults." |
| Knowledge workspace stack | Steph: obsidian-bases, json-canvas, obsidian-markdown, obsidian-cli, defuddle |
"For agents working inside an Obsidian vault, markdown knowledge base, or canvas workflow." |
| PR review cleanup stack | Paul: resolve-agent-reviews, resolve-human-reviews; Brian: react-doctor, sentry; Matt: diagnose, tdd |
"For turning review comments and production findings into fixed code." |
- Hero: use one plain-language H1, one explanatory paragraph, one solid primary CTA, and one outline secondary CTA. Keep it left-aligned at
max-w-5xl; detailed discovery starts in the outcome section. - First content section:
What are you trying to do?. Use the six stable outcome routes so visitors can start from their problem before learning registry taxonomy. - Editorial focus: follow outcomes with a rotatable
Featured focus. Frontend design is the current focus, not a permanent product boundary. Show one dominant set and no more than two compact supporting sets. - Single-skill sets: allowed and encouraged when the author/skill is strong enough, e.g.
pbakaus/impeccable. Do not hide them in a generic list because they only contain one skill. - Pairing signal: when multiple authors appear in a set, show a small mono line such as
Works with Addy Osmani + Julien Thibeaut. The point is compatibility and taste transfer, not volume. - Section order: Hero -> Outcomes -> Featured focus -> Keep your agent current -> Publish.
- Freshness hierarchy: Recently updated outranks New to skilld. Newness is not a quality claim. Fold Watch your stack into this section.
- Registry terminology: Skills, Collections, and Official publishers are the three browse escape hatches. Do not recreate separate Devs, Orgs, and Curators sections.
- Card density: use the existing bordered card pattern, but each editorial card should read like a Wirecutter pick: compact rationale first, metadata second. Avoid nested cards; skill names can be inline badges or a divided list.
- Copy rule: do not say "top", "best", or "popular" unless the reason is visible. Say "Chosen because..." or "Useful when..." and connect the author to the workflow.
- Placement:
#weekly, between the freshness and publish bands. It absorbed the retiredhome-freshness-watchpanel rather than sitting beside it, so the page argues once: here is what changed, here is how it reaches you. - Composition:
home-weekly-grid, one column belowmd,1fr 1frabove. Copy left, email preview right. No.editorial-atmospherelayer: the preview is the band's visual interest and a second wash would compete with it. - The preview is the real email, server-rendered through
renderWeeklyand embedded as markup, never a screenshot. A screenshot goes stale on the first row-style edit, and this template changed on four consecutive days while it was being built. - Preview follows the page theme.
renderWeeklytakestheme: 'light' | 'dark'; the endpoint returns both cards and the component picks one fromuseColorMode. The Monday send stays light, because inline styles are the only thing every mail client honours. - Crop, do not scale:
max-block-size: 26remwith amask-imagefade. Atransform: scale()blurs the type, and the email is the one element here that has to look exactly like itself. - The preview is
aria-hiddenand untabbable. It carries roughly twenty real links; tabbing an inbox picture mid-homepage is a trap. The prose beside it is the accessible description. - Rose budget: one solid rose element, the primary CTA. Rose inside the preview is depicted content, like a photograph containing a red object, and does not count against the 10%.
- The braille spark marks the email's trending section, as it does on the site. Emoji stay banned in the email too.
Append-only log of intentional choices the user has confirmed. Do not re-litigate; only add.
- Color budget 90/10, not 60-30-10: rose is rare so it stays meaningful. Confirmed when tightening from earlier 60-30-10 split.
- Mono-first chrome: every interactive element uses IBM Plex Mono. This is the single largest contributor to the quiet feel; do not "soften" by switching to sans for buttons.
rounded-lg(8px) global: notrounded-md(too tight for cards), notrounded-xl(too soft). One radius for everything exceptrounded-fullavatars.- Compact spacing:
py-12 md:py-16for sections,p-4for cards. Resist requests to "add breathing room" withpy-24; that breaks the editorial density. - Solid primary buttons only: ghost or outline for primary CTAs is banned because they vanish on warm surfaces. Solid is the default in
app.config.ts. - Darkened rose-500 token:
oklch(0.555 0.225 17.32)overrides Tailwind's default so white-on-primary clears AA. Do not revert; do not introduce a second rose. - No pure black: dark mode bg starts at
oklch(0.14 0.008 60). If a surface looks too light, deepen via OKLCH chroma+hue, not by going to#000. - Unknown install counts stay hidden: an install value of zero can represent missing ingestion data, so cards omit the metric visually and semantically until a positive count is known.
- Task-first homepage: orientation and outcome discovery precede editorial inventory. Confirmed in the 2026-07 homepage rethink.
- Frontend is a rotatable editorial focus: it may dominate the current feature band but must not redefine skilld as a frontend-only registry.
- One composition per homepage band: centered hero opening, work-track index, lead-and-supporting editorial pick, activity ledger, and contribution ledger. Repeating equal card grids weakens the page narrative.
- Evidence before freshness: show provenance, editorial rationale, and a real install command before recent activity.
- Section atmosphere: low-chroma warm-stone and rose gradients may distinguish homepage bands. They stay masked to edges, use mode-specific opacity, and never sit behind data as a full-strength fill.
- Collections remain primary curation: directory links may be quiet, but Collections retain stronger hierarchy than publisher taxonomy.
- Centered quiet hero: the hero stacks a centered H1, one caption, one calm search field, and one mono claims line of three items. The lifecycle band under it maps the CLI verbs, so the hero carries no verb line. The H1 full stop is the band's only rose dot. The Braille names texture sits at the sides in stone at low strength, with a clear column behind the copy. Chosen 2026-10-06 as take C of the hero lab.
- Self-selecting work tracks: the discovery grid asks what the visitor works on, not what the agent should do. Each track carries author avatars and a skill/author count, and empty tracks never render.
- Homepage patterns are journey primitives: atmosphere, outcome indexes, evidence ledgers, provenance lines, and lead/supporting picks now form the reusable editorial layer. Reuse their rules on discovery routes while preserving a distinct composition for each page.
- Compact registry openings:
/community,/skills, and/skills/trendinguseCompactPageHeaderwith nothing but a page name and orientation copy; controls belong with the results they filter. Outcome pages retain plain-language mastheads. Skill detail remains dense and unchanged. - Compact discovery openings: Outcome and framework directories now join the compact registry template. Their openings carry only orientation, key totals, and one primary route back into the skills registry. Framework contributor data lives alongside each skill instead of in a duplicate leaderboard.
- Compact registry descriptions: At 768px and wider,
What it doesuses 12px text and wraps to two lines. Smaller screens hide the column. - Eyebrows are banned: a muted uppercase label above a heading carries no information the heading does not already carry. Removed from 25 sites on 2026-08-19. The four sanctioned replacements are a data line below the heading, a hairline plus directional action, sequence numbering where order is real, and
.lead-emphasison one lead pick. If a band reads flat after removal, add band separation, not the eyebrow back. - The weekly is shown, not described: the homepage band embeds the real email rather than listing its features. Confirmed 2026-08-19, when the copy shrank from 34 words to 16 because the picture already carried the detail.
- The accent rail is banned: a 2px rose border down a card's leading edge borrowed the shape of an error or callout border, and at a tall card's height it was the loudest thing on the page.
.lead-emphasisspends the same accent as light instead of as a bar: a corner wash at 9% and a top hairline that fades out within a fifth of the width. Banned 2026-08-20. - Install commands are syntax-coloured, always:
npx,skilld,add, and the flags stay quiet; the target and the skill name carry the accent, because that is the only part that differs between two commands. The accent rose is darkened tooklch(0.44 0.17 17.32)in light and lightened tooklch(0.8 0.12 17.32)in dark, since the button rose is 3.2:1 onbg-mutedat small mono sizes. - Weekly CTAs point at the email, never at a sign-in:
See this week'sopens the public preview. A button labelled "get" that opens an OAuth wall is a promise the page does not keep, and Loop 1 admits no gate (VISION principle 3). - Trending rows lead with the Skill: the Skill column outweighs the posts, which wait behind the poster faces as testimony. The one acquisition CTA, an inert email preview beside
Sign in with GitHub, sits in the page header on wide screens and after the fifth row on narrow ones. Confirmed 2026-08-21; the 9/3 sidebar gave way on 2026-10-01 because it took a quarter of the board's width. - The dot is the atom: stone dots are the noise, and one rose dot is the Skill you picked. The mark, the textures and the motifs all follow it, with one rose element per motif. Confirmed in the brand lab on 2026-10-06.
- The prompt caret replaces the rose chevron: the mark is an ink caret plus one rose dot. In the lockup the dot trails the wordmark as a cursor. Harlan chose the trailing dot over a rose tittle on the
i, so the dot reads as a cursor. Confirmed 2026-10-06. - One geometry feeds every placement:
shared/brand-mark.tsholds the coordinates and the outlined wordmark.AppLogo, the OG lockup and every file inpublic/come from it, andpnpm brand:assetswrites the files. The old chevron lived in hand-written copies, and their rose shades and wordmark weights had drifted apart. Confirmed 2026-10-06. - Three textures replace the noise field: Braille names for the hero, OG cards and the CLI; Converge for dividers and loading; File minimap for Skill pages and per-Skill OG cards. One job each, so no texture becomes wallpaper. Confirmed 2026-10-06.
- The lockup dot is an OG card's one rose element: the 4px rose top bar, the rose quote rails and the rose avatar ring went stone. On the Splash card, the braille field radiates from the lockup's dot, so the texture spends no second rose. Confirmed 2026-10-06.
- OG cards repeat the homepage hero: every card centres the lockup, a Plus Jakarta Sans title and its detail, with Braille names in the margins. Harlan chose this over a left-aligned editorial card and a card that leads with the run command. It supersedes the per-card textures above: the Skill card's file minimap, the Make a skill card's large
SKILL.md, and the separate Splash and Make a skill templates are gone. Confirmed 2026-10-06. - The braille spark replaces the trending flame: seven braille bars for seven days of mentions, today in rose. The emoji exception for Trending is retired. The spark keeps the sourced mention count beside it, which the flame never carried. On a trending row the poster faces carry that count, so the spark beside the name drops it. Confirmed 2026-10-06.
- Run and install read as different materials: run is a dashed border with a hollow dot, because nothing stays; install is a solid border with a filled dot, because files land. Run is preselected. Confirmed 2026-10-06.
- Trending shares the /skills shell:
/skills/trendinguses the full-width layout from/skills. Its heading replacesCompactPageHeaderand lines up with the results column. A sticky 14rem sidebar holds the range links, then the weekly CTA and the skilld install. Nothing sits right of the board, so the board takes every column the sidebar leaves. Rows switch on their own width, and the post carousel shows two cards where it has room. On narrow screens the ranges are a compact row above the board, and the CTA stays after the fifth row. Harlan asked for this on 2026-10-06. It supersedes the 2026-10-01 call that dropped the 9/3 sidebar for taking a quarter of the board's width: that sidebar sat right of a 64rem board, and this one sits left of a board that runs the full page width. - Trending rows scan in one pass: the rank is a plain mono number, and the first three are a step darker. Each metadata line runs source, stars, then the signal that ranked the row, and an empty slot renders nothing. Descriptions stop at two lines, the run chip is as wide as its command, and the post carousel shows whole cards only. The sidebar invitation drops the email preview and the card. Its button is the rail's one solid rose element, so the install chip beside it inks its dot. Harlan asked for this polish on 2026-10-06.
- Trending rows take two lines of words: the first line says what the Skill does, and the second says why it ranked. A row ranked by posts shows at most three poster circles, the third counting the rest, then the first post as one quote line. The circles open the post carousel, and the quote line steps aside while the carousel shows. The braille spark sits beside the Skill name, where the shorter name line has room. Every post stays in the server HTML. A row dropped from 292px to 78px on desktop and from 377px to 163px on a phone. Harlan picked this from a lab of five takes on 2026-10-06. It supersedes the two-line descriptions and the carousel under every row.
- The spark draws dots, not braille text, on the site: as text, each bar was a two-column braille cell in a fallback font, so the week measured 70px in headless Chrome on Linux and its width changed per system. One SVG column of dots per day draws the same levels in 20px. The trending mark is four rising columns. Plain text keeps the braille bars. Harlan asked for a more compact trending mark on 2026-10-06.
- Trending rows hold a fixed name column: the identity column stops at 17rem and truncates the name, and the words take the rest. As a share of the row it left a wide gap on wide screens. The quote line sits one size under the description: its handle is muted, and only the Skill name in it lifts to toned ink. Quotes drop emoji and Unicode letter styles. Automated accounts, such as GitHub trending auto-posters and Grok, never lead a row's posts while a person posted. The homepage shows the top five rows. Harlan asked for this on 2026-10-06.
- A three-step lifecycle band replaces the four tiles: under the hero, one band maps the product in its real order: find Skills, run, fork or install, keep up to date. Each step is one link: a mono step name, then one short sans line. No markers, pitch lines or commands. A line of stone dots joins the steps. Run, the default, carries the band's one rose dot, so no step lights rose on hover. From 1024px, three centered columns sit under the centered hero; below that, a vertical list with the dots down the left. The hero and the band must fit a 1440×900 viewport. Harlan cut it from six steps on 2026-10-06, because six columns of mixed type read as too busy.
- A Developers menu groups the build surfaces: the desktop header keeps Trending Skills and Find Skills as links, and folds CLI, MCP server, SDK and Make a skill into one Developers menu, as nuxtseo.com does. The trigger is a button, so a keyboard opens the panel without leaving the page; the panel's last link reaches
/developers. Harlan asked for this on 2026-10-06. - The Developers menu is a bento: the three ways to connect stack as compact rows, each a lucide icon tile, a name and one line. Make a skill fills the second column as the one large card, with an ember atmosphere and the File minimap in its corner. It names both routes: the guides and Skillgen.
/make-skillis the one entry for authors and routes to either, so Skillgen has no card of its own. The mobile menu lists the same four items as a plain group. Harlan chose this over five uniform cards on 2026-10-06. - One Skill card:
SkillCardrenders every Skill embed, in three layouts. Each opens with one identity unit: the avatar beside the mono name, over a byline of author and Repository. Then come at most two lines of description and one line of facts with a dashedrunpill. The pill is the run chip's material withoutnpx skilld. Its click copies the full command, and its dot stays stone until hover, focus or copy. Rows read in three zones, who, what and the facts, and stack like a borderless card under 40rem. Compact entries drop the description. Cards show no SKILL.md icon and no heart by default: with few accounts yet, a row of zero hearts reads as an empty room. Harlan chose this from five takes, one by Fable, on 2026-10-06. It supersedes the/skillstable and its "What it does" column. Trending and track boards render the same rows: the reason a Skill ranked fills the meta line, and the posts about it sit under its words as an aside. The home freshness ledgers and the community top Skill use compact entries. Search results keep their own rows, because they are a keyboard picker, not an embed. This replaces the row layout in "Trending rows lead with the Skill", "Trending shares the /skills shell" and "Trending rows scan in one pass": posts now sit under the Skill's words, not beside it, and the dashedrunpill replaces the full run chip. The /skills shell, the sidebar and the rank styling stand.