### Install Curated Skills Pack using Bash

Source: https://github.com/louislau-art/context7-skills-curated-pack/blob/main/README.md

This script installs the curated Context7 skills pack to a specified target. It supports various targets like 'claude', 'codex', 'gemini', or combinations thereof. A dry-run option is available to preview actions without making changes.

```bash
# install to Claude target
bash scripts/install_curated.sh claude

# install and sync to Codex + Gemini
bash scripts/install_curated.sh all

# dry-run first
DRY_RUN=1 bash scripts/install_curated.sh claude
```

--------------------------------

### Fetch Skills for Static Site (Python)

Source: https://context7.com/louislau-art/context7-skills-curated-pack/llms.txt

Fetches Context7 skills ranking and exports it for a static dashboard. Supports configuring a minimum installs threshold to filter skills.

```bash
python3 scripts/fetch_context7_skills_for_site.py \
  --min-installs 0 \
  --output-json docs/data/context7_skills_ranked_all.json \
  --output-csv docs/data/context7_skills_ranked_all.csv
```

```bash
python3 scripts/fetch_context7_skills_for_site.py \
  --min-installs 36 \
  --output-json docs/data/context7_skills_ranked_min36.json \
  --output-csv docs/data/context7_skills_ranked_min36.csv
```

--------------------------------

### Fetch Top 5 Skills Ranked All (JSON)

Source: https://context7.com/louislau-art/context7-skills-curated-pack/llms.txt

Fetches the top 5 skills from the all-ranked skills list, which includes skills without an install threshold. This data is useful for a comprehensive view of skill rankings.

```shell
curl -s "https://louislau-art.github.io/context7-skills-curated-pack/data/context7_skills_ranked_all.json" | jq '.[:5]'
```

--------------------------------

### Fetch Context7 Skill Rankings using Python

Source: https://context7.com/louislau-art/context7-skills-curated-pack/llms.txt

This Python script fetches live ranked skills from the Context7 API and exports a filtered snapshot to CSV and JSON formats. It allows configuration of a minimum install threshold, API page size, pagination limit, and custom Context7 base URLs. The output files contain ranked skill data, useful for analyzing skill popularity.

```python
# Fetch skills with at least 36 installs (default)
python3 scripts/fetch_context7_skill_rankings.py \
  --min-installs 36 \
  --output-csv data/context7_ranked_skills_min36.csv \
  --output-json data/context7_ranked_skills_min36.meta.json

# Fetch all ranked skills without filtering
python3 scripts/fetch_context7_skill_rankings.py \
  --min-installs 0 \
  --output-csv data/context7_ranked_skills_all.csv \
  --output-json data/context7_ranked_skills_all.meta.json

# Custom API page size and pagination limit
python3 scripts/fetch_context7_skill_rankings.py \
  --min-installs 100 \
  --limit 100 \
  --max-pages 50 \
  --output-csv data/context7_top_skills.csv \
  --output-json data/context7_top_skills.meta.json

# Use custom Context7 base URL
python3 scripts/fetch_context7_skill_rankings.py \
  --base-url https://context7.com \
  --min-installs 36 \
  --output-csv data/custom_skills.csv \
  --output-json data/custom_skills.meta.json
```

--------------------------------

### Fetch Live Context7 Skill Rankings using Python

Source: https://github.com/louislau-art/context7-skills-curated-pack/blob/main/README.md

This Python script retrieves live ranked skills from the Context7 API. It allows specifying minimum installs and output file formats (CSV and JSON). The script utilizes API endpoints for skill counts and ranked skills.

```python
python3 scripts/fetch_context7_skill_rankings.py \
  --min-installs 0 \
  --output-csv data/context7_ranked_skills_all.csv \
  --output-json data/context7_ranked_skills_all.meta.json
```

--------------------------------

### Generate Context7 Skills Ranked Data (Python)

Source: https://github.com/louislau-art/context7-skills-curated-pack/blob/main/README.md

This script fetches ranked Context7 skills data, with a minimum install threshold of 0, and outputs it to JSON and CSV files. This data is used for the 'Skills Ranking' tab on the static dashboard.

```bash
python3 scripts/fetch_context7_skills_for_site.py \
  --min-installs 0 \
  --output-json docs/data/context7_skills_ranked_all.json \
  --output-csv docs/data/context7_skills_ranked_all.csv
```

--------------------------------

### Pagination Logic

Source: https://github.com/louislau-art/context7-skills-curated-pack/blob/main/docs/index.html

Calculates pagination details based on the total number of rows and the current page size. It determines the start and end indices for the current page's data, ensuring that the page number stays within valid bounds. This function is crucial for handling large datasets by displaying them in manageable chunks.

```javascript
function getPagedRows(rows, state) { const totalRows = rows.length; const totalPages = Math.max(1, Math.ceil(totalRows / state.pageSize)); if (state.page > totalPages) state.page = totalPages; if (state.page < 1) state.page = 1; const startIdx = (state.page - 1) * state.pageSize; const endIdx = Math.min(startIdx + state.pageSize, totalRows); return { rows: rows.slice(startIdx, endIdx), totalRows, totalPages, start: totalRows ? startIdx + 1 : 0, end: endIdx }; }
```

--------------------------------

### Enable GitHub Pages Deployment (Settings)

Source: https://github.com/louislau-art/context7-skills-curated-pack/blob/main/README.md

Instructions for configuring GitHub Pages to deploy a static site from a specific branch and folder. This enables the automatic updates for the ranking site.

