Rename to Grimoired, update domain to grimoi.red, add resource system
- Rename Grimaired -> Grimoired everywhere (title, nav, descriptions, token keys) - Update domain from skills.here.run.place to grimoi.red - Add Grimoired logo with description on homepage - Add accordion behavior for Quick install / Quick push sections - Add generic resource system (skills, agents, output-styles, rules) - Add resource registry, editor, search, and file manager components
This commit is contained in:
Alejandro Martinez
committed by
Alejandro Martinez
Alejandro Martinez
parent
aa477a553b
commit
17423fb3b9
@@ -1,8 +1,9 @@
|
||||
---
|
||||
import Base from '../layouts/Base.astro';
|
||||
import SkillCard from '../components/SkillCard.astro';
|
||||
import SkillSearch from '../components/SkillSearch.vue';
|
||||
import { listSkills } from '../lib/skills';
|
||||
import ResourceCard from '../components/ResourceCard.astro';
|
||||
import ResourceSearch from '../components/ResourceSearch.vue';
|
||||
import { listResources, listAllResources } from '../lib/resources';
|
||||
import { RESOURCE_TYPES, REGISTRY } from '../lib/registry';
|
||||
import { getAllStats } from '../lib/stats';
|
||||
import { buildSyncScript, buildSyncScriptPS, isPowerShell } from '../lib/sync';
|
||||
|
||||
@@ -17,38 +18,62 @@ if (!accept.includes('text/html')) {
|
||||
});
|
||||
}
|
||||
|
||||
const skills = await listSkills();
|
||||
// Fetch all resources grouped by type
|
||||
const resourcesByType: Record<string, Awaited<ReturnType<typeof listResources>>> = {};
|
||||
const typeCounts: Record<string, number> = {};
|
||||
for (const type of RESOURCE_TYPES) {
|
||||
const resources = await listResources(type);
|
||||
resourcesByType[type] = resources;
|
||||
typeCounts[type] = resources.length;
|
||||
}
|
||||
|
||||
// Compute fork counts and unique authors
|
||||
const allResources = Object.entries(resourcesByType).flatMap(([type, resources]) =>
|
||||
resources.map(r => ({ ...r, type }))
|
||||
).sort((a, b) => a.name.localeCompare(b.name));
|
||||
|
||||
// Compute fork counts
|
||||
const forkCounts = new Map<string, number>();
|
||||
for (const s of skills) {
|
||||
if (s['fork-of']) {
|
||||
forkCounts.set(s['fork-of'], (forkCounts.get(s['fork-of']) || 0) + 1);
|
||||
for (const r of allResources) {
|
||||
if (r['fork-of']) {
|
||||
const key = `${r.type}:${r['fork-of']}`;
|
||||
forkCounts.set(key, (forkCounts.get(key) || 0) + 1);
|
||||
}
|
||||
}
|
||||
const authors = [...new Set(skills.map(s => s.author).filter(Boolean))].sort();
|
||||
const allTags = [...new Set(skills.flatMap(s => s.tags))].sort();
|
||||
const allStats = await getAllStats();
|
||||
|
||||
const authors = [...new Set(allResources.map(r => r.author).filter(Boolean))].sort();
|
||||
const allTags = [...new Set(allResources.flatMap(r => r.tags))].sort();
|
||||
|
||||
// Get stats for all types
|
||||
const allStatsMap: Record<string, Record<string, { downloads: number; pushes: number; lastPushedAt: string | null }>> = {};
|
||||
for (const type of RESOURCE_TYPES) {
|
||||
allStatsMap[type] = await getAllStats(type);
|
||||
}
|
||||
|
||||
function parseTools(val: unknown): string[] {
|
||||
if (Array.isArray(val)) return val.map(String);
|
||||
if (typeof val === 'string') return val.split(',').map(t => t.trim()).filter(Boolean);
|
||||
return [];
|
||||
}
|
||||
---
|
||||
|
||||
<Base title="Skills">
|
||||
{skills.length === 0 ? (
|
||||
<Base title="Grimoired">
|
||||
{allResources.length === 0 ? (
|
||||
<div class="text-center py-24">
|
||||
<div class="inline-flex h-16 w-16 items-center justify-center rounded-2xl bg-surface-200 border border-white/[0.06] mb-6">
|
||||
<svg class="h-7 w-7 text-gray-600" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M19.5 14.25v-2.625a3.375 3.375 0 0 0-3.375-3.375h-1.5A1.125 1.125 0 0 1 13.5 7.125v-1.5a3.375 3.375 0 0 0-3.375-3.375H8.25m3.75 9v6m3-3H9m1.5-12H5.625c-.621 0-1.125.504-1.125 1.125v17.25c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125V11.25a9 9 0 0 0-9-9Z" />
|
||||
</svg>
|
||||
</div>
|
||||
<p class="text-gray-500 text-lg mb-2">No skills yet</p>
|
||||
<p class="text-gray-600 text-sm mb-6">Create your first skill to get started.</p>
|
||||
<p class="text-gray-500 text-lg mb-2">No resources yet</p>
|
||||
<p class="text-gray-600 text-sm mb-6">Create your first skill, agent, output style, or rule to get started.</p>
|
||||
<a
|
||||
href="/new"
|
||||
href="/skills/new"
|
||||
class="inline-flex items-center gap-1.5 rounded-lg bg-accent-500 px-5 py-2.5 text-sm font-semibold text-white shadow-lg shadow-accent-500/20 hover:bg-accent-600 transition-all"
|
||||
>
|
||||
<svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M12 4.5v15m7.5-7.5h-15" />
|
||||
</svg>
|
||||
Create your first skill
|
||||
Create your first resource
|
||||
</a>
|
||||
</div>
|
||||
) : (
|
||||
@@ -56,17 +81,19 @@ const allStats = await getAllStats();
|
||||
<!-- Hero / Quick install -->
|
||||
<div class="mb-10 grid gap-6 lg:grid-cols-2 lg:items-start">
|
||||
<div class="rounded-2xl border border-white/[0.06] bg-surface-100 p-6">
|
||||
<h1 class="text-3xl font-extrabold tracking-tight text-white mb-2">Skills</h1>
|
||||
<p class="text-gray-500 mb-3">Manage and distribute Claude Code skills. Skills are prompt files (<code class="text-gray-400 font-mono bg-white/[0.04] px-1 py-0.5 rounded text-xs">.md</code>) that Claude loads automatically to learn custom behaviors and workflows.</p>
|
||||
<p class="text-gray-600 text-sm leading-relaxed">Create reusable skills to standardize how Claude handles commits, code reviews, testing, deployments, and more across your team. Share them instantly with a single curl command.</p>
|
||||
<div class="flex items-center gap-4 mb-3">
|
||||
<img src="/grimoired.svg" alt="Grimoired logo" class="h-12 w-12" />
|
||||
<h1 class="text-3xl font-extrabold tracking-tight text-white">Grimoired</h1>
|
||||
</div>
|
||||
<p class="text-gray-500 mb-3"><strong class="text-gray-400">Grimoired</strong> (from <em>grimoire</em> — a book of spells, originally French) is a shared registry for Claude Code resources: skills, agents, output styles, and rules. Resources can be simple prompt files (<code class="text-gray-400 font-mono bg-white/[0.04] px-1 py-0.5 rounded text-xs">.md</code>) or full packages with scripts, references, and assets that Claude picks up automatically.</p>
|
||||
<p class="text-gray-600 text-sm leading-relaxed">Create, browse, and share reusable prompts that standardize how Claude handles tasks across your team. Install them instantly with a single curl command.</p>
|
||||
</div>
|
||||
|
||||
<!-- Quick install + Quick push -->
|
||||
<div class="space-y-2">
|
||||
<!-- Quick install -->
|
||||
<details class="group rounded-2xl border border-white/[0.06] bg-surface-100">
|
||||
<details open data-accordion class="group rounded-2xl border border-white/[0.06] bg-surface-100">
|
||||
<summary class="flex items-center justify-between cursor-pointer px-6 py-4 select-none">
|
||||
<h2 class="text-sm font-semibold text-white">Quick install</h2>
|
||||
<h2 class="text-sm font-semibold text-white">Quick install (skills)</h2>
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="hidden group-open:flex rounded-lg border border-white/[0.06] overflow-hidden os-tabs" onclick="event.stopPropagation()">
|
||||
<button data-os="unix" class="os-tab px-2.5 py-1 text-[11px] font-medium transition-all">macOS / Linux</button>
|
||||
@@ -97,10 +124,9 @@ const allStats = await getAllStats();
|
||||
</div>
|
||||
</details>
|
||||
|
||||
<!-- Quick push -->
|
||||
<details class="group rounded-2xl border border-white/[0.06] bg-surface-100">
|
||||
<details data-accordion class="group rounded-2xl border border-white/[0.06] bg-surface-100">
|
||||
<summary class="flex items-center justify-between cursor-pointer px-6 py-4 select-none">
|
||||
<h2 class="text-sm font-semibold text-white">Quick push</h2>
|
||||
<h2 class="text-sm font-semibold text-white">Quick push (skills)</h2>
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="hidden group-open:flex rounded-lg border border-white/[0.06] overflow-hidden os-tabs" onclick="event.stopPropagation()">
|
||||
<button data-os="unix" class="os-tab px-2.5 py-1 text-[11px] font-medium transition-all">macOS / Linux</button>
|
||||
@@ -118,87 +144,106 @@ const allStats = await getAllStats();
|
||||
<code data-cmd="win" class="flex-1 text-sm font-mono text-gray-400 select-all truncate hidden">irm {Astro.url.origin}/p | iex</code>
|
||||
<button data-copy class="shrink-0 rounded-md bg-white/[0.06] border border-white/[0.06] px-2.5 py-1 text-xs font-medium text-gray-400 hover:text-white hover:bg-white/[0.1] transition-all">Copy</button>
|
||||
</div>
|
||||
<details class="group/inner">
|
||||
<summary class="text-xs text-gray-600 cursor-pointer hover:text-gray-400 transition-colors">Push a specific skill</summary>
|
||||
<div class="mt-2">
|
||||
<div class="flex items-center gap-3 rounded-lg bg-surface-50 border border-white/[0.06] px-3 py-2">
|
||||
<code data-cmd="unix" class="flex-1 text-xs font-mono text-gray-400 select-all truncate">curl -fsSL {Astro.url.origin}/p | bash -s skill-name</code>
|
||||
<code data-cmd="win" class="flex-1 text-xs font-mono text-gray-400 select-all truncate hidden">irm {Astro.url.origin}/p | iex -Args skill-name</code>
|
||||
<button data-copy class="shrink-0 rounded bg-white/[0.06] border border-white/[0.06] px-2 py-0.5 text-xs font-medium text-gray-500 hover:text-white hover:bg-white/[0.1] transition-all">Copy</button>
|
||||
</div>
|
||||
</div>
|
||||
</details>
|
||||
</div>
|
||||
</details>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Search + Grid + Table -->
|
||||
<SkillSearch authors={authors.join(',')} tags={allTags.join(',')} totalCount={skills.length} client:load />
|
||||
<div id="skills-grid" class="grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
|
||||
{skills.map((skill) => (
|
||||
<div
|
||||
data-skill
|
||||
data-name={skill.name.toLowerCase()}
|
||||
data-description={skill.description.toLowerCase()}
|
||||
data-tools={skill['allowed-tools'].join(' ').toLowerCase()}
|
||||
data-author={skill.author.toLowerCase()}
|
||||
data-tags={skill.tags.join(',').toLowerCase()}
|
||||
data-forks={String(forkCounts.get(skill.slug) || 0)}
|
||||
>
|
||||
<SkillCard {...skill} forkCount={forkCounts.get(skill.slug) || 0} downloads={allStats[skill.slug]?.downloads || 0} pushes={allStats[skill.slug]?.pushes || 0} lastPushedAt={allStats[skill.slug]?.lastPushedAt || null} />
|
||||
</div>
|
||||
))}
|
||||
<ResourceSearch
|
||||
authors={authors.join(',')}
|
||||
tags={allTags.join(',')}
|
||||
totalCount={allResources.length}
|
||||
typeCounts={JSON.stringify(typeCounts)}
|
||||
client:load
|
||||
/>
|
||||
|
||||
<div id="resources-grid" class="grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
|
||||
{allResources.map((r) => {
|
||||
const config = REGISTRY[r.type as keyof typeof REGISTRY];
|
||||
const stats = allStatsMap[r.type]?.[r.slug] || { downloads: 0, pushes: 0, lastPushedAt: null };
|
||||
const fc = forkCounts.get(`${r.type}:${r.slug}`) || 0;
|
||||
const tools = parseTools(r.fields['allowed-tools'] ?? r.fields.allowedTools);
|
||||
return (
|
||||
<div
|
||||
data-resource
|
||||
data-name={r.name.toLowerCase()}
|
||||
data-description={r.description.toLowerCase()}
|
||||
data-tools={tools.join(' ').toLowerCase()}
|
||||
data-author={r.author.toLowerCase()}
|
||||
data-tags={r.tags.join(',').toLowerCase()}
|
||||
data-type={r.type}
|
||||
data-forks={String(fc)}
|
||||
>
|
||||
<ResourceCard
|
||||
resourceType={r.type}
|
||||
slug={r.slug}
|
||||
name={r.name}
|
||||
description={r.description}
|
||||
tags={r.tags}
|
||||
author={r.author}
|
||||
forkCount={fc}
|
||||
downloads={stats.downloads}
|
||||
pushes={stats.pushes}
|
||||
lastPushedAt={stats.lastPushedAt}
|
||||
typeLabel={config.labelSingular}
|
||||
typeColor={config.color}
|
||||
tools={tools}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
|
||||
<div id="skills-table" class="hidden overflow-x-auto rounded-2xl border border-white/[0.06]">
|
||||
<div id="resources-table" class="hidden overflow-x-auto rounded-2xl border border-white/[0.06]">
|
||||
<table class="w-full text-sm text-left">
|
||||
<thead class="bg-surface-100 border-b border-white/[0.06]">
|
||||
<tr>
|
||||
<th class="px-4 py-3 text-xs font-semibold uppercase tracking-wider text-gray-500">Type</th>
|
||||
<th class="px-4 py-3 text-xs font-semibold uppercase tracking-wider text-gray-500">Name</th>
|
||||
<th class="px-4 py-3 text-xs font-semibold uppercase tracking-wider text-gray-500">Description</th>
|
||||
<th class="px-4 py-3 text-xs font-semibold uppercase tracking-wider text-gray-500">Tools</th>
|
||||
<th class="px-4 py-3 text-xs font-semibold uppercase tracking-wider text-gray-500">Tags</th>
|
||||
<th class="px-4 py-3 text-xs font-semibold uppercase tracking-wider text-gray-500">Author</th>
|
||||
<th class="px-4 py-3 text-xs font-semibold uppercase tracking-wider text-gray-500">Updated</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody class="divide-y divide-white/[0.04]">
|
||||
{skills.map((skill) => {
|
||||
const desc = skill.description.length > 80 ? skill.description.slice(0, 80) + '...' : skill.description;
|
||||
const fc = forkCounts.get(skill.slug) || 0;
|
||||
const st = allStats[skill.slug] || { downloads: 0, pushes: 0 };
|
||||
{allResources.map((r) => {
|
||||
const config = REGISTRY[r.type as keyof typeof REGISTRY];
|
||||
const stats = allStatsMap[r.type]?.[r.slug] || { downloads: 0, pushes: 0, lastPushedAt: null };
|
||||
const fc = forkCounts.get(`${r.type}:${r.slug}`) || 0;
|
||||
const desc = r.description.length > 80 ? r.description.slice(0, 80) + '...' : r.description;
|
||||
const tools = parseTools(r.fields['allowed-tools'] ?? r.fields.allowedTools);
|
||||
return (
|
||||
<tr
|
||||
data-skill
|
||||
data-name={skill.name.toLowerCase()}
|
||||
data-description={skill.description.toLowerCase()}
|
||||
data-tools={skill['allowed-tools'].join(' ').toLowerCase()}
|
||||
data-author={skill.author.toLowerCase()}
|
||||
data-tags={skill.tags.join(',').toLowerCase()}
|
||||
data-resource
|
||||
data-name={r.name.toLowerCase()}
|
||||
data-description={r.description.toLowerCase()}
|
||||
data-tools={tools.join(' ').toLowerCase()}
|
||||
data-author={r.author.toLowerCase()}
|
||||
data-tags={r.tags.join(',').toLowerCase()}
|
||||
data-type={r.type}
|
||||
data-forks={String(fc)}
|
||||
class="bg-surface-50 hover:bg-surface-100 transition-colors"
|
||||
>
|
||||
<td class="px-4 py-3 whitespace-nowrap">
|
||||
<a href={`/${skill.slug}`} class="font-medium text-white hover:text-accent-400 transition-colors">{skill.name}</a>
|
||||
<span class="rounded-full px-2 py-0.5 text-[10px] font-semibold" style={`background: ${config.color}20; color: ${config.color};`}>
|
||||
{config.labelSingular}
|
||||
</span>
|
||||
</td>
|
||||
<td class="px-4 py-3 whitespace-nowrap">
|
||||
<a href={`/${r.type}/${r.slug}`} class="font-medium text-white hover:text-accent-400 transition-colors">{r.name}</a>
|
||||
</td>
|
||||
<td class="px-4 py-3 text-gray-500 max-w-xs truncate">{desc}</td>
|
||||
<td class="px-4 py-3">
|
||||
<div class="flex flex-wrap gap-1">
|
||||
{skill['allowed-tools'].map((tool) => (
|
||||
<span class="rounded-md bg-white/[0.04] border border-white/[0.06] px-1.5 py-0.5 text-[11px] font-medium text-gray-400">{tool}</span>
|
||||
))}
|
||||
</div>
|
||||
</td>
|
||||
<td class="px-4 py-3">
|
||||
<div class="flex flex-wrap gap-1">
|
||||
{skill.tags.map((tag) => (
|
||||
{r.tags.map((tag) => (
|
||||
<span class="rounded-full bg-[var(--color-accent-500)]/10 border border-[var(--color-accent-500)]/20 px-2 py-0.5 text-[11px] font-medium text-[var(--color-accent-400)]">{tag}</span>
|
||||
))}
|
||||
</div>
|
||||
</td>
|
||||
<td class="px-4 py-3 text-gray-500 whitespace-nowrap">{skill.author || '—'}</td>
|
||||
<td class="px-4 py-3 text-gray-500 whitespace-nowrap text-xs">{allStats[skill.slug]?.lastPushedAt ? new Date(allStats[skill.slug].lastPushedAt!).toLocaleDateString('en-US', { month: 'short', day: 'numeric', year: 'numeric' }) : '—'}</td>
|
||||
<td class="px-4 py-3 text-gray-500 whitespace-nowrap">{r.author || '—'}</td>
|
||||
<td class="px-4 py-3 text-gray-500 whitespace-nowrap text-xs">{stats.lastPushedAt ? new Date(stats.lastPushedAt).toLocaleDateString('en-US', { month: 'short', day: 'numeric', year: 'numeric' }) : '—'}</td>
|
||||
</tr>
|
||||
);
|
||||
})}
|
||||
@@ -214,7 +259,6 @@ const allStats = await getAllStats();
|
||||
.os-tab.active { background: rgba(255,255,255,0.06); color: white; }
|
||||
</style>
|
||||
<script>
|
||||
// OS detection + tab switching
|
||||
const isWin = /Win/.test(navigator.platform);
|
||||
function setOS(os: string) {
|
||||
document.querySelectorAll<HTMLElement>('[data-cmd]').forEach(el => {
|
||||
@@ -229,7 +273,6 @@ const allStats = await getAllStats();
|
||||
tab.addEventListener('click', () => setOS(tab.dataset.os!));
|
||||
});
|
||||
|
||||
// Copy buttons
|
||||
document.querySelectorAll<HTMLButtonElement>('[data-copy]').forEach((btn) => {
|
||||
btn.addEventListener('click', () => {
|
||||
const container = btn.parentElement!;
|
||||
@@ -242,4 +285,15 @@ const allStats = await getAllStats();
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
// Accordion: only one details[data-accordion] open at a time
|
||||
document.querySelectorAll<HTMLDetailsElement>('details[data-accordion]').forEach((detail) => {
|
||||
detail.addEventListener('toggle', () => {
|
||||
if (detail.open) {
|
||||
document.querySelectorAll<HTMLDetailsElement>('details[data-accordion]').forEach((other) => {
|
||||
if (other !== detail) other.removeAttribute('open');
|
||||
});
|
||||
}
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
||||
Reference in New Issue
Block a user