From 4c56274f4e43f3d38597fc8ca2d3ced7c560e037 Mon Sep 17 00:00:00 2001 From: Harlan Wilton Date: Wed, 7 Oct 2026 12:28:23 +1100 Subject: [PATCH 1/7] feat: show what skilld does differently on home and vs page Visitors kept asking why skilld over skills.sh, and the answer lived in a short Markdown table. The homepage now shows four reasons as small pictures of the real interface, and /vs/skills-sh expands all seven with a sourced skills.sh line each, where skills.sh is ahead, and a full table. --- COPY.md | 4 + app/components/HomeWhy.vue | 76 +++ app/components/why/_WhyAuthorVisual.vue | 185 ++++++++ app/components/why/_WhyDemoVisual.vue | 99 ++++ app/components/why/_WhyDevsVisual.vue | 238 ++++++++++ app/components/why/_WhyFilesVisual.vue | 134 ++++++ app/components/why/_WhyMakerVisual.vue | 129 +++++ app/components/why/_WhyPanel.vue | 78 ++++ app/components/why/_WhyRunVisual.vue | 143 ++++++ app/components/why/_WhyTelemetryVisual.vue | 152 ++++++ app/components/why/_WhyText.vue | 30 ++ app/components/why/_WhyTrustLine.vue | 119 +++++ app/components/why/_WhyVisual.vue | 32 ++ app/pages/index.vue | 5 + app/utils/why-skilld.ts | 139 ++++++ layers/marketing/app/pages/vs/skills-sh.vue | 440 +++++++++++++++++- .../marketing/content/pages/vs/skills-sh.md | 25 - test/a11y.spec.ts | 108 +++++ 18 files changed, 2106 insertions(+), 30 deletions(-) create mode 100644 app/components/HomeWhy.vue create mode 100644 app/components/why/_WhyAuthorVisual.vue create mode 100644 app/components/why/_WhyDemoVisual.vue create mode 100644 app/components/why/_WhyDevsVisual.vue create mode 100644 app/components/why/_WhyFilesVisual.vue create mode 100644 app/components/why/_WhyMakerVisual.vue create mode 100644 app/components/why/_WhyPanel.vue create mode 100644 app/components/why/_WhyRunVisual.vue create mode 100644 app/components/why/_WhyTelemetryVisual.vue create mode 100644 app/components/why/_WhyText.vue create mode 100644 app/components/why/_WhyTrustLine.vue create mode 100644 app/components/why/_WhyVisual.vue create mode 100644 app/utils/why-skilld.ts delete mode 100644 layers/marketing/content/pages/vs/skills-sh.md diff --git a/COPY.md b/COPY.md index 9f4f6c00..211bb96f 100644 --- a/COPY.md +++ b/COPY.md @@ -48,6 +48,10 @@ These exact strings. Do not paraphrase them per page. | Demo provenance | {Agent logo} {model}, such as Opus 5.5 | guidance only: the recording line on the Skill page panel and the homepage stage. Screen readers and the title get "Recorded with {agent}, {model}". No date and no GitHub link: the Skill page is where visitors inspect a Skill | | Demo outdated | Recorded on an older version of this Skill. | guidance only: under the Demo panel when the Skill moved past the recorded commit | | Home section: changes | Keep up with skill changes. | guidance only: the homepage section heading for watching and the digest | +| Home section: why | What skilld does differently. · A skills.sh alternative, built around who wrote a Skill and what it does. | guidance only: the homepage Why band heading and line, after trending. "skills.sh alternative" links to `/vs/skills-sh`. The four reasons under it come from `HOME_WHY_REASONS` | +| Why trust line | Independent, built by Harlan Wilton · Open-source CLI, no telemetry · No paid placement · Compare with skills.sh | guidance only: the line that closes the homepage Why band. The avatar links Harlan's GitHub, the CLI claim links the CLI repository, and the button opens `/vs/skills-sh` | +| Why reasons | Run a Skill once off · Read every file first · Ranked by devs, never installs · See who wrote it · Preview what a Skill makes · No telemetry · Independent | guidance only: the reason titles. `WHY_REASONS` in `app/utils/why-skilld.ts` holds each title, its line, and the sourced skills.sh line. The homepage and `/vs/skills-sh` both read it | +| Comparison H1 | skilld vs skills.sh | guidance only: the `/vs/skills-sh` H1. Its lead says what skills.sh is before what skilld is. Every skills.sh fact carries its source link and the date it was checked | | Home section: authoring | Write a skill for your project. | guidance only: the homepage section heading for making a Skill | | Nav: developers | Developers | guidance only: the header menu trigger, and the group label in the mobile menu. The menu holds the four items below | | Nav: CLI | CLI · Search, run, install, and keep Skills current. | guidance only: the first compact row in the Developers menu: name, line. Links `/cli`. The mobile menu shows the name only. The line is the CLI line, so change that first | diff --git a/app/components/HomeWhy.vue b/app/components/HomeWhy.vue new file mode 100644 index 00000000..b93c44c9 --- /dev/null +++ b/app/components/HomeWhy.vue @@ -0,0 +1,76 @@ + + + + + diff --git a/app/components/why/_WhyAuthorVisual.vue b/app/components/why/_WhyAuthorVisual.vue new file mode 100644 index 00000000..abb54477 --- /dev/null +++ b/app/components/why/_WhyAuthorVisual.vue @@ -0,0 +1,185 @@ + + + + + diff --git a/app/components/why/_WhyDemoVisual.vue b/app/components/why/_WhyDemoVisual.vue new file mode 100644 index 00000000..a9f7084e --- /dev/null +++ b/app/components/why/_WhyDemoVisual.vue @@ -0,0 +1,99 @@ + + + + + diff --git a/app/components/why/_WhyDevsVisual.vue b/app/components/why/_WhyDevsVisual.vue new file mode 100644 index 00000000..ae0a956d --- /dev/null +++ b/app/components/why/_WhyDevsVisual.vue @@ -0,0 +1,238 @@ + + + + + diff --git a/app/components/why/_WhyFilesVisual.vue b/app/components/why/_WhyFilesVisual.vue new file mode 100644 index 00000000..472f8dd6 --- /dev/null +++ b/app/components/why/_WhyFilesVisual.vue @@ -0,0 +1,134 @@ + + + + + diff --git a/app/components/why/_WhyMakerVisual.vue b/app/components/why/_WhyMakerVisual.vue new file mode 100644 index 00000000..188f1712 --- /dev/null +++ b/app/components/why/_WhyMakerVisual.vue @@ -0,0 +1,129 @@ + + + + + diff --git a/app/components/why/_WhyPanel.vue b/app/components/why/_WhyPanel.vue new file mode 100644 index 00000000..2733f5f3 --- /dev/null +++ b/app/components/why/_WhyPanel.vue @@ -0,0 +1,78 @@ + + + + + diff --git a/app/components/why/_WhyRunVisual.vue b/app/components/why/_WhyRunVisual.vue new file mode 100644 index 00000000..2f9bbac2 --- /dev/null +++ b/app/components/why/_WhyRunVisual.vue @@ -0,0 +1,143 @@ + + + + + diff --git a/app/components/why/_WhyTelemetryVisual.vue b/app/components/why/_WhyTelemetryVisual.vue new file mode 100644 index 00000000..2a3ff6c3 --- /dev/null +++ b/app/components/why/_WhyTelemetryVisual.vue @@ -0,0 +1,152 @@ + + + + + diff --git a/app/components/why/_WhyText.vue b/app/components/why/_WhyText.vue new file mode 100644 index 00000000..b0c2789a --- /dev/null +++ b/app/components/why/_WhyText.vue @@ -0,0 +1,30 @@ + + + + + diff --git a/app/components/why/_WhyTrustLine.vue b/app/components/why/_WhyTrustLine.vue new file mode 100644 index 00000000..2efb64a6 --- /dev/null +++ b/app/components/why/_WhyTrustLine.vue @@ -0,0 +1,119 @@ + + + + + diff --git a/app/components/why/_WhyVisual.vue b/app/components/why/_WhyVisual.vue new file mode 100644 index 00000000..01aac5aa --- /dev/null +++ b/app/components/why/_WhyVisual.vue @@ -0,0 +1,32 @@ + + + diff --git a/app/pages/index.vue b/app/pages/index.vue index bd9434c2..50c3fbf0 100644 --- a/app/pages/index.vue +++ b/app/pages/index.vue @@ -130,6 +130,9 @@ const showTrending = computed(() => (trendingData.value?.board.length ?? 0) >= H const weekBoardPath = trendingRangeMeta('week').path +/** The first row ranked by posts, for the ranking picture in the Why band. */ +const whyTrendingRow = computed(() => trendingBoard.value.find(row => row.reason._tag === 'posts') ?? null) + /** Real Skill names from this week's trending repositories, for the hero texture. */ const heroTextureNames = computed(() => trendingData.value?.textureNames ?? []) @@ -316,6 +319,8 @@ function recentRepoDescription(item: RecentRepoUpdate): string { + +
> = { + run: { + id: 'run', + title: 'Run a Skill once off', + line: 'Your agent reads the Skill for one session. skilld writes no file, no lockfile entry, and no cache. Install only the Skills you keep.', + skillsSh: '`skills add` installs the files into your project. `skills use` writes them to a temporary directory.', + link: { label: 'How run works', to: '/cli#run' }, + sources: ['https://github.com/vercel-labs/skills#readme'], + }, + files: { + id: 'files', + title: 'Read every file first', + line: 'A Skill page lists every file with its token cost. Skill behaviors show what the files ask your agent to do, with links to the lines.', + skillsSh: 'A skills.sh page shows the SKILL.md. The full file tree needs its API and a Vercel token.', + link: { label: 'Open the pdf Skill', to: '/gh/anthropics/skills/pdf' }, + sources: ['https://skills.sh/docs/api'], + }, + devs: { + id: 'devs', + title: 'Ranked by devs, never installs', + line: 'Trending counts the separate devs who posted about a Skill on X and Bluesky. Every post is one click away.', + skillsSh: 'skills.sh ranks by install counts from the telemetry in its CLI.', + link: { label: 'Trending skills', to: '/skills/trending' }, + sources: ['https://skills.sh/docs/faq'], + }, + author: { + id: 'author', + title: 'See who wrote it', + line: 'Every Skill names the person who wrote it and links the exact SKILL.md in their repository.', + skillsSh: 'skills.sh shows the owner and the repository, with a badge for verified organizations.', + link: null, + sources: ['https://skills.sh'], + }, + demos: { + id: 'demos', + title: 'Preview what a Skill makes', + line: 'A demo is one recorded run: the prompt, and what the agent built with the Skill.', + skillsSh: 'skills.sh pages show the SKILL.md and install counts. They show no output from a run.', + link: { label: 'All demos', to: '/skills/demos' }, + sources: ['https://skills.sh'], + }, + telemetry: { + id: 'telemetry', + title: 'No telemetry', + line: 'The skilld CLI is open source under MIT. It sends no telemetry or analytics.', + skillsSh: 'The skills CLI is MIT too. Its telemetry is on by default and sends Skill names and search queries. `DISABLE_TELEMETRY=1` turns it off.', + link: { label: 'Read the source', to: 'https://github.com/skilld-dev/skilld', external: true }, + sources: ['https://github.com/vercel-labs/skills/blob/main/src/telemetry.ts', 'https://skills.sh/docs/cli'], + }, + independent: { + id: 'independent', + title: 'Independent', + line: 'Harlan Wilton builds skilld. It has no sponsored listings, no paid placement, and no paywalls.', + skillsSh: 'Vercel operates skills.sh.', + link: { label: 'Harlan on GitHub', to: 'https://github.com/harlan-zw', external: true }, + sources: ['https://skills.sh/about'], + }, +} + +/** The homepage shows four in full. The trust line under them carries the rest. */ +export const HOME_WHY_REASONS: readonly WhyReasonId[] = ['run', 'files', 'devs', 'author'] + +/** `/vs/skills-sh` shows every reason, in this order. */ +export const VS_WHY_REASONS: readonly WhyReasonId[] = ['run', 'files', 'devs', 'author', 'demos', 'telemetry', 'independent'] + +/** Where skills.sh is ahead. A comparison that admits none reads as an ad. */ +export interface SkillsShLead { + title: string + line: string + sources: readonly string[] +} + +export function skillsShLeads(agentTargetCount: number): SkillsShLead[] { + return [ + { + title: 'More Skills', + line: 'skills.sh lists every public Skill its CLI has seen. skilld lists curated Skills only, so a search there finds more.', + sources: ['https://skills.sh/about'], + }, + { + title: 'More agents', + line: `The skills CLI installs into 79 agents. The skilld CLI installs into ${agentTargetCount}, and MCP apps such as ChatGPT search skilld from the chat.`, + sources: ['https://github.com/vercel-labs/skills#readme'], + }, + { + title: 'Partner audits', + line: 'skills.sh shows audit results from Gen Agent Trust Hub, Socket, and Snyk. skilld shows Skill behaviors with links to the lines, and claims no Skill is safe.', + sources: ['https://skills.sh/audits'], + }, + ] +} + +export interface ComparisonRow { + label: string + skillsSh: string + skilld: string +} + +export function comparisonRows(agentTargetCount: number): ComparisonRow[] { + return [ + { label: 'Use without installing', skillsSh: '`skills use` writes the files to a temporary directory', skilld: '`skilld run` writes nothing' }, + { label: 'Files on the Skill page', skillsSh: 'SKILL.md', skilld: 'Every file, with token cost and Skill behaviors' }, + { label: 'What ranks a Skill', skillsSh: 'Install counts from CLI telemetry', skilld: 'Devs who posted about it, then GitHub stars' }, + { label: 'Who wrote it', skillsSh: 'Owner and repository', skilld: 'Name, avatar, and the exact SKILL.md' }, + { label: 'Output before you run', skillsSh: 'None', skilld: 'Recorded demos' }, + { label: 'CLI telemetry', skillsSh: 'On by default, opt out', skilld: 'None' }, + { label: 'CLI licence', skillsSh: 'MIT', skilld: 'MIT' }, + { label: 'Agents', skillsSh: '79', skilld: `${agentTargetCount}, plus MCP apps` }, + { label: 'Security reports', skillsSh: 'Partner audits', skilld: 'Skill behaviors, linked to the lines' }, + { label: 'Staying current', skillsSh: '`skills update`', skilld: 'Watch for changes, monthly digest' }, + { label: 'Run by', skillsSh: 'Vercel', skilld: 'Harlan Wilton, independent' }, + ] +} diff --git a/layers/marketing/app/pages/vs/skills-sh.vue b/layers/marketing/app/pages/vs/skills-sh.vue index 338810e5..6a37b419 100644 --- a/layers/marketing/app/pages/vs/skills-sh.vue +++ b/layers/marketing/app/pages/vs/skills-sh.vue @@ -1,11 +1,441 @@ + + diff --git a/layers/marketing/content/pages/vs/skills-sh.md b/layers/marketing/content/pages/vs/skills-sh.md deleted file mode 100644 index b0a0781f..00000000 --- a/layers/marketing/content/pages/vs/skills-sh.md +++ /dev/null @@ -1,25 +0,0 @@ ---- -title: 'skilld vs skills.sh: curated Agent Skills with an author' -description: Looking for a skills.sh alternative? skilld is a curated registry where every Skill has a human author and readable source. One command, every Agent. -heading: skilld vs skills.sh -label: Comparison -author: Harlan Wilton -cta: - label: Browse curated Skills - to: /skills -publishedAt: 2026-09-01 -updatedAt: 2026-09-01 ---- - -skills.sh is Vercel's directory of Agent Skills. It indexes a large catalogue, ranks by install count, supports 73 agents, and runs audits on listed skills. If you want breadth and a popularity signal, it does that well. skilld is smaller by design: a person admits each Skill, every listing shows its author and links the source file, and `skilld run` lets your Agent use a Skill without writing a file. - -| | skills.sh | skilld | -|---|---|---| -| Who admits a Skill | Any indexed repository | A person, with a reconstructible reason | -| Ordering signal | Install count | [GitHub](https://github.com) stars, with curation first | -| Provenance shown | Repository link | Author and exact source file, one click | -| Try before install | Install | `skilld run` prints the Skill, writes nothing | -| Staying current | `update --all` syncs files | Source commit tracked; update shows what changed | -| Agents | 73 | Detected Agent target; same command for each | - -Both tools install the same SKILL.md files. The difference is who decided a Skill belongs and what you know about it before you run it. diff --git a/test/a11y.spec.ts b/test/a11y.spec.ts index 667b3fb4..7c70b6ab 100644 --- a/test/a11y.spec.ts +++ b/test/a11y.spec.ts @@ -1,6 +1,8 @@ import type { AxeResults, RunOptions } from 'axe-core' import type { Component } from 'vue' import type { WeeklyDemoResponse } from '../../server/api/weekly/demo.get' +import type { HomeDemoItem } from '../app/utils/home-demos' +import type { TrendingBoardRow } from '../shared/trending-range' import { readdirSync } from 'node:fs' import { resolve } from 'node:path' import { mockNuxtImport, mountSuspended } from '@nuxt/test-utils/runtime' @@ -781,6 +783,102 @@ describe('accessibility: components', () => { wrapper.unmount() }) + /** The head of a trending board, ranked by two posts. */ + const WHY_TRENDING_ROW: TrendingBoardRow = { + key: 'acme/brag/brag', + owner: 'acme', + repo: 'brag', + name: 'brag', + title: 'brag', + to: '/gh/acme/brag', + subtitle: null, + description: 'Makes a launch film.', + stars: 120, + starSeries: [], + names: ['brag'], + skill: { owner: 'acme', repo: 'brag', name: 'brag' }, + reason: { + _tag: 'posts', + posts: [ + { url: 'https://x.com/ada/status/1', text: 'Tried /brag on our launch, it made the whole film.', platform: 'x', handle: 'ada', authorName: 'Ada', authorAvatar: null, likes: 4, when: '1d' }, + { url: 'https://x.com/lin/status/2', text: 'brag is great', platform: 'x', handle: 'lin', authorName: 'Lin', authorAvatar: null, likes: 1, when: '2d' }, + ], + mentionsByDay: [0, 0, 0, 0, 0, 1, 1], + }, + } + + const WHY_DEMO: HomeDemoItem = { + owner: 'acme', + repo: 'brag', + name: 'brag', + skillPath: 'SKILL.md', + makes: 'film', + authorName: 'Ada', + sourceUrl: 'https://github.com/acme/brag/blob/main/SKILL.md', + prompt: 'Make a short launch film for this project.', + agent: 'Claude Code', + model: 'claude-opus-5-5', + recordedAt: '2026-10-01', + shots: [{ src: 'https://media.skilld.dev/brag.png', width: 1440, height: 900, alt: 'The launch film', viewport: 'desktop' }], + liveUrl: null, + video: null, + } + + it('homeWhy has no violations, shows four reasons, and ends on the comparison', async () => { + const container = createIsolatedContainer() + const wrapper = await mountSuspended( + await loadComponent('HomeWhy'), + { attachTo: container, props: { trendingRow: WHY_TRENDING_ROW } }, + ) + const results = await runAxe(container) + expect(results.violations, formatViolations(results)).toHaveLength(0) + expect([...container.querySelectorAll('h3')].map(heading => heading.textContent?.trim())).toEqual([ + 'Run a Skill once off', + 'Read every file first', + 'Ranked by devs, never installs', + 'See who wrote it', + ]) + // The ranking picture quotes the first post in the poster's words. + expect(container.textContent).toContain('@ada') + expect(container.querySelector('a[href="/gh/acme/brag"]')).not.toBeNull() + const links = [...container.querySelectorAll('a')].map(link => link.getAttribute('href')) + expect(links.at(-1)).toBe('/vs/skills-sh') + wrapper.unmount() + }) + + it('whyVisual draws every reason without violations, and no demo picture without a demo', async () => { + for (const id of ['run', 'files', 'devs', 'author', 'demos', 'telemetry', 'independent'] as const) { + const container = createIsolatedContainer() + const wrapper = await mountSuspended( + await loadComponent('why/_WhyVisual'), + { attachTo: container, props: { id, trendingRow: WHY_TRENDING_ROW, demo: WHY_DEMO } }, + ) + const results = await runAxe(container) + expect(results.violations, `${id}\n${formatViolations(results)}`).toHaveLength(0) + expect(container.querySelector('.why-panel'), id).not.toBeNull() + wrapper.unmount() + } + + const container = createIsolatedContainer() + const wrapper = await mountSuspended( + await loadComponent('why/_WhyVisual'), + { attachTo: container, props: { id: 'demos', demo: null } }, + ) + expect(container.querySelector('.why-panel')).toBeNull() + wrapper.unmount() + }) + + it('whyVisual keeps the ranking signals when no trending row arrived', async () => { + const container = createIsolatedContainer() + const wrapper = await mountSuspended( + await loadComponent('why/_WhyVisual'), + { attachTo: container, props: { id: 'devs', trendingRow: null } }, + ) + expect(container.textContent).toContain('never ranks') + expect(container.querySelector('a[href^="/gh/"]')).toBeNull() + wrapper.unmount() + }) + it('cliInstallChip has no violations, leads with the native install, and switches platform', async () => { const container = createIsolatedContainer() const wrapper = await mountSuspended( @@ -871,6 +969,16 @@ describe('accessibility: component coverage', () => { 'home-demos/_DemoPicture', // A part of HomeDemos, scanned inside the HomeDemos tests 'home-demos/_DemoRecording', // A part of HomeDemos, scanned inside the HomeDemos tests 'home-demos/_DemoVideo', // A part of HomeDemos; its play rules need a real browser, checked by hand + 'why/_WhyPanel', // The frame of every Why picture, scanned inside the WhyVisual tests + 'why/_WhyRunVisual', // A Why picture, scanned inside the WhyVisual tests + 'why/_WhyFilesVisual', // A Why picture, scanned inside the WhyVisual tests + 'why/_WhyDevsVisual', // A Why picture, scanned inside the WhyVisual tests + 'why/_WhyAuthorVisual', // A Why picture, scanned inside the WhyVisual tests + 'why/_WhyDemoVisual', // A Why picture, scanned inside the WhyVisual tests + 'why/_WhyTelemetryVisual', // A Why picture, scanned inside the WhyVisual tests + 'why/_WhyMakerVisual', // A Why picture, scanned inside the WhyVisual tests + 'why/_WhyText', // The words of each reason, scanned inside the HomeWhy test + 'why/_WhyTrustLine', // The line under the Why band, scanned inside the HomeWhy test ] /** From 71f1eca87ea466ad42f800b7818600f4713bbc3e Mon Sep 17 00:00:00 2001 From: Harlan Wilton Date: Wed, 7 Oct 2026 12:52:46 +1100 Subject: [PATCH 2/7] feat(home): compact the Why band into tabs with sharper reasons The four-tile grid ran about 1,150px on an already long homepage, and its reasons read as features. Two also repeated bands above it: demos show the output, and every card names its author. The band is now a tab list beside one picture, and the reasons say what a dev gets: no skill bloat, what a Skill runs, what it costs, and rankings anyone can check. --- COPY.md | 4 +- app/components/HomeWhy.vue | 208 ++++++++++++++++++--- app/components/why/_WhyBehaviorsVisual.vue | 106 +++++++++++ app/components/why/_WhyCostVisual.vue | 117 ++++++++++++ app/components/why/_WhyFilesVisual.vue | 134 ------------- app/components/why/_WhyMakerVisual.vue | 6 +- app/components/why/_WhyVisual.vue | 6 +- app/utils/why-skilld.ts | 61 ++++-- test/a11y.nuxt.spec.ts | 35 +++- 9 files changed, 481 insertions(+), 196 deletions(-) create mode 100644 app/components/why/_WhyBehaviorsVisual.vue create mode 100644 app/components/why/_WhyCostVisual.vue delete mode 100644 app/components/why/_WhyFilesVisual.vue diff --git a/COPY.md b/COPY.md index 211bb96f..885a66b7 100644 --- a/COPY.md +++ b/COPY.md @@ -48,9 +48,9 @@ These exact strings. Do not paraphrase them per page. | Demo provenance | {Agent logo} {model}, such as Opus 5.5 | guidance only: the recording line on the Skill page panel and the homepage stage. Screen readers and the title get "Recorded with {agent}, {model}". No date and no GitHub link: the Skill page is where visitors inspect a Skill | | Demo outdated | Recorded on an older version of this Skill. | guidance only: under the Demo panel when the Skill moved past the recorded commit | | Home section: changes | Keep up with skill changes. | guidance only: the homepage section heading for watching and the digest | -| Home section: why | What skilld does differently. · A skills.sh alternative, built around who wrote a Skill and what it does. | guidance only: the homepage Why band heading and line, after trending. "skills.sh alternative" links to `/vs/skills-sh`. The four reasons under it come from `HOME_WHY_REASONS` | +| Home section: why | What skilld does differently. · A skills.sh alternative, built around what a Skill does before your agent runs it. | guidance only: the homepage Why band heading and line, after trending. "skills.sh alternative" links to `/vs/skills-sh`. The four reasons under it come from `HOME_WHY_REASONS`, as tabs beside one picture | | Why trust line | Independent, built by Harlan Wilton · Open-source CLI, no telemetry · No paid placement · Compare with skills.sh | guidance only: the line that closes the homepage Why band. The avatar links Harlan's GitHub, the CLI claim links the CLI repository, and the button opens `/vs/skills-sh` | -| Why reasons | Run a Skill once off · Read every file first · Ranked by devs, never installs · See who wrote it · Preview what a Skill makes · No telemetry · Independent | guidance only: the reason titles. `WHY_REASONS` in `app/utils/why-skilld.ts` holds each title, its line, and the sourced skills.sh line. The homepage and `/vs/skills-sh` both read it | +| Why reasons | No more skill bloat · Know what it runs · Know what it costs · Rankings you can check · See who wrote it · Preview what a Skill makes · No telemetry · Independent | guidance only: the reason titles. `WHY_REASONS` in `app/utils/why-skilld.ts` holds each title, its line, and the sourced skills.sh line. The homepage and `/vs/skills-sh` both read it. "No more skill bloat" is the run pitch line. Know what it runs never claims a Skill is safe: it names the behaviors and the approval stop | | Comparison H1 | skilld vs skills.sh | guidance only: the `/vs/skills-sh` H1. Its lead says what skills.sh is before what skilld is. Every skills.sh fact carries its source link and the date it was checked | | Home section: authoring | Write a skill for your project. | guidance only: the homepage section heading for making a Skill | | Nav: developers | Developers | guidance only: the header menu trigger, and the group label in the mobile menu. The menu holds the four items below | diff --git a/app/components/HomeWhy.vue b/app/components/HomeWhy.vue index b93c44c9..03c76009 100644 --- a/app/components/HomeWhy.vue +++ b/app/components/HomeWhy.vue @@ -1,15 +1,20 @@ diff --git a/app/components/why/_WhyBehaviorsVisual.vue b/app/components/why/_WhyBehaviorsVisual.vue new file mode 100644 index 00000000..56da6c24 --- /dev/null +++ b/app/components/why/_WhyBehaviorsVisual.vue @@ -0,0 +1,106 @@ + + + + + diff --git a/app/components/why/_WhyCostVisual.vue b/app/components/why/_WhyCostVisual.vue new file mode 100644 index 00000000..2a8d41b9 --- /dev/null +++ b/app/components/why/_WhyCostVisual.vue @@ -0,0 +1,117 @@ + + + + + diff --git a/app/components/why/_WhyFilesVisual.vue b/app/components/why/_WhyFilesVisual.vue deleted file mode 100644 index 472f8dd6..00000000 --- a/app/components/why/_WhyFilesVisual.vue +++ /dev/null @@ -1,134 +0,0 @@ - - - - - diff --git a/app/components/why/_WhyMakerVisual.vue b/app/components/why/_WhyMakerVisual.vue index 188f1712..86b8507c 100644 --- a/app/components/why/_WhyMakerVisual.vue +++ b/app/components/why/_WhyMakerVisual.vue @@ -33,7 +33,7 @@ const NEVER = ['Sponsored listings', 'Paid placement', 'Paywalls']

- Never on skilld + Never on skilld:

  • @@ -94,9 +94,7 @@ const NEVER = ['Sponsored listings', 'Paid placement', 'Paywalls'] margin-bottom: 0.375rem; padding-top: 0.75rem; border-top: 1px dashed var(--ui-border); - font-size: 0.6875rem; - letter-spacing: 0.08em; - text-transform: uppercase; + /* Normal case, so the name keeps its lowercase (COPY.md). */ color: var(--ui-text-muted); } diff --git a/app/components/why/_WhyVisual.vue b/app/components/why/_WhyVisual.vue index 01aac5aa..6883c588 100644 --- a/app/components/why/_WhyVisual.vue +++ b/app/components/why/_WhyVisual.vue @@ -3,9 +3,10 @@ import type { TrendingBoardRow } from '#shared/trending-range' import type { HomeDemoItem } from '~/utils/home-demos' import type { WhyReasonId } from '~/utils/why-skilld' import WhyAuthorVisual from './_WhyAuthorVisual.vue' +import WhyBehaviorsVisual from './_WhyBehaviorsVisual.vue' +import WhyCostVisual from './_WhyCostVisual.vue' import WhyDemoVisual from './_WhyDemoVisual.vue' import WhyDevsVisual from './_WhyDevsVisual.vue' -import WhyFilesVisual from './_WhyFilesVisual.vue' import WhyMakerVisual from './_WhyMakerVisual.vue' import WhyRunVisual from './_WhyRunVisual.vue' import WhyTelemetryVisual from './_WhyTelemetryVisual.vue' @@ -23,7 +24,8 @@ const { id, trendingRow = null, demo = null } = defineProps<{