Skip to content

feat(make-skill): add the file minimap beside the page heading #428

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
harlan-zw merged 1 commit into from
Oct 5, 2026
Merged

feat(make-skill): add the file minimap beside the page heading #428

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
26 changes: 16 additions & 10 deletions layers/marketing/app/pages/make-skill.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -53,7 +53,7 @@ async function openGuide() {
await navigateTo(packageSkillGuide(parsed.value).to)
}
catch {
submission.value = { _tag: 'Failed', message: 'The guide could not open. Submit the form again.' }
submission.value = { _tag: 'Failed', message: 'Couldn\'t open the guide. Check your connection and try again.' }
}
if (submission.value._tag === 'Navigating')
submission.value = { _tag: 'Idle' }
Expand All @@ -73,11 +73,15 @@ useHead({ link: [{ rel: 'canonical', href: 'https://skilld.dev/make-skill' }] })

<template>
<div class="mx-auto max-w-2xl px-4 py-12 sm:px-6 md:py-16">
<header>
<h1 class="text-3xl font-semibold tracking-tight sm:text-4xl">
<header class="relative isolate">
<!-- The File minimap: SKILL.md files as dot rows, beside the heading so no dot sits behind text. -->
<div class="make-skill-minimap absolute -top-10 right-0 -z-10 h-24 w-2/5 sm:top-0 sm:h-full sm:w-40 md:-top-4 md:h-[calc(100%+2rem)]">
<TextureFileMinimap />
</div>
<h1 class="text-3xl font-semibold tracking-tight sm:pr-44 sm:text-4xl">
Make a skill
</h1>
<p class="mt-4 max-w-xl text-base leading-relaxed text-muted">
<p class="mt-4 text-base leading-relaxed text-muted sm:pr-44">
Help agents use your package or work in your project. Get the steps to write a Skill and ship it from your repository.
</p>
</header>
Expand All @@ -99,9 +103,6 @@ useHead({ link: [{ rel: 'canonical', href: 'https://skilld.dev/make-skill' }] })
<h2 id="kind-heading" class="text-xl font-semibold">
What is your Skill for?
</h2>
<p class="mt-2 text-base text-muted">
Choose what the Skill helps agents with.
</p>
<div class="mt-6 divide-y divide-default rounded-lg border border-default">
<UButton
v-for="(item, key) in skillKinds"
Expand Down Expand Up @@ -134,9 +135,6 @@ useHead({ link: [{ rel: 'canonical', href: 'https://skilld.dev/make-skill' }] })
<h2 id="ecosystem-heading" class="text-xl font-semibold">
Where do you publish your package?
</h2>
<p class="mt-2 text-base text-muted">
Choose where developers get your package.
</p>
<div class="mt-6 divide-y divide-default rounded-lg border border-default">
<UButton
v-for="(item, key) in packageEcosystems"
Expand Down Expand Up @@ -231,3 +229,11 @@ useHead({ link: [{ rel: 'canonical', href: 'https://skilld.dev/make-skill' }] })
</section>
</div>
</template>

<style scoped>
/* Fade the minimap in from the left and out at the top and bottom, so it has no hard edge. */
.make-skill-minimap {
mask-image: radial-gradient(closest-side, #000 45%, transparent);
-webkit-mask-image: radial-gradient(closest-side, #000 45%, transparent);
}
</style>