```markdown
1. Open repository `Settings` -> `Pages`.
2. Under `Build and deployment`, choose:
   - `Source`: `Deploy from a branch`
   - `Branch`: `main`
   - `Folder`: `/docs`
3. Save, then open the published URL.
```

--------------------------------

### Configure Context7 API Authentication (Bash)

Source: https://context7.com/louislau-art/context7-skills-curated-pack/llms.txt

Sets up API authentication for Context7 endpoints to enable higher rate limits. Supports setting the API key via environment variables or a key file.

```bash
# Option 1: Set API key directly via environment variable
export CONTEXT7_API_KEY='your_ctx7_api_key_here'
```

```bash
# Option 2: Use a key file (first line is the token)
export CONTEXT7_API_KEY_FILE=/path/to/your/context7_key.txt
```

```bash
# Option 3: Allow fallback to Codex MCP config (~/.codex/config.toml)
export CONTEXT7_ALLOW_CODEX_MCP_FALLBACK=1
```

```bash
# Then run any fetch script
python3 scripts/fetch_context7_skill_rankings.py --min-installs 0
```

```bash
# Combined example with fallback enabled
CONTEXT7_ALLOW_CODEX_MCP_FALLBACK=1 python3 scripts/fetch_context7_docs_extended.py \
  --top-k 1000 \
  --max-workers 12 \
  --output-json docs/data/context7_docs_extended_top1000.json
```

--------------------------------

### Consume Rankings Manifest (Python)

Source: https://context7.com/louislau-art/context7-skills-curated-pack/llms.txt

Demonstrates how external AI models and agents can consume the public ranking datasets by first fetching the manifest, then retrieving specific dataset metadata and data.

```python
import json
from urllib.request import urlopen

# Step 1: Fetch the manifest first
MANIFEST_URL = "https://louislau-art.github.io/context7-skills-curated-pack/data/context7_rankings_manifest.json"
manifest = json.loads(urlopen(MANIFEST_URL).read().decode("utf-8"))

# Step 2: Get dataset metadata
for dataset in manifest["datasets"]:
    print(f"Dataset: {dataset['id']}")
    print(f"  URL: {dataset['publicUrl']}")
    print(f"  Rows: {dataset['rows']}")
    print(f"  Generated: {dataset['generatedAtUtc']}")

# Step 3: Check if extended top1000 has estimated rows
docs_extended = next(d for d in manifest["datasets"] if d["id"] == "docs_extended_top1000")
if docs_extended.get("estimatedRows", 0) == 0:
    # Use runtime snapshot instead
    runtime = next(d for d in manifest["datasets"] if d["id"] == "docs_extended_top100_runtime")
    print(f"Using runtime snapshot: {runtime['publicUrl']}")

# Step 4: Fetch specific dataset
docs_popular_url = next(d["publicUrl"] for d in manifest["datasets"] if d["id"] == "docs_popular_top50")
docs_data = json.loads(urlopen(docs_popular_url).read().decode("utf-8"))

# Step 5: Process ranking data
for item in docs_data[:10]:
    print(f"Rank {item['rank']}: {item['title']} (share: {item.get('marketShare', 'N/A')})")
```

--------------------------------

### Fetch Live Context7 Library Rankings using Python

Source: https://github.com/louislau-art/context7-skills-curated-pack/blob/main/README.md

This Python script fetches rankings for Context7 documentation libraries, supporting 'popular', 'trending', and 'latest' kinds. It outputs the data into CSV and JSON files. The script interacts with specific API endpoints for library data.

```python
# Popular docs ranking (includes source/tokens/snippets/update fields)
python3 scripts/fetch_context7_library_rankings.py \
  --kind popular \
  --output-csv data/context7_popular_libraries.csv \
  --output-json data/context7_popular_libraries.meta.json

# Optional: trending/latest
python3 scripts/fetch_context7_library_rankings.py --kind trending \
  --output-csv data/context7_trending_libraries.csv \
  --output-json data/context7_trending_libraries.meta.json
python3 scripts/fetch_context7_library_rankings.py --kind latest \
  --output-csv data/context7_latest_libraries.csv \
  --output-json data/context7_latest_libraries.meta.json
```

--------------------------------

### Fetch Top 5 Extended Docs (JSON)

Source: https://context7.com/louislau-art/context7-skills-curated-pack/llms.txt

Fetches the top 5 items from the extended documentation rankings JSON file. This endpoint provides official and estimated rankings for development skills.

```shell
curl -s "https://louislau-art.github.io/context7-skills-curated-pack/data/context7_docs_extended_top1000.json" | jq '.items[:5]'
```

--------------------------------

### Build Rankings Manifest (Python)

Source: https://context7.com/louislau-art/context7-skills-curated-pack/llms.txt

Generates the `context7_rankings_manifest.json` metadata file. This file describes all available datasets and is intended for external AI models or agents to consume.

```bash
python3 scripts/build_rankings_manifest.py
```

--------------------------------

### Fetch Extended Context7 Docs (Python)

Source: https://context7.com/louislau-art/context7-skills-curated-pack/llms.txt

Fetches extended documentation data from Context7 with configurable limits for top-k items, maximum pages, workers, and retries. Outputs data to JSON and CSV files. Useful for building comprehensive datasets.

```bash
python3 scripts/fetch_context7_docs_extended.py \
  --top-k 500 \
  --max-pages 500 \
  --max-workers 12 \
  --retries 3 \
  --output-json docs/data/context7_docs_extended_top500.json \
  --output-csv docs/data/context7_docs_extended_top500.csv
```

