Files
davila7--claude-code-templates/dashboard/src/pages/index.astro
T
wehub-resource-sync bb5c75ce05
Component Security Validation / Security Audit (push) Has been cancelled
Deploy to Cloudflare Pages / deploy (push) Has been cancelled
chore: import upstream snapshot with attribution
2026-07-13 12:38:58 +08:00

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>