Skip to content

style(home): condense the hero #460

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
harlan-zw merged 1 commit into from
Oct 6, 2026
Merged

style(home): condense the hero #460

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 2 additions & 4 deletions COPY.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,10 +23,8 @@ These exact strings. Do not paraphrase them per page.
| Site description | Curated agent skills by humans, written by real maintainers in their own GitHub repos | `nuxt.config.ts` site description (feeds every page's meta description) |
| Elevator pitch | Skilld is a curated registry of agent skills written by real people in the GitHub repos you already depend on. One install command, every agent; watch your stack and get a digest when it changes. | guidance only: no page ships it yet (use it where two sentences fit) |
| Home H1 | Agent skills for you and your agent | index H1, index OG image alt |
| Home verb line | search · run · install · keep current | guidance only: the homepage line under the H1. Each verb links to its `/cli` section: `#search`, `#run`, `#install`, `#update` |
| Home CLI link | The skilld CLI → | guidance only: the homepage link to `/cli` at the end of the verb line. The arrow is an icon |
| Home caption | Try any skill before you install it. Your agent can search for its own. | guidance only: the homepage caption under the verb line. It assumes the reader knows what a Skill is, so it names only what sets skilld apart. "Search for its own" is the skilld Skill behind the promo label. The homepage OG card uses it as its description |
| Home claims line | Open-source CLI, no telemetry · Analytics without cookies or IPs · A skills.sh alternative | guidance only: the homepage claims line under the search. The third item links to `/vs/skills-sh`, and the promo label closes the line |
| Home caption | Try any skill before you install it. Your agent can search for its own. | guidance only: the homepage caption under the H1. It assumes the reader knows what a Skill is, so it names only what sets skilld apart. "Search for its own" is the skilld Skill behind the promo label. The homepage OG card uses it as its description |
| Home claims line | Open-source CLI, no telemetry · A skills.sh alternative | guidance only: the homepage claims line under the search. The second item links to `/vs/skills-sh`, and the promo label closes the line |
| Promo label | Teach your agent skilld | guidance only: the last item of the homepage claims line. It opens a popover with `npx skilld install skilld --global` |
| Step 01: find | Find · Stay hyped. A curated registry, plus what devs talk about on X and Bluesky. | guidance only: the first step of the homepage lifecycle band. The step name comes first, then the pitch line, then the description. Links `/skills/trending`. The braille spark motif pairs with the pitch line |
| Step 02: run | Run · No more skill bloat. Your Agent reads the Skill now. Nothing lands on disk. | guidance only: a homepage lifecycle step. Links `/cli#run`. It carries the band's one rose dot, because run is the default. The run chip motif pairs with the pitch line |
Expand Down
2 changes: 1 addition & 1 deletion DESIGN.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -445,7 +445,7 @@ These are editorial sets, not necessarily database collections yet. If a set has
- **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, the CLI verb line, one caption, one calm search field, and one mono claims 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.
- **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/trending` use `CompactPageHeader` with 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.
Expand Down
102 changes: 7 additions & 95 deletions app/pages/index.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -109,17 +109,6 @@ const heroTextureNames = computed(() =>
trendingRepos.value.flatMap(repo => repo.skills.map(skill => `${repo.owner}/${repo.repo}/${skill.name}`)),
)

/**
* The CLI's own line, "Search, run, install, and keep them current", as doors
* into the sections of the /cli page.
*/
const heroVerbs = [
{ label: 'search', to: '/cli#search' },
{ label: 'run', to: '/cli#run' },
{ label: 'install', to: '/cli#install' },
{ label: 'keep current', to: '/cli#update' },
] as const

/**
* Track order, measured 2026-09-04 rather than assumed.
*
Expand Down Expand Up @@ -214,35 +203,20 @@ function recentRepoDescription(item: RecentRepoUpdate): string {
Agent skills for you<br class="hidden sm:inline">
and your agent<span class="sr-only">.</span><span class="home-hero-dot" aria-hidden="true" />
</h1>
<!-- The product map: the CLI's own four verbs, each a door into /cli,
then the one quiet link to the whole CLI page. -->
<nav class="home-hero__verbs mt-5 font-mono text-sm" aria-label="What skilld does">
<ul class="home-hero__verb-list list-none p-0">
<li v-for="verb in heroVerbs" :key="verb.to">
<NuxtLink :to="verb.to" class="home-hero__verb">
{{ verb.label }}
</NuxtLink>
</li>
</ul>
<span class="home-hero__verbs-rule" aria-hidden="true" />
<NuxtLink to="/cli" class="home-hero__cli">
The skilld CLI<UIcon name="i-lucide-arrow-right" class="size-3.5 shrink-0" aria-hidden="true" />
</NuxtLink>
</nav>
<!-- What sets skilld apart, so the caption assumes the reader knows
what a Skill is. Run comes before install, and the skilld Skill
behind the promo below lets the agent search on its own. -->
<p class="home-hero__caption mx-auto mt-3 text-base leading-relaxed text-muted text-balance">
behind the promo below lets the agent search on its own. The
lifecycle band under the hero maps the CLI's verbs. -->
<p class="home-hero__caption mx-auto mt-5 text-base leading-relaxed text-muted text-balance">
Try any skill before you install it. Your agent can search for its own.
</p>

<HomeSearch class="mx-auto mt-8 max-w-xl text-left" />
<HomeSearch class="mx-auto mt-7 max-w-xl text-left" />

<ul class="home-hero__claims home-hero-claims data-label mx-auto mt-5 list-none p-0" aria-label="About skilld">
<li>
<a href="https://github.com/skilld-dev/skilld" target="_blank" rel="noopener">Open-source CLI, no telemetry</a>
</li>
<li>Analytics without cookies or IPs</li>
<li>
<NuxtLink to="/vs/skills-sh">
A skills.sh alternative
Expand Down Expand Up @@ -782,72 +756,12 @@ function recentRepoDescription(item: RecentRepoUpdate): string {
}
}

/* The verb line: four ink verbs on stone dots, a hairline, then the CLI door. */
.home-hero__verbs {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
gap: 0.25rem 1rem;
}

.home-hero__verb-list {
display: flex;
flex-wrap: wrap;
justify-content: center;
}

.home-hero__verb-list > li + li::before {
content: '·';
padding-inline: 0.55em;
color: var(--ui-text-dimmed);
}

/* Inline-block drops the space the template formatter leaves inside a link,
so the underline starts on the first letter. */
.home-hero__verb,
.home-hero__claims a {
display: inline-block;
}

.home-hero__verb,
.home-hero__cli {
color: var(--ui-text);
text-decoration-line: underline;
text-decoration-color: transparent;
text-underline-offset: 0.25em;
transition: text-decoration-color 200ms ease-out, color 200ms ease-out;
}

.home-hero__verb:hover,
.home-hero__cli:hover {
text-decoration-color: currentColor;
}

.home-hero__cli {
display: inline-flex;
align-items: center;
gap: 0.3rem;
color: var(--ui-text-muted);
}

.home-hero__cli:hover {
color: var(--ui-text);
}

.home-hero__verbs-rule {
display: none;
width: 1px;
height: 0.9rem;
background: var(--ui-border-accented);
}

@media (min-width: 40rem) {
.home-hero__verbs-rule {
display: block;
}
}

.home-hero__caption {
max-width: 34rem;
}
Expand All @@ -872,8 +786,8 @@ function recentRepoDescription(item: RecentRepoUpdate): string {
white-space: nowrap;
}

/* Separators only where the line fits on one row. At 12px the four claims
measure about 830px, inside the 848px hero column. */
/* Separators only where the line fits on one row. At 12px the three claims
measure about 590px, inside the 848px hero column. */
@media (min-width: 64rem) {
.home-hero__claims {
flex-wrap: nowrap;
Expand Down Expand Up @@ -905,9 +819,7 @@ function recentRepoDescription(item: RecentRepoUpdate): string {
text-decoration-color: currentColor;
}

.home-hero__promo:focus-visible,
.home-hero__verb:focus-visible,
.home-hero__cli:focus-visible {
.home-hero__promo:focus-visible {
outline: 2px solid var(--ui-border-inverted);
outline-offset: 2px;
border-radius: 2px;
Expand Down