```bash
python3 scripts/fetch_context7_docs_extended.py \
  --top-k 2000 \
  --max-pages 0 \
  --max-workers 12 \
  --retries 3 \
  --output-json docs/data/context7_docs_extended_top2000.json \
  --output-csv docs/data/context7_docs_extended_top2000.csv
```

--------------------------------

### Access Public Dataset URLs (Bash)

Source: https://context7.com/louislau-art/context7-skills-curated-pack/llms.txt

Provides direct URLs to access the ranking datasets, including the manifest file and specific JSON data files like 'Docs Popular Top 50'. Uses `curl` and `jq` for easy inspection.

```bash
# Manifest (read this first)
curl -s "https://louislau-art.github.io/context7-skills-curated-pack/data/context7_rankings_manifest.json" | jq .
```

```bash
# Docs Popular Top 50 (official market share rankings)
curl -s "https://louislau-art.github.io/context7-skills-curated-pack/data/context7_docs_popular_top50.json" | jq '.[:5]'
```

--------------------------------

### Fetch Top 5 Extended Runtime Snapshot (JSON)

Source: https://context7.com/louislau-art/context7-skills-curated-pack/llms.txt

Fetches a temporary snapshot of the top 5 items from the extended runtime data. This endpoint provides a snapshot of skills ranked between 51-100.

```shell
curl -s "https://louislau-art.github.io/context7-skills-curated-pack/data/context7_docs_extended_top100.runtime.json" | jq '.items[:5]'
```

--------------------------------

### Fetch Raw GitHub Manifest (JSON)

Source: https://context7.com/louislau-art/context7-skills-curated-pack/llms.txt

Fetches the raw rankings manifest directly from GitHub. This is a fallback mechanism to ensure data freshness if the GitHub Pages cache lags.

```shell
curl -s "https://raw.githubusercontent.com/LouisLau-art/context7-skills-curated-pack/main/docs/data/context7_rankings_manifest.json" | jq .
```

--------------------------------

### Accessing Ranking Datasets

Source: https://github.com/louislau-art/context7-skills-curated-pack/blob/main/AI_RANKINGS_GUIDE.md

This section details how to access the various public ranking datasets provided by the Context7 Skills Curated Pack. It includes canonical URLs and GitHub fallback URLs for manifest, documentation, and skills ranking data.

```APIDOC
## Accessing Ranking Datasets

This guide is for external AI models/agents that need to consume the two public ranking datasets in this repository.

### Canonical Public URLs

- **Site**: `https://louislau-art.github.io/context7-skills-curated-pack/`
- **Manifest**: `https://louislau-art.github.io/context7-skills-curated-pack/data/context7_rankings_manifest.json`
- **Docs Ranking (Top 50)**: `https://louislau-art.github.io/context7-skills-curated-pack/data/context7_docs_popular_top50.json`
- **Docs Extended (Top 1000)**: `https://louislau-art.github.io/context7-skills-curated-pack/data/context7_docs_extended_top1000.json`
- **Docs Extended Runtime (Top 100)**: `https://louislau-art.github.io/context7-skills-curated-pack/data/context7_docs_extended_top100.runtime.json`
- **Skills Ranking (All)**: `https://louislau-art.github.io/context7-skills-curated-pack/data/context7_skills_ranked_all.json`

### Raw GitHub Fallback URLs

- **Manifest**: `https://raw.githubusercontent.com/LouisLau-art/context7-skills-curated-pack/main/docs/data/context7_rankings_manifest.json`
- **Docs Ranking**: `https://raw.githubusercontent.com/LouisLau-art/context7-skills-curated-pack/main/docs/data/context7_docs_popular_top50.json`
- **Docs Extended (Full Target)**: `https://raw.githubusercontent.com/LouisLau-art/context7-skills-curated-pack/main/docs/data/context7_docs_extended_top1000.json`
- **Docs Extended Runtime (Temporary 51+ Source)**: `https://raw.githubusercontent.com/LouisLau-art/context7-skills-curated-pack/main/docs/data/context7_docs_extended_top100.runtime.json`
- **Skills Ranking**: `https://raw.githubusercontent.com/LouisLau-art/context7-skills-curated-pack/main/docs/data/context7_skills_ranked_all.json`

### Dataset Descriptions

- **`docs_popular_top50`**: Context7 docs popularity snapshot (currently top 50 rows). Main metric: `marketShare`.
- **`docs_extended_top1000`**: Rows 1-50 are official rankings from Context7. Rows >50 are estimated and directional. Check `estimatedRows` in payload/meta. If `estimatedRows = 0`, the file is a temporary official-only snapshot.
- **`docs_extended_top100_runtime`**: Runtime snapshot used when `docs_extended_top1000` is official-only. Includes 1-50 official + 51-100 estimated rows.
- **`skills_ranked_all`**: Context7 skills ranked snapshot with `minInstalls=0`. Main metric: `installCount`.

### Recommended Consumption Protocol

1. Fetch `context7_rankings_manifest.json`.
2. Read `datasets[*].publicUrl` and `generatedAtUtc`.
3. For docs 51+, if `docs_extended_top1000.estimatedRows = 0`, switch to `docs_extended_top100_runtime`.
4. Fetch only the dataset(s) you need.
5. In responses, mention snapshot timestamp and dataset scope (e.g., docs top 50 only, or docs top 100 runtime).

### Minimal Field Notes

