feat(registry): full width Skill page with a file explorer

app/components/SkillSourceList.vue

@@ -181,7 +181,7 @@ function sourcePath(item: SkillSourceItem): string {
           </span>
           <span
             v-if="item.description"
-            class="mt-2 line-clamp-2 block text-sm text-muted"
+            class="mt-2 line-clamp-2 text-sm text-muted"
           >
             {{ item.description }}
           </span>
@@ -275,6 +275,9 @@ function sourcePath(item: SkillSourceItem): string {
 
 .skill-source-grid {
   display: grid;
+  /* minmax(0) stops the truncated names from sizing the track to their full
+     length, which pushed cards past the edge of a phone screen. */
+  grid-template-columns: minmax(0, 1fr);
   gap: 0.75rem;
 }
 

app/pages/index.vue

@@ -8,6 +8,7 @@ import type { SkillSourceItem } from '../types/skill-source'
 import type { FeaturedPersonSection } from '../utils/homepage-person-skills'
 import { avatarProxyUrl, githubAvatarProxyUrl } from '#shared/image-proxy'
 import { TRENDING_RANGES } from '#shared/trending-range'
+import { AGENT_LOGOS } from '~/utils/agent-logos'
 import OutcomeClusterGrid from '../components/OutcomeClusterGrid.vue'
 import { homepagePersonSkillFallbacks } from '../data/homepage-person-skills'
 import {
@@ -292,15 +293,7 @@ const authoringEcosystems = [
 const trendingDoorTarget = computed(() => (showTrending.value ? '#discover' : '/skills/trending'))
 
 // Named agent row under the search: proof of "every agent".
-const heroAgentLogos = [
-  { id: 'claude-code', label: 'Claude Code', icon: 'i-simple-icons-claude' },
-  { id: 'cursor', label: 'Cursor', icon: 'i-simple-icons-cursor' },
-  { id: 'codex', label: 'Codex', icon: 'i-simple-icons-openai' },
-  { id: 'gemini-cli', label: 'Gemini CLI', icon: 'i-simple-icons-googlegemini' },
-  { id: 'github-copilot', label: 'Copilot', icon: 'i-simple-icons-githubcopilot' },
-  { id: 'windsurf', label: 'Windsurf', icon: 'i-simple-icons-windsurf' },
-  { id: 'opencode', label: 'OpenCode', icon: 'i-simple-icons-opencode' },
-] as const
+const heroAgentLogos = AGENT_LOGOS
 
 const installTarget = computed<InstallTarget | null>(() => {
   const collection = leadCollection.value

app/utils/agent-logos.ts

@@ -0,0 +1,10 @@
+/** Agents shown as proof of "every agent", on the homepage and the Skill page. */
+export const AGENT_LOGOS = [
+  { id: 'claude-code', label: 'Claude Code', icon: 'i-simple-icons-claude' },
+  { id: 'cursor', label: 'Cursor', icon: 'i-simple-icons-cursor' },
+  { id: 'codex', label: 'Codex', icon: 'i-simple-icons-openai' },
+  { id: 'gemini-cli', label: 'Gemini CLI', icon: 'i-simple-icons-googlegemini' },
+  { id: 'github-copilot', label: 'Copilot', icon: 'i-simple-icons-githubcopilot' },
+  { id: 'windsurf', label: 'Windsurf', icon: 'i-simple-icons-windsurf' },
+  { id: 'opencode', label: 'OpenCode', icon: 'i-simple-icons-opencode' },
+] as const

layers/marketing/app/pages/skills/trending.vue

@@ -614,7 +614,7 @@ function rankClass(index: number): string {
               {{ item.name }}
             </NuxtLink>
             <span class="ml-2 font-mono text-xs text-muted">{{ item.owner }}/{{ item.repo }}</span>
-            <span v-if="item.description" class="mt-1 line-clamp-2 block text-sm leading-relaxed text-muted">
+            <span v-if="item.description" class="mt-1 line-clamp-2 text-sm leading-relaxed text-muted">
               {{ item.description }}
             </span>
           </li>