mirror of
https://github.com/Jeffallan/claude-skills.git
synced 2026-09-14 18:43:38 +08:00
Jeff Smolinski
2bb82611ee
Production S3 file storage for Django: STORAGES dict (4.2+), custom public/private backends, presigned URLs, CloudFront, IAM, and testing with moto/InMemoryStorage. Squash-merged locally to resolve count and changelog conflicts with today's main; counts recomputed via update-docs.py (67 skills, 371 references). Co-authored-by: Awais Qureshi <awais.qureshi@arbisoft.com> Co-Authored-By: Claude Fable 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01E6LA4sndtVGyvoXqwYeHoB
317 lines
9.7 KiB
HTML
317 lines
9.7 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Claude Skills - Social Preview</title>
|
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
|
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap" rel="stylesheet">
|
|
<style>
|
|
* {
|
|
margin: 0;
|
|
padding: 0;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
body {
|
|
font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif;
|
|
overflow: hidden;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
height: 100vh;
|
|
background: #000;
|
|
}
|
|
|
|
.container {
|
|
width: 1280px;
|
|
height: 640px;
|
|
position: relative;
|
|
overflow: hidden;
|
|
background: linear-gradient(135deg, #7c3aed 0%, #6366f1 35%, #3b82f6 70%, #0ea5e9 100%);
|
|
}
|
|
|
|
/* Animated gradient overlay */
|
|
.gradient-overlay {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
background:
|
|
radial-gradient(circle at 20% 80%, rgba(168, 85, 247, 0.4) 0%, transparent 50%),
|
|
radial-gradient(circle at 80% 20%, rgba(59, 130, 246, 0.4) 0%, transparent 50%),
|
|
radial-gradient(circle at 40% 40%, rgba(139, 92, 246, 0.3) 0%, transparent 40%);
|
|
animation: pulse 8s ease-in-out infinite;
|
|
}
|
|
|
|
@keyframes pulse {
|
|
0%, 100% { opacity: 0.8; }
|
|
50% { opacity: 1; }
|
|
}
|
|
|
|
/* Grid pattern overlay */
|
|
.grid-overlay {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
background-image:
|
|
linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px),
|
|
linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
|
|
background-size: 40px 40px;
|
|
opacity: 0.5;
|
|
}
|
|
|
|
/* Content container */
|
|
.content {
|
|
position: relative;
|
|
z-index: 10;
|
|
height: 100%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
padding: 80px 100px;
|
|
}
|
|
|
|
/* Logo/Icon */
|
|
.icon {
|
|
width: 80px;
|
|
height: 80px;
|
|
background: rgba(255, 255, 255, 0.15);
|
|
backdrop-filter: blur(10px);
|
|
border-radius: 20px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-size: 48px;
|
|
margin-bottom: 40px;
|
|
border: 2px solid rgba(255, 255, 255, 0.2);
|
|
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
|
|
}
|
|
|
|
/* Title row */
|
|
.title-row {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
margin-bottom: 24px;
|
|
}
|
|
|
|
/* Title */
|
|
.title {
|
|
font-size: 92px;
|
|
font-weight: 900;
|
|
color: #ffffff;
|
|
line-height: 1;
|
|
margin-bottom: 0;
|
|
letter-spacing: -0.03em;
|
|
text-shadow: 0 2px 40px rgba(0, 0, 0, 0.3);
|
|
}
|
|
|
|
/* Trendshift badge in title row */
|
|
.trendshift-title-badge {
|
|
height: 72px;
|
|
filter: drop-shadow(0 4px 16px rgba(0, 0, 0, 0.3));
|
|
border-radius: 8px;
|
|
}
|
|
|
|
/* Awesome badge in stats row */
|
|
.awesome-badge-stat {
|
|
height: 36px;
|
|
filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.2));
|
|
}
|
|
|
|
/* Subtitle */
|
|
.subtitle {
|
|
font-size: 36px;
|
|
font-weight: 700;
|
|
color: rgba(255, 255, 255, 0.95);
|
|
margin-bottom: 20px;
|
|
letter-spacing: -0.02em;
|
|
}
|
|
|
|
/* Tagline */
|
|
.tagline {
|
|
font-size: 28px;
|
|
font-weight: 500;
|
|
color: rgba(255, 255, 255, 0.85);
|
|
margin-bottom: 48px;
|
|
letter-spacing: -0.01em;
|
|
}
|
|
|
|
/* Bottom tagline - centered and lower */
|
|
.bottom-tagline {
|
|
position: absolute;
|
|
bottom: 40px;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
z-index: 20;
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
/* Stats container */
|
|
.stats {
|
|
display: flex;
|
|
gap: 32px;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.stat {
|
|
background: rgba(255, 255, 255, 0.15);
|
|
backdrop-filter: blur(10px);
|
|
padding: 16px 28px;
|
|
border-radius: 12px;
|
|
border: 1px solid rgba(255, 255, 255, 0.2);
|
|
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
|
|
}
|
|
|
|
.stat-content {
|
|
font-size: 22px;
|
|
font-weight: 600;
|
|
color: #ffffff;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
}
|
|
|
|
.stat-icon {
|
|
font-size: 24px;
|
|
filter: brightness(1.2);
|
|
}
|
|
|
|
/* Decorative elements */
|
|
.glow {
|
|
position: absolute;
|
|
width: 600px;
|
|
height: 600px;
|
|
border-radius: 50%;
|
|
filter: blur(80px);
|
|
opacity: 0.4;
|
|
pointer-events: none;
|
|
}
|
|
|
|
.glow-1 {
|
|
top: -200px;
|
|
right: -200px;
|
|
background: rgba(168, 85, 247, 0.6);
|
|
}
|
|
|
|
.glow-2 {
|
|
bottom: -200px;
|
|
left: -200px;
|
|
background: rgba(59, 130, 246, 0.6);
|
|
}
|
|
|
|
/* Version badge */
|
|
.version-badge {
|
|
position: absolute;
|
|
top: 50px;
|
|
right: 80px;
|
|
background: rgba(255, 255, 255, 0.2);
|
|
backdrop-filter: blur(10px);
|
|
padding: 12px 24px;
|
|
border-radius: 30px;
|
|
border: 1px solid rgba(255, 255, 255, 0.3);
|
|
font-size: 18px;
|
|
font-weight: 700;
|
|
color: #ffffff;
|
|
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
|
|
}
|
|
|
|
/* Bottom accent */
|
|
.bottom-accent {
|
|
position: absolute;
|
|
bottom: 0;
|
|
left: 0;
|
|
right: 0;
|
|
height: 8px;
|
|
background: linear-gradient(90deg,
|
|
rgba(168, 85, 247, 0.8) 0%,
|
|
rgba(139, 92, 246, 0.8) 25%,
|
|
rgba(99, 102, 241, 0.8) 50%,
|
|
rgba(59, 130, 246, 0.8) 75%,
|
|
rgba(14, 165, 233, 0.8) 100%
|
|
);
|
|
box-shadow: 0 -2px 20px rgba(139, 92, 246, 0.5);
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="container">
|
|
<!-- Background effects -->
|
|
<div class="glow glow-1"></div>
|
|
<div class="glow glow-2"></div>
|
|
<div class="gradient-overlay"></div>
|
|
<div class="grid-overlay"></div>
|
|
|
|
<!-- Version badge -->
|
|
<!-- <div class="version-badge">v0.2.0</div> -->
|
|
|
|
<!-- Main content -->
|
|
<div class="content">
|
|
<!-- Icon -->
|
|
<!-- <div class="icon">⚡</div> -->
|
|
|
|
<!-- Title row with badge -->
|
|
<div class="title-row">
|
|
<h1 class="title">Claude Skills</h1>
|
|
<img src="https://trendshift.io/api/badge/repositories/20667" class="trendshift-title-badge" alt="Trendshift"/>
|
|
</div>
|
|
|
|
<!-- Subtitle -->
|
|
<h2 class="subtitle"><!-- SKILL_COUNT -->67<!-- /SKILL_COUNT --> Specialized Skills and <!-- WORKFLOW_COUNT -->9<!-- /WORKFLOW_COUNT --> workflows for Full-Stack Developers</h2>
|
|
|
|
<!-- Tagline -->
|
|
<p class="tagline">Transform Claude Code into your expert pair programmer</p>
|
|
<!-- Stats -->
|
|
<div class="stats">
|
|
<div class="stat">
|
|
<div class="stat-content">
|
|
<span class="stat-icon">🚀</span>
|
|
<span><!-- WORKFLOW_COUNT -->9<!-- /WORKFLOW_COUNT --> Workflows</span>
|
|
</div>
|
|
</div>
|
|
<div class="stat">
|
|
<div class="stat-content">
|
|
<span class="stat-icon">📚</span>
|
|
<span><!-- REFERENCE_COUNT -->371<!-- /REFERENCE_COUNT --> Reference Files</span>
|
|
</div>
|
|
</div>
|
|
<div class="stat">
|
|
<div class="stat-content">
|
|
<span class="stat-icon">🎯</span>
|
|
<span>30+ Frameworks</span>
|
|
</div>
|
|
</div>
|
|
<div class="stat">
|
|
<div class="stat-content">
|
|
<span class="stat-icon">🧠</span>
|
|
<span>Context Engineering</span>
|
|
</div>
|
|
</div>
|
|
<div class="stat">
|
|
<div class="stat-content">
|
|
<span class="stat-icon">📋</span>
|
|
<span>Project Management</span>
|
|
</div>
|
|
</div>
|
|
<div class="stat">
|
|
<div class="stat-content">
|
|
<img src="https://awesome.re/mentioned-badge.svg" class="awesome-badge-stat" alt="Mentioned in Awesome Claude Code"/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Centered tagline at bottom -->
|
|
<p class="tagline bottom-tagline">Built with ❤️ for Full-Stack Devs</p>
|
|
|
|
<!-- Bottom accent -->
|
|
<div class="bottom-accent"></div>
|
|
</div>
|
|
</body>
|
|
</html>
|