<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="The ultimate resource for Claude Code and Claude Cowork. Quick solutions for lazy humans, structured data for agentic AI.">
<meta name="keywords" content="claude, ai, code, best practices, snippets, templates">
<title>Claude Code and Claude Cowork Resource Hub</title>
<!-- Preconnect to improve performance -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<!-- CSS -->
<link rel="stylesheet" href="./css/main.css">
<!-- Open Graph -->
<meta property="og:title" content="Claude Resource Hub">
<meta property="og:description" content="The ultimate resource for Claude Code and Claude Cowork. Quick solutions for lazy humans, structured data for agentic AI.">
<meta property="og:type" content="website">
<meta property="og:url" content="https://theclaude.fr/">
<!-- Canonical URL -->
<link rel="canonical" href="https://monclaude.fr/">
</head>
<body>
<!-- Skip to main content link for accessibility -->
<a href="#main-content" class="skip-link">Skip to main content</a>
<header role="banner" class="site-header">
<nav role="navigation" aria-label="Main navigation">
<a href="/" class="logo">Claude Resource Hub</a>
<ul class="nav-links">
<li><a href="/best-practices/">Best Practices</a></li>
<li><a href="/snippets/">Code Snippets</a></li>
<li><a href="/templates/">Templates</a></li>
</ul>
</nav>
</header>
<main id="main-content" role="main">
<section class="hero">
<h1>Claude Resource Hub</h1>
<p class="hero-subtitle">The ultimate resource for Claude Code and Claude Cowork. Quick solutions for lazy humans, structured data for agentic AI.</p>
</section>
<search role="search" class="search-container">
<form action="/search" method="get" class="search-form">
<label for="search-input" class="visually-hidden">Search resources</label>
<input
type="search"
id="search-input"
name="q"
placeholder="Search best practices, snippets, templates..."
autocomplete="off"
aria-label="Search resources"
/>
<button type="submit" aria-label="Submit search">Search</button>
</form>
<div class="search-filters">
<fieldset>
<legend>Filter by type</legend>
<label><input type="checkbox" name="type" value="best-practice"> Best Practices</label>
<label><input type="checkbox" name="type" value="snippet"> Code Snippets</label>
<label><input type="checkbox" name="type" value="template"> Templates</label>
</fieldset>
<fieldset>
<legend>Filter by style</legend>
<label><input type="radio" name="style" value="all" checked> All</label>
<label><input type="radio" name="style" value="vibe"> Vibe Code</label>
<label><input type="radio" name="style" value="vanilla"> Vanilla Code</label>
</fieldset>
</div>
<div id="search-results" role="region" aria-live="polite" aria-atomic="true"></div>
</search>
<section class="featured-resources">
<h2>Popular Resources</h2>
<div class="resource-grid">
<article class="resource-card">
<h3><a href="/snippets/javascript/api-client">API Client with Error Handling</a></h3>
<p>Quick API client setup with built-in error handling and retry logic.</p>
<div class="card-meta">
<span class="language">JavaScript</span>
<span class="style-tag style-vibe">Vibe Code</span>
</div>
</article>
<article class="resource-card">
<h3><a href="/best-practices/claude-code/effective-prompting">Effective Prompting for Claude Code</a></h3>
<p>Learn how to write clear, effective prompts that help Claude Code understand your requirements.</p>
<div class="card-meta">
<span class="category">Claude Code</span>
</div>
</article>
</div>
</section>
<section class="categories">
<h2>Browse by Category</h2>
<nav aria-label="Resource categories" class="category-nav">
<a href="/best-practices/" class="category-card">
<h3>Best Practices</h3>
<p>Comprehensive guides for Claude Code and Cowork</p>
</a>
<a href="/snippets/" class="category-card">
<h3>Code Snippets</h3>
<p>Ready-to-use code examples in multiple languages</p>
</a>
<a href="/templates/" class="category-card">
<h3>Templates</h3>
<p>Project structures and configuration files</p>
</a>
</nav>
</section>
</main>
<footer role="contentinfo" class="site-footer">
<p>© 2025 Claude Resource Hub. Built for humans and AI agents.</p>
<nav aria-label="Footer navigation">
<a href="/about">About</a>
<!-- <a href="https://github.com/yourusername/claude-resource-hub">GitHub</a> //-->
</nav>
</footer>
<!-- Progressive enhancement JavaScript -->
<script src="./js/main.js" defer></script>
</body>
</html>
