apps/web/app/routes/workspace/customize/skills.tsx · flagon-io/g1t

import { FOUNDATIONAL_SKILLS, FOUNDATIONAL_SKILLS_VERSION, type LibrarySkill, type SkillLibrary, type SkillListing, type SkillMirror } from "@g1t/contracts";

15

import { customizePath } from "@g1t/contracts/customize";

16

17

import type { Route } from "./+types/skills";

18

import { useCustomize } from "./layout";

19

import { agentsAction, answer, readOrNull } from "../../../components/agents/actions.server";

20

import { type ActionResult, Confirm } from "../../../components/agents/dialogs";

21

import { FromRepository, NeedsComputer, originText, skillsPath } from "../../../components/agents/skills";

22

import { AvailabilityBadge, AvailableTo, FeaturedBanner, FilterMenu, ListingCard, ListingGrid, ListingMark, NoAnswer, RequestButton, SectionHead, Waiting } from "../../../components/customize";

23

import { ButtonLink, EmptyState, SubmitButton, TimeAgo } from "../../../components/ui";

24

import { Badge } from "../../../components/ui/badge";

25

import { Button } from "../../../components/ui/button";

26

import { Card } from "../../../components/ui/card";

27

import { Input } from "../../../components/ui/input";

28

import { type Reach, type ReachOption, categoriesOf, filterSkills, groupByMarketplace, nextParams, pluginPath, readQuery, readView, requestedBy, skillListingRef, splitTarget, waitingFor, withParams } from "../../../lib/customize";

29

import { page } from "../../../lib/meta";

30

import { skillLibrary, workspaceAgents } from "../../../lib/services.server";

31

import { requireUser, roleIn } from "../../../lib/session.server";

32

33

export { shouldRevalidate } from "../../../lib/customize-revalidate";

34

35

export function meta({ params, ...args }: Route.MetaArgs) {

36

return page(args, { title: `Skills · Customize · ${params.owner} · g1t` });

37

}

38

39

export async function loader({ params, context, request }: Route.LoaderArgs): Promise<{ library: SkillLibrary | null; discover: SkillListing[] | null | undefined }> {

40

const viewer = requireUser(context, request);

41

const slug = params.owner.toLowerCase();

42

if (!roleIn(viewer, slug)) throw data(null, { status: 404 });

43

const discovering = readView(new URL(request.url).searchParams) === "discover";

44

const [library, discover] = await Promise.all([

45

readOrNull(skillLibrary.library(slug, viewer)),

46

// Only Discover reads the marketplaces; undefined says it wasn't asked for.

47

discovering ? readOrNull(workspaceAgents.discover(slug, viewer)).then((found) => found?.skills ?? null) : Promise.resolve(undefined),

48

]);

49

return { library, discover };

}

/**

* Give a skill to every agent, a team or one agent, or take it back; move

54

* an attachment to the newest version; install the plugin that brings a

55

* skill from Discover; link, read again or unlink the repository the

56

* library follows.

57

*/

58

export async function action({ params, context, request }: Route.ActionArgs): Promise<ActionResult> {

59

const { viewer, slug, form } = await agentsAction(request, context, params.owner);

60

const intent = String(form.get("intent") ?? "");

61

const name = String(form.get("name") ?? "");

62

switch (intent) {

63

case "attach": {

64

const { scope, target } = splitTarget(String(form.get("where") ?? ""));

65

return answer(intent, skillLibrary.attachSkill(slug, viewer, name, scope, target));

66

}

67

case "detach":

68

return answer(intent, skillLibrary.detachSkill(slug, viewer, name, String(form.get("attachment") ?? "")));

69

case "pin":

70

return answer(intent, skillLibrary.pinSkill(slug, viewer, name, String(form.get("attachment") ?? ""), null));

71

case "add":

72

return answer(intent, workspaceAgents.installPlugin(slug, viewer, String(form.get("plugin") ?? "")));

73

case "link": {

74

const repo = String(form.get("repo") ?? "").trim();

75

if (!repo) return { ok: false, intent, error: "Name the repository as workspace/name." };

76

return answer(intent, skillLibrary.setMirror(slug, viewer, repo));

77

}

78

case "unlink":

79

return answer(intent, skillLibrary.setMirror(slug, viewer, null));

80

case "sync":

81

return answer(intent, skillLibrary.syncMirror(slug, viewer));

82

default:

83

return { ok: false, intent, error: "Unknown request." };

}

}