- **Docs Ranking**: `rank`, `title`, `source`, `marketShare`, `snippets`, `tokens`, `updateAgo`, `verified`.
- **Skills Ranking**: `rank`, `name`, `source`, `installCount`, `trustScore`, `verified`.
```

--------------------------------

### Set Context7 API Key using Environment Variable

Source: https://github.com/louislau-art/context7-skills-curated-pack/blob/main/README.md

This command sets the Context7 API key as an environment variable, which is recommended for increasing API rate limits when fetching data. Alternatively, a file path or fallback mechanism can be used.

```bash
export CONTEXT7_API_KEY='your_ctx7_key'
```

--------------------------------

### Fetch Context7 Library Rankings using Python

Source: https://context7.com/louislau-art/context7-skills-curated-pack/llms.txt

This Python script retrieves Context7 docs library rankings by type (popular, trending, latest, or all) and exports the data to CSV and JSON formats. It supports specifying the ranking kind, a custom limit for results, and the maximum number of pages to fetch for comprehensive data collection.

```python
# Fetch popular docs ranking (default)
python3 scripts/fetch_context7_library_rankings.py \
  --kind popular \
  --output-csv data/context7_popular_libraries.csv \
  --output-json data/context7_popular_libraries.meta.json

# Fetch trending libraries
python3 scripts/fetch_context7_library_rankings.py \
  --kind trending \
  --output-csv data/context7_trending_libraries.csv \
  --output-json data/context7_trending_libraries.meta.json

# Fetch latest libraries with custom limit
python3 scripts/fetch_context7_library_rankings.py \
  --kind latest \
  --limit 50 \
  --output-csv data/context7_latest_libraries.csv \
  --output-json data/context7_latest_libraries.meta.json

# Fetch all libraries with pagination
python3 scripts/fetch_context7_library_rankings.py \
  --kind all \
  --max-pages 100 \
  --output-csv data/context7_all_libraries.csv \
  --output-json data/context7_all_libraries.meta.json
```

--------------------------------

### Generate Context7 Docs Popular Data (Python)

Source: https://github.com/louislau-art/context7-skills-curated-pack/blob/main/README.md

This script fetches popular Context7 documentation data, limits the results, and outputs them to JSON and CSV files. It's used for generating the 'Docs Popular' tab on the static dashboard.

```bash
python3 scripts/fetch_context7_docs_popular.py \
  --limit 50 \
  --output-json docs/data/context7_docs_popular_top50.json \
  --output-csv docs/data/context7_docs_popular_top50.csv
```

--------------------------------

### Build Extended Docs Ranking using Python

Source: https://context7.com/louislau-art/context7-skills-curated-pack/llms.txt

This Python script generates an extended docs ranking by combining the top 50 official rankings from Context7's API with estimated rankings for positions 51+ using a weighted scoring model. It allows configuration of the number of top rows to process (`top-k`) and the number of parallel workers for faster execution, outputting results in JSON and CSV formats.

```python
# Build extended ranking with top 1000 rows
python3 scripts/fetch_context7_docs_extended.py \
  --top-k 1000 \
  --max-workers 12 \
  --output-json docs/data/context7_docs_extended_top1000.json \
  --output-csv docs/data/context7_docs_extended_top1000.csv

# Build smaller runtime snapshot (top 100)
python3 scripts/fetch_context7_docs_extended.py \
  --top-k 100 \
  --max-workers 8 \
  --output-json docs/data/context7_docs_extended_top100.runtime.json \
  --output-csv docs/data/context7_docs_extended_top100.runtime.csv
```

--------------------------------

### Generate Context7 Docs Extended Data (Python)

Source: https://github.com/louislau-art/context7-skills-curated-pack/blob/main/README.md

This script fetches extended Context7 documentation data, setting a high limit for results and specifying the number of worker threads for faster processing. It outputs data to JSON and CSV files, used for the 'Docs Extended' tab.

```bash
python3 scripts/fetch_context7_docs_extended.py \
  --top-k 20000 \
  --max-workers 12 \
  --output-json docs/data/context7_docs_extended_top1000.json \
  --output-csv docs/data/context7_docs_extended_top1000.csv
```

--------------------------------

### Application State Initialization (JavaScript)

Source: https://github.com/louislau-art/context7-skills-curated-pack/blob/main/docs/index.html

Initializes the application's state object, defining default values for the current mode, datasets, rows, search query, filters, pagination, and sorting.

```javascript
const state = {
  mode: "docs",
  datasets: {},
  rows: [],
  query: "",
  verifiedOnly: false,
  page: 1,
  pageSize: 100,
  sortKey: "rank",
  sortDir: "asc"
};

