feat: add link to skills on create-a-template page (#24710)

This pull request updates the `CreateTemplateGalleryPageView` component
to enhance the page header actions by grouping them vertically and
adding a new external link button for users. The most important changes
are:

**UI improvements:**

* Groups the header action buttons into a vertical stack using a flex
container with column direction and spacing for better layout and
accessibility.

**New feature:**

* Adds a new button linking to the "template agent skill" documentation
on GitHub, allowing users to easily access guidance on using the
template agent skill.

**Screenshot**

<img width="1674" height="813" alt="image"
src="https://github.com/user-attachments/assets/8d12df13-2310-464b-936c-1b4e2215c7aa"
/>
This commit is contained in:
DevCats
2026-04-29 08:17:26 -05:00
committed by GitHub
parent 1856864472
commit 88c469c7a5
2 changed files with 25 additions and 12 deletions
@@ -30,17 +30,30 @@ export const CreateTemplateGalleryPageView: FC<
<Margins className="pb-12">
<PageHeader
actions={
<Button asChild size="sm" variant="outline">
<a
href="https://registry.coder.com/templates"
target="_blank"
rel="noopener noreferrer"
className="flex items-center"
>
Browse other Templates on the Coder Registry
<ExternalLinkIcon className="size-icon-sm ml-1" />
</a>
</Button>
<div className="flex flex-col items-end gap-2">
<Button asChild size="sm" variant="outline">
<a
href="https://registry.coder.com/templates"
target="_blank"
rel="noopener noreferrer"
className="flex items-center"
>
Browse other Templates on the Coder Registry
<ExternalLinkIcon className="size-icon-sm ml-1" />
</a>
</Button>
<Button asChild size="sm" variant="outline">
<a
href="https://registry.coder.com/skills/coder-templates"
target="_blank"
rel="noopener noreferrer"
className="flex items-center"
>
Use our template agent skill
<ExternalLinkIcon className="size-icon-sm ml-1" />
</a>
</Button>
</div>
}
>
<PageHeaderTitle>Create a Template</PageHeaderTitle>
@@ -65,7 +65,7 @@ const TemplateFilesPage: FC = () => {
<div className="flex items-center gap-2 mt-4">
<Button asChild size="sm" variant="default">
<a
href="https://github.com/coder/registry/blob/main/.agents/skills/coder-templates/SKILL.md"
href="https://registry.coder.com/skills/coder-templates"
target="_blank"
rel="noopener noreferrer"
className="flex items-center"