From d49d73c53ad6fff84bfe5aa2cb021844a2074710 Mon Sep 17 00:00:00 2001
From: Harlan Wilton <harlan@harlanzw.com>
Date: Mon, 5 Oct 2026 23:48:41 +1100
Subject: [PATCH] fix(home): clarify copy and fix mobile layout

---
 app/app.vue                   |  2 +-
 app/assets/css/main.css       |  7 +++++++
 app/components/HomeSearch.vue |  4 ++--
 app/pages/index.vue           | 24 ++++++++++++++----------
 4 files changed, 24 insertions(+), 13 deletions(-)

diff --git a/app/app.vue b/app/app.vue
index efa0b8ad..36d68bae 100644
--- a/app/app.vue
+++ b/app/app.vue
@@ -237,7 +237,7 @@ watch(() => route.fullPath, () => {
         <NuxtPage />
       </UMain>
 
-      <UFooter>
+      <UFooter :ui="{ right: 'flex-wrap justify-center' }">
         <template #left>
           <p class="font-mono text-xs text-muted">
             Built by <a
diff --git a/app/assets/css/main.css b/app/assets/css/main.css
index b44f1614..c90ad098 100644
--- a/app/assets/css/main.css
+++ b/app/assets/css/main.css
@@ -1833,6 +1833,13 @@
   display: none;
 }
 
+/* Keep the provenance preview short on phones so discovery follows sooner. */
+@media (max-width: 39.999rem) {
+  .home-page .home-hero-rail .skill-source-stream {
+    block-size: 18rem;
+  }
+}
+
 /* Tiles recede on their border, not on opacity. Dimmed text read as disabled. */
 .home-hero-agent,
 .home-eco-logo,
diff --git a/app/components/HomeSearch.vue b/app/components/HomeSearch.vue
index ebb389cf..63501e85 100644
--- a/app/components/HomeSearch.vue
+++ b/app/components/HomeSearch.vue
@@ -132,13 +132,13 @@ const activeDescendant = computed(() =>
 
 <template>
   <div ref="container" @focusout="onFocusOut">
-    <form role="search" class="flex items-stretch gap-2" @submit.prevent="submitQuery">
+    <form role="search" class="flex flex-col items-stretch gap-2 sm:flex-row" @submit.prevent="submitQuery">
       <UInput
         id="home-skill-search"
         ref="input"
         v-model="query"
         icon="i-lucide-search"
-        placeholder="What should your agent learn today?"
+        placeholder="Search skills or repos"
         name="q"
         enterkeyhint="search"
         size="xl"
diff --git a/app/pages/index.vue b/app/pages/index.vue
index c1475910..1abd6313 100644
--- a/app/pages/index.vue
+++ b/app/pages/index.vue
@@ -383,7 +383,7 @@ function recentUpdateDescription(item: RecentUpdateCard): string {
       <!-- The hero runs wider than the editorial bands below it so the proof
            rail sits beside the headline instead of compressing it. -->
       <div class="editorial-band__content mx-auto max-w-6xl px-4 py-10 sm:px-6 md:py-14">
-        <div class="home-hero-grid home-hero-grid">
+        <div class="home-hero-grid">
           <div class="home-hero-copy min-w-0">
             <h1 id="hero-heading" class="home-hero-title font-semibold tracking-[-0.045em]">
               <span class="home-hero-taste">Taste-tested<span class="home-hero-emoji" aria-hidden="true">😋</span></span><br>
@@ -391,8 +391,12 @@ function recentUpdateDescription(item: RecentUpdateCard): string {
               <span class="home-hero-eco">ecosystem.</span>
             </h1>
             <p class="mt-6 max-w-xl text-base leading-relaxed text-muted text-pretty sm:text-lg">
-              Skills written by the maintainers themselves, read by a person before they're listed. Find what your agent needs today, then keep up when it changes.
+              Run a skill for one session without adding files. Fork it when you want an editable copy.
+              Skills written by their maintainers, read by a person before they're listed.
             </p>
+            <NuxtLink to="/developers" class="mt-3 inline-flex min-h-11 items-center font-mono text-sm text-muted underline underline-offset-4 hover:text-default">
+              Use the CLI, API, SDK, or MCP
+            </NuxtLink>
 
             <div class="home-hero-slots mt-10">
               <div class="home-hero-slot">
@@ -455,7 +459,7 @@ function recentUpdateDescription(item: RecentUpdateCard): string {
         <header class="flex flex-wrap items-end justify-between gap-4">
           <div>
             <h2 id="trending-heading" class="home-h2 text-balance">
-              <span class="home-ink">Trending</span> this week.
+              <span class="home-ink">Trending skills</span> this week.
             </h2>
             <p class="mt-4 max-w-2xl text-base leading-relaxed text-muted text-pretty">
               Devs are posting about these skill repos. We count how many separate devs shared each one. Every card links the author's source.
@@ -487,12 +491,12 @@ function recentUpdateDescription(item: RecentUpdateCard): string {
         </div>
 
         <ol v-else class="mt-8 grid list-none gap-4 p-0 sm:grid-cols-2">
-          <li v-for="repo in trendingSectionRepos" :key="`${repo.owner}/${repo.repo}`">
+          <li v-for="repo in trendingSectionRepos" :key="`${repo.owner}/${repo.repo}`" class="min-w-0">
             <NuxtLink
               :to="repoHubPath(repo.owner, repo.repo)"
-              class="group flex h-full flex-col rounded-lg border border-default p-4 transition-colors hover:border-inverted"
+              class="group flex h-full min-w-0 flex-col rounded-lg border border-default p-4 transition-colors hover:border-inverted"
             >
-              <span class="flex items-center gap-2">
+              <span class="flex min-w-0 items-center gap-2">
                 <img
                   :src="githubAvatarProxyUrl(repo.owner, 64)"
                   alt=""
@@ -529,7 +533,7 @@ function recentUpdateDescription(item: RecentUpdateCard): string {
       <div class="editorial-band__content mx-auto max-w-6xl px-4 py-12 sm:px-6 md:py-16">
         <div class="home-outcomes-intro">
           <h2 id="outcomes-heading" class="home-h2 max-w-[16ch] text-balance">
-            Skills for the <span class="home-ink">work you do</span>.
+            Skills for <span class="home-ink">your work</span>.
           </h2>
           <p id="outcomes-description" class="mt-4 max-w-md text-base leading-relaxed text-muted text-pretty">
             Pick a track. Busiest first, measured from what devs shared this week.
@@ -574,7 +578,7 @@ function recentUpdateDescription(item: RecentUpdateCard): string {
         <header class="home-freshness-header">
           <div class="min-w-0">
             <h2 id="freshness-heading" class="home-h2 max-w-[15ch] text-balance">
-              Your skills <span class="home-ink">changed</span>. Did anyone tell you?
+              Keep up with <span class="home-ink">skill changes</span>.
             </h2>
             <p class="mt-4 max-w-2xl text-base leading-relaxed text-muted text-pretty">
               Watch a repo. Each month the digest lists what changed. If nothing changed, we send nothing.
@@ -785,7 +789,7 @@ function recentUpdateDescription(item: RecentUpdateCard): string {
         <div class="home-featured-heading">
           <div class="min-w-0">
             <h2 id="featured-focus-heading" class="home-h2 text-balance">
-              A whole collection, <span class="home-ink">one command</span>.
+              Install a collection in <span class="home-ink">one command</span>.
             </h2>
             <p class="mt-4 max-w-2xl text-base leading-relaxed text-muted text-pretty">
               A collection gathers the skills one project needs. A curator picked every one. Install the set, then watch it.
@@ -1049,7 +1053,7 @@ function recentUpdateDescription(item: RecentUpdateCard): string {
         <div class="home-make-strip">
           <div class="min-w-0">
             <h2 id="publish-heading" class="home-h2 text-balance">
-              Maintain something? <span class="home-ink">Write the skill</span> for it.
+              <span class="home-ink">Write a skill</span> for your project.
             </h2>
             <p class="mt-4 max-w-2xl text-base leading-relaxed text-muted text-pretty">
               Choose a package you publish or a project you maintain. Get the steps to draft a Skill, review it, and ship it in your repository.