```

--------------------------------

### Implement Keyboard Shortcuts for Search and Escape in JavaScript

Source: https://github.com/louislau-art/context7-skills-curated-pack/blob/main/docs/index.html

Adds global keyboard event listeners to provide shortcuts for focusing the search box with the '/' key and clearing the search input with the 'Escape' key when the search box is active.

```javascript
document.addEventListener("keydown", (e) => {
  const target = e.target;
  const isTyping = target && (target.tagName === "INPUT" || target.tagName === "TEXTAREA");
  if (
    e.key === "/" && !e.metaKey && !e.ctrlKey && !e.altKey && !isTyping
  ) {
    e.preventDefault();
    el.searchBox.focus();
  }
  if (e.key === "Escape" && document.activeElement === el.searchBox && el.searchBox.value) {
    state.query = "";
    state.page = 1;
    el.searchBox.value = "";
    render();
  }
});
```

--------------------------------

### Data Configuration for Rankings (JavaScript)

Source: https://github.com/louislau-art/context7-skills-curated-pack/blob/main/docs/index.html

Defines the structure and data fetching configuration for different ranking modes (docs, docsExtended, skills). Includes labels, data URLs, notes, and column definitions with keys, labels, and types.

```javascript
const MODES = {
  docs: {
    label: "Docs Popular",
    dataUrl: "./data/context7_docs_popular_top50.json",
    note: "Docs market-share ranking is limited by Context7 API to top 50 libraries. Click Library to open Context7 docs page, click Source to open GitHub repo.",
    topLabel: "Top Library",
    metricLabel: "Top Market Share",
    metricKey: "marketShare",
    metricFmt: (v) => (typeof v === "number" ? v.toFixed(2) + "%" : "-"),
    columns: [
      { key: "rank", label: "Rank", type: "num" },
      { key: "title", label: "Library", type: "text" },
      { key: "source", label: "Source", type: "mono" },
      { key: "marketShare", label: "Share %", type: "pct" },
      { key: "tokens", label: "Tokens", type: "num" },
      { key: "snippets", label: "Snippets", type: "num" },
      { key: "updateAgo", label: "Updated", type: "text" },
      { key: "trustScore", label: "Trust", type: "num" },
      { key: "verified", label: "Verified", type: "bool" }
    ]
  },
  docsExtended: {
    label: "Docs Extended",
    dataUrl: "./data/context7_docs_extended_top1000.json",
    note: "Rows 1-50 are official from Context7 /api/rankings. Rows after 50 are estimated (directional) from /api/libraries/all. Library/Source are clickable.",
    topLabel: "Top Library",
    metricLabel: "Top Market Share",
    metricKey: "officialMarketShare",
    metricFmt: (v) => (typeof v === "number" ? v.toFixed(2) + "%" : "-"),
    columns: [
      { key: "rank", label: "Rank", type: "num" },
      { key: "rankType", label: "Type", type: "text" },
      { key: "title", label: "Library", type: "text" },
      { key: "source", label: "Source", type: "mono" },
      { key: "officialMarketShare", label: "Official Share %", type: "pct" },
      { key: "estimatedScore", label: "Estimated Score", type: "num" },
      { key: "popularityRank", label: "Popularity Rank", type: "num" },
      { key: "snippets", label: "Snippets", type: "num" },
      { key: "tokens", label: "Tokens", type: "num" },
      { key: "updateAgo", label: "Updated", type: "text" },
      { key: "trustScore", label: "Trust", type: "num" },
      { key: "verified", label: "Verified", type: "bool" }
    ]
  },
  skills: {
    label: "Skills (ranked, no installs threshold)",
    dataUrl: "./data/context7_skills_ranked_all.json",
    note: "Skills list shows current ranked rows without an installs threshold (much larger than top 50). Skill opens Context7 skill page; Source opens GitHub.",
    topLabel: "Top Skill",
    metricLabel: "Top Installs",
    metricKey: "installCount",
    metricFmt: (v) => (typeof v === "number" ? new Intl.NumberFormat("en-US").format(v) : "-"),
    columns: [
      { key: "rank", label: "Rank", type: "num" },
      { key: "name", label: "Skill", type: "text" },
      { key: "source", label: "Source", type: "mono" },
      { key: "installCount", label: "Installs", type: "num" },
      { key: "trustScore", label: "Trust", type: "num" },
      { key: "verified", label: "Verified", type: "bool" },
      { key: "benchmarkScore", label: "Benchmark", type: "num" }
    ]
  }
};

```

--------------------------------

### Handle UI Event Listeners and State Updates in JavaScript

Source: https://github.com/louislau-art/context7-skills-curated-pack/blob/main/docs/index.html

Sets up event listeners for various UI elements including tabs, search input, checkboxes, select dropdowns, and buttons. It updates the application state based on user interactions and triggers re-rendering.

```javascript
el.tabs.forEach((tab) => {
  tab.addEventListener("click", async () => {
    const mode = tab.dataset.mode;
    if (!mode || mode === state.mode) return;
    try {
      await loadMode(mode);
    } catch (err) {
      showError(String(err));
      console.error(err);
    }
  });
});
el.searchBox.addEventListener("input", (e) => {
  state.query = e.target.value || "";
  state.page = 1;
  render();
});
el.verifiedOnly.addEventListener("change", (e) => {
  state.verifiedOnly = Boolean(e.target.checked);
  state.page = 1;
  render();
});
el.pageSizeSelect.addEventListener("change", (e) => {
  const next = Number.parseInt(e.target.value, 10);
  state.pageSize = Number.isFinite(next) ? next : 100;
  state.page = 1;
  render();
});
el.prevPageBtn.addEventListener("click", () => {
  if (state.page <= 1) return;
  state.page -= 1;
  render();
});
el.nextPageBtn.addEventListener("click", () => {
  state.page += 1;
  render();
});
el.resetBtn.addEventListener("click", () => {
  state.query = "";
  state.verifiedOnly = false;
  state.pageSize = 100;
  state.page = 1;
  state.sortKey = "rank";
  state.sortDir = "asc";
  el.searchBox.value = "";
  el.verifiedOnly.checked = false;
  el.pageSizeSelect.value = "100";
  render();
});
```

--------------------------------

### Load and Render Data Modes in JavaScript

Source: https://github.com/louislau-art/context7-skills-curated-pack/blob/main/docs/index.html

Handles loading data for different modes (e.g., 'docs', 'skills'), including fetching from URLs, parsing JSON payloads, and updating the application state. It also includes the initial rendering logic after data is loaded.

```javascript
async function loadMode(mode) {
  if (state.datasets[mode]) {
    state.mode = mode;
    state.rows = state.datasets[mode].items || [];
    state.sortKey = "rank";
    state.sortDir = "asc";
    state.page = 1;
    render();
    return;
  }
  const cfg = MODES[mode];
  const resp = await fetch(cfg.dataUrl, { cache: "no-store" });
  if (!resp.ok) throw new Error(`HTTP ${resp.status} loading ${cfg.dataUrl}`);
  const payload = await resp.json();
  if (!Array.isArray(payload.items)) throw new Error(`Invalid payload shape in ${cfg.dataUrl}`);
  state.datasets[mode] = payload;
  state.mode = mode;
  state.rows = payload.items;
  state.sortKey = "rank";
  state.sortDir = "asc";
  state.page = 1;
  render();
}