/** Where a skill reaches, as the control reads it. */

88

function reachOf(skill: LibrarySkill): Reach[] {

89

return skill.attachments.map((a) => ({ id: a.id, scope: a.scope, target: a.target, label: a.label }));

90

}

91

92

/** Who the viewer may give skills to: owners anyone, team maintainers their teams; null for everyone else. */

93

function targetsOf(library: SkillLibrary) {

94

return library.can_manage || library.teams.length > 0 ? { can_manage: library.can_manage, teams: library.teams, agents: library.agents } : null;

95

}

96

97

export default function CustomizeSkills({ loaderData }: Route.ComponentProps) {

98

const [params] = useSearchParams();

99

return readView(params) === "discover" ? <Discover library={loaderData.library} listings={loaderData.discover ?? null} /> : <Yours library={loaderData.library} />;

100

}

101

102

// ── Yours ────────────────────────────────────────────────────────────────

103

104

function Yours({ library }: { library: SkillLibrary | null }) {

105

const { slug } = useCustomize();

106

const [params] = useSearchParams();

107

const query = readQuery(params).toLowerCase();

108

if (!library) return <NoAnswer what="The library" />;

109

const matching = (skill: LibrarySkill) => !query || [skill.name, skill.qualified_name, skill.description, skill.plugin ?? ""].some((text) => text.toLowerCase().includes(query));

110

const drafts = library.skills.filter((s) => s.status === "draft" && matching(s));

111

const published = library.skills.filter((s) => s.status === "published" && matching(s));

112

const foundational = FOUNDATIONAL_SKILLS.filter((skill) => !query || skill.name.toLowerCase().includes(query) || skill.description.toLowerCase().includes(query));

113

const targets = targetsOf(library);

114

return (

115

116

{drafts.length > 0 && (

117

118

119

Saved from finished sessions. No agent uses a draft until someone who writes skills reviews and publishes it.

</SectionHead>

<ul>

{drafts.map((skill) => (

))}

</ul>

</Card>

</section>

)}

How your agents do a kind of work, in the open SKILL.md format. A skill reaches the agents it is available to; they see its name and when to use it, and read the rest when a request matches.

134

</SectionHead>

135

{published.length === 0 ? (

136

137

{query ? (

138

"Try another word, or look in Discover."

139

) : library.can_write ? (

140

<>

141

Write one, such as how you cut a release or your brand voice, import a SKILL.md or a zip, save a finished session as a skill, or add public skills from{" "}

Discover

</Link>

.

</>

) : (

"Owners and team maintainers write skills. You can save a finished session as a skill for them to review, or ask for a public skill in Discover."

)}

</EmptyState>

) : (

<ul>

{published.map((skill) => (

))}

</ul>

</Card>

)}

</section>

Every agent has these. Owners turn one off for an agent on its Skills tab.

165

</SectionHead>

166

167

{foundational.map((skill) => (

<span className="block font-mono text-[0.8125rem] font-medium text-fg">{skill.id}</span>

174

<span className="mt-0.5 block text-xs text-muted">{skill.description}</span>

</span>

</Link>

</Card>

</li>

))}

</ul>

</section>

</div>

);

}

/** A library skill as a row: its name, what it is, where it came from, and the agents it is available to. */

189

