71 lines
4.3 KiB
Plaintext
71 lines
4.3 KiB
Plaintext
---
|
|
import DashboardLayout from '../layouts/DashboardLayout.astro';
|
|
import TopBar from '../components/TopBar.astro';
|
|
import FeaturedSection from '../components/FeaturedSection.astro';
|
|
import JobsPreview from '../components/JobsPreview.tsx';
|
|
import ComponentGrid from '../components/ComponentGrid.tsx';
|
|
import SearchModal from '../components/SearchModal.tsx';
|
|
import CartSidebar from '../components/CartSidebar.tsx';
|
|
|
|
export const prerender = true;
|
|
---
|
|
|
|
<DashboardLayout
|
|
title="Claude Code Templates: 1000+ Agents, Commands, Skills & MCP Integrations"
|
|
description="Browse and install 1000+ pre-built components for Claude Code. AI agents, slash commands, MCP integrations, hooks, and settings. Free, open-source CLI tool."
|
|
>
|
|
<script type="application/ld+json" set:html={JSON.stringify({
|
|
"@context": "https://schema.org",
|
|
"@type": "SoftwareApplication",
|
|
"name": "Claude Code Templates",
|
|
"description": "CLI tool and marketplace for managing Claude Code components. Over 1,000 pre-built agents, commands, skills, settings, hooks, and MCP integrations.",
|
|
"url": "https://www.aitmpl.com/",
|
|
"applicationCategory": "DeveloperApplication",
|
|
"operatingSystem": "Windows, macOS, Linux",
|
|
"downloadUrl": "https://www.npmjs.com/package/claude-code-templates",
|
|
"installUrl": "https://www.npmjs.com/package/claude-code-templates",
|
|
"author": { "@id": "https://www.aitmpl.com/#organization" },
|
|
"offers": { "@type": "Offer", "price": "0", "priceCurrency": "USD" },
|
|
"softwareRequirements": "Node.js 18+, Claude Code CLI",
|
|
"license": "https://opensource.org/licenses/MIT"
|
|
})} />
|
|
<TopBar />
|
|
|
|
<!-- Two-column layout: main content + jobs sidebar -->
|
|
<div class="flex min-h-0">
|
|
<!-- Left: main content -->
|
|
<div class="flex-1 min-w-0">
|
|
<!-- ASCII hero banner -->
|
|
<div class="px-6 pt-5 pb-1">
|
|
<div class="hidden md:flex items-center justify-center gap-4 overflow-hidden">
|
|
<pre class="ascii-art shrink-0">
|
|
█████╗ ██╗ ████████╗███████╗███╗ ███╗██████╗ ██╗ █████╗ ████████╗███████╗███████╗
|
|
██╔══██╗██║ ╚══██╔══╝██╔════╝████╗ ████║██╔══██╗██║ ██╔══██╗╚══██╔══╝██╔════╝██╔════╝
|
|
███████║██║ ██║ █████╗ ██╔████╔██║██████╔╝██║ ███████║ ██║ █████╗ ███████╗
|
|
██╔══██║██║ ██║ ██╔══╝ ██║╚██╔╝██║██╔═══╝ ██║ ██╔══██║ ██║ ██╔══╝ ╚════██║
|
|
██║ ██║██║ ██║ ███████╗██║ ╚═╝ ██║██║ ███████╗██║ ██║ ██║ ███████╗███████║
|
|
╚═╝ ╚═╝╚═╝ ╚═╝ ╚══════╝╚═╝ ╚═╝╚═╝ ╚══════╝╚═╝ ╚═╝ ╚═╝ ╚══════╝╚══════╝</pre>
|
|
<picture>
|
|
<source srcset="/claude-code-logo.webp" type="image/webp" />
|
|
<img src="/claude-code-logo.png" alt="Claude Code" class="w-20 h-20 shrink-0 object-contain" fetchpriority="high" />
|
|
</picture>
|
|
</div>
|
|
<div class="flex items-center justify-center gap-2 mt-2 mb-1">
|
|
<span class="status-dot"></span>
|
|
<span class="font-ui-mono text-[12px] text-[var(--color-text-secondary)]">Ready-to-use configurations for your Claude Code projects</span>
|
|
</div>
|
|
</div>
|
|
|
|
<FeaturedSection />
|
|
<ComponentGrid client:load initialType="skills" />
|
|
</div>
|
|
|
|
<!-- Right: jobs sidebar (sticky, scrolls independently) -->
|
|
<aside class="hidden xl:flex flex-col w-[260px] shrink-0 border-l border-[var(--color-border)] sticky top-14 h-[calc(100vh-3.5rem)] overflow-y-auto bg-[var(--color-surface-0)]">
|
|
<JobsPreview client:idle variant="sidebar" />
|
|
</aside>
|
|
</div>
|
|
<SearchModal client:idle />
|
|
<CartSidebar client:idle />
|
|
</DashboardLayout>
|