(async () => {
  try {
    await loadMode("docs");
    await loadMode("docsExtended");
    await loadMode("skills");
    // switch back to docs initial view
    state.mode = "docs";
    state.rows = state.datasets.docs.items;
    state.sortKey = "rank";
    state.sortDir = "asc";
    render();
  } catch (err) {
    showError("Failed to load ranking data files. Check GitHub Action outputs in docs/data.");
    console.error(err);
  }
})();
```

--------------------------------

### Layout and Container Styling

Source: https://github.com/louislau-art/context7-skills-curated-pack/blob/main/docs/index.html

Styles the main content wrapper and headings for the dashboard. It sets a maximum width, centers the content, and applies responsive font sizes to the main title.

```css
.wrap {
  max-width: 1280px;
  margin: 0 auto;
  padding: 28px 18px 44px;
}

h1 {
  margin: 0;
  font-size: clamp(28px, 4.5vw, 42px);
  letter-spacing: 0.01em;
  line-height: 1.08;
}

.sub {
  margin-top: 10px;
  color: var(--muted);
  font-size: 15px;
}
```

--------------------------------

### Note and Card Component Styling

Source: https://github.com/louislau-art/context7-skills-curated-pack/blob/main/docs/index.html

Styles informational notes and card elements used for displaying data summaries. These components utilize background gradients, borders, and shadows for a distinct visual appearance.

```css
.note {
  margin-top: 12px;
  color: #42556a;
  background: rgba(255, 255, 255, 0.78);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 10px 12px;
  font-size: 13px;
  backdrop-filter: blur(5px);
}

.bar {
  margin-top: 14px;
  display: grid;
  grid-template-columns: 1.15fr 1fr 1fr 1fr;
  gap: 10px;
}

.card {
  background: rgba(255, 255, 255, 0.86);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 12px 14px;
  box-shadow: var(--shadow);
  backdrop-filter: blur(5px);
}

.k {
  color: var(--muted);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 700;
}