function SkillRow({ slug, skill, targets, mirror }: { slug: string; skill: LibrarySkill; targets: ReturnType<typeof targetsOf>; mirror: SkillMirror | null }) {

190

const fetcher = useFetcher<ActionResult>({ key: `skill-reach-${skill.id}` });

191

const error = fetcher.state === "idle" && fetcher.data && !fetcher.data.ok ? fetcher.data.error : null;

192

const behind = skill.attachments.filter((a) => a.version < skill.version);

193

const draft = skill.status === "draft";

194

const to = skillsPath(slug, skill.qualified_name, draft && skill.can_edit ? "/edit" : "");

195

const change = (option: ReachOption, checked: boolean) => {

196

if (checked) fetcher.submit({ intent: "attach", name: skill.qualified_name, where: option.value }, { method: "post" });

197

else if (option.reach) fetcher.submit({ intent: "detach", name: skill.qualified_name, attachment: option.reach.id }, { method: "post" });

};

return (

{skill.qualified_name}

205

</Link>

206

{draft ? <Badge tone="warn">Draft</Badge> : <span className="text-xs text-faint">v{skill.version}</span>}

207

{skill.plugin && (

208

209

<Badge tone="accent">from {skill.plugin}</Badge>

210

</Link>

211

)}

212

{skill.requires_computer && <NeedsComputer />}

213

{skill.mirrored && <FromRepository repo={mirror?.repo ?? null} />}

214

</div>

215

<p className="mt-0.5 line-clamp-2 text-sm text-muted">{skill.description}</p>

216

217

{draft ? <span className="text-xs text-faint">{originText(skill.origin)}</span> : <AvailableTo reach={reachOf(skill)} targets={targets} busy={fetcher.state !== "idle"} onChange={change} />}

218

{behind.length > 0 && (

219

<fetcher.Form method="post" className="inline-flex items-center gap-1.5">

Update available on {behind.length === 1 ? behind[0]!.label : `${behind.length} attachments`}

</SubmitButton>

</fetcher.Form>

)}

</div>

{error && <p className="mt-1.5 text-sm text-danger">{error}</p>}

</div>

<p>

@{skill.updated_by} · <TimeAgo at={skill.updated_at} />

</p>

</Link>

</div>

</li>

);

}

/** The repository the library follows: `.claude/skills/<name>/` on its default branch, read after every push. */

244

function MirrorPanel({ slug, mirror, canManage, canWrite }: { slug: string; mirror: SkillMirror | null; canManage: boolean; canWrite: boolean }) {

245

const link = useFetcher<ActionResult>({ key: "skills-link" });

246

const sync = useFetcher<ActionResult>({ key: "skills-sync" });

247

const linkError = link.state === "idle" && link.data && !link.data.ok ? link.data.error : null;

248

const syncError = sync.state === "idle" && sync.data && !sync.data.ok ? sync.data.error : null;

249

const problems = mirror?.error?.split("\n").filter(Boolean) ?? [];

return (

Keep skills in a repository

</h2>

{mirror ? (

Follows{" "}

{mirror.repo}

</Link>

: each folder in <code className="font-mono text-[0.8125rem]">.claude/skills/</code> on {mirror.branch} is a skill, and a push there publishes a new version.

267

{mirror.synced_at && (

268

269

{" "}

270

Read <TimeAgo at={mirror.synced_at} />

271

{mirror.commit ? ` at ${mirror.commit.slice(0, 7)}` : ""}.

</span>

)}

</p>

) : (

Optional. Link a repository and each <code className="font-mono text-[0.8125rem]">.claude/skills/<name>/</code> folder on its default branch becomes a skill here, updated by every push, so skills go

278

through the same pull requests and reviews as code.

</p>

)}

</div>

</div>

{mirror && (

{canWrite && (

<sync.Form method="post">

Read it again

</SubmitButton>

</sync.Form>

)}

{canManage && (

<Confirm

title="Stop following the repository?"

297

confirm="Stop following"

298

fields={{ intent: "unlink" }}

299

fetcherKey="skills-unlink"

trigger={

Stop following

</Button>

}

>

Its skills stay in the library as they are, and can be edited here again. Pushes to {mirror.repo} no longer change them.

</Confirm>

)}

</div>

)}

</div>

{(problems.length > 0 || syncError) && (

313

314

{syncError && <li>{syncError}</li>}

315

{problems.map((p) => (

))}

</ul>

)}

{!mirror && canManage && (

Repository

</label>

Link repository

</SubmitButton>

{linkError && <p className="w-full text-sm text-danger">{linkError}</p>}

</link.Form>

)}

</section>

</Card>

);

}

