diff --git a/docs/index.md b/docs/index.md index 317b564..1cd16a3 100644 --- a/docs/index.md +++ b/docs/index.md @@ -5,165 +5,178 @@ hide: - toc --- + +
# Claude Code Skills -

169 production-ready skills that transform AI coding agents into specialized professionals.

+169 production-ready skills that transform AI coding agents into specialized professionals. +{ .hero-subtitle } -
- Claude Code - OpenAI Codex - OpenClaw -
+**Claude Code** | **OpenAI Codex** | **OpenClaw** +{ .hero-platforms } -
- Get Started - GitHub -
+[Get Started](getting-started.md){ .md-button .md-button--primary } +[GitHub :fontawesome-brands-github:](https://github.com/alirezarezvani/claude-skills){ .md-button }
-
-
-
169
-
Skills
-
-
-
160+
-
Python Tools
-
-
-
9
-
Domains
-
-
-
0
-
Dependencies
-
+
+ +- :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 +
-
+--- ## Skills by Domain -
+
- - ⚙ -

Engineering — Core

- 23 skills -

Architecture, frontend, backend, fullstack, QA, DevOps, SecOps, AI/ML, data engineering, Playwright testing, self-improving agent

- +- :material-cog:{ .lg .middle } **Engineering — Core** - - ⚡ -

Engineering — POWERFUL

- 25 skills -

Agent designer, RAG architect, database designer, CI/CD builder, MCP server builder, security auditor, tech debt tracker

- + --- - - ◎ -

Product

- 8 skills -

Product manager, agile PO, strategist, UX researcher, UI design system, landing pages, SaaS scaffolder

- + Architecture, frontend, backend, fullstack, QA, DevOps, SecOps, AI/ML, data engineering, Playwright testing, self-improving agent - - ☰ -

Marketing

- 42 skills -

Content, SEO, CRO, channels, growth, intelligence, sales — 7 specialist pods with 27 Python tools

- + [:octicons-arrow-right-24: 23 skills](skills/engineering-team/) - - ☐ -

Project Management

- 6 skills -

Senior PM, scrum master, Jira expert, Confluence expert, Atlassian admin, templates

- +- :material-lightning-bolt:{ .lg .middle } **Engineering — POWERFUL** - - ★ -

C-Level Advisory

- 28 skills -

Full C-suite (10 roles), orchestration, board meetings, culture frameworks, strategic alignment

- + --- - - ♻ -

Regulatory & Quality

- 12 skills -

ISO 13485, MDR 2017/745, FDA, ISO 27001, GDPR, CAPA, risk management, quality documentation

- + Agent designer, RAG architect, database designer, CI/CD builder, MCP server builder, security auditor, tech debt tracker - - ↑ -

Business & Growth

- 4 skills -

Customer success, sales engineer, revenue operations, contracts & proposals

- + [:octicons-arrow-right-24: 25 skills](skills/engineering/) - - $ -

Finance

- 1 skill -

Financial analyst — DCF valuation, budgeting, forecasting, ratio analysis

- +- :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/)
-
+--- ## Why Skills? - +
-
+- :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. + +
+ +--- ## Quick Install @@ -175,7 +188,5 @@ hide: /plugin install engineering-skills@claude-code-skills ``` -
- Full Install Guide - View on GitHub -
+[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 } diff --git a/docs/stylesheets/extra.css b/docs/stylesheets/extra.css index 5325782..4406ac4 100644 --- a/docs/stylesheets/extra.css +++ b/docs/stylesheets/extra.css @@ -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; -}