style: modern minimalistic design with dark-first theme

- Dark mode as default with smooth light mode toggle - Inter + JetBrains Mono fonts for clean typography - Custom CSS: gradient hero, domain card grid, stat counters, feature list - Landing page redesigned with cards, CTAs, and visual hierarchy - Getting started: tabbed install (Material tabs), numbered steps, collapsible FAQ - MkDocs Material features: sticky tabs, instant navigation, progress bar, breadcrumbs, code annotations, emoji support, mermaid diagrams - All Material reference extensions enabled (keys, mark, caret, tilde, etc.) Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
2026-03-06 12:47:56 +01:00
parent 2c72babd52
commit 52e8fe1764
5 changed files with 727 additions and 182 deletions
--- a/docs/getting-started.md
+++ b/docs/getting-started.md
@@ -1,5 +1,5 @@
 ---
-title: Getting Started with Claude Code Skills
+title: Getting Started
 description: "How to install and use Claude Code skills and plugins for Claude Code, OpenAI Codex, and OpenClaw."
 ---

@@ -7,82 +7,105 @@ description: "How to install and use Claude Code skills and plugins for Claude C

 ## Installation

-### Claude Code (Recommended)
+Choose your platform and follow the steps:

-```bash
-# Step 1: Add the marketplace
-/plugin marketplace add alirezarezvani/claude-skills
+=== "Claude Code"

-# Step 2: Install the skills you need
-/plugin install engineering-skills@claude-code-skills
+    <ol class="install-steps">
+      <li>
+        <strong>Add the marketplace</strong>
+        <pre><code>/plugin marketplace add alirezarezvani/claude-skills</code></pre>
+      </li>
+      <li>
+        <strong>Install the skills you need</strong>
+        <pre><code>/plugin install engineering-skills@claude-code-skills</code></pre>
+      </li>
+      <li>
+        <strong>Use them immediately</strong> — skills activate as slash commands or contextual expertise.
+      </li>
+    </ol>
+
+=== "OpenAI Codex"
+
+    ```bash
+    npx agent-skills-cli add alirezarezvani/claude-skills --agent codex
+    ```
+
+    Or clone and install manually:
+
+    ```bash
+    git clone https://github.com/alirezarezvani/claude-skills.git
+    ./scripts/codex-install.sh
+    ```
+
+=== "OpenClaw"
+
+    ```bash
+    bash <(curl -s https://raw.githubusercontent.com/alirezarezvani/claude-skills/main/scripts/openclaw-install.sh)
+    ```
+
+=== "Manual"
+
+    ```bash
+    git clone https://github.com/alirezarezvani/claude-skills.git
+    # Copy any skill folder to ~/.claude/skills/
+    ```
+
+<hr class="section-divider">
+
+## Available Bundles
+
+| Bundle | Install Command | Skills |
+|--------|----------------|--------|
+| **Engineering Core** | `/plugin install engineering-skills@claude-code-skills` | 23 |
+| **Engineering POWERFUL** | `/plugin install engineering-advanced-skills@claude-code-skills` | 25 |
+| **Product** | `/plugin install product-skills@claude-code-skills` | 8 |
+| **Marketing** | `/plugin install marketing-skills@claude-code-skills` | 42 |
+| **Regulatory & Quality** | `/plugin install ra-qm-skills@claude-code-skills` | 12 |
+| **Project Management** | `/plugin install pm-skills@claude-code-skills` | 6 |
+| **C-Level Advisory** | `/plugin install c-level-skills@claude-code-skills` | 28 |
+| **Business & Growth** | `/plugin install business-growth-skills@claude-code-skills` | 4 |
+| **Finance** | `/plugin install finance-skills@claude-code-skills` | 1 |
+
+Or install individual skills: `/plugin install skill-name@claude-code-skills`
+
+<hr class="section-divider">
+
+## Usage
+
+### Slash Commands
+
+```
+/pw:generate     Generate Playwright tests
+/pw:fix          Fix flaky test failures
+/si:review       Review auto-memory health
+/si:promote      Graduate a learning to CLAUDE.md
+/cs:board        Trigger a C-suite board meeting
 ```

-### OpenAI Codex
+### Contextual Prompts

-```bash
-npx agent-skills-cli add alirezarezvani/claude-skills --agent codex
-# Or: git clone + ./scripts/codex-install.sh
+```
+Using the senior-architect skill, review our microservices
+architecture and identify the top 3 scalability risks.
 ```

-### OpenClaw
-
-```bash
-bash <(curl -s https://raw.githubusercontent.com/alirezarezvani/claude-skills/main/scripts/openclaw-install.sh)
+```
+Using the content-creator skill, write a blog post about
+AI-augmented development. Optimize for SEO.
 ```

-### Manual Installation
-
-```bash
-git clone https://github.com/alirezarezvani/claude-skills.git
-# Copy any skill folder to ~/.claude/skills/ (Claude Code) or ~/.codex/skills/ (Codex)
-```
-
---
-
-## Available Skill Bundles
-
-| Bundle | Command | Skills |
-|--------|---------|--------|
-| Engineering Core | `/plugin install engineering-skills@claude-code-skills` | 23 |
-| Engineering POWERFUL | `/plugin install engineering-advanced-skills@claude-code-skills` | 25 |
-| Product | `/plugin install product-skills@claude-code-skills` | 8 |
-| Marketing | `/plugin install marketing-skills@claude-code-skills` | 42 |
-| Regulatory & Quality | `/plugin install ra-qm-skills@claude-code-skills` | 12 |
-| Project Management | `/plugin install pm-skills@claude-code-skills` | 6 |
-| C-Level Advisory | `/plugin install c-level-skills@claude-code-skills` | 28 |
-| Business & Growth | `/plugin install business-growth-skills@claude-code-skills` | 4 |
-| Finance | `/plugin install finance-skills@claude-code-skills` | 1 |
-
---
-
-## Using Skills
-
-Once installed, skills are available as slash commands or contextual expertise:
-
-### Slash Command Example
-```
-/pw:generate   # Generate Playwright tests
-/si:review     # Review auto-memory health
-/cs:board      # Trigger a C-suite board meeting
-```
-
-### Contextual Example
-```
-Using the senior-architect skill, review our microservices architecture
-and identify the top 3 scalability risks.
-```
-
---
+<hr class="section-divider">

 ## Python Tools

-All 160+ Python tools use the standard library only (zero pip installs). Run them directly:
+All 160+ tools use the standard library only — zero pip installs.

 ```bash
-# Security audit
+# Security audit a skill before installing
 python3 engineering/skill-security-auditor/scripts/skill_security_auditor.py /path/to/skill/

-# Brand voice analysis
+# Analyze brand voice
 python3 marketing-skill/content-creator/scripts/brand_voice_analyzer.py article.txt

 # RICE prioritization
@@ -92,40 +115,48 @@ python3 product-team/product-manager-toolkit/scripts/rice_prioritizer.py feature
 python3 c-level-advisor/cto-advisor/scripts/tech_debt_analyzer.py /path/to/codebase
 ```

---
+<hr class="section-divider">

 ## Security

-Before installing third-party skills, audit them:
+!!! warning "Always audit untrusted skills"

-```bash
-python3 engineering/skill-security-auditor/scripts/skill_security_auditor.py /path/to/skill/
+    Before installing skills from third-party sources, run the security auditor:
+
+    ```bash
+    python3 engineering/skill-security-auditor/scripts/skill_security_auditor.py /path/to/skill/
+    ```
+
+    Returns **PASS** / **WARN** / **FAIL** with remediation guidance. Scans for command injection, data exfiltration, prompt injection, and supply chain risks.
+
+<hr class="section-divider">
+
+## Creating Your Own
+
+Each skill is a folder:
+
+```
+my-skill/
+  SKILL.md       # Instructions + workflows
+  scripts/       # Python CLI tools (optional)
+  references/    # Domain knowledge (optional)
+  assets/        # Templates (optional)
 ```

-Returns **PASS / WARN / FAIL** with remediation guidance. Scans for command injection, data exfiltration, prompt injection, and more.
+See the [Skills & Agents Factory](https://github.com/alirezarezvani/claude-code-skills-agents-factory) for a complete guide.

---
-
-## Creating Your Own Skills
-
-Each skill is a folder with:
-
- `SKILL.md` — frontmatter + instructions + workflows
- `scripts/` — Python CLI tools (optional)
- `references/` — domain knowledge (optional)
- `assets/` — templates (optional)
-
-See the [Skills & Agents Factory](https://github.com/alirezarezvani/claude-code-skills-agents-factory) for a step-by-step guide.
-
---
+<hr class="section-divider">

 ## FAQ

-**Do I need API keys?**
-No. Skills work locally with no external API calls. Python tools use stdlib only.
+??? question "Do I need API keys?"
+    No. Skills work locally with no external API calls. All Python tools use stdlib only.

-**Can I install individual skills?**
-Yes. Use `/plugin install skill-name@claude-code-skills` for any single skill.
+??? question "Can I install individual skills instead of bundles?"
+    Yes. Use `/plugin install skill-name@claude-code-skills` for any single skill.

-**Do skills conflict with each other?**
-No. Each skill is self-contained with no cross-dependencies.
+??? question "Do skills conflict with each other?"
+    No. Each skill is self-contained with no cross-dependencies.
+
+??? question "How do I update installed skills?"
+    Re-run the install command. The plugin system fetches the latest version from the marketplace.
--- a/docs/index.md
+++ b/docs/index.md
@@ -1,15 +1,169 @@
 ---
-title: Claude Code Skills & Plugins - Documentation
+title: Claude Code Skills & Plugins
 description: "169 production-ready skills and plugins for Claude Code, OpenAI Codex, and OpenClaw. Reusable expertise bundles for engineering, product, marketing, compliance, and more."
+hide:
+  - toc
 ---

-# Claude Code Skills & Plugins
+<div class="hero" markdown>

-**169 production-ready skills** that transform AI coding agents into specialized professionals across engineering, product, marketing, compliance, and more.
+# Claude Code Skills

-Works natively with **Claude Code**, **OpenAI Codex**, and **OpenClaw**.
+<p>169 production-ready skills that transform AI coding agents into specialized professionals.</p>

---
+<div class="hero-badges">
+  <span class="badge">Claude Code</span>
+  <span class="badge">OpenAI Codex</span>
+  <span class="badge">OpenClaw</span>
+</div>
+
+<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>
+
+</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>
+
+<hr class="section-divider">
+
+## Skills by Domain
+
+<div class="domain-grid" 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>
+
+<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>
+
+<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>
+
+<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>
+
+<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>
+
+<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>
+
+<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>
+
+</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>
+
+<hr class="section-divider">

 ## Quick Install

@@ -17,71 +171,11 @@ Works natively with **Claude Code**, **OpenAI Codex**, and **OpenClaw**.
 # Add the marketplace
 /plugin marketplace add alirezarezvani/claude-skills

-# Install by domain
-/plugin install engineering-skills@claude-code-skills          # 23 core engineering
-/plugin install engineering-advanced-skills@claude-code-skills  # 25 POWERFUL-tier
-/plugin install product-skills@claude-code-skills               # 8 product skills
-/plugin install marketing-skills@claude-code-skills             # 42 marketing skills
-/plugin install ra-qm-skills@claude-code-skills                 # 12 regulatory/quality
-/plugin install pm-skills@claude-code-skills                    # 6 project management
-/plugin install c-level-skills@claude-code-skills               # 28 C-level advisory
-/plugin install business-growth-skills@claude-code-skills       # 4 business & growth
-/plugin install finance-skills@claude-code-skills               # 1 finance
+# Install any skill bundle
+/plugin install engineering-skills@claude-code-skills
 ```

---
-
-## Skills by Domain
-
-| Domain | Skills | Highlights |
-|--------|--------|------------|
-| [**Engineering - Core**](skills/engineering-team/) | 23 | Architecture, frontend, backend, fullstack, QA, DevOps, SecOps, AI/ML, data, Playwright, self-improving agent |
-| [**Engineering - POWERFUL**](skills/engineering/) | 25 | Agent designer, RAG architect, database designer, CI/CD builder, security auditor, MCP builder |
-| [**Product**](skills/product-team/) | 8 | Product manager, agile PO, strategist, UX researcher, UI design, landing pages, SaaS scaffolder |
-| [**Marketing**](skills/marketing-skill/) | 42 | Content, SEO, CRO, Channels, Growth, Intelligence, Sales pods with 27 Python tools |
-| [**Project Management**](skills/project-management/) | 6 | Senior PM, scrum master, Jira, Confluence, Atlassian admin |
-| [**C-Level Advisory**](skills/c-level-advisor/) | 28 | Full C-suite (10 roles) + orchestration + board meetings + culture |
-| [**Regulatory & Quality**](skills/ra-qm-team/) | 12 | ISO 13485, MDR 2017/745, FDA, ISO 27001, GDPR, CAPA, risk management |
-| [**Business & Growth**](skills/business-growth/) | 4 | Customer success, sales engineer, revenue ops, contracts & proposals |
-| [**Finance**](skills/finance/) | 1 | Financial analyst (DCF, budgeting, forecasting) |
-
---
-
-## Key Features
-
- **160+ Python CLI tools** — all stdlib-only, zero pip installs required
- **250+ reference guides** — embedded domain expertise
- **Plugin marketplace** — one-command install for any skill bundle
- **Multi-platform** — Claude Code, OpenAI Codex, OpenClaw
- **Security auditor** — scan skills for malicious code before installation
- **Self-improving agent** — auto-memory curation and pattern promotion
-
---
-
-## How Skills Work
-
-Each skill is a self-contained package:
-
-```
-skill-name/
-  SKILL.md       # Instructions + workflows
-  scripts/       # Python CLI tools
-  references/    # Expert knowledge bases
-  assets/        # Templates
-```
-
-Knowledge flows from `references/` into `SKILL.md` workflows, executed via `scripts/`, applied using `assets/` templates.
-
---
-
-## Links
-
- [GitHub Repository](https://github.com/alirezarezvani/claude-skills)
- [Getting Started](getting-started.md)
- [Contributing](https://github.com/alirezarezvani/claude-skills/blob/main/CONTRIBUTING.md)
- [Skills & Agents Factory](https://github.com/alirezarezvani/claude-code-skills-agents-factory) — methodology for building skills at scale
- [Claude Code Tresor](https://github.com/alirezarezvani/claude-code-tresor) — productivity toolkit with 60+ prompt templates
-
---
-
-**Built by [Alireza Rezvani](https://alirezarezvani.com)** | [Medium](https://alirezarezvani.medium.com) | [Twitter](https://twitter.com/nginitycloud)
+<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>
--- a/docs/overrides/.gitkeep
+++ b/docs/overrides/.gitkeep
--- a/docs/stylesheets/extra.css
+++ b/docs/stylesheets/extra.css
@@ -0,0 +1,374 @@
+/* ============================================
+   Claude Code Skills — Custom Theme
+   Modern, minimal dark-first design
+   ============================================ */
+
+/* --- 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;
+}
+
+[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);
+}
+
+/* --- Typography --- */
+.md-typeset {
+  font-size: 0.82rem;
+  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 --- */
+@media (max-width: 768px) {
+  .hero h1 {
+    font-size: 1.8rem;
+  }
+
+  .hero p {
+    font-size: 1rem;
+  }
+
+  .domain-grid {
+    grid-template-columns: 1fr;
+  }
+
+  .stats-row {
+    grid-template-columns: repeat(2, 1fr);
+  }
+}
+
+/* --- 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;
+}
--- a/mkdocs.yml
+++ b/mkdocs.yml
@@ -5,68 +5,114 @@ site_author: Alireza Rezvani
 repo_url: https://github.com/alirezarezvani/claude-skills
 repo_name: alirezarezvani/claude-skills
 edit_uri: edit/main/
+copyright: "Built by Alireza Rezvani"

 theme:
  name: material
+  custom_dir: docs/overrides
  palette:
-    - scheme: default
+    - media: "(prefers-color-scheme)"
+      scheme: slate
      primary: deep purple
-      accent: amber
-      toggle:
-        icon: material/brightness-7
-        name: Switch to dark mode
-    - scheme: slate
-      primary: deep purple
-      accent: amber
+      accent: deep purple
      toggle:
        icon: material/brightness-4
        name: Switch to light mode
+    - media: "(prefers-color-scheme: light)"
+      scheme: default
+      primary: deep purple
+      accent: deep purple
+      toggle:
+        icon: material/brightness-7
+        name: Switch to dark mode
+  font:
+    text: Inter
+    code: JetBrains Mono
  features:
    - navigation.instant
+    - navigation.instant.progress
    - navigation.tracking
    - navigation.tabs
+    - navigation.tabs.sticky
    - navigation.sections
    - navigation.expand
+    - navigation.path
    - navigation.top
+    - navigation.indexes
    - search.suggest
    - search.highlight
+    - search.share
    - content.code.copy
+    - content.code.annotate
    - content.action.edit
+    - content.tabs.link
+    - header.autohide
+    - toc.follow
+    - announce.dismiss
  icon:
    repo: fontawesome/brands/github
+    annotation: material/chevron-right-circle

 plugins:
-  - search
+  - search:
+      separator: '[\s\-\.]+'
  - tags

 extra:
  social:
    - icon: fontawesome/brands/github
      link: https://github.com/alirezarezvani/claude-skills
-    - icon: fontawesome/brands/twitter
+      name: GitHub
+    - icon: fontawesome/brands/x-twitter
      link: https://twitter.com/nginitycloud
+      name: Twitter
    - icon: fontawesome/brands/medium
      link: https://alirezarezvani.medium.com
-  analytics:
-    provider: google
-    property: G-XXXXXXXXXX
+      name: Medium
+  generator: false
+
+extra_css:
+  - stylesheets/extra.css

 markdown_extensions:
+  - abbr
  - admonition
-  - pymdownx.details
-  - pymdownx.superfences
-  - pymdownx.highlight:
-      anchor_linenums: true
-  - pymdownx.inlinehilite
-  - pymdownx.tabbed:
-      alternate_style: true
-  - pymdownx.tasklist:
-      custom_checkbox: true
+  - attr_list
+  - def_list
+  - footnotes
+  - md_in_html
+  - tables
  - toc:
      permalink: true
-  - tables
-  - attr_list
-  - md_in_html
+      permalink_title: Link to this section
+  - pymdownx.arithmatex:
+      generic: true
+  - pymdownx.betterem:
+      smart_enable: all
+  - pymdownx.caret
+  - pymdownx.details
+  - pymdownx.emoji:
+      emoji_index: !!python/name:material.extensions.emoji.twemoji
+      emoji_generator: !!python/name:material.extensions.emoji.to_svg
+  - pymdownx.highlight:
+      anchor_linenums: true
+      line_spans: __span
+      pygments_lang_class: true
+  - pymdownx.inlinehilite
+  - pymdownx.keys
+  - pymdownx.mark
+  - pymdownx.smartsymbols
+  - pymdownx.superfences:
+      custom_fences:
+        - name: mermaid
+          class: mermaid
+          format: !!python/name:pymdownx.superfences.fence_code_format
+  - pymdownx.tabbed:
+      alternate_style: true
+      combine_header_slug: true
+  - pymdownx.tasklist:
+      custom_checkbox: true
+  - pymdownx.tilde

 nav:
  - Home: index.md