diff --git a/README.md b/README.md index 1ae6de5..bde18ba 100644 --- a/README.md +++ b/README.md @@ -2,12 +2,12 @@ **173 production-ready skills and plugins for Claude Code, OpenAI Codex, Gemini CLI, and OpenClaw** — reusable expertise bundles that transform AI coding agents into specialized professionals across engineering, product, marketing, compliance, and more. -[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT) -[![Skills](https://img.shields.io/badge/Skills-173-brightgreen.svg)](#skills-overview) -[![Agents](https://img.shields.io/badge/Agents-15-blue.svg)](#agents) -[![Commands](https://img.shields.io/badge/Commands-15-orange.svg)](#commands) -[![Stars](https://img.shields.io/github/stars/alirezarezvani/claude-skills?style=flat)](https://github.com/alirezarezvani/claude-skills/stargazers) -[![SkillCheck Validated](https://img.shields.io/badge/SkillCheck-Validated-4c1)](https://getskillcheck.com) +[![License: MIT](https://img.shields.io/badge/License-MIT-yellow?style=for-the-badge)](https://opensource.org/licenses/MIT) +[![Skills](https://img.shields.io/badge/Skills-173-brightgreen?style=for-the-badge)](#skills-overview) +[![Agents](https://img.shields.io/badge/Agents-15-blue?style=for-the-badge)](#agents) +[![Commands](https://img.shields.io/badge/Commands-15-orange?style=for-the-badge)](#commands) +[![Stars](https://img.shields.io/github/stars/alirezarezvani/claude-skills?style=for-the-badge)](https://github.com/alirezarezvani/claude-skills/stargazers) +[![SkillCheck Validated](https://img.shields.io/badge/SkillCheck-Validated-4c1?style=for-the-badge)](https://getskillcheck.com) > ⭐ **2,500+ GitHub stars** — the most comprehensive open-source skill library for AI coding agents. diff --git a/docs/overrides/404.html b/docs/overrides/404.html new file mode 100644 index 0000000..b9f9bd4 --- /dev/null +++ b/docs/overrides/404.html @@ -0,0 +1,19 @@ +{% extends "main.html" %} + +{% block content %} +
+

404

+

+ Page not found +

+

+ The page you're looking for doesn't exist or has been moved. +

+ + Back to Home + + + Browse Skills + +
+{% endblock %} diff --git a/docs/overrides/main.html b/docs/overrides/main.html index af94de2..452d690 100644 --- a/docs/overrides/main.html +++ b/docs/overrides/main.html @@ -9,4 +9,55 @@ gtag('js', new Date()); gtag('config', 'G-VHRY2VKY9K'); + +{% if page and page.meta %} + + + + + + + + + + + + +{% endif %} + + + + {% endblock %} diff --git a/docs/overrides/partials/announce.html b/docs/overrides/partials/announce.html new file mode 100644 index 0000000..b67089e --- /dev/null +++ b/docs/overrides/partials/announce.html @@ -0,0 +1,3 @@ + + v2.1.2 — 173 skills across 9 domains. Landing page generator now outputs Next.js TSX + Tailwind CSS! + diff --git a/docs/skills/index.md b/docs/skills/index.md new file mode 100644 index 0000000..9bca0a8 --- /dev/null +++ b/docs/skills/index.md @@ -0,0 +1,438 @@ +--- +title: "Skills Overview" +description: "Browse all 173 production-ready skills across 9 domains — engineering, product, marketing, C-level advisory, project management, regulatory, business growth, and finance." +hide: + - edit +--- + +
+ +# Skills Library + +Browse 173 production-ready skills across 9 domains. +{ .skills-hero-sub } + +
+ +
+ +- :material-counter:{ .lg .middle } **173 Skills** + + --- + + Across 9 professional domains + +- :material-language-python:{ .lg .middle } **250 Tools** + + --- + + Python CLI tools, all stdlib-only + +- :material-package-variant-closed:{ .lg .middle } **19 Plugins** + + --- + + Install bundles or individual skills + +- :material-devices:{ .lg .middle } **4 Platforms** + + --- + + Claude Code, Codex, Gemini, OpenClaw + +
+ +## Quick Install + +=== "Claude Code" + + ```bash + # Add the marketplace + /plugin marketplace add alirezarezvani/claude-skills + + # Install any skill bundle + /plugin install engineering-skills@claude-code-skills + /plugin install marketing-skills@claude-code-skills + /plugin install c-level-skills@claude-code-skills + ``` + +=== "Gemini CLI" + + ```bash + git clone https://github.com/alirezarezvani/claude-skills.git + cd claude-skills && python3 scripts/sync-gemini-skills.py + ``` + +=== "OpenAI Codex" + + ```bash + git clone https://github.com/alirezarezvani/claude-skills.git + cd claude-skills && python3 scripts/sync-codex-skills.py + ``` + +=== "OpenClaw" + + ```bash + git clone https://github.com/alirezarezvani/claude-skills.git + cd claude-skills && bash scripts/openclaw-install.sh + ``` + +[Full Install Guide :octicons-arrow-right-24:](../getting-started.md){ .md-button .md-button--primary } +[GitHub :fontawesome-brands-github:](https://github.com/alirezarezvani/claude-skills){ .md-button } + +--- + +## Architecture + +Every skill follows the same self-contained package pattern — no cross-dependencies, no external APIs, no setup required: + +```mermaid +graph LR + A["SKILL.md
Instructions + Workflows"] --> D["Agent uses skill"] + B["scripts/
Python CLI tools"] --> D + C["references/
Expert knowledge"] --> D + E["assets/
Templates + configs"] --> D + D --> F["Specialized output"] + + style A fill:#7c3aed,color:#fff,stroke:none + style B fill:#c026d3,color:#fff,stroke:none + style C fill:#d97706,color:#fff,stroke:none + style E fill:#059669,color:#fff,stroke:none + style D fill:#2563eb,color:#fff,stroke:none + style F fill:#475569,color:#fff,stroke:none +``` + +--- + +## Domains at a Glance + +
+ +- :material-cog:{ .lg .middle } **Engineering — Core** 24 + + --- + + Full-stack engineering team: architecture, frontend, backend, DevOps, security, AI/ML, data, QA, plus Playwright testing, self-improving agent, Google Workspace CLI, and Stripe integration. + + **30+ Python tools** | 3 sub-skill trees + + [:octicons-arrow-right-24: Browse skills](engineering-team/){ .md-button .md-button--primary } + +- :material-lightning-bolt:{ .lg .middle } **Engineering — POWERFUL** 25 + + --- + + Advanced engineering capabilities: agent designer, RAG architect, MCP server builder, CI/CD pipelines, database design, observability, security auditing, release management. + + **Platform-level tools** for building infrastructure + + [:octicons-arrow-right-24: Browse skills](engineering/){ .md-button .md-button--primary } + +- :material-bullhorn:{ .lg .middle } **Marketing** 43 + + --- + + Complete marketing division across 7 specialist pods — content, SEO, CRO, channels, growth hacking, intelligence, and sales enablement. Plus X/Twitter growth tools. + + **32 Python tools** | Foundation context system + + [:octicons-arrow-right-24: Browse skills](marketing-skill/){ .md-button .md-button--primary } + +- :material-star-circle:{ .lg .middle } **C-Level Advisory** 28 + + --- + + Virtual board of directors: CEO, CTO, COO, CPO, CMO, CFO, CRO, CISO, CHRO. Board meeting orchestration, decision logger, scenario war room, M&A playbook, culture frameworks. + + **10 executive roles** | Strategic alignment engine + + [:octicons-arrow-right-24: Browse skills](c-level-advisor/){ .md-button .md-button--primary } + +- :material-bullseye-arrow:{ .lg .middle } **Product** 8 + + --- + + Product manager toolkit (RICE scoring, PRDs), agile product owner, strategist, UX researcher, UI design system, competitive teardown, landing page generator, SaaS scaffolder. + + **9 Python tools** | Next.js TSX + Tailwind output + + [:octicons-arrow-right-24: Browse skills](product-team/){ .md-button .md-button--primary } + +- :material-clipboard-check:{ .lg .middle } **Project Management** 6 + + --- + + Senior PM, scrum master, Jira expert, Confluence expert, Atlassian admin, and template creator. Live MCP integration for Jira/Confluence automation. + + **12 Python tools** | Atlassian MCP integration + + [:octicons-arrow-right-24: Browse skills](project-management/){ .md-button .md-button--primary } + +- :material-shield-check:{ .lg .middle } **Regulatory & Quality** 12 + + --- + + HealthTech/MedTech compliance: ISO 13485 QMS, MDR 2017/745, FDA 510(k)/PMA, ISO 27001 ISMS, GDPR/DSGVO, CAPA management, risk management (ISO 14971), clinical evaluation. + + **Enterprise compliance** | Audit-ready documentation + + [:octicons-arrow-right-24: Browse skills](ra-qm-team/){ .md-button .md-button--primary } + +- :material-trending-up:{ .lg .middle } **Business & Growth** 4 + + --- + + Customer success manager with health scoring and churn prediction, sales engineer with RFP analysis, revenue operations with pipeline metrics, contract & proposal writer. + + **9 Python tools** | GTM strategy support + + [:octicons-arrow-right-24: Browse skills](business-growth/){ .md-button .md-button--primary } + +- :material-currency-usd:{ .lg .middle } **Finance** 2 + + --- + + Financial analyst (ratio analysis, DCF valuation, budgeting, forecasting) and SaaS metrics coach (ARR, MRR, churn, CAC, LTV, NRR, Quick Ratio, projections). + + **7 Python tools** | Industry benchmarks built-in + + [:octicons-arrow-right-24: Browse skills](finance/){ .md-button .md-button--primary } + +
+ +--- + +## Skills by Category + +=== ":material-cog: Engineering" + + **49 skills** across Core and POWERFUL tiers. + + ??? note "Core Engineering (24 skills)" + + | Skill | Focus | + |-------|-------| + | [Senior Architect](engineering-team/senior-architect.md) | System design, trade-offs, ADRs | + | [Senior Frontend](engineering-team/senior-frontend.md) | React, Next.js, performance | + | [Senior Backend](engineering-team/senior-backend.md) | Node.js, APIs, databases | + | [Senior Fullstack](engineering-team/senior-fullstack.md) | End-to-end development | + | [Senior QA](engineering-team/senior-qa.md) | Test strategy, automation | + | [Senior DevOps](engineering-team/senior-devops.md) | CI/CD, infrastructure | + | [Senior SecOps](engineering-team/senior-secops.md) | Security operations | + | [Senior Security](engineering-team/senior-security.md) | AppSec, vulnerability assessment | + | [Senior ML Engineer](engineering-team/senior-ml-engineer.md) | Model deployment, MLOps | + | [Senior Data Scientist](engineering-team/senior-data-scientist.md) | Statistics, experiments | + | [Senior Data Engineer](engineering-team/senior-data-engineer.md) | Pipelines, ETL, data quality | + | [Senior Prompt Engineer](engineering-team/senior-prompt-engineer.md) | Prompt optimization, RAG | + | [Senior Computer Vision](engineering-team/senior-computer-vision.md) | Object detection, segmentation | + | [Code Reviewer](engineering-team/code-reviewer.md) | Code quality analysis | + | [AWS Solution Architect](engineering-team/aws-solution-architect.md) | Serverless, IaC, cost optimization | + | [MS365 Tenant Manager](engineering-team/ms365-tenant-manager.md) | Microsoft 365 administration | + | [Google Workspace CLI](engineering-team/google-workspace-cli.md) | Gmail, Drive, Sheets via gws CLI | + | [Stripe Integration](engineering-team/stripe-integration-expert.md) | Payments, subscriptions | + | [TDD Guide](engineering-team/tdd-guide.md) | Test-driven development | + | [Tech Stack Evaluator](engineering-team/tech-stack-evaluator.md) | Technology selection | + | [Playwright Pro](engineering-team/playwright-pro.md) | E2E testing (9 sub-skills) | + | [Self-Improving Agent](engineering-team/self-improving-agent.md) | Memory curation (5 sub-skills) | + | [Email Template Builder](engineering-team/email-template-builder.md) | HTML email templates | + | [Incident Commander](engineering-team/incident-commander.md) | Incident response | + + ??? note "POWERFUL Engineering (25 skills)" + + | Skill | Focus | + |-------|-------| + | [Agent Designer](engineering/agent-designer.md) | Multi-agent system architecture | + | [Agent Workflow Designer](engineering/agent-workflow-designer.md) | Agent orchestration patterns | + | [RAG Architect](engineering/rag-architect.md) | Retrieval-augmented generation | + | [MCP Server Builder](engineering/mcp-server-builder.md) | Model Context Protocol servers | + | [Database Designer](engineering/database-designer.md) | Schema design, optimization | + | [Database Schema Designer](engineering/database-schema-designer.md) | ERD, migrations | + | [CI/CD Pipeline Builder](engineering/ci-cd-pipeline-builder.md) | GitHub Actions, GitLab CI | + | [Migration Architect](engineering/migration-architect.md) | System migration planning | + | [Observability Designer](engineering/observability-designer.md) | Monitoring, tracing, alerting | + | [Performance Profiler](engineering/performance-profiler.md) | Bottleneck analysis | + | [Skill Security Auditor](engineering/skill-security-auditor.md) | Vulnerability scanning | + | [Release Manager](engineering/release-manager.md) | Release orchestration | + | [Dependency Auditor](engineering/dependency-auditor.md) | Supply chain security | + | [API Design Reviewer](engineering/api-design-reviewer.md) | REST/GraphQL review | + | [API Test Suite Builder](engineering/api-test-suite-builder.md) | API test generation | + | [PR Review Expert](engineering/pr-review-expert.md) | Pull request analysis | + | [Tech Debt Tracker](engineering/tech-debt-tracker.md) | Debt scoring, prioritization | + | [Changelog Generator](engineering/changelog-generator.md) | Keep a Changelog format | + | [Codebase Onboarding](engineering/codebase-onboarding.md) | New developer guides | + | [Runbook Generator](engineering/runbook-generator.md) | Operations documentation | + | [Git Worktree Manager](engineering/git-worktree-manager.md) | Parallel development | + | [Monorepo Navigator](engineering/monorepo-navigator.md) | Monorepo workflows | + | [Env & Secrets Manager](engineering/env-secrets-manager.md) | Configuration management | + | [Interview System Designer](engineering/interview-system-designer.md) | Technical interviews | + | [Skill Tester](engineering/skill-tester.md) | Skill quality validation | + +=== ":material-bullhorn: Marketing" + + **43 skills** across 7 specialist pods. + + ??? note "Content & Copy (8 skills)" + + | Skill | Focus | + |-------|-------| + | [Content Creator](marketing-skill/content-creator.md) | SEO-optimized content | + | [Copywriting](marketing-skill/copywriting.md) | Conversion copy frameworks | + | [Brand Voice Analyzer](marketing-skill/brand-voice-analyzer.md) | Voice consistency | + | [Content Repurposer](marketing-skill/content-repurposer.md) | Multi-format adaptation | + | [Content Strategy](marketing-skill/content-strategy.md) | Editorial calendars | + | [Blog Post Creator](marketing-skill/blog-post-creator.md) | Long-form content | + | [Ad Creative](marketing-skill/ad-creative.md) | Ad copy and creative | + | [Email Template Builder](marketing-skill/email-template-builder.md) | Email campaigns | + + ??? note "SEO & Analytics (7 skills)" + + | Skill | Focus | + |-------|-------| + | [SEO Audit](marketing-skill/seo-audit.md) | Technical SEO analysis | + | [AI SEO](marketing-skill/ai-seo.md) | AI-optimized search | + | [App Store Optimization](marketing-skill/app-store-optimization.md) | ASO strategy | + | [Keyword Research](marketing-skill/keyword-research.md) | Keyword analysis | + | [Analytics Tracking](marketing-skill/analytics-tracking.md) | Tag management | + | [Marketing Analytics](marketing-skill/marketing-analytics.md) | Campaign metrics | + | [A/B Test Setup](marketing-skill/ab-test-setup.md) | Experiment design | + + ??? note "Growth, Channels & More (28 skills)" + + Includes CRO, demand generation, social media, paid ads, PR, partnerships, competitive intelligence, sales enablement, X/Twitter growth, and more. [Browse all marketing skills :octicons-arrow-right-24:](marketing-skill/) + +=== ":material-star-circle: C-Level" + + **28 skills** — 10 executive roles plus orchestration and strategic tools. + + ??? note "Executive Roles (10)" + + | Role | Focus | + |------|-------| + | [CEO Advisor](c-level-advisor/ceo-advisor.md) | Vision, fundraising, product-market fit | + | [CTO Advisor](c-level-advisor/cto-advisor.md) | Architecture, tech debt, build vs buy | + | [COO Advisor](c-level-advisor/coo-advisor.md) | Operations, scaling, process | + | [CPO Advisor](c-level-advisor/cpo-advisor.md) | Product strategy, roadmaps | + | [CMO Advisor](c-level-advisor/cmo-advisor.md) | Brand, GTM, demand generation | + | [CFO Advisor](c-level-advisor/cfo-advisor.md) | Finance, burn rate, fundraising | + | [CRO Advisor](c-level-advisor/cro-advisor.md) | Revenue, sales, pipeline | + | [CISO Advisor](c-level-advisor/ciso-advisor.md) | Security, compliance, risk | + | [CHRO Advisor](c-level-advisor/chro-advisor.md) | People, culture, org design | + | [Executive Mentor](c-level-advisor/executive-mentor.md) | Coaching (5 sub-skills) | + + ??? note "Orchestration & Strategy (18)" + + Board meetings, Chief of Staff, decision logger, board deck builder, scenario war room, competitive intelligence, M&A playbook, culture architect, founder coach, and more. [Browse all C-level skills :octicons-arrow-right-24:](c-level-advisor/) + +=== ":material-bullseye-arrow: Product & PM" + + **14 skills** across Product and Project Management. + + | Skill | Domain | Focus | + |-------|--------|-------| + | [Product Manager Toolkit](product-team/product-manager-toolkit.md) | Product | RICE scoring, PRDs, roadmaps | + | [Agile Product Owner](product-team/agile-product-owner.md) | Product | Backlog, sprints, user stories | + | [Product Strategist](product-team/product-strategist.md) | Product | OKRs, market analysis | + | [UX Researcher](product-team/ux-researcher-designer.md) | Product | User research, design | + | [UI Design System](product-team/ui-design-system.md) | Product | Component libraries | + | [Competitive Teardown](product-team/competitive-teardown.md) | Product | Feature comparison | + | [Landing Page Generator](product-team/landing-page-generator.md) | Product | Next.js TSX + Tailwind | + | [SaaS Scaffolder](product-team/saas-scaffolder.md) | Product | Full SaaS boilerplate | + | [Senior PM](project-management/senior-pm.md) | PM | Portfolio management | + | [Scrum Master](project-management/scrum-master.md) | PM | Sprint facilitation | + | [Jira Expert](project-management/jira-expert.md) | PM | JQL, workflows | + | [Confluence Expert](project-management/confluence-expert.md) | PM | Documentation | + | [Atlassian Admin](project-management/atlassian-admin.md) | PM | Platform administration | + | [Template Creator](project-management/atlassian-templates.md) | PM | Reusable templates | + +=== ":material-shield-check: Compliance & Finance" + + **14 skills** for regulated industries and financial analysis. + + ??? note "Regulatory & Quality (12 skills)" + + | Skill | Standard | + |-------|----------| + | [ISO 13485 QMS](ra-qm-team/iso-13485-qms-expert.md) | Quality Management System | + | [MDR Expert](ra-qm-team/mdr-expert.md) | EU MDR 2017/745 | + | [FDA Consultant](ra-qm-team/fda-consultant-specialist.md) | 510(k), PMA submissions | + | [GDPR/DSGVO Expert](ra-qm-team/gdpr-dsgvo-expert.md) | Data protection | + | [ISO 27001 ISMS](ra-qm-team/information-security-manager-iso27001.md) | Information security | + | [ISMS Audit Expert](ra-qm-team/isms-audit-expert.md) | Security auditing | + | [CAPA Officer](ra-qm-team/capa-officer.md) | Corrective actions | + | [Risk Manager](ra-qm-team/risk-manager-iso14971.md) | ISO 14971 | + | [Clinical Evaluation](ra-qm-team/clinical-evaluation-expert.md) | CER, PMCF | + | [QMS Auditor](ra-qm-team/qms-auditor.md) | Internal audits | + | [Document Control](ra-qm-team/document-control-expert.md) | SOP management | + | [Regulatory Strategy](ra-qm-team/regulatory-strategy-expert.md) | Market access | + + ??? note "Finance (2 skills)" + + | Skill | Focus | + |-------|-------| + | [Financial Analyst](finance/financial-analyst.md) | DCF valuation, ratio analysis, budgeting, forecasting | + | [SaaS Metrics Coach](finance/saas-metrics-coach.md) | ARR, MRR, churn, CAC, LTV, NRR, Quick Ratio | + + ??? note "Business & Growth (4 skills)" + + | Skill | Focus | + |-------|-------| + | [Customer Success Manager](business-growth/customer-success-manager.md) | Health scoring, churn prediction | + | [Sales Engineer](business-growth/sales-engineer.md) | RFP analysis, demo prep | + | [Revenue Operations](business-growth/revenue-operations.md) | Pipeline metrics, GTM | + | [Contract & Proposal Writer](business-growth/contract-and-proposal-writer.md) | SOWs, proposals | + +--- + +## Python Tools Distribution + +```mermaid +pie title 250 Python Tools by Domain + "Marketing" : 32 + "Engineering Core" : 30 + "Engineering POWERFUL" : 25 + "Project Management" : 12 + "Product" : 9 + "Business & Growth" : 9 + "Finance" : 7 + "Other" : 126 +``` + +!!! tip "All tools are stdlib-only" + Every Python script uses only the standard library — zero `pip install` required. All 250 tools are verified passing `--help`. Scripts support both human-readable and `--json` output for automation. + +--- + +## How Skills Work + +
+ +- :material-numeric-1-circle:{ .lg .middle } **Install** + + --- + + Add a skill bundle or individual skill via the plugin marketplace. + + ```bash + /plugin install engineering-skills@claude-code-skills + ``` + +- :material-numeric-2-circle:{ .lg .middle } **Trigger** + + --- + + Skills activate automatically when your prompt matches their domain — or invoke directly. + +- :material-numeric-3-circle:{ .lg .middle } **Execute** + + --- + + The agent follows SKILL.md workflows, runs Python tools for analysis, and references expert knowledge bases. + +- :material-numeric-4-circle:{ .lg .middle } **Output** + + --- + + Get structured, actionable results — reports, code, configurations, strategies, or documentation. + +
+ diff --git a/docs/stylesheets/extra.css b/docs/stylesheets/extra.css index 4406ac4..c927408 100644 --- a/docs/stylesheets/extra.css +++ b/docs/stylesheets/extra.css @@ -1,9 +1,297 @@ /* ============================================ - Claude Code Skills — Custom Theme - Minimal overrides on Material's native grid + Claude Code Skills — GitHub Primer Theme + MkDocs Material custom properties override ============================================ */ -/* --- Hero Section --- */ +/* =========================================== + A. Light Mode — GitHub Primer Light + =========================================== */ +[data-md-color-scheme="default"] { + --md-primary-fg-color: #0969da; + --md-primary-fg-color--light: #218bff; + --md-primary-fg-color--dark: #0550ae; + --md-primary-bg-color: #ffffff; + --md-primary-bg-color--light: #f6f8fa; + --md-accent-fg-color: #0969da; + --md-accent-fg-color--transparent: rgba(9, 105, 218, 0.1); + + --md-default-fg-color: #1f2328; + --md-default-fg-color--light: #656d76; + --md-default-fg-color--lighter: #8b949e; + --md-default-fg-color--lightest: rgba(31, 35, 40, 0.12); + --md-default-bg-color: #ffffff; + --md-default-bg-color--light: #f6f8fa; + --md-default-bg-color--lighter: #f6f8fa; + --md-default-bg-color--lightest: #eaeef2; + + --md-code-fg-color: #1f2328; + --md-code-bg-color: #f6f8fa; + --md-code-hl-color: rgba(9, 105, 218, 0.1); + + --md-typeset-color: #1f2328; + --md-typeset-a-color: #0969da; + + --md-footer-fg-color: #f0f6fc; + --md-footer-fg-color--light: rgba(240, 246, 252, 0.7); + --md-footer-fg-color--lighter: rgba(240, 246, 252, 0.4); + --md-footer-bg-color: #24292f; + --md-footer-bg-color--dark: #1c2128; +} + +/* =========================================== + B. Dark Mode — GitHub Primer Dark + =========================================== */ +[data-md-color-scheme="slate"] { + --md-hue: 210; + --md-primary-fg-color: #1f6feb; + --md-primary-fg-color--light: #388bfd; + --md-primary-fg-color--dark: #1158c7; + --md-primary-bg-color: #0d1117; + --md-primary-bg-color--light: #161b22; + --md-accent-fg-color: #58a6ff; + --md-accent-fg-color--transparent: rgba(31, 111, 235, 0.15); + + --md-default-fg-color: #f0f6fc; + --md-default-fg-color--light: #c9d1d9; + --md-default-fg-color--lighter: #8b949e; + --md-default-fg-color--lightest: rgba(240, 246, 252, 0.1); + --md-default-bg-color: #0d1117; + --md-default-bg-color--light: #161b22; + --md-default-bg-color--lighter: #161b22; + --md-default-bg-color--lightest: #21262d; + + --md-code-fg-color: #c9d1d9; + --md-code-bg-color: #161b22; + --md-code-hl-color: rgba(31, 111, 235, 0.15); + + --md-typeset-color: #f0f6fc; + --md-typeset-a-color: #58a6ff; + + --md-footer-fg-color: #f0f6fc; + --md-footer-fg-color--light: rgba(240, 246, 252, 0.7); + --md-footer-fg-color--lighter: rgba(240, 246, 252, 0.4); + --md-footer-bg-color: #010409; + --md-footer-bg-color--dark: #010409; +} + +/* =========================================== + C. Header & Navigation Bar + =========================================== */ +.md-header { + border-bottom: 1px solid var(--md-default-fg-color--lightest); + box-shadow: none; +} + +[data-md-color-scheme="default"] .md-header { + background-color: #ffffff; + color: #1f2328; +} + +[data-md-color-scheme="slate"] .md-header { + background-color: #161b22; +} + +/* Header title color fix */ +[data-md-color-scheme="default"] .md-header .md-header__title { + color: #1f2328; +} + +/* Header icons */ +[data-md-color-scheme="default"] .md-header .md-icon { + color: #656d76; +} + +/* Tab bar */ +.md-tabs { + border-bottom: 1px solid var(--md-default-fg-color--lightest); +} + +[data-md-color-scheme="default"] .md-tabs { + background-color: #ffffff; +} + +[data-md-color-scheme="slate"] .md-tabs { + background-color: #0d1117; +} + +.md-tabs__link { + font-weight: 500; + font-size: 0.8rem; + opacity: 0.7; + transition: opacity 0.15s ease; +} + +.md-tabs__link:hover, +.md-tabs__link--active { + opacity: 1; +} + +/* =========================================== + D. Sidebar Navigation + =========================================== */ +.md-nav { + font-size: 0.78rem; + line-height: 1.5; +} + +.md-nav__item { + padding: 0; +} + +.md-nav__link { + padding: 0.35rem 0.75rem; + border-radius: 6px; + margin: 1px 4px; + font-weight: 400; + transition: background-color 0.15s ease; +} + +.md-nav__link:hover { + background-color: var(--md-accent-fg-color--transparent); +} + +.md-nav__link--active, +.md-nav__item .md-nav__link--active { + font-weight: 600; + color: var(--md-accent-fg-color); + background-color: var(--md-accent-fg-color--transparent); +} + +/* Section labels in sidebar */ +.md-nav__item--nested > .md-nav__link { + font-weight: 600; + font-size: 0.72rem; + letter-spacing: 0.03em; + opacity: 0.8; +} + +/* Sidebar scrollbar */ +.md-sidebar__scrollwrap::-webkit-scrollbar { + width: 4px; +} + +.md-sidebar__scrollwrap::-webkit-scrollbar-thumb { + background-color: var(--md-default-fg-color--lightest); + border-radius: 4px; +} + +/* =========================================== + E. Buttons — GitHub-style + =========================================== */ +.md-typeset .md-button--primary { + background-color: var(--md-primary-fg-color); + color: #ffffff !important; + border: 1px solid var(--md-primary-fg-color); + border-radius: 6px; + padding: 0.5rem 1.25rem; + font-weight: 500; + font-size: 0.82rem; + transition: background-color 0.15s ease, border-color 0.15s ease; + box-shadow: none; +} + +.md-typeset .md-button--primary:hover { + background-color: var(--md-primary-fg-color--dark); + border-color: var(--md-primary-fg-color--dark); + color: #ffffff !important; +} + +/* Outline / secondary button */ +.md-typeset .md-button:not(.md-button--primary) { + color: var(--md-primary-fg-color); + border: 1px solid var(--md-default-fg-color--lightest); + border-radius: 6px; + padding: 0.5rem 1.25rem; + font-weight: 500; + font-size: 0.82rem; + background-color: transparent; + transition: background-color 0.15s ease, border-color 0.15s ease; + box-shadow: none; +} + +.md-typeset .md-button:not(.md-button--primary):hover { + background-color: var(--md-accent-fg-color--transparent); + border-color: var(--md-primary-fg-color); +} + +/* =========================================== + F. Grid Cards + =========================================== */ +.md-typeset .grid.cards > ul > li, +.md-typeset .grid.cards > ol > li, +.md-typeset .grid > .card { + border: 1px solid var(--md-default-fg-color--lightest); + border-radius: 6px; + box-shadow: none; + transition: border-color 0.15s ease, box-shadow 0.15s ease; +} + +.md-typeset .grid.cards > ul > li:hover, +.md-typeset .grid.cards > ol > li:hover, +.md-typeset .grid > .card:hover { + border-color: var(--md-default-fg-color--lighter); + box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08); +} + +[data-md-color-scheme="slate"] .md-typeset .grid.cards > ul > li:hover, +[data-md-color-scheme="slate"] .md-typeset .grid.cards > ol > li:hover { + box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3); +} + +/* =========================================== + G. Code Blocks + =========================================== */ +.md-typeset code { + border-radius: 6px; + border: 1px solid var(--md-default-fg-color--lightest); + padding: 0.1em 0.35em; + font-size: 0.85em; +} + +.md-typeset pre { + border-radius: 6px; + border: 1px solid var(--md-default-fg-color--lightest); +} + +.md-typeset pre > code { + border: none; + padding: 0; +} + +/* =========================================== + H. Tables + =========================================== */ +.md-typeset table:not([class]) { + border: 1px solid var(--md-default-fg-color--lightest); + border-radius: 6px; + border-collapse: separate; + border-spacing: 0; + overflow: hidden; +} + +.md-typeset table:not([class]) th { + background-color: var(--md-default-bg-color--light); + font-weight: 600; + font-size: 0.78rem; + border-bottom: 1px solid var(--md-default-fg-color--lightest); +} + +.md-typeset table:not([class]) td { + border-top: 1px solid var(--md-default-fg-color--lightest); +} + +/* =========================================== + I. Admonitions + =========================================== */ +.md-typeset .admonition, +.md-typeset details { + border-radius: 6px; + box-shadow: none; +} + +/* =========================================== + J. Hero Section + =========================================== */ .hero { text-align: center; padding: 2.5rem 1rem 1rem; @@ -17,14 +305,14 @@ letter-spacing: -0.03em; line-height: 1.15; margin-bottom: 0.75rem !important; - background: linear-gradient(135deg, #a78bfa 0%, #e879f9 50%, #f59e0b 100%); + background: linear-gradient(135deg, #58a6ff 0%, #1f6feb 50%, #388bfd 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%); + background: linear-gradient(135deg, #0550ae 0%, #0969da 50%, #218bff 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; @@ -47,28 +335,56 @@ 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; +/* Skills page hero */ +.skills-hero { + text-align: center; + padding: 2rem 1rem 0.5rem; + max-width: 700px; + margin: 0 auto; } -/* --- Section dividers --- */ -.md-typeset hr { - border-color: var(--md-default-fg-color--lightest); +.skills-hero h1 { + font-size: 2.2rem !important; + font-weight: 800 !important; + letter-spacing: -0.03em; + line-height: 1.15; + margin-bottom: 0.5rem !important; + background: linear-gradient(135deg, #58a6ff 0%, #1f6feb 50%, #388bfd 100%); + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; + background-clip: text; } -/* --- Code block polish --- */ -.md-typeset code { - border-radius: 6px; +[data-md-color-scheme="default"] .skills-hero h1 { + background: linear-gradient(135deg, #0550ae 0%, #0969da 50%, #218bff 100%); + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; + background-clip: text; } -.md-typeset pre { - border-radius: 8px; +.skills-hero-sub { + font-size: 1.05rem; + opacity: 0.6; + max-width: 520px; + margin: 0 auto 1.5rem; } -/* --- Typography --- */ +/* Skill count badge */ +.skill-count { + display: inline-block; + background: var(--md-primary-fg-color); + color: #ffffff; + font-size: 0.7rem; + font-weight: 700; + padding: 0.15rem 0.5rem; + border-radius: 999px; + vertical-align: middle; + margin-left: 0.35rem; +} + +/* =========================================== + K. Typography + =========================================== */ .md-typeset { font-size: 0.82rem; line-height: 1.7; @@ -79,7 +395,37 @@ letter-spacing: -0.01em; } -/* --- Mobile --- */ +/* =========================================== + L. Section Dividers + =========================================== */ +.md-typeset hr { + border-color: var(--md-default-fg-color--lightest); +} + +/* =========================================== + M. Search Dialog + =========================================== */ +[data-md-color-scheme="default"] .md-search__form { + background-color: #f6f8fa; + border: 1px solid var(--md-default-fg-color--lightest); +} + +/* =========================================== + N. Announcement Bar + =========================================== */ +.md-banner { + background-color: var(--md-primary-fg-color); + color: #ffffff; + font-size: 0.78rem; +} + +.md-banner a { + color: #ffffff; +} + +/* =========================================== + O. Mobile Responsive + =========================================== */ @media (max-width: 768px) { .hero h1 { font-size: 1.8rem !important; @@ -88,4 +434,8 @@ .hero-subtitle { font-size: 0.95rem; } + + .skills-hero h1 { + font-size: 1.8rem !important; + } } diff --git a/mkdocs.yml b/mkdocs.yml index 5ed35ab..ae2d8b1 100644 --- a/mkdocs.yml +++ b/mkdocs.yml @@ -11,20 +11,18 @@ theme: name: material custom_dir: docs/overrides palette: - - media: "(prefers-color-scheme)" - scheme: slate - primary: deep purple - 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 + - scheme: default + primary: custom + accent: custom toggle: icon: material/brightness-7 name: Switch to dark mode + - scheme: slate + primary: custom + accent: custom + toggle: + icon: material/brightness-4 + name: Switch to light mode font: text: Inter code: JetBrains Mono @@ -118,6 +116,7 @@ nav: - Home: index.md - Getting Started: getting-started.md - Skills: + - Overview: skills/index.md - Engineering - Core: - Overview: skills/engineering-team/index.md - "AWS Solution Architect": skills/engineering-team/aws-solution-architect.md