// ── Discover ─────────────────────────────────────────────────────────────

339

340

function Discover({ library, listings }: { library: SkillLibrary | null; listings: SkillListing[] | null }) {

341

const { slug, owner, username, requests } = useCustomize();

342

const [params, setParams] = useSearchParams();

343

if (!listings) return <NoAnswer what="Public skills" />;

344

const category = params.get("category") || null;

345

const shown = filterSkills(listings, { q: readQuery(params), category });

346

const categories = categoriesOf(listings);

347

const marketplaces = new Set(listings.map((listing) => listing.marketplace)).size;

348

const grouped = groupByMarketplace(shown);

349

const targets = library ? targetsOf(library) : null;

return (

<FeaturedBanner

title="Public skills, as they are"

354

action={

355

356

{marketplaces} {marketplaces === 1 ? "marketplace" : "marketplaces"}

</ButtonLink>

}

>

Every skill published in the marketplaces this workspace reads, in the open SKILL.md format. Adding one installs the plugin that brings it; then you say which agents it is available to.

361

</FeaturedBanner>

362

363

{categories.length > 0 && (

364

<FilterMenu label="Category" all="All" value={category} options={categories.map((c) => ({ value: c, label: c }))} onChange={(next) => setParams(nextParams(params, { category: next }), { replace: true, preventScrollReset: true })} />

365

)}

366

367

{shown.length} of {listings.length}

368

</span>

369

</div>

370

{shown.length === 0 ? (

371

<EmptyState title="No skill matches">Try another word or category, or add a marketplace that lists it.</EmptyState>

372

) : (

373

grouped.map((group) => (

{group.items.map((listing) => (

))}

</ListingGrid>

</section>

))

)}

</div>

);

}

/** A skill in Discover: what it is, the plugin that brings it, and Add, Request, or where it is available once added. */

function SkillCard({

listing,

slug,

owner,

requested,

waiting,

library,

targets,

}: {

listing: SkillListing;

slug: string;

owner: boolean;

requested: boolean;

waiting: number;

library: SkillLibrary | null;

404

targets: ReturnType<typeof targetsOf>;

405

}) {

406

const fetcher = useFetcher<ActionResult>({ key: `discover-skill-${listing.ref}` });

407

const error = fetcher.state === "idle" && fetcher.data && !fetcher.data.ok ? fetcher.data.error : null;

408

const pluginRef = `${listing.plugin}@${listing.marketplace}`;

409

const added = library?.skills.find((skill) => skill.plugin === pluginRef && skill.name.toLowerCase() === listing.name.toLowerCase()) ?? null;

410

const available = listing.availability.kind === "available" || listing.availability.kind === "installed";

411

const change = (option: ReachOption, checked: boolean) => {

412

if (!added) return;

413

if (checked) fetcher.submit({ intent: "attach", name: added.qualified_name, where: option.value }, { method: "post" });

414

else if (option.reach) fetcher.submit({ intent: "detach", name: added.qualified_name, attachment: option.reach.id }, { method: "post" });

415

};

416

const action = added ? (

417

418

) : !available ? null : owner ? (

419

<fetcher.Form method="post">

Add

</SubmitButton>

</fetcher.Form>

) : (

);

return (

<ListingCard

mark={<ListingMark id={listing.ref} name={listing.name} />}

433

title={<span className="font-mono">{listing.name}</span>}

434

to={pluginPath(slug, pluginRef)}

435

description={listing.description}

436

badge={added || listing.added ? <Badge tone="success">Added</Badge> : !available ? <AvailabilityBadge availability={listing.availability} /> : null}

muted={!available}

meta={

<>

From {listing.plugin}

441

{listing.author ? ` · by ${listing.author}` : ""}

{waiting > 0 && (

<>

{" · "}

</>

)}

</>

}

action={action}

>

{error && <p className="text-xs text-danger">{error}</p>}

453

</ListingCard>

454

);

455

}