.v {
  margin-top: 7px;
  font-size: 21px;
  font-weight: 780;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
```

--------------------------------

### Table Header Rendering

Source: https://github.com/louislau-art/context7-skills-curated-pack/blob/main/docs/index.html

Renders the table header row dynamically based on the current mode's configuration. It maps column definitions to table header cells (`<th>`), including sort indicators if a column is currently sorted. Event listeners are added to each header cell to handle sorting interactions when clicked.

```javascript
function renderHeader() { const cfg = MODES[state.mode]; el.theadRow.innerHTML = cfg.columns .map((c) => { const mark = state.sortKey === c.key ? (state.sortDir === "asc" ? " ↑" : " ↓") : ""; return `<th data-key="${c.key}">${c.label}${mark}</th>`; }) .join(""); Array.from(el.theadRow.querySelectorAll("th")).forEach((th) => { th.addEventListener("click", () => { const key = th.dataset.key; if (!key) return; if (state.sortKey === key) { state.sortDir = state.sortKey === key ? (state.sortDir === "asc" ? "desc" : "asc") : state.sortDir; } else { state.sortKey = key; state.sortDir = key === "rank" ? "asc" : "desc"; } render(); }); }); }
```

--------------------------------

### Global CSS Variables and Reset

Source: https://github.com/louislau-art/context7-skills-curated-pack/blob/main/docs/index.html

Defines global CSS variables for color theming and a basic reset for box-sizing. This ensures consistent styling across the dashboard and predictable element sizing.

```css
:root {
  --bg-top: #e9f2ff;
  --bg-bottom: #f8fbff;
  --panel: #ffffff;
  --line: #d8e4ef;
  --line-strong: #bfd0df;
  --text: #0f1f32;
  --muted: #4b6076;
  --accent: #0f766e;
  --accent-soft: #e6f6f3;
  --shadow: 0 14px 34px rgba(15, 31, 50, 0.08);
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  min-height: 100vh;
  background: radial-gradient(1200px 500px at 92% -8%, #d7f1ff 0%, transparent 50%), radial-gradient(900px 420px at -8% -12%, #d8ecff 0%, transparent 52%), linear-gradient(180deg, var(--bg-top) 0%, var(--bg-bottom) 100%);
  color: var(--text);
  font-family: "Avenir Next", "Manrope", "SF Pro Text", "Segoe UI", sans-serif;
}
```

--------------------------------

### Metadata Rendering

Source: https://github.com/louislau-art/context7-skills-curated-pack/blob/main/docs/index.html

Renders metadata related to the displayed data, including mode information, row counts, top item details, and generation timestamps. It also constructs a footer string with various status and source information. This function updates UI elements to provide context about the data being viewed.

```javascript
function renderMeta(filteredRows, paged) { const cfg = MODES[state.mode]; const ds = state.datasets[state.mode] || {}; const baseRows = getSearchBaseRows(); const top = filteredRows.find((x) => x.rank === 1) || filteredRows[0] || baseRows.find((x) => x.rank === 1) || baseRows[0] || null; const docsGlobalSearchOn = state.mode === "docs" && state.query.trim().length > 0 && Array.isArray(state.datasets.docsExtended?.items) && state.datasets.docsExtended.items.length > 0; el.modeNote.textContent = cfg.note; el.rowsCount.textContent = fmtNum(filteredRows.length); el.topLabel.textContent = cfg.topLabel; el.metricLabel.textContent = cfg.metricLabel; el.topItem.textContent = top ? (top.title || top.name || "-") : "-"; el.topMetric.textContent = top ? cfg.metricFmt(top[cfg.metricKey]) : "-"; el.generatedAt.textContent = formatLocalTime(ds.generatedAtUtc); el.generatedAt.title = `UTC: ${formatUtcTime(ds.generatedAtUtc)}`; const footer = [ `Mode: ${cfg.label}`, `Rows in dataset: ${fmtNum(baseRows.length)}`, `Rows shown: ${fmtNum(paged.rows.length)}`, `Page: ${state.page}/${paged.totalPages}`, `GeneratedAtUtc: ${formatUtcTime(ds.generatedAtUtc)}`, `Source: ${cfg.dataUrl}` ]; if (state.verifiedOnly) { footer.push("Filter: verified only"); } if (docsGlobalSearchOn) { footer.push("Search scope: Docs Extended dataset"); } el.footerInfo.textContent = footer.join(" | "); }
```

--------------------------------

### Data Formatting and Utility Functions (JavaScript)

Source: https://github.com/louislau-art/context7-skills-curated-pack/blob/main/docs/index.html

Provides functions for formatting numbers, dates, and times, as well as utility functions for string manipulation and escaping HTML. These are essential for displaying data correctly and safely in the UI.

```javascript
function fmtNum(v) {
  if (typeof v !== "number" || Number.isNaN(v)) return "-";
  return new Intl.NumberFormat("en-US").format(v);
}

function pad2(v) {
  return String(v).padStart(2, "0");
}

function parseTime(value) {
  if (!value) return null;
  const dt = new Date(value);
  if (Number.isNaN(dt.getTime())) return null;
  return dt;
}

function formatLocalTime(value) {
  const dt = parseTime(value);
  if (!dt) return "-";
  const tzName = new Intl.DateTimeFormat(undefined, { timeZoneName: "short" })
    .formatToParts(dt)
    .find((p) => p.type === "timeZoneName")?.value || "Local";
  return `${dt.getFullYear()}-${pad2(dt.getMonth() + 1)}-${pad2(dt.getDate())} ${pad2(dt.getHours())}:${pad2(dt.getMinutes())}:${pad2(dt.getSeconds())} ${tzName}`;
}

function formatUtcTime(value) {
  const dt = parseTime(value);
  if (!dt) return "-";
  return `${dt.getUTCFullYear()}-${pad2(dt.getUTCMonth() + 1)}-${pad2(dt.getUTCDate())} ${pad2(dt.getUTCHours())}:${pad2(dt.getUTCMinutes())}:${pad2(dt.getUTCSeconds())} UTC`;
}

function escapeHtml(v) {
  return String(v)
    .replaceAll("&", "&amp;")
    .replaceAll("<", "&lt;")
    .replaceAll(">", "&gt;")
    .replaceAll('"', "&quot;")
    .replaceAll("'", "&#39;");
}
```

--------------------------------

### URL Generation and Encoding (JavaScript)

Source: https://github.com/louislau-art/context7-skills-curated-pack/blob/main/docs/index.html

Functions for encoding URL path segments and generating deep links for projects and skills. These are crucial for creating navigable links within the application and to external resources like GitHub.

```javascript
function encodePathSegments(path) {
  return String(path || "")
    .split("/")
    .filter(Boolean)
    .map((seg) => encodeURIComponent(seg))
    .join("/");
}

function getProjectLinks(row) {
  const rawSource = String(row?.source || "").trim();
  const sourcePath = encodePathSegments(rawSource.replace(/^\\/+/, ""));
  return { docsUrl: sourcePath ? `https://context7.com/${sourcePath}` : "", githubUrl: sourcePath ? `https://github.com/${sourcePath}` : "" };
}

function getSkillsLinks(row) {
  const rawName = String(row?.name || "").trim();
  const links = getProjectLinks(row);
  const sourcePath = links.docsUrl.replace("https://context7.com/", "");
  return { skillUrl: sourcePath && rawName ? `https://context7.com/skills/${sourcePath}/${encodeURIComponent(rawName)}` : "", githubUrl: links.githubUrl };
}
```

--------------------------------

### Search and Filtering Logic (JavaScript)

Source: https://github.com/louislau-art/context7-skills-curated-pack/blob/main/docs/index.html

Implements the core logic for searching, filtering, and sorting data rows based on user input and application state. It handles text matching, verification status, and sorting criteria.

```javascript
function textCell(v) {
  if (v === null || v === undefined || v === "") return "-";
  return escapeHtml(v);
}

function isVerifiedValue(v) {
  if (typeof v === "boolean") return v;
  if (typeof v === "number") return v === 1;
  if (typeof v === "string") {
    const s = v.trim().toLowerCase();
    return s === "yes" || s === "true" || s === "1";
  }
  return false;
}

function asComparable(row, key, mode) {
  const v = row[key];
  if (key === "updateAgo") return row.updateUtc || "";
  if (typeof v === "number") return v;
  if (typeof v === "boolean") return v ? 1 : 0;
  return (v || "").toString().toLowerCase();
}

function rowMatches(row, q, mode) {
  if (!q) return true;
  const primary = row.title || row.name || "";
  return primary.toLowerCase().includes(q) || (row.source || "").toLowerCase().includes(q);
}

function toDocsSearchRow(row) {
  if (!row || typeof row !== "object") return {};
  const out = { ...row };
  if (typeof out.marketShare !== "number" && typeof out.officialMarketShare === "number") {
    out.marketShare = out.officialMarketShare;
  }
  return out;
}

function getSearchBaseRows() {
  if (state.mode === "docs" && state.query.trim()) {
    const ext = state.datasets.docsExtended && Array.isArray(state.datasets.docsExtended.items) ? state.datasets.docsExtended.items : [];
    if (ext.length > 0) {
      return ext.map(toDocsSearchRow);
    }
  }
  return state.rows;
}

function getFilteredSortedRows() {
  const q = state.query.trim().toLowerCase();
  const mode = state.mode;
  let rows = getSearchBaseRows().filter((r) => rowMatches(r, q, mode));
  if (state.verifiedOnly) {
    rows = rows.filter((r) => isVerifiedValue(r.verified));
  }
  rows.sort((a, b) => {
    const va = asComparable(a, state.sortKey, mode);
    const vb = asComparable(b, state.sortKey, mode);
    if (va < vb) return state.sortDir === "asc" ? -1 : 1;
    if (va > vb) return state.sortDir === "asc" ? 1 : -1;
    return 0;
  });
  return rows;
}

function getPagedRows(rows) {
  if (state.pageSize === -1) {
    state.page = 1;
    return { rows, totalRows: rows.length, totalPages: 1 };
  }
  const startIndex = (state.page - 1) * state.pageSize;
  const endIndex = startIndex + state.pageSize;
  return {
    rows: rows.slice(startIndex, endIndex),
    totalRows: rows.length,
    totalPages: Math.ceil(rows.length / state.pageSize)
  };
}
```

--------------------------------

### Button and Table Styling

Source: https://github.com/louislau-art/context7-skills-curated-pack/blob/main/docs/index.html

Styles buttons for actions and the main data table. Includes hover effects for buttons and sticky headers/cells for the table to improve usability with large datasets.

```css
.btn {
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
  padding: 10px 12px;
  font-size: 13px;
  cursor: pointer;
  color: #31475c;
  transition: all 140ms ease;
  white-space: nowrap;
}

.btn:hover:not(:disabled) {
  transform: translateY(-1px);
  border-color: var(--line-strong);
}

.btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.btn-small {
  padding: 7px 11px;
  font-size: 12px;
}

.table-shell {
  margin-top: 12px;
  border: 1px solid var(--line);
  border-radius: 14px;
  overflow: hidden;
  background: #fff;
  box-shadow: var(--shadow);
}

.table-wrap {
  width: 100%;
  overflow: auto;
  max-height: 66vh;
}

table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  min-width: 980px;
  font-size: 14px;
}

th, td {
  border-bottom: 1px solid #eaf0f6;
  padding: 10px 10px;
  text-align: left;
  vertical-align: middle;
  white-space: nowrap;
  background: #fff;
}

thead th {
  position: sticky;
  top: 0;
  background: #f4f8fd;
  z-index: 5;
  color: #344a5f;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  cursor: pointer;
  user-select: none;
}

tbody tr:nth-child(even) td {
  background: #fbfdff;
}

tr:hover td {
  background: #eef6ff;
}

th:first-child, td:first-child {
  position: sticky;
  left: 0;
  z-index: 3;
  min-width: 72px;
}

thead th:first-child {
  z-index: 8;
  background: #edf4fb;
}

tbody td:first-child {
  font-weight: 700;
  background: #fff;
}

tbody tr:nth-child(even) td:first-child {
  background: #fbfdff;
}

tbody tr:hover td:first-child {
  background: #eef6ff;
}

.rank {
  font-variant-numeric: tabular-nums;
}

.mono {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12px;
  color: #334155;
}

.num {
  font-vari
```

--------------------------------

### Pager Rendering

Source: https://github.com/louislau-art/context7-skills-curated-pack/blob/main/docs/index.html

Updates the UI elements for pagination controls, including the previous and next page buttons, and the page information display. It disables the buttons when the first or last page is reached, or if pagination is disabled (pageSize === -1). It also shows the current page range and total rows.

```javascript
function renderPager(paged) { el.prevPageBtn.disabled = state.pageSize === -1 || state.page <= 1; el.nextPageBtn.disabled = state.pageSize === -1 || state.page >= paged.totalPages; el.pageInfo.textContent = `Page ${state.page}/${paged.totalPages}`; el.rangeInfo.textContent = `Showing ${fmtNum(paged.start)}-${fmtNum(paged.end)} of ${fmtNum(paged.totalRows)}`; }
```