firefrost-gaming/claude-skills-reference
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge pull request #280 from alirezarezvani/dev

Browse Source 
fix: redesign docs homepage with Material grid cards
This commit is contained in:
Alireza Rezvani
2026-03-06 13:19:45 +01:00
committed by GitHub
parent 45c3b7f522 697ecd37c4
commit 93cbf06abf
2 changed files with 210 additions and 482 deletions
Download Patch File Download Diff File Expand all files Collapse all files

277
docs/index.md
View File

@@ -5,165 +5,178 @@ hide:
- toc
---
<style>
.md-content__inner > .md-typeset > h1:first-child { display: none; }
</style>
<div class="hero" markdown>
# Claude Code Skills
<p>169 production-ready skills that transform AI coding agents into specialized professionals.</p>
169 production-ready skills that transform AI coding agents into specialized professionals.
{ .hero-subtitle }
<div class="hero-badges">
<span class="badge">Claude Code</span>
<span class="badge">OpenAI Codex</span>
<span class="badge">OpenClaw</span>
</div>
**Claude Code** | **OpenAI Codex** | **OpenClaw**
{ .hero-platforms }
<div class="cta-group">
<a href="getting-started/" class="cta-primary">Get Started</a>
<a href="https://github.com/alirezarezvani/claude-skills" class="cta-secondary">GitHub</a>
</div>
[Get Started](getting-started.md){ .md-button .md-button--primary }
[GitHub :fontawesome-brands-github:](https://github.com/alirezarezvani/claude-skills){ .md-button }
</div>
<div class="stats-row" markdown>
<div class="stat">
<div class="number">169</div>
<div class="label">Skills</div>
</div>
<div class="stat">
<div class="number">160+</div>
<div class="label">Python Tools</div>
</div>
<div class="stat">
<div class="number">9</div>
<div class="label">Domains</div>
</div>
<div class="stat">
<div class="number">0</div>
<div class="label">Dependencies</div>
</div>
<div class="grid cards" markdown>
- :material-counter:{ .lg .middle } **169**
---
Production-ready skills
- :material-language-python:{ .lg .middle } **160+**
---
Python CLI tools (stdlib-only)
- :material-domain:{ .lg .middle } **9**
---
Professional domains
- :material-package-variant:{ .lg .middle } **0**
---
External dependencies
</div>
<hr class="section-divider">
---
## Skills by Domain
<div class="domain-grid" markdown>
<div class="grid cards" markdown>
<a class="domain-card" href="skills/engineering-team/">
<span class="card-icon">&#9881;</span>
<h3>Engineering — Core</h3>
<span class="card-count">23 skills</span>
<p>Architecture, frontend, backend, fullstack, QA, DevOps, SecOps, AI/ML, data engineering, Playwright testing, self-improving agent</p>
</a>
- :material-cog:{ .lg .middle } **Engineering — Core**
<a class="domain-card" href="skills/engineering/">
<span class="card-icon">&#9889;</span>
<h3>Engineering — POWERFUL</h3>
<span class="card-count">25 skills</span>
<p>Agent designer, RAG architect, database designer, CI/CD builder, MCP server builder, security auditor, tech debt tracker</p>
</a>
---
<a class="domain-card" href="skills/product-team/">
<span class="card-icon">&#9678;</span>
<h3>Product</h3>
<span class="card-count">8 skills</span>
<p>Product manager, agile PO, strategist, UX researcher, UI design system, landing pages, SaaS scaffolder</p>
</a>
Architecture, frontend, backend, fullstack, QA, DevOps, SecOps, AI/ML, data engineering, Playwright testing, self-improving agent
<a class="domain-card" href="skills/marketing-skill/">
<span class="card-icon">&#9776;</span>
<h3>Marketing</h3>
<span class="card-count">42 skills</span>
<p>Content, SEO, CRO, channels, growth, intelligence, sales — 7 specialist pods with 27 Python tools</p>
</a>
[:octicons-arrow-right-24: 23 skills](skills/engineering-team/)
<a class="domain-card" href="skills/project-management/">
<span class="card-icon">&#9744;</span>
<h3>Project Management</h3>
<span class="card-count">6 skills</span>
<p>Senior PM, scrum master, Jira expert, Confluence expert, Atlassian admin, templates</p>
</a>
- :material-lightning-bolt:{ .lg .middle } **Engineering — POWERFUL**
<a class="domain-card" href="skills/c-level-advisor/">
<span class="card-icon">&#9733;</span>
<h3>C-Level Advisory</h3>
<span class="card-count">28 skills</span>
<p>Full C-suite (10 roles), orchestration, board meetings, culture frameworks, strategic alignment</p>
</a>
---
<a class="domain-card" href="skills/ra-qm-team/">
<span class="card-icon">&#9851;</span>
<h3>Regulatory & Quality</h3>
<span class="card-count">12 skills</span>
<p>ISO 13485, MDR 2017/745, FDA, ISO 27001, GDPR, CAPA, risk management, quality documentation</p>
</a>
Agent designer, RAG architect, database designer, CI/CD builder, MCP server builder, security auditor, tech debt tracker
<a class="domain-card" href="skills/business-growth/">
<span class="card-icon">&#8593;</span>
<h3>Business & Growth</h3>
<span class="card-count">4 skills</span>
<p>Customer success, sales engineer, revenue operations, contracts & proposals</p>
</a>
[:octicons-arrow-right-24: 25 skills](skills/engineering/)
<a class="domain-card" href="skills/finance/">
<span class="card-icon">&#36;</span>
<h3>Finance</h3>
<span class="card-count">1 skill</span>
<p>Financial analyst — DCF valuation, budgeting, forecasting, ratio analysis</p>
</a>
- :material-bullseye-arrow:{ .lg .middle } **Product**
---
Product manager, agile PO, strategist, UX researcher, UI design system, landing pages, SaaS scaffolder
[:octicons-arrow-right-24: 8 skills](skills/product-team/)
- :material-bullhorn:{ .lg .middle } **Marketing**
---
Content, SEO, CRO, channels, growth, intelligence, sales — 7 specialist pods with 27 Python tools
[:octicons-arrow-right-24: 42 skills](skills/marketing-skill/)
- :material-clipboard-check:{ .lg .middle } **Project Management**
---
Senior PM, scrum master, Jira expert, Confluence expert, Atlassian admin, templates
[:octicons-arrow-right-24: 6 skills](skills/project-management/)
- :material-star-circle:{ .lg .middle } **C-Level Advisory**
---
Full C-suite (10 roles), orchestration, board meetings, culture frameworks, strategic alignment
[:octicons-arrow-right-24: 28 skills](skills/c-level-advisor/)
- :material-shield-check:{ .lg .middle } **Regulatory & Quality**
---
ISO 13485, MDR 2017/745, FDA, ISO 27001, GDPR, CAPA, risk management, quality documentation
[:octicons-arrow-right-24: 12 skills](skills/ra-qm-team/)
- :material-trending-up:{ .lg .middle } **Business & Growth**
---
Customer success, sales engineer, revenue operations, contracts & proposals
[:octicons-arrow-right-24: 4 skills](skills/business-growth/)
- :material-currency-usd:{ .lg .middle } **Finance**
---
Financial analyst — DCF valuation, budgeting, forecasting, ratio analysis
[:octicons-arrow-right-24: 1 skill](skills/finance/)
</div>
<hr class="section-divider">
---
## Why Skills?
<ul class="feature-list" markdown>
<li>
<span class="icon">&#8987;</span>
<div>
<strong>Zero setup</strong>
<span class="desc">All Python tools use stdlib only. No pip installs, no API keys, no configuration files.</span>
</div>
</li>
<li>
<span class="icon">&#128274;</span>
<div>
<strong>Security first</strong>
<span class="desc">Built-in security auditor scans any skill for malicious code before you install it.</span>
</div>
</li>
<li>
<span class="icon">&#128640;</span>
<div>
<strong>One-command install</strong>
<span class="desc">Plugin marketplace lets you install entire skill bundles with a single slash command.</span>
</div>
</li>
<li>
<span class="icon">&#128257;</span>
<div>
<strong>Self-contained</strong>
<span class="desc">Each skill is independent. No cross-dependencies, no conflicts, works in isolation.</span>
</div>
</li>
<li>
<span class="icon">&#128736;</span>
<div>
<strong>Multi-platform</strong>
<span class="desc">Works natively with Claude Code, OpenAI Codex, and OpenClaw — same skills, any agent.</span>
</div>
</li>
<li>
<span class="icon">&#128200;</span>
<div>
<strong>Production-grade</strong>
<span class="desc">Battle-tested workflows, not generic advice. Each skill saves 40%+ time on domain tasks.</span>
</div>
</li>
</ul>
<div class="grid cards" markdown>
<hr class="section-divider">
- :material-clock-fast:{ .lg .middle } **Zero setup**
---
All Python tools use stdlib only. No pip installs, no API keys, no configuration files.
- :material-shield-lock:{ .lg .middle } **Security first**
---
Built-in security auditor scans any skill for malicious code before you install it.
- :material-rocket-launch:{ .lg .middle } **One-command install**
---
Plugin marketplace lets you install entire skill bundles with a single slash command.
- :material-puzzle:{ .lg .middle } **Self-contained**
---
Each skill is independent. No cross-dependencies, no conflicts, works in isolation.
- :material-devices:{ .lg .middle } **Multi-platform**
---
Works natively with Claude Code, OpenAI Codex, and OpenClaw — same skills, any agent.
- :material-check-decagram:{ .lg .middle } **Production-grade**
---
Battle-tested workflows, not generic advice. Each skill saves 40%+ time on domain tasks.
</div>
---
## Quick Install
@@ -175,7 +188,5 @@ hide:
/plugin install engineering-skills@claude-code-skills
```
<div class="cta-group" style="margin-top: 1.5rem;">
<a href="getting-started/" class="cta-primary">Full Install Guide</a>
<a href="https://github.com/alirezarezvani/claude-skills" class="cta-secondary">View on GitHub</a>
</div>
[Full Install Guide](getting-started.md){ .md-button .md-button--primary }
[View on GitHub :fontawesome-brands-github:](https://github.com/alirezarezvani/claude-skills){ .md-button }

415
docs/stylesheets/extra.css
View File

@@ -1,29 +1,71 @@
/* ============================================
Claude Code Skills — Custom Theme
Modern, minimal dark-first design
Minimal overrides on Material's native grid
============================================ */
/* --- CSS Custom Properties --- */
:root {
--cs-accent: #a78bfa;
--cs-accent-dim: #7c3aed;
--cs-surface: #1e1b2e;
--cs-surface-hover: #2a2740;
--cs-border: rgba(167, 139, 250, 0.15);
--cs-glow: rgba(167, 139, 250, 0.08);
--cs-text-muted: rgba(255, 255, 255, 0.5);
--cs-radius: 12px;
--cs-radius-sm: 8px;
/* --- Hero Section --- */
.hero {
text-align: center;
padding: 2.5rem 1rem 1rem;
max-width: 640px;
margin: 0 auto;
}
[data-md-color-scheme="default"] {
--cs-accent: #7c3aed;
--cs-accent-dim: #6d28d9;
--cs-surface: #f8f7fc;
--cs-surface-hover: #ede9fe;
--cs-border: rgba(124, 58, 237, 0.12);
--cs-glow: rgba(124, 58, 237, 0.04);
--cs-text-muted: rgba(0, 0, 0, 0.5);
.hero h1 {
font-size: 2.4rem !important;
font-weight: 800 !important;
letter-spacing: -0.03em;
line-height: 1.15;
margin-bottom: 0.75rem !important;
background: linear-gradient(135deg, #a78bfa 0%, #e879f9 50%, #f59e0b 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
[data-md-color-scheme="default"] .hero h1 {
background: linear-gradient(135deg, #7c3aed 0%, #c026d3 50%, #d97706 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.hero-subtitle {
font-size: 1.1rem;
opacity: 0.65;
max-width: 480px;
margin: 0 auto 1rem;
}
.hero-platforms {
font-size: 0.85rem;
opacity: 0.5;
margin-bottom: 1.5rem;
}
.hero .md-button {
margin: 0.25rem;
}
/* --- Tighter grid card spacing --- */
.md-typeset .grid.cards > ul > li,
.md-typeset .grid.cards > ol > li,
.md-typeset .grid > .card {
border-radius: 10px;
}
/* --- Section dividers --- */
.md-typeset hr {
border-color: var(--md-default-fg-color--lightest);
}
/* --- Code block polish --- */
.md-typeset code {
border-radius: 6px;
}
.md-typeset pre {
border-radius: 8px;
}
/* --- Typography --- */
@@ -32,343 +74,18 @@
line-height: 1.7;
}
.md-typeset h1 {
font-weight: 700;
letter-spacing: -0.02em;
margin-bottom: 1rem;
}
.md-typeset h2 {
font-weight: 600;
letter-spacing: -0.01em;
margin-top: 2.5rem;
}
/* --- Hero Section --- */
.hero {
text-align: center;
padding: 3rem 1rem 2rem;
max-width: 720px;
margin: 0 auto;
}
.hero h1 {
font-size: 2.4rem;
font-weight: 800;
letter-spacing: -0.03em;
line-height: 1.15;
margin-bottom: 1rem;
background: linear-gradient(135deg, var(--cs-accent) 0%, #e879f9 50%, #f59e0b 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.hero p {
font-size: 1.15rem;
color: var(--cs-text-muted);
max-width: 560px;
margin: 0 auto 2rem;
line-height: 1.6;
}
.hero-badges {
display: flex;
gap: 0.5rem;
justify-content: center;
flex-wrap: wrap;
margin-bottom: 2rem;
}
.hero-badges .badge {
display: inline-flex;
align-items: center;
gap: 0.35rem;
padding: 0.35rem 0.8rem;
border-radius: 100px;
font-size: 0.75rem;
font-weight: 600;
background: var(--cs-surface);
border: 1px solid var(--cs-border);
color: var(--cs-accent);
}
/* --- CTA Buttons --- */
.cta-group {
display: flex;
gap: 0.75rem;
justify-content: center;
flex-wrap: wrap;
margin: 2rem 0;
}
.cta-group a {
display: inline-flex;
align-items: center;
gap: 0.4rem;
padding: 0.7rem 1.6rem;
border-radius: 100px;
font-size: 0.85rem;
font-weight: 600;
text-decoration: none;
transition: all 0.2s ease;
}
.cta-primary {
background: var(--cs-accent);
color: #fff !important;
}
.cta-primary:hover {
background: var(--cs-accent-dim);
transform: translateY(-1px);
box-shadow: 0 4px 20px rgba(167, 139, 250, 0.3);
}
.cta-secondary {
background: transparent;
color: var(--cs-accent) !important;
border: 1px solid var(--cs-border);
}
.cta-secondary:hover {
background: var(--cs-glow);
border-color: var(--cs-accent);
}
/* --- Domain Cards Grid --- */
.domain-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: 1rem;
margin: 2rem 0;
}
.domain-card {
background: var(--cs-surface);
border: 1px solid var(--cs-border);
border-radius: var(--cs-radius);
padding: 1.5rem;
transition: all 0.2s ease;
text-decoration: none !important;
color: inherit !important;
display: block;
}
.domain-card:hover {
border-color: var(--cs-accent);
background: var(--cs-surface-hover);
transform: translateY(-2px);
box-shadow: 0 8px 30px var(--cs-glow);
}
.domain-card .card-icon {
font-size: 1.6rem;
margin-bottom: 0.75rem;
display: block;
}
.domain-card h3 {
font-size: 1rem;
font-weight: 700;
margin: 0 0 0.4rem;
letter-spacing: -0.01em;
}
.domain-card .card-count {
font-size: 0.7rem;
font-weight: 600;
color: var(--cs-accent);
text-transform: uppercase;
letter-spacing: 0.05em;
margin-bottom: 0.5rem;
}
.domain-card p {
font-size: 0.8rem;
color: var(--cs-text-muted);
margin: 0;
line-height: 1.5;
}
/* --- Stats Row --- */
.stats-row {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
gap: 1rem;
margin: 2.5rem 0;
text-align: center;
}
.stat {
padding: 1.25rem 0.5rem;
border-radius: var(--cs-radius);
background: var(--cs-surface);
border: 1px solid var(--cs-border);
}
.stat .number {
font-size: 1.8rem;
font-weight: 800;
color: var(--cs-accent);
letter-spacing: -0.02em;
line-height: 1;
margin-bottom: 0.3rem;
}
.stat .label {
font-size: 0.7rem;
color: var(--cs-text-muted);
text-transform: uppercase;
letter-spacing: 0.06em;
font-weight: 600;
}
/* --- Feature List --- */
.feature-list {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
gap: 1.25rem;
margin: 2rem 0;
list-style: none;
padding: 0;
}
.feature-list li {
display: flex;
gap: 0.75rem;
align-items: flex-start;
padding: 1rem 1.25rem;
border-radius: var(--cs-radius-sm);
background: var(--cs-surface);
border: 1px solid var(--cs-border);
}
.feature-list .icon {
font-size: 1.2rem;
flex-shrink: 0;
margin-top: 0.1rem;
}
.feature-list strong {
display: block;
font-size: 0.85rem;
margin-bottom: 0.15rem;
}
.feature-list .desc {
font-size: 0.78rem;
color: var(--cs-text-muted);
line-height: 1.5;
}
/* --- Install Steps --- */
.install-steps {
counter-reset: step;
list-style: none;
padding: 0;
margin: 2rem 0;
}
.install-steps li {
counter-increment: step;
position: relative;
padding: 1.25rem 1.25rem 1.25rem 3.5rem;
margin-bottom: 0.75rem;
background: var(--cs-surface);
border: 1px solid var(--cs-border);
border-radius: var(--cs-radius-sm);
}
.install-steps li::before {
content: counter(step);
position: absolute;
left: 1.1rem;
top: 1.2rem;
width: 1.6rem;
height: 1.6rem;
border-radius: 50%;
background: var(--cs-accent);
color: #fff;
font-size: 0.75rem;
font-weight: 700;
display: flex;
align-items: center;
justify-content: center;
}
/* --- Section Divider --- */
.section-divider {
border: none;
height: 1px;
background: var(--cs-border);
margin: 3rem 0;
}
/* --- Code Blocks --- */
.md-typeset code {
border-radius: 6px;
}
.md-typeset pre {
border-radius: var(--cs-radius-sm);
border: 1px solid var(--cs-border);
}
/* --- Navigation polish --- */
.md-tabs {
border-bottom: 1px solid var(--cs-border);
}
.md-nav__link--active {
font-weight: 600;
}
/* --- Footer --- */
.md-footer {
border-top: 1px solid var(--cs-border);
}
/* --- Responsive --- */
/* --- Mobile --- */
@media (max-width: 768px) {
.hero h1 {
font-size: 1.8rem;
font-size: 1.8rem !important;
}
.hero p {
font-size: 1rem;
}
.domain-grid {
grid-template-columns: 1fr;
}
.stats-row {
grid-template-columns: repeat(2, 1fr);
.hero-subtitle {
font-size: 0.95rem;
}
}
/* --- Hide the default h1 on index page --- */
.md-content [data-md-component="content"] > .md-typeset > h1:first-child {
display: none;
}
/* --- Admonition styling --- */
.md-typeset .admonition {
border-radius: var(--cs-radius-sm);
border: 1px solid var(--cs-border);
}
/* --- Smooth transitions --- */
* {
transition-property: background-color, border-color, color, box-shadow, transform;
transition-duration: 0.15s;
transition-timing-function: ease;
}
/* Exclude transitions that cause layout shifts */
.md-typeset pre,
.md-typeset code,
.md-content img {
transition: none;
}