Skip to content

Commit 95bc739

Browse files
onmaxonmax
committed
feat: add PackageSkillsCard component
1 parent 7b9a3cc commit 95bc739

4 files changed

Lines changed: 68 additions & 29 deletions

File tree

‎app/components/PackageSkillsCard.vue‎

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
<script setup lang="ts">
2+
import type { SkillListItem } from '#shared/types'
3+
4+
defineProps<{
5+
skills: SkillListItem[]
6+
packageName: string
7+
version?: string
8+
}>()
9+
10+
const open = defineModel<boolean>('open', { default: false })
11+
</script>
12+
13+
<template>
14+
<section v-if="skills.length" id="skills" class="scroll-mt-20">
15+
<h2 id="skills-heading" class="group text-xs text-fg-subtle uppercase tracking-wider mb-3">
16+
<a
17+
href="#skills"
18+
class="inline-flex items-center gap-1.5 text-fg-subtle hover:text-fg-muted transition-colors duration-200 no-underline"
19+
>
20+
Agent Skills
21+
<span
22+
class="i-carbon:link w-3 h-3 block opacity-0 group-hover:opacity-100 transition-opacity duration-200"
23+
aria-hidden="true"
24+
/>
25+
</a>
26+
</h2>
27+
<button
28+
type="button"
29+
class="group/btn w-full flex items-center gap-2 px-3 py-2 bg-bg-subtle border border-border rounded-lg hover:border-border-hover hover:bg-bg-muted transition-colors"
30+
@click="open = true"
31+
>
32+
<span class="i-custom:agent-skills size-4 text-fg-muted" aria-hidden="true" />
33+
<span class="text-sm text-fg">{{ skills.length }} skills available</span>
34+
<span class="text-xs text-fg-subtle group-hover/btn:text-fg transition-colors ms-auto"
35+
>View</span
36+
>
37+
</button>
38+
<p class="text-xs text-fg-subtle mt-2">
39+
Compatible with <NuxtLink to="/skills-npm" class="link">skills-npm</NuxtLink>
40+
</p>
41+
</section>
42+
</template>

‎app/components/PackageSkillsModal.vue‎

