apps/web/app/routes/workspace/agents/skill-library.tsx · flagon-io/g1t

Agents → Skills is the workspace's skill library in the open SKILL.md format: write a skill in g1t, import a SKILL.md or zip, link a repository whose .g1t/skills folders publish on every push, or save a finished session as a skill once a person reviews it; attach a skill to an agent, a team or the whole workspace, each attachment pinned to a version. Agents see each skill's name and when to use it, and read the rest with use_skill when a request needs it; a skill never adds a permission, and scripts wait for an agent's own computer. The agent skills guide says how.23h ago

1

/**

2

* Agents → Skills: the workspace's skill library (docs.g1t.sh/guides/agent-skills/).

3

* Every skill it wrote, imported, saved from a session or follows from a

4

* repository, where each is attached, and g1t's foundational skills; the

5

* drafts waiting for review first. Owners link the repository it follows.

6

*/

7

import { ArrowLeft, BookOpen, ChevronRight, FileUp, GitBranch, PenLine, RefreshCw, Store } from "lucide-react";

8

import { Link, data, useFetcher } from "react-router";

9

10

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

11

12

import type { Route } from "./+types/skill-library";

13

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

14

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

15

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

16

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

17

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

18

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

19

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

20

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

21

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

22

23

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

24

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

25

}

26

27

export async function loader({ params, context, request }: Route.LoaderArgs): Promise<{ slug: string; library: SkillLibrary | null }> {

28

const viewer = requireUser(context, request);

29

const slug = params.owner.toLowerCase();

30

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

31

return { slug, library: await readOrNull(skillLibrary.library(slug, viewer)) };

32

}

33

34

/** Link the repository the library follows, read it again, or stop following it. */

35

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

36

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

37

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

38

if (intent === "link") {

39

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

40

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

41

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

42

}

43

if (intent === "unlink") return answer(intent, skillLibrary.setMirror(slug, viewer, null));

44

if (intent === "sync") return answer(intent, skillLibrary.syncMirror(slug, viewer));

45

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

46

}

47

48

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

49

const { slug, library } = loaderData;

50

const drafts = library?.skills.filter((s) => s.status === "draft") ?? [];

51

const published = library?.skills.filter((s) => s.status === "published") ?? [];

52

return (

53

54

55

56

Agents

57

</Link>

58

59

60

<h1 className="text-2xl font-semibold tracking-tight">Skills</h1>

61

62

How your agents do a kind of work, in the open SKILL.md format: a name, when to use it, and instructions, with files if it needs them. Attach a skill to an agent,

63

a team or every agent. Agents see each skill's name and when to use it, and read the rest when a request matches. A skill never gives an agent a tool or

64

access it doesn't have.

65

</p>

66

</div>

67

{library?.can_write && (

68

69

70

71

Import

72

</Link>

73

74

75

Write a skill

76

</Link>

77

</div>

78

)}

79

</header>

80

81

{!library ? (

82

<EmptyState title="The library can't be shown right now">The agents service didn't answer. Reload in a minute.</EmptyState>

83

) : (

84

85

{drafts.length > 0 && (

86

87

88

Drafts to review <span className="text-faint">{drafts.length}</span>

89

</h2>

90

<p className="mt-1 text-xs text-faint">Saved from finished sessions. No agent uses a draft until someone who writes skills reviews and publishes it.</p>

91

92

{drafts.map((skill) => (

93

94

))}

95

</ul>

96

</section>

97

)}

98

99

100

101

Your workspace's skills <span className="text-faint">{published.length}</span>

102

</h2>

103

{published.length === 0 ? (

104

105

<p className="font-medium">No skills yet</p>

106

107

{library.can_write

108

? "Write one, such as how you cut a release or your brand voice, import a SKILL.md or a zip, or save a finished session as a skill."

109

: "Owners and team maintainers write skills. You can save a finished session as a skill for them to review."}

110

</p>

111

</div>

112

) : (

113

114

{published.map((skill) => (

115

116

))}

117

</ul>

118

)}

119

</section>

120

121

122

123

124

From g1t <span className="text-faint">{FOUNDATIONAL_SKILLS.length}</span>

125

</h2>

126

<p className="text-xs text-faint">Version {FOUNDATIONAL_SKILLS_VERSION}, updated with every release</p>

127

</div>

128

<p className="mt-1 text-xs text-faint">Every agent has these. Owners turn one off for an agent on its Skills tab.</p>

129

130

{FOUNDATIONAL_SKILLS.map((skill) => (

131

132

<Link

133

to={skillsPath(slug, skill.id)}

134

className="flex h-full items-start gap-3 rounded-xl border border-line bg-surface px-4 py-3 transition-colors hover:border-line-strong hover:bg-raised/40"

135

>

136

137

138

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

139

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

140

</span>

141

</Link>

142

</li>

143

))}

144

</ul>

145

</section>

146

147

148

149

150

151

152

153

154

From the Marketplace

155

</h2>

156

<p className="mt-0.5 text-sm text-muted">Skills that extensions bring, added to the library in one step.</p>

157

</div>

158

</div>

159

<Badge tone="neutral">Coming</Badge>

160

</section>

161

</div>

162

)}

163

</div>

164

);

