Skip to content

Commit f765a58

Browse files
authored
style(home): condense the hero (#460)
1 parent ce7c679 commit f765a58

3 files changed

Lines changed: 10 additions & 100 deletions

File tree

‎COPY.md‎

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -23,10 +23,8 @@ These exact strings. Do not paraphrase them per page.
2323
| 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) |
2424
| 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) |
2525
| Home H1 | Agent skills for you and your agent | index H1, index OG image alt |
26-
| 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` |
27-
| 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 |
28-
| 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 |
29-
| 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 |
26+
| 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 |
27+
| 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 |
3028
| 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` |
3129
| 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 |
3230
| 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 |

‎DESIGN.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -445,7 +445,7 @@ These are editorial sets, not necessarily database collections yet. If a set has
445445
- **Evidence before freshness**: show provenance, editorial rationale, and a real install command before recent activity.
446446
- **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.
447447
- **Collections remain primary curation**: directory links may be quiet, but Collections retain stronger hierarchy than publisher taxonomy.
448-
- **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.
448+
- **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.
449449
- **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.
450450
- **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.
451451
- **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.

‎app/pages/index.vue‎

Lines changed: 7 additions & 95 deletions
Original file line numberDiff line numberDiff line change
@@ -109,17 +109,6 @@ const heroTextureNames = computed(() =>
109109
trendingRepos.value.flatMap(repo => repo.skills.map(skill => `${repo.owner}/${repo.repo}/${skill.name}`)),
110110
)
111111
112-
/**
113-
* The CLI's own line, "Search, run, install, and keep them current", as doors
114-
* into the sections of the /cli page.
115-
*/
116-
const heroVerbs = [
117-
{ label: 'search', to: '/cli#search' },
118-
{ label: 'run', to: '/cli#run' },
119-
{ label: 'install', to: '/cli#install' },
120-
{ label: 'keep current', to: '/cli#update' },
121-
] as const
122-
123112
/**
124113
* Track order, measured 2026-09-04 rather than assumed.
125114
*
@@ -214,35 +203,20 @@ function recentRepoDescription(item: RecentRepoUpdate): string {
214203
Agent skills for you<br class="hidden sm:inline">
215204
and your agent<span class="sr-only">.</span><span class="home-hero-dot" aria-hidden="true" />
216205
</h1>
217-
<!-- The product map: the CLI's own four verbs, each a door into /cli,
218-
then the one quiet link to the whole CLI page. -->
219-
<nav class="home-hero__verbs mt-5 font-mono text-sm" aria-label="What skilld does">
220-
<ul class="home-hero__verb-list list-none p-0">
221-
<li v-for="verb in heroVerbs" :key="verb.to">
222-
<NuxtLink :to="verb.to" class="home-hero__verb">
223-
{{ verb.label }}
224-
</NuxtLink>
225-
</li>
226-
</ul>
227-
<span class="home-hero__verbs-rule" aria-hidden="true" />
228-
<NuxtLink to="/cli" class="home-hero__cli">
229-
The skilld CLI<UIcon name="i-lucide-arrow-right" class="size-3.5 shrink-0" aria-hidden="true" />
230-
</NuxtLink>
231-
</nav>
232206
<!-- What sets skilld apart, so the caption assumes the reader knows
233207
what a Skill is. Run comes before install, and the skilld Skill
234-
behind the promo below lets the agent search on its own. -->
235-
<p class="home-hero__caption mx-auto mt-3 text-base leading-relaxed text-muted text-balance">
208+
behind the promo below lets the agent search on its own. The
209+
lifecycle band under the hero maps the CLI's verbs. -->
210+
<p class="home-hero__caption mx-auto mt-5 text-base leading-relaxed text-muted text-balance">
236211
Try any skill before you install it. Your agent can search for its own.
237212
</p>
238213

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

241216
<ul class="home-hero__claims home-hero-claims data-label mx-auto mt-5 list-none p-0" aria-label="About skilld">
242217
<li>
243218
<a href="https://github.com/skilld-dev/skilld" target="_blank" rel="noopener">Open-source CLI, no telemetry</a>
244219
</li>
245-
<li>Analytics without cookies or IPs</li>
246220
<li>
247221
<NuxtLink to="/vs/skills-sh">
248222
A skills.sh alternative
@@ -782,72 +756,12 @@ function recentRepoDescription(item: RecentRepoUpdate): string {
782756
}
783757
}
784758
785-
/* The verb line: four ink verbs on stone dots, a hairline, then the CLI door. */
786-
.home-hero__verbs {
787-
display: flex;
788-
flex-wrap: wrap;
789-
align-items: center;
790-
justify-content: center;
791-
gap: 0.25rem 1rem;
792-
}
793-
794-
.home-hero__verb-list {
795-
display: flex;
796-
flex-wrap: wrap;
797-
justify-content: center;
798-
}
799-
800-
.home-hero__verb-list > li + li::before {
801-
content: '·';
802-
padding-inline: 0.55em;
803-
color: var(--ui-text-dimmed);
804-
}
805-
806759
/* Inline-block drops the space the template formatter leaves inside a link,
807760
so the underline starts on the first letter. */
808-
.home-hero__verb,
809761
.home-hero__claims a {
810762
display: inline-block;
811763
}
812764
813-
.home-hero__verb,
814-
.home-hero__cli {
815-
color: var(--ui-text);
816-
text-decoration-line: underline;
817-
text-decoration-color: transparent;
818-
text-underline-offset: 0.25em;
819-
transition: text-decoration-color 200ms ease-out, color 200ms ease-out;
820-
}
821-
822-
.home-hero__verb:hover,
823-
.home-hero__cli:hover {
824-
text-decoration-color: currentColor;
825-
}
826-
827-
.home-hero__cli {
828-
display: inline-flex;
829-
align-items: center;
830-
gap: 0.3rem;
831-
color: var(--ui-text-muted);
832-
}
833-
834-
.home-hero__cli:hover {
835-
color: var(--ui-text);
836-
}
837-
838-
.home-hero__verbs-rule {
839-
display: none;
840-
width: 1px;
841-
height: 0.9rem;
842-
background: var(--ui-border-accented);
843-
}
844-
845-
@media (min-width: 40rem) {
846-
.home-hero__verbs-rule {
847-
display: block;
848-
}
849-
}
850-
851765
.home-hero__caption {
852766
max-width: 34rem;
853767
}
@@ -872,8 +786,8 @@ function recentRepoDescription(item: RecentRepoUpdate): string {
872786
white-space: nowrap;
873787
}
874788
875-
/* Separators only where the line fits on one row. At 12px the four claims
876-
measure about 830px, inside the 848px hero column. */
789+
/* Separators only where the line fits on one row. At 12px the three claims
790+
measure about 590px, inside the 848px hero column. */
877791
@media (min-width: 64rem) {
878792
.home-hero__claims {
879793
flex-wrap: nowrap;
@@ -905,9 +819,7 @@ function recentRepoDescription(item: RecentRepoUpdate): string {
905819
text-decoration-color: currentColor;
906820
}
907821
908-
.home-hero__promo:focus-visible,
909-
.home-hero__verb:focus-visible,
910-
.home-hero__cli:focus-visible {
822+
.home-hero__promo:focus-visible {
911823
outline: 2px solid var(--ui-border-inverted);
912824
outline-offset: 2px;
913825
border-radius: 2px;

0 commit comments

Comments
 (0)