Lines changed: 9 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -138,13 +138,13 @@ function handleKeydown(event: KeyboardEvent) {
138138
</div>
139139
</div>
140140

141-
<!-- skills-npm: requires setup -->
141+
<!-- skills-npm: compatible -->
142142
<div
143143
v-if="selectedMethod === 'skills-npm'"
144144
class="flex items-center justify-between gap-2 px-3 py-2.5 sm:px-4 bg-bg-subtle border border-border rounded-lg mb-5"
145145
>
146146
<span class="text-sm text-fg-muted"
147-
>Requires <code class="font-mono text-fg">skills-npm</code> setup</span
147+
>Compatible with <code class="font-mono text-fg">skills-npm</code></span
148148
>
149149
<a
150150
href="/skills-npm"
@@ -166,9 +166,9 @@ function handleKeydown(event: KeyboardEvent) {
166166
<span class="w-2.5 h-2.5 rounded-full bg-fg-subtle" />
167167
</div>
168168
<div class="px-3 pt-2 pb-3 sm:px-4 sm:pt-3 sm:pb-4 overflow-x-auto">
169-
<div class="flex items-center gap-2 group/cmd">
170-
<span class="text-fg-subtle font-mono text-sm select-none shrink-0">$</span>
171-
<code class="font-mono text-sm"
169+
<div class="flex flex-wrap items-start gap-x-2 gap-y-1 group/cmd">
170+
<span class="text-fg-subtle font-mono text-sm select-none">$</span>
171+
<code class="font-mono text-sm break-all"
172172
><span class="text-fg">npx </span
173173
><span class="text-fg-muted"
174174
>skills add {{ baseUrl }}/{{ packageName }}</span
@@ -189,7 +189,10 @@ function handleKeydown(event: KeyboardEvent) {
189189
</div>
190190

191191
<!-- Skills list -->
192-
<h3 class="text-xs text-fg-subtle uppercase tracking-wider mb-2">Available Skills</h3>
192+
<div class="flex items-baseline justify-between gap-2 mb-2">
193+
<h3 class="text-xs text-fg-subtle uppercase tracking-wider">Available Skills</h3>
194+
<span class="text-xs text-fg-subtle/60">Click to expand</span>
195+
</div>
193196
<ul class="space-y-0.5 list-none m-0 p-0">
194197
<li v-for="skill in skills" :key="skill.dirName">
195198
<button

‎app/pages/[...package].vue‎

Lines changed: 12 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -705,8 +705,7 @@ function handleClick(event: MouseEvent) {
705705

706706
<!-- Stats grid -->
707707
<dl
708-
class="grid grid-cols-2 gap-3 sm:gap-4 py-4 sm:py-6 mt-4 sm:mt-6 border-t border-border"
709-
:class="skillsData?.skills?.length ? 'sm:grid-cols-12' : 'sm:grid-cols-11'"
708+
class="grid grid-cols-2 sm:grid-cols-11 gap-3 sm:gap-4 py-4 sm:py-6 mt-4 sm:mt-6 border-t border-border"
710709
>
711710
<div v-if="pkg.license" class="space-y-1 sm:col-span-2">
712711
<dt class="text-xs text-fg-subtle uppercase tracking-wider">
@@ -857,25 +856,6 @@ function handleClick(event: MouseEvent) {
857856
<DateTime :datetime="pkg.time.modified" date-style="medium" />
858857
</dd>
859858
</div>
860-
861-
<!-- Skills -->
862-
<ClientOnly>
863-
<div v-if="skillsData?.skills?.length" class="space-y-1 sm:col-span-1">
864-
<dt class="text-xs text-fg-subtle uppercase tracking-wider">
865-
{{ $t('package.stats.skills', 'Skills') }}
866-
</dt>
867-
<dd class="font-mono text-sm text-fg">
868-
<button
869-
type="button"
870-
class="inline-flex items-center gap-1 hover:text-fg-muted transition-colors"
871-
@click="skillsModalOpen = true"
872-
>
873-
<span class="i-carbon:bot w-3.5 h-3.5" aria-hidden="true" />
874-
{{ skillsData.skills.length }}
875-
</button>
876-
</dd>
877-
</div>
878-
</ClientOnly>
879859
</dl>
880860

881861
<!-- Skills Modal -->
@@ -1033,6 +1013,17 @@ function handleClick(event: MouseEvent) {
10331013
</ul>
10341014
</section>
10351015

1016+
<!-- Agent Skills -->
1017+
<ClientOnly>
1018+
<PackageSkillsCard
1019+
v-if="skillsData?.skills?.length"
1020+
:skills="skillsData.skills"
1021+
:package-name="pkg.name"
1022+
:version="displayVersion?.version"
1023+
v-model:open="skillsModalOpen"
1024+
/>
1025+
</ClientOnly>
1026+
10361027
<!-- Download stats -->
10371028
<PackageWeeklyDownloadStats :packageName />
10381029

‎uno.config.ts‎

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -9,9 +9,12 @@ import type { Theme } from '@unocss/preset-wind4/theme'
99
import { presetRtl } from './uno-preset-rtl'
1010

1111
const customIcons = {
12-
tangled:
12+
'agent-skills':
13+
'<svg viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M16 0.5L29.4234 8.25V23.75L16 31.5L2.57661 23.75V8.25L16 0.5Z" fill="currentColor"/><path d="M16 6L24.6603 11V21L16 26L7.33975 21V11L16 6Z" fill="none" stroke="currentColor" stroke-width="3"/></svg>',
14+
'tangled':
1315
'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 25 25"><path fill="currentColor" d="M16.346 24.11c-.785-.007-1.384-.235-2.034-.632-.932-.49-1.643-1.314-2.152-2.222-.808 1.003-1.888 1.611-3.097 1.955-.515.15-1.416.301-2.911-.24-2.154-.724-3.723-2.965-3.545-5.25-.033-.946.313-1.875.802-2.674-1.305-.7-2.37-1.876-2.777-3.318-.248-.79-.237-1.64-.146-2.452.327-1.916 1.764-3.582 3.615-4.182.738-1.683 2.35-2.938 4.176-3.193a5.54 5.54 0 0 1 3.528.7C13.351.89 16.043.383 18.1 1.436c1.568.75 2.69 2.312 2.962 4.015 1.492.598 2.749 1.817 3.242 3.365.33.958.34 2.013.127 2.997-.382 1.536-1.465 2.842-2.868 3.557.003.273.901 2.243.751 3.73-.033 1.858-1.211 3.62-2.846 4.475-.954.557-2.085.546-3.12.535m-4.47-5.35c1.322-.148 2.19-1.3 2.862-2.339.319-.473.562-1.002.803-1.506.314.287.58.828 1.075.957.522.163 1.133.03 1.453-.443.611-1.14.31-2.517-.046-3.699-.22-.679-.507-1.375-1.054-1.856.116-.823-.372-1.66-1.065-2.09-.592.47-1.491.468-2.061-.037-1.093 1.115-2.095 1.078-3.063.195-.217-.199-.632 1.212-2.088.413-.837.7-1.485 1.375-2.06 2.346-.559 1.046-1.143 1.976-1.194 3.113-.024.664.495 1.36 1.198 1.306.703.063 1.182-.63 1.714-.917.08.928.169 1.924.482 2.829.36 1.171 1.627 1.916 2.825 1.745zm.687-3.498c-.644-.394-.334-1.25-.36-1.871.064-.75.115-1.538.453-2.221.356-.487 1.226-.3 1.265.326-.026.628-.314 1.254-.28 1.905-.075.544.054 1.155-.186 1.653-.198.275-.6.355-.892.208m-2.81-.358c-.605-.329-.413-1.156-.508-1.73.08-.666.014-1.51.571-1.978.545-.38 1.287.271 1.03.869-.276.755-.096 1.58-.09 2.346a.712.712 0 0 1-1.002.493"/></svg>',
14-
vlt: '<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M7.9991 5.03666C7.9991 5.46387 7.93211 5.87545 7.80808 6.26145C7.45933 7.34674 7.1975 8.58253 7.7669 9.57009L10.389 14.1177C10.7072 14.6697 11.3617 14.9108 11.9989 14.9108V14.9108V14.9108C12.6352 14.9108 13.2886 14.6699 13.6064 14.1187L16.2301 9.5682C16.7993 8.58097 16.5379 7.34565 16.1895 6.26064C16.0656 5.87488 15.9987 5.46358 15.9987 5.03666C15.9987 2.82777 17.7894 1.03711 19.9983 1.03711C22.2071 1.03711 23.9978 2.82777 23.9978 5.03666C23.9978 7.24555 22.2071 9.03621 19.9983 9.03621V9.03621C19.3609 9.03621 18.7062 9.27733 18.3878 9.82951L15.7661 14.3766C15.1967 15.3642 15.4586 16.6001 15.8074 17.6854C15.9314 18.0715 15.9984 18.4831 15.9984 18.9104C15.9984 21.1193 14.2078 22.9099 11.9989 22.9099C9.79001 22.9099 7.99935 21.1193 7.99935 18.9104C7.99935 18.4834 8.06626 18.072 8.19016 17.6862C8.53863 16.6012 8.80017 15.3657 8.23092 14.3785L5.60752 9.8285C5.28961 9.27712 4.63601 9.03621 3.99955 9.03621V9.03621C1.79066 9.03621 0 7.24555 0 5.03666C0 2.82777 1.79066 1.03711 3.99955 1.03711C6.20844 1.03711 7.9991 2.82777 7.9991 5.03666Z" fill="currentColor"></path></svg>',
16+
'vlt':
17+
'<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M7.9991 5.03666C7.9991 5.46387 7.93211 5.87545 7.80808 6.26145C7.45933 7.34674 7.1975 8.58253 7.7669 9.57009L10.389 14.1177C10.7072 14.6697 11.3617 14.9108 11.9989 14.9108V14.9108V14.9108C12.6352 14.9108 13.2886 14.6699 13.6064 14.1187L16.2301 9.5682C16.7993 8.58097 16.5379 7.34565 16.1895 6.26064C16.0656 5.87488 15.9987 5.46358 15.9987 5.03666C15.9987 2.82777 17.7894 1.03711 19.9983 1.03711C22.2071 1.03711 23.9978 2.82777 23.9978 5.03666C23.9978 7.24555 22.2071 9.03621 19.9983 9.03621V9.03621C19.3609 9.03621 18.7062 9.27733 18.3878 9.82951L15.7661 14.3766C15.1967 15.3642 15.4586 16.6001 15.8074 17.6854C15.9314 18.0715 15.9984 18.4831 15.9984 18.9104C15.9984 21.1193 14.2078 22.9099 11.9989 22.9099C9.79001 22.9099 7.99935 21.1193 7.99935 18.9104C7.99935 18.4834 8.06626 18.072 8.19016 17.6862C8.53863 16.6012 8.80017 15.3657 8.23092 14.3785L5.60752 9.8285C5.28961 9.27712 4.63601 9.03621 3.99955 9.03621V9.03621C1.79066 9.03621 0 7.24555 0 5.03666C0 2.82777 1.79066 1.03711 3.99955 1.03711C6.20844 1.03711 7.9991 2.82777 7.9991 5.03666Z" fill="currentColor"></path></svg>',
1518
}
1619

1720
export default defineConfig({

0 commit comments

Comments
 (0)