165

}

166

167

function SkillRow({ slug, skill, mirror }: { slug: string; skill: LibrarySkill; mirror?: SkillMirror | null }) {

168

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

169

return (

170

<li>

171

172

173

174

<span className="font-mono text-sm font-medium text-fg">{skill.name}</span>

175

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

176

{skill.requires_computer && <NeedsComputer plain />}

177

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

178

</div>

179

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

180

181

{skill.status === "draft" ? (

182

<span className="text-xs text-faint">{originText(skill.origin)}</span>

183

) : skill.attachments.length ? (

184

skill.attachments.slice(0, 4).map((a) => <AttachmentChip key={a.id} attachment={a} latest={skill.version} />)

185

) : (

186

<span className="text-xs text-faint">Not attached yet</span>

187

)}

188

{skill.attachments.length > 4 && <span className="text-xs text-faint">and {skill.attachments.length - 4} more</span>}

189

{behind > 0 && <span className="text-xs text-warn">Update available on {behind}</span>}

190

</div>

191

</div>

192

193

<p>

194

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

195

</p>

196

</div>

197

198

</Link>

199

</li>

200

);

201

}

202

203

/** The repository the library follows, read after every push there; writing back to it is coming. */

204

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

205

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

206

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

207

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

208

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

209

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

210

return (

211

212

213

214

215

216

217

Keep skills in a repository

218

</h2>

219

{mirror ? (

220

221

Follows{" "}

222

223

{mirror.repo}

224

</Link>

225

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

226

{mirror.synced_at && (

227

228

{" "}

229

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

230

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

231

</span>

232

)}

233

</p>

234

) : (

235

236

Optional. Link a repository and each <code className="font-mono text-[0.8125rem]">.g1t/skills/<name>/</code> folder on its default branch becomes a skill

237

here, updated by every push, so skills go through the same pull requests and reviews as code.

238

</p>

239

)}

240

</div>

241

</div>

242

{mirror && (

243

244

{canWrite && (

245

<sync.Form method="post">

246

247

248

249

{sync.state !== "idle" ? "Reading…" : "Read it again"}

250

</button>

251

</sync.Form>

252

)}

253

{canManage && (

254

<Confirm

255

title="Stop following the repository?"

256

confirm="Stop following"

257

fields={{ intent: "unlink" }}

258

fetcherKey="skills-unlink"

259

trigger={

260

261

Stop following

262

</button>

263

}

264

>

265

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

266

</Confirm>

267

)}

268

</div>

269

)}

270

</div>

271

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

272

273

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

274

{problems.map((p) => (

275

276

))}

277

</ul>

278

)}

279

{!mirror && canManage && (

280

281

282

283

Repository

284

</label>

285

286

287

{link.state !== "idle" ? "Linking…" : "Link repository"}

288

</button>

289

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

290

</link.Form>

291

)}

292

293

<p className="text-xs text-faint">Writing edits made here back to the repository as a commit</p>

294

<Badge tone="neutral">Coming</Badge>

295

</div>

296

</section>

297

);

298

}