diff --git a/app/components/SkillSourceList.vue b/app/components/SkillSourceList.vue index 6b3a0163..6b3c8d09 100644 --- a/app/components/SkillSourceList.vue +++ b/app/components/SkillSourceList.vue @@ -181,7 +181,7 @@ function sourcePath(item: SkillSourceItem): string { {{ item.description }} @@ -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; } diff --git a/app/pages/index.vue b/app/pages/index.vue index 4ca3f621..7518bf2b 100644 --- a/app/pages/index.vue +++ b/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(() => { const collection = leadCollection.value diff --git a/app/utils/agent-logos.ts b/app/utils/agent-logos.ts new file mode 100644 index 00000000..bdefdade --- /dev/null +++ b/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 diff --git a/layers/marketing/app/pages/skills/trending.vue b/layers/marketing/app/pages/skills/trending.vue index 74659aab..f522ad01 100644 --- a/layers/marketing/app/pages/skills/trending.vue +++ b/layers/marketing/app/pages/skills/trending.vue @@ -614,7 +614,7 @@ function rankClass(index: number): string { {{ item.name }} {{ item.owner }}/{{ item.repo }} - + {{ item.description }} diff --git a/layers/registry/app/components/SkillDetail.vue b/layers/registry/app/components/SkillDetail.vue index 6e0be472..6536d1fa 100644 --- a/layers/registry/app/components/SkillDetail.vue +++ b/layers/registry/app/components/SkillDetail.vue @@ -1,21 +1,29 @@