Creator · decodingai-magazine
Last updated · Sep 3, 2026
Demo skill that web-fetches two Decoding AI knowledge-graph articles, has the agent itself distill them into a typed entity/relation graph, and renders an interactive dark-themed force-directed KG into one self-contained kg.html — no graph library, no CDN.
Creator · decodingai-magazine
Last updated · Sep 3, 2026
Demo skill that web-fetches two Decoding AI knowledge-graph articles, has the agent itself distill them into a typed entity/relation graph, and renders an interactive dark-themed force-directed KG into one self-contained kg.html — no graph library, no CDN.
Creator · decodingai-magazine
Last updated · Sep 3, 2026
Demo skill that web-fetches two Decoding AI knowledge-graph articles, has the agent itself distill them into a typed entity/relation graph, and renders an interactive dark-themed force-directed KG into one self-contained kg.html — no graph library, no CDN.
Creator · decodingai-magazine
Last updated · Sep 3, 2026
Demo skill that web-fetches two Decoding AI knowledge-graph articles, has the agent itself distill them into a typed entity/relation graph, and renders an interactive dark-themed force-directed KG into one self-contained kg.html — no graph library, no CDN.
Sandbox only
Install targets
Codex install prompt
Install the "demo-6-article-kg" agent skill from https://github.com/decodingai-magazine/building-a-coding-agent-from-scratch-course/tree/main/.decode/skills/demo-6-article-kg. Read its SKILL.md or equivalent instructions first, install only the files needed for this workspace, and summarize any required setup before using it. Skill purpose: Demo skill that web-fetches two Decoding AI knowledge-graph articles, has the agent itself distill them into a typed entity/relation graph, and renders an interactive dark-themed force-directed KG into one self-contained kg.html — no graph library, no CDN. After the install attempt, report the result to https://www.openagentskill.com/api/agent/outcome with POST JSON {"event_id":"install_<unique-id>","skill_slug":"decodingai-magazine-demo-6-article-kg","task":"Install demo-6-article-kg","agent":"codex","outcome":"success","install_used":true}. Replace event_id with a unique value and outcome with success or failed. Report success only after the skill is installed and a minimal verification passes.Supply asset profile
Code review, repo analysis, testing, CI, GitHub, DevOps, and developer workflow skills.
Scenario
GitHub automation
I need my agent to triage GitHub issues, review pull requests, and summarize repository changes.
Agent fit
Claude Code + Browser agents + CLI
Codex, Claude Code, Cursor, CLI, or custom agents.
Install
Ready
npx skills add decodingai-magazine/building-a-coding-agent-from-scratch-course --skill demo-6-article-kg
Maintenance
fresh
2d since push
Risk
Needs review
Dependency or permission surface needs review
GitHub quality
347
72/100 Quality · 72/100 Trust
Coverage tags
Review notes
Dependency or permission surface needs review · Permission surface may require sandboxing
Agent adoption scorecard
These scores combine public repository metadata, OpenAgentSkill review signals, maintenance freshness, and install readiness. They are a shortlist signal, not a replacement for human review.
Quality
StrongSolid option that is likely worth shortlisting for production workflows.
Trust
Sandbox onlyUseful candidate with missing or mixed trust signals. Keep it in an isolated workspace until the outcome loop proves task fit.
Audit
Needs reviewA machine-readable review of install readiness, security metadata, maintenance, and adoption risk.
OpenAgentSkill Trust Score v5
Run only in a sandbox and compare close alternatives before using it for real work.
Stars
347 GitHub stars
Repo activity
347 stars, 88 forks
Maintenance
2d since push
License
Apache-2.0
Install
npx skills add decodingai-magazine/building-a-coding-agent-from-scratch-course --skill demo-6-article-kg
Install safety
Agent-readable metadata
Use this block or the embedded JSON to decide whether an agent should install this skill, choose an alternative, or ask for human review first.
Suited tasks
Suited agents
Install decision
Trust and risk
Outcome loop
Install command
npx skills add decodingai-magazine/building-a-coding-agent-from-scratch-course --skill demo-6-article-kgDo not use when
Alternative
168.6K Stars
npx skills add mattpocock/skills --skill code-review
Alternative
40.8K Stars
npx skills add appsmithorg/appsmith
Alternative
175.7K Stars
npx skills add mattpocock/skills --skill implement
Alternative
30.9K Stars
npx skills add vercel-labs/agent-skills --skill vercel-react-best-practices
Agent safety v2
This skill should not be selected by an agent without explicit human security review.
Do not auto-install. Inspect the source, dependencies, and permission surface first.
high
Skill metadata references terminal, CLI, shell, subprocess, or command execution workflows.
medium
Skill may drive a browser or interact with web pages.
medium
Skill likely fetches remote pages, APIs, repositories, or external services.
medium
Skill may read or write project files, documents, generated artifacts, or local workspace state.
Agent resolve plan
The Resolve API returns the selected skill, alternatives, safety policy, audit notes, install target, and copy-paste prompt an agent can follow without scraping this page.
Open JSON
/api/agent/resolve?task=Use%20demo-6-article-kg%20for%20an%20agent%20workflow&agent=codex&max_risk=medium
Resolve text
/api/agent/resolve?task=Use%20demo-6-article-kg%20for%20an%20agent%20workflow&agent=codex&max_risk=medium&format=text
Install handoff
/api/skills/decodingai-magazine-demo-6-article-kg/install
Agent should check
Copy prompt
Task: Use demo-6-article-kg in this workspace.
Resolve first: https://www.openagentskill.com/api/agent/resolve?task=Use%20demo-6-article-kg%20for%20an%20agent%20workflow&agent=codex&max_risk=medium
Review install handoff: https://www.openagentskill.com/api/skills/decodingai-magazine-demo-6-article-kg/install
Install command: npx skills add decodingai-magazine/building-a-coding-agent-from-scratch-course --skill demo-6-article-kg
Before running it, summarize audit warnings, required permissions, and the fallback skill if install is risky.Agent handoff
Use the public install endpoint to fetch the command, safety checklist, target prompts, and canonical links for this skill.
Install handoff
/api/skills/decodingai-magazine-demo-6-article-kg/install
LLM text format
/api/skills/decodingai-magazine-demo-6-article-kg/install?format=text
Find alternatives
/api/skills/search?q=demo-6-article-kg&limit=3
Agent prompt
Use demo-6-article-kg for this task. Review https://www.openagentskill.com/api/skills/decodingai-magazine-demo-6-article-kg/install, then install with: npx skills add decodingai-magazine/building-a-coding-agent-from-scratch-course --skill demo-6-article-kgRegistry metadata
This page exposes the same decision, trust, audit, use-case, and install signals through the Registry API, so agents can rank this skill without scraping the UI.
Manifest
/api/registry/manifest/decodingai-magazine-demo-6-article-kg
LLM text
/api/registry/manifest/decodingai-magazine-demo-6-article-kg?format=text
Install alias
/api/registry/install/decodingai-magazine-demo-6-article-kg
Recommend
/api/registry/recommend?task=Use%20demo-6-article-kg%20in%20an%20agent%20workflow&limit=3
Agent fit
Web scraping
Use-case tags
Platforms
Claude Code, Browser agents
Audit report
A machine-readable review of install readiness, security metadata, maintenance, and adoption risk.
Agent decision cockpit
Prototype with this skill first; keep a fallback candidate ready.
Role in stack
Fallback candidate
Primary fit
Web scraping
Trust label
Prototype first
Install path
Command ready
Use when
Evidence
review first
Implementation path
Trust profile
Useful candidate with missing or mixed trust signals. Keep it in an isolated workspace until the outcome loop proves task fit.
GitHub adoption
INFO347 GitHub stars
Stars/forks activity
INFO347 stars, 88 forks; issue activity unavailable in current metadata
Recent maintenance
PASS2d since push
License clarity
PASSApache-2.0
Good signals
Review before install
Recommended action
Run only in a sandbox and compare close alternatives before using it for real work.
Quality profile
Solid option that is likely worth shortlisting for production workflows.
Workflow fit
Collect structured data
I need my agent to scrape websites and extract structured data from pages.
Search private knowledge
I need my agent to build a RAG workflow over documents and retrieve reliable context.
Investigate faster
I need my agent to research a topic, compare sources, and produce a concise report.
Workflow fit
Scrape, clean, and reuse web data
A practical workflow for agents that crawl public pages, extract clean content, normalize data, and hand it to downstream research or RAG workflows.
Ingest, retrieve, and cite
A workflow for document-heavy agents that ingest files, create searchable knowledge, retrieve relevant context, and answer with grounded sources.
Find, compare, and synthesize
A workflow for agents that gather sources, compare claims, summarize long material, and draft useful research briefs.
Alternative shortlist
Similar skills that may fit this task.
Review a branch or diff against repository standards and the originating spec in two independent analysis passes.
Platform to build admin panels, internal tools, and dashboards. Integrates with 25+ databases and any API.
Implement work from an approved spec or ticket set, run focused and full tests, invoke code review, and commit the result to the current branch.
React and Next.js performance guidance for writing, reviewing, and refactoring production UI code.
--- name: demo-6-article-kg description: Demo skill that web-fetches two Decoding AI knowledge-graph articles, has the agent itself distill them into a typed entity/relation graph, and renders an interactive dark-themed force-directed KG into one self-contained kg.html — no graph library, no CDN. ---
The hardcore one: turn two live articles into a knowledge graph you can play with in the browser. You do all of it — you are the extractor (no NLP library) and you are the renderer (no graph library, no CDN, no framework). Two artifacts, one page that works the instant it lands.
Work the steps in order. Do not skip ahead to the HTML.
## Step 0 — paths and plan
Both artifacts go in the output directory named in the **Output default** line at the very end of these instructions — normally `.decode/outputs/`, but a destination the human named always wins. Resolve it once, call it `<OUT>`, and use `<OUT>` everywhere below:
- `<OUT>/graph.json` — the extraction - `<OUT>/kg.html` — the page
Put the pipeline in `todo_write` as five items (fetch, extract, render, verify, report) and write the real `<OUT>` path into the first one so you never re-derive it.
## Step 1 — fetch the two sources
One `web_fetch` per URL (the tool returns Markdown):
- https://www.decodingai.com/p/understanding-neo4j-graph-agent-memory-system - https://www.decodingai.com/p/ship-a-knowledge-graph-ontology-in-5-minutes
Keep the title and body prose. Ignore navigation, subscribe buttons, CTAs, comments, footers and trailing "read more" lists. If a fetch fails or comes back truncated, say so plainly and work with what you have — never invent content you did not fetch.
## Step 2 — extract one merged graph
Distill ONE graph across both articles: an entity discussed in both articles is ONE node, not two. Write it to `<OUT>/graph.json`:
```json { "nodes": [ { "id": "Ontology", "type": "concept", "desc": "one sentence in your own words" }, { "id": "Neo4j", "type": "tool", "desc": "one sentence in your own words" } ], "edges": [{ "source": "Ontology", "target": "KG drift", "label": "prevents" }] } ```
- **20–35 nodes.** The key ideas, not every noun. - `type` is exactly one of `concept` / `tool` / `pattern` / `problem`. - `desc` is one sentence of your own synthesis, not a quote. - Edges are directed; `label` is a short verb phrase (`prevents`, `stores`, `queries`). - Every `source` and `target` matches a node `id` exactly — ids are case-sensitive. - No orphans: every node has at least one edge.
Before moving on, re-read what you wrote and confirm the node count is in range, every edge endpoint exists, and no node is orphaned. Fixing it here is cheap; fixing it after the page is written is not.
## Step 3 — write the page
**One `write` call produces a finished file.** There is no second pass. The data goes in as a literal — the actual `{ "nodes": [...], "edges": [...] }` you just wrote to `graph.json`, copied in full. Never emit `{{GRAPH}}`, `<DATA>`, `/* graph here */`, `...`, or any token you intend to substitute later, and never write an unexpanded template string. If you catch yourself planning to "fill in the data next", stop and write the whole file instead.
Author `<OUT>/kg.html` in this order — each section complete before the next:
1. `<head>`: `<title>`, and one `<style>` block. No external stylesheet, script, or font. 2. `<header>`: the page title, the two article URLs as links, and the type legend (a colored dot plus the type name, four of them). 3. An empty `<svg>` filling the viewport, and an empty detail card `<div>` positioned on the right. 4. One `<script>` block, in this order: the data, the model, the drawing, the simulation, the interactions, the start.
### What goes in the script, in order
**Data.** `const GRAPH = ` followed by the literal object. This is the first statement in the block.
**Model.** Map each node to an object carrying `x`, `y`, `vx`, `vy` and `degree`. Seed positions on a circle around the viewport center — never all at one point, or the repulsion divides by zero. Resolve every edge's `source`/`target` string to its node object once, up front, so the loop never searches by id. Count degree while you do it. Build a neighbor set per node id for the hover step.
**Drawing.** Create the SVG elements once, before the loop starts: a `<line>` and a small `<text>` per edge, and a `<g>` per node holding a `<circle>` and a `<text>` label. Keep references to them. The loop only updates coordinates and classes — it never creates or destroys elements. Order the groups edges → edge labels → nodes so nodes sit on top. Radius is `6 + min(9, degree * 1.4)`; fill is the node's type color.
**Simulation.** A hand-rolled force simulation in vanilla JS — no library, no framework. One `tick()` applying three forces, then integrating:
- _Repulsion_, every node pair: magnitude `5000 / distanceSquared`, pushing apart along the line between them. Clamp `distanceSquared` to a minimum of 1 and jitter coincident nodes. - _Springs_, along each edge: pull proportional to `(distance - 110) * 0.01`. - _Centering_: nudge each node toward the viewport center by `0.0015` of its offset. - Integrate: multiply velocity by `0.86` damping, add to position, clamp inside the viewport with a margin so nothing hides under the header.
Scale all forces by an `alpha` that starts at 1 and decays ~0.5% per tick toward a floor of about 0.06 — that floor is what keeps the layout gently alive instead of frozen. Run ~250 ticks before the first paint so the page opens settled, then `requestAnimationFrame` a loop of tick + draw.
**Interactions.**
- _Drag_: `pointerdown` on a node pins it and captures the pointer; `pointermove` sets its position and zeroes its velocity; `pointerup` unpins and releases. Bump `alpha` on grab so the graph re-settles around it. - _Hover_: highlight the node and its edges, dim every non-neighbor, and fill the detail card with the node's type, id, `desc`, and its relations — outgoing as `label → target`, incoming as `source label →`. Clear it on leave, but not mid-drag.
**Design.** Dark, minimal, no framework: CSS variables for the palette and the four type colors, a system font stack, full-viewport canvas, sticky translucent header, the detail card as a fixed rounded panel, a subtle glow on the hovered node, and dimming via opacity.
## Step 4 — verify
One `bash` call. All four must hold:
```bash python3 -m json.tool <OUT>/graph.json > /dev/null && echo "json ok" grep -c 'src="http' <OUT>/kg.html # 0 — nothing loaded from the network grep -Ec '\{\{|<DATA>|graph here|\.\.\.' <OUT>/kg.html # 0 — no leftover placeholder grep -c 'const GRAPH' <OUT>/kg.html # 1 — the data is inlined ```
Then confirm the page carries the whole graph: count `"id":` occurrences in `kg.html` and in `graph.json` and check they match. Any mismatch means the data was truncated — rewrite the file in full, do not patch it.
## Step 5 — report
Node count by type, edge count, the three most-connected entities, one cross-article relation that surprised you, and the command to open it:
```bash open <OUT>/kg.html ```
Source provenance
Decision snapshot
recent repository activity
Audit
Install and adoption review
Agent-proven evidence
Outcome reports after resolve, review, install, and one narrow run.
No agent outcome data yet. The first agent run can report success, setup needs, risk blocks, failure, or not-relevant through /api/agent/outcome.
Install
Free and open source. Review the report before installing into production agents.
Growth loop
Scenario-led draft for demo-6-article-kg, ready for a manual X post.
demo-6-article-kg: Demo skill that web-fetches two Decoding AI knowledge-graph articles, has the agent itself di... 347 stars https://www.openagentskill.com/skills/decodingai-magazine-demo-6-article-kg?ref=x
Listing + install path for demo-6-article-kg: https://www.openagentskill.com/skills/decodingai-magazine-demo-6-article-kg?ref=x Install: npx skills add decodingai-magazine/building-a-coding-agent-from-scratch-course --...
Listing source
This listing was indexed from public sources and is not marked official until a maintainer claim is approved.
Attribution links to the public repository or creator profile. Creators can claim the listing to update ownership signals.
Claim this skillOwner claim
This Registry indexed listing is attributed to decodingai-magazine but is not marked official yet. Claim it to add a verified owner signal and make future launch, install, and audit updates easier to trust.
Creator backlink kit
Show the canonical listing, current trust and audit signals, and real Agent-Proven evidence where developers evaluate the repository.
[](https://www.openagentskill.com/skills/decodingai-magazine-demo-6-article-kg?ref=github&utm_source=github&utm_medium=referral&utm_campaign=creator_badge)
[](https://www.openagentskill.com/skills/decodingai-magazine-demo-6-article-kg?ref=github&utm_source=github&utm_medium=referral&utm_campaign=creator_badge)
[](https://www.openagentskill.com/skills/decodingai-magazine-demo-6-article-kg/audit)
[](https://www.openagentskill.com/skills/decodingai-magazine-demo-6-article-kg?ref=github&utm_source=github&utm_medium=referral&utm_campaign=creator_badge)decodingai-magazine
@decodingai-magazine
Share whether this skill looks useful for your agent workflow. Aggregated feedback improves rankings over time.
Sandbox only
Code Review
Review a branch or diff against repository standards and the originating spec in two independent analysis passes.
168.6K StarsAppsmith
Platform to build admin panels, internal tools, and dashboards. Integrates with 25+ databases and any API.
40.8K StarsImplement
Implement work from an approved spec or ticket set, run focused and full tests, invoke code review, and commit the result to the current branch.
175.7K StarsVercel React Best Practices
React and Next.js performance guidance for writing, reviewing, and refactoring production UI code.
30.9K StarsSandbox only
Install targets
Codex install prompt
Install the "demo-6-article-kg" agent skill from https://github.com/decodingai-magazine/building-a-coding-agent-from-scratch-course/tree/main/.decode/skills/demo-6-article-kg. Read its SKILL.md or equivalent instructions first, install only the files needed for this workspace, and summarize any required setup before using it. Skill purpose: Demo skill that web-fetches two Decoding AI knowledge-graph articles, has the agent itself distill them into a typed entity/relation graph, and renders an interactive dark-themed force-directed KG into one self-contained kg.html — no graph library, no CDN. After the install attempt, report the result to https://www.openagentskill.com/api/agent/outcome with POST JSON {"event_id":"install_<unique-id>","skill_slug":"decodingai-magazine-demo-6-article-kg","task":"Install demo-6-article-kg","agent":"codex","outcome":"success","install_used":true}. Replace event_id with a unique value and outcome with success or failed. Report success only after the skill is installed and a minimal verification passes.Supply asset profile
Code review, repo analysis, testing, CI, GitHub, DevOps, and developer workflow skills.
Scenario
GitHub automation
I need my agent to triage GitHub issues, review pull requests, and summarize repository changes.
Agent fit
Claude Code + Browser agents + CLI
Codex, Claude Code, Cursor, CLI, or custom agents.
Install
Ready
npx skills add decodingai-magazine/building-a-coding-agent-from-scratch-course --skill demo-6-article-kg
Maintenance
fresh
2d since push
Risk
Needs review
Dependency or permission surface needs review
GitHub quality
347
72/100 Quality · 72/100 Trust
Coverage tags
Review notes
Dependency or permission surface needs review · Permission surface may require sandboxing
Agent adoption scorecard
These scores combine public repository metadata, OpenAgentSkill review signals, maintenance freshness, and install readiness. They are a shortlist signal, not a replacement for human review.
Quality
StrongSolid option that is likely worth shortlisting for production workflows.
Trust
Sandbox onlyUseful candidate with missing or mixed trust signals. Keep it in an isolated workspace until the outcome loop proves task fit.
Audit
Needs reviewA machine-readable review of install readiness, security metadata, maintenance, and adoption risk.
OpenAgentSkill Trust Score v5
Run only in a sandbox and compare close alternatives before using it for real work.
Stars
347 GitHub stars
Repo activity
347 stars, 88 forks
Maintenance
2d since push
License
Apache-2.0
Install
npx skills add decodingai-magazine/building-a-coding-agent-from-scratch-course --skill demo-6-article-kg
Install safety
Agent-readable metadata
Use this block or the embedded JSON to decide whether an agent should install this skill, choose an alternative, or ask for human review first.
Suited tasks
Suited agents
Install decision
Trust and risk
Outcome loop
Install command
npx skills add decodingai-magazine/building-a-coding-agent-from-scratch-course --skill demo-6-article-kgDo not use when
Alternative
168.6K Stars
npx skills add mattpocock/skills --skill code-review
Alternative
40.8K Stars
npx skills add appsmithorg/appsmith
Alternative
175.7K Stars
npx skills add mattpocock/skills --skill implement
Alternative
30.9K Stars
npx skills add vercel-labs/agent-skills --skill vercel-react-best-practices
Agent safety v2
This skill should not be selected by an agent without explicit human security review.
Do not auto-install. Inspect the source, dependencies, and permission surface first.
high
Skill metadata references terminal, CLI, shell, subprocess, or command execution workflows.
medium
Skill may drive a browser or interact with web pages.
medium
Skill likely fetches remote pages, APIs, repositories, or external services.
medium
Skill may read or write project files, documents, generated artifacts, or local workspace state.
Agent resolve plan
The Resolve API returns the selected skill, alternatives, safety policy, audit notes, install target, and copy-paste prompt an agent can follow without scraping this page.
Open JSON
/api/agent/resolve?task=Use%20demo-6-article-kg%20for%20an%20agent%20workflow&agent=codex&max_risk=medium
Resolve text
/api/agent/resolve?task=Use%20demo-6-article-kg%20for%20an%20agent%20workflow&agent=codex&max_risk=medium&format=text
Install handoff
/api/skills/decodingai-magazine-demo-6-article-kg/install
Agent should check
Copy prompt
Task: Use demo-6-article-kg in this workspace.
Resolve first: https://www.openagentskill.com/api/agent/resolve?task=Use%20demo-6-article-kg%20for%20an%20agent%20workflow&agent=codex&max_risk=medium
Review install handoff: https://www.openagentskill.com/api/skills/decodingai-magazine-demo-6-article-kg/install
Install command: npx skills add decodingai-magazine/building-a-coding-agent-from-scratch-course --skill demo-6-article-kg
Before running it, summarize audit warnings, required permissions, and the fallback skill if install is risky.Agent handoff
Use the public install endpoint to fetch the command, safety checklist, target prompts, and canonical links for this skill.
Install handoff
/api/skills/decodingai-magazine-demo-6-article-kg/install
LLM text format
/api/skills/decodingai-magazine-demo-6-article-kg/install?format=text
Find alternatives
/api/skills/search?q=demo-6-article-kg&limit=3
Agent prompt
Use demo-6-article-kg for this task. Review https://www.openagentskill.com/api/skills/decodingai-magazine-demo-6-article-kg/install, then install with: npx skills add decodingai-magazine/building-a-coding-agent-from-scratch-course --skill demo-6-article-kgRegistry metadata
This page exposes the same decision, trust, audit, use-case, and install signals through the Registry API, so agents can rank this skill without scraping the UI.
Manifest
/api/registry/manifest/decodingai-magazine-demo-6-article-kg
LLM text
/api/registry/manifest/decodingai-magazine-demo-6-article-kg?format=text
Install alias
/api/registry/install/decodingai-magazine-demo-6-article-kg
Recommend
/api/registry/recommend?task=Use%20demo-6-article-kg%20in%20an%20agent%20workflow&limit=3
Agent fit
Web scraping
Use-case tags
Platforms
Claude Code, Browser agents
Audit report
A machine-readable review of install readiness, security metadata, maintenance, and adoption risk.
Agent decision cockpit
Prototype with this skill first; keep a fallback candidate ready.
Role in stack
Fallback candidate
Primary fit
Web scraping
Trust label
Prototype first
Install path
Command ready
Use when
Evidence
review first
Implementation path
Trust profile
Useful candidate with missing or mixed trust signals. Keep it in an isolated workspace until the outcome loop proves task fit.
GitHub adoption
INFO347 GitHub stars
Stars/forks activity
INFO347 stars, 88 forks; issue activity unavailable in current metadata
Recent maintenance
PASS2d since push
License clarity
PASSApache-2.0
Good signals
Review before install
Recommended action
Run only in a sandbox and compare close alternatives before using it for real work.
Quality profile
Solid option that is likely worth shortlisting for production workflows.
Workflow fit
Collect structured data
I need my agent to scrape websites and extract structured data from pages.
Search private knowledge
I need my agent to build a RAG workflow over documents and retrieve reliable context.
Investigate faster
I need my agent to research a topic, compare sources, and produce a concise report.
Workflow fit
Scrape, clean, and reuse web data
A practical workflow for agents that crawl public pages, extract clean content, normalize data, and hand it to downstream research or RAG workflows.
Ingest, retrieve, and cite
A workflow for document-heavy agents that ingest files, create searchable knowledge, retrieve relevant context, and answer with grounded sources.
Find, compare, and synthesize
A workflow for agents that gather sources, compare claims, summarize long material, and draft useful research briefs.
Alternative shortlist
Similar skills that may fit this task.
Review a branch or diff against repository standards and the originating spec in two independent analysis passes.
Platform to build admin panels, internal tools, and dashboards. Integrates with 25+ databases and any API.
Implement work from an approved spec or ticket set, run focused and full tests, invoke code review, and commit the result to the current branch.
React and Next.js performance guidance for writing, reviewing, and refactoring production UI code.
--- name: demo-6-article-kg description: Demo skill that web-fetches two Decoding AI knowledge-graph articles, has the agent itself distill them into a typed entity/relation graph, and renders an interactive dark-themed force-directed KG into one self-contained kg.html — no graph library, no CDN. ---
The hardcore one: turn two live articles into a knowledge graph you can play with in the browser. You do all of it — you are the extractor (no NLP library) and you are the renderer (no graph library, no CDN, no framework). Two artifacts, one page that works the instant it lands.
Work the steps in order. Do not skip ahead to the HTML.
## Step 0 — paths and plan
Both artifacts go in the output directory named in the **Output default** line at the very end of these instructions — normally `.decode/outputs/`, but a destination the human named always wins. Resolve it once, call it `<OUT>`, and use `<OUT>` everywhere below:
- `<OUT>/graph.json` — the extraction - `<OUT>/kg.html` — the page
Put the pipeline in `todo_write` as five items (fetch, extract, render, verify, report) and write the real `<OUT>` path into the first one so you never re-derive it.
## Step 1 — fetch the two sources
One `web_fetch` per URL (the tool returns Markdown):
- https://www.decodingai.com/p/understanding-neo4j-graph-agent-memory-system - https://www.decodingai.com/p/ship-a-knowledge-graph-ontology-in-5-minutes
Keep the title and body prose. Ignore navigation, subscribe buttons, CTAs, comments, footers and trailing "read more" lists. If a fetch fails or comes back truncated, say so plainly and work with what you have — never invent content you did not fetch.
## Step 2 — extract one merged graph
Distill ONE graph across both articles: an entity discussed in both articles is ONE node, not two. Write it to `<OUT>/graph.json`:
```json { "nodes": [ { "id": "Ontology", "type": "concept", "desc": "one sentence in your own words" }, { "id": "Neo4j", "type": "tool", "desc": "one sentence in your own words" } ], "edges": [{ "source": "Ontology", "target": "KG drift", "label": "prevents" }] } ```
- **20–35 nodes.** The key ideas, not every noun. - `type` is exactly one of `concept` / `tool` / `pattern` / `problem`. - `desc` is one sentence of your own synthesis, not a quote. - Edges are directed; `label` is a short verb phrase (`prevents`, `stores`, `queries`). - Every `source` and `target` matches a node `id` exactly — ids are case-sensitive. - No orphans: every node has at least one edge.
Before moving on, re-read what you wrote and confirm the node count is in range, every edge endpoint exists, and no node is orphaned. Fixing it here is cheap; fixing it after the page is written is not.
## Step 3 — write the page
**One `write` call produces a finished file.** There is no second pass. The data goes in as a literal — the actual `{ "nodes": [...], "edges": [...] }` you just wrote to `graph.json`, copied in full. Never emit `{{GRAPH}}`, `<DATA>`, `/* graph here */`, `...`, or any token you intend to substitute later, and never write an unexpanded template string. If you catch yourself planning to "fill in the data next", stop and write the whole file instead.
Author `<OUT>/kg.html` in this order — each section complete before the next:
1. `<head>`: `<title>`, and one `<style>` block. No external stylesheet, script, or font. 2. `<header>`: the page title, the two article URLs as links, and the type legend (a colored dot plus the type name, four of them). 3. An empty `<svg>` filling the viewport, and an empty detail card `<div>` positioned on the right. 4. One `<script>` block, in this order: the data, the model, the drawing, the simulation, the interactions, the start.
### What goes in the script, in order
**Data.** `const GRAPH = ` followed by the literal object. This is the first statement in the block.
**Model.** Map each node to an object carrying `x`, `y`, `vx`, `vy` and `degree`. Seed positions on a circle around the viewport center — never all at one point, or the repulsion divides by zero. Resolve every edge's `source`/`target` string to its node object once, up front, so the loop never searches by id. Count degree while you do it. Build a neighbor set per node id for the hover step.
**Drawing.** Create the SVG elements once, before the loop starts: a `<line>` and a small `<text>` per edge, and a `<g>` per node holding a `<circle>` and a `<text>` label. Keep references to them. The loop only updates coordinates and classes — it never creates or destroys elements. Order the groups edges → edge labels → nodes so nodes sit on top. Radius is `6 + min(9, degree * 1.4)`; fill is the node's type color.
**Simulation.** A hand-rolled force simulation in vanilla JS — no library, no framework. One `tick()` applying three forces, then integrating:
- _Repulsion_, every node pair: magnitude `5000 / distanceSquared`, pushing apart along the line between them. Clamp `distanceSquared` to a minimum of 1 and jitter coincident nodes. - _Springs_, along each edge: pull proportional to `(distance - 110) * 0.01`. - _Centering_: nudge each node toward the viewport center by `0.0015` of its offset. - Integrate: multiply velocity by `0.86` damping, add to position, clamp inside the viewport with a margin so nothing hides under the header.
Scale all forces by an `alpha` that starts at 1 and decays ~0.5% per tick toward a floor of about 0.06 — that floor is what keeps the layout gently alive instead of frozen. Run ~250 ticks before the first paint so the page opens settled, then `requestAnimationFrame` a loop of tick + draw.
**Interactions.**
- _Drag_: `pointerdown` on a node pins it and captures the pointer; `pointermove` sets its position and zeroes its velocity; `pointerup` unpins and releases. Bump `alpha` on grab so the graph re-settles around it. - _Hover_: highlight the node and its edges, dim every non-neighbor, and fill the detail card with the node's type, id, `desc`, and its relations — outgoing as `label → target`, incoming as `source label →`. Clear it on leave, but not mid-drag.
**Design.** Dark, minimal, no framework: CSS variables for the palette and the four type colors, a system font stack, full-viewport canvas, sticky translucent header, the detail card as a fixed rounded panel, a subtle glow on the hovered node, and dimming via opacity.
## Step 4 — verify
One `bash` call. All four must hold:
```bash python3 -m json.tool <OUT>/graph.json > /dev/null && echo "json ok" grep -c 'src="http' <OUT>/kg.html # 0 — nothing loaded from the network grep -Ec '\{\{|<DATA>|graph here|\.\.\.' <OUT>/kg.html # 0 — no leftover placeholder grep -c 'const GRAPH' <OUT>/kg.html # 1 — the data is inlined ```
Then confirm the page carries the whole graph: count `"id":` occurrences in `kg.html` and in `graph.json` and check they match. Any mismatch means the data was truncated — rewrite the file in full, do not patch it.
## Step 5 — report
Node count by type, edge count, the three most-connected entities, one cross-article relation that surprised you, and the command to open it:
```bash open <OUT>/kg.html ```
Source provenance
Decision snapshot
recent repository activity
Audit
Install and adoption review
Agent-proven evidence
Outcome reports after resolve, review, install, and one narrow run.
No agent outcome data yet. The first agent run can report success, setup needs, risk blocks, failure, or not-relevant through /api/agent/outcome.
Install
Free and open source. Review the report before installing into production agents.
Growth loop
Scenario-led draft for demo-6-article-kg, ready for a manual X post.
demo-6-article-kg: Demo skill that web-fetches two Decoding AI knowledge-graph articles, has the agent itself di... 347 stars https://www.openagentskill.com/skills/decodingai-magazine-demo-6-article-kg?ref=x
Listing + install path for demo-6-article-kg: https://www.openagentskill.com/skills/decodingai-magazine-demo-6-article-kg?ref=x Install: npx skills add decodingai-magazine/building-a-coding-agent-from-scratch-course --...
Listing source
This listing was indexed from public sources and is not marked official until a maintainer claim is approved.
Attribution links to the public repository or creator profile. Creators can claim the listing to update ownership signals.
Claim this skillOwner claim
This Registry indexed listing is attributed to decodingai-magazine but is not marked official yet. Claim it to add a verified owner signal and make future launch, install, and audit updates easier to trust.
Creator backlink kit
Show the canonical listing, current trust and audit signals, and real Agent-Proven evidence where developers evaluate the repository.
[](https://www.openagentskill.com/skills/decodingai-magazine-demo-6-article-kg?ref=github&utm_source=github&utm_medium=referral&utm_campaign=creator_badge)
[](https://www.openagentskill.com/skills/decodingai-magazine-demo-6-article-kg?ref=github&utm_source=github&utm_medium=referral&utm_campaign=creator_badge)
[](https://www.openagentskill.com/skills/decodingai-magazine-demo-6-article-kg/audit)
[](https://www.openagentskill.com/skills/decodingai-magazine-demo-6-article-kg?ref=github&utm_source=github&utm_medium=referral&utm_campaign=creator_badge)decodingai-magazine
@decodingai-magazine
Share whether this skill looks useful for your agent workflow. Aggregated feedback improves rankings over time.
Sandbox only
Code Review
Review a branch or diff against repository standards and the originating spec in two independent analysis passes.
168.6K StarsAppsmith
Platform to build admin panels, internal tools, and dashboards. Integrates with 25+ databases and any API.
40.8K StarsImplement
Implement work from an approved spec or ticket set, run focused and full tests, invoke code review, and commit the result to the current branch.
175.7K StarsVercel React Best Practices
React and Next.js performance guidance for writing, reviewing, and refactoring production UI code.
30.9K StarsSandbox only
Install targets
Codex install prompt
Install the "demo-6-article-kg" agent skill from https://github.com/decodingai-magazine/building-a-coding-agent-from-scratch-course/tree/main/.decode/skills/demo-6-article-kg. Read its SKILL.md or equivalent instructions first, install only the files needed for this workspace, and summarize any required setup before using it. Skill purpose: Demo skill that web-fetches two Decoding AI knowledge-graph articles, has the agent itself distill them into a typed entity/relation graph, and renders an interactive dark-themed force-directed KG into one self-contained kg.html — no graph library, no CDN. After the install attempt, report the result to https://www.openagentskill.com/api/agent/outcome with POST JSON {"event_id":"install_<unique-id>","skill_slug":"decodingai-magazine-demo-6-article-kg","task":"Install demo-6-article-kg","agent":"codex","outcome":"success","install_used":true}. Replace event_id with a unique value and outcome with success or failed. Report success only after the skill is installed and a minimal verification passes.Supply asset profile
Code review, repo analysis, testing, CI, GitHub, DevOps, and developer workflow skills.
Scenario
GitHub automation
I need my agent to triage GitHub issues, review pull requests, and summarize repository changes.
Agent fit
Claude Code + Browser agents + CLI
Codex, Claude Code, Cursor, CLI, or custom agents.
Install
Ready
npx skills add decodingai-magazine/building-a-coding-agent-from-scratch-course --skill demo-6-article-kg
Maintenance
fresh
2d since push
Risk
Needs review
Dependency or permission surface needs review
GitHub quality
347
72/100 Quality · 72/100 Trust
Coverage tags
Review notes
Dependency or permission surface needs review · Permission surface may require sandboxing
Agent adoption scorecard
These scores combine public repository metadata, OpenAgentSkill review signals, maintenance freshness, and install readiness. They are a shortlist signal, not a replacement for human review.
Quality
StrongSolid option that is likely worth shortlisting for production workflows.
Trust
Sandbox onlyUseful candidate with missing or mixed trust signals. Keep it in an isolated workspace until the outcome loop proves task fit.
Audit
Needs reviewA machine-readable review of install readiness, security metadata, maintenance, and adoption risk.
OpenAgentSkill Trust Score v5
Run only in a sandbox and compare close alternatives before using it for real work.
Stars
347 GitHub stars
Repo activity
347 stars, 88 forks
Maintenance
2d since push
License
Apache-2.0
Install
npx skills add decodingai-magazine/building-a-coding-agent-from-scratch-course --skill demo-6-article-kg
Install safety
Agent-readable metadata
Use this block or the embedded JSON to decide whether an agent should install this skill, choose an alternative, or ask for human review first.
Suited tasks
Suited agents
Install decision
Trust and risk
Outcome loop
Install command
npx skills add decodingai-magazine/building-a-coding-agent-from-scratch-course --skill demo-6-article-kgDo not use when
Alternative
168.6K Stars
npx skills add mattpocock/skills --skill code-review
Alternative
40.8K Stars
npx skills add appsmithorg/appsmith
Alternative
175.7K Stars
npx skills add mattpocock/skills --skill implement
Alternative
30.9K Stars
npx skills add vercel-labs/agent-skills --skill vercel-react-best-practices
Agent safety v2
This skill should not be selected by an agent without explicit human security review.
Do not auto-install. Inspect the source, dependencies, and permission surface first.
high
Skill metadata references terminal, CLI, shell, subprocess, or command execution workflows.
medium
Skill may drive a browser or interact with web pages.
medium
Skill likely fetches remote pages, APIs, repositories, or external services.
medium
Skill may read or write project files, documents, generated artifacts, or local workspace state.
Agent resolve plan
The Resolve API returns the selected skill, alternatives, safety policy, audit notes, install target, and copy-paste prompt an agent can follow without scraping this page.
Open JSON
/api/agent/resolve?task=Use%20demo-6-article-kg%20for%20an%20agent%20workflow&agent=codex&max_risk=medium
Resolve text
/api/agent/resolve?task=Use%20demo-6-article-kg%20for%20an%20agent%20workflow&agent=codex&max_risk=medium&format=text
Install handoff
/api/skills/decodingai-magazine-demo-6-article-kg/install
Agent should check
Copy prompt
Task: Use demo-6-article-kg in this workspace.
Resolve first: https://www.openagentskill.com/api/agent/resolve?task=Use%20demo-6-article-kg%20for%20an%20agent%20workflow&agent=codex&max_risk=medium
Review install handoff: https://www.openagentskill.com/api/skills/decodingai-magazine-demo-6-article-kg/install
Install command: npx skills add decodingai-magazine/building-a-coding-agent-from-scratch-course --skill demo-6-article-kg
Before running it, summarize audit warnings, required permissions, and the fallback skill if install is risky.Agent handoff
Use the public install endpoint to fetch the command, safety checklist, target prompts, and canonical links for this skill.
Install handoff
/api/skills/decodingai-magazine-demo-6-article-kg/install
LLM text format
/api/skills/decodingai-magazine-demo-6-article-kg/install?format=text
Find alternatives
/api/skills/search?q=demo-6-article-kg&limit=3
Agent prompt
Use demo-6-article-kg for this task. Review https://www.openagentskill.com/api/skills/decodingai-magazine-demo-6-article-kg/install, then install with: npx skills add decodingai-magazine/building-a-coding-agent-from-scratch-course --skill demo-6-article-kgRegistry metadata
This page exposes the same decision, trust, audit, use-case, and install signals through the Registry API, so agents can rank this skill without scraping the UI.
Manifest
/api/registry/manifest/decodingai-magazine-demo-6-article-kg
LLM text
/api/registry/manifest/decodingai-magazine-demo-6-article-kg?format=text
Install alias
/api/registry/install/decodingai-magazine-demo-6-article-kg
Recommend
/api/registry/recommend?task=Use%20demo-6-article-kg%20in%20an%20agent%20workflow&limit=3
Agent fit
Web scraping
Use-case tags
Platforms
Claude Code, Browser agents
Audit report
A machine-readable review of install readiness, security metadata, maintenance, and adoption risk.
Agent decision cockpit
Prototype with this skill first; keep a fallback candidate ready.
Role in stack
Fallback candidate
Primary fit
Web scraping
Trust label
Prototype first
Install path
Command ready
Use when
Evidence
review first
Implementation path
Trust profile
Useful candidate with missing or mixed trust signals. Keep it in an isolated workspace until the outcome loop proves task fit.
GitHub adoption
INFO347 GitHub stars
Stars/forks activity
INFO347 stars, 88 forks; issue activity unavailable in current metadata
Recent maintenance
PASS2d since push
License clarity
PASSApache-2.0
Good signals
Review before install
Recommended action
Run only in a sandbox and compare close alternatives before using it for real work.
Quality profile
Solid option that is likely worth shortlisting for production workflows.
Workflow fit
Collect structured data
I need my agent to scrape websites and extract structured data from pages.
Search private knowledge
I need my agent to build a RAG workflow over documents and retrieve reliable context.
Investigate faster
I need my agent to research a topic, compare sources, and produce a concise report.
Workflow fit
Scrape, clean, and reuse web data
A practical workflow for agents that crawl public pages, extract clean content, normalize data, and hand it to downstream research or RAG workflows.
Ingest, retrieve, and cite
A workflow for document-heavy agents that ingest files, create searchable knowledge, retrieve relevant context, and answer with grounded sources.
Find, compare, and synthesize
A workflow for agents that gather sources, compare claims, summarize long material, and draft useful research briefs.
Alternative shortlist
Similar skills that may fit this task.
Review a branch or diff against repository standards and the originating spec in two independent analysis passes.
Platform to build admin panels, internal tools, and dashboards. Integrates with 25+ databases and any API.
Implement work from an approved spec or ticket set, run focused and full tests, invoke code review, and commit the result to the current branch.
React and Next.js performance guidance for writing, reviewing, and refactoring production UI code.
--- name: demo-6-article-kg description: Demo skill that web-fetches two Decoding AI knowledge-graph articles, has the agent itself distill them into a typed entity/relation graph, and renders an interactive dark-themed force-directed KG into one self-contained kg.html — no graph library, no CDN. ---
The hardcore one: turn two live articles into a knowledge graph you can play with in the browser. You do all of it — you are the extractor (no NLP library) and you are the renderer (no graph library, no CDN, no framework). Two artifacts, one page that works the instant it lands.
Work the steps in order. Do not skip ahead to the HTML.
## Step 0 — paths and plan
Both artifacts go in the output directory named in the **Output default** line at the very end of these instructions — normally `.decode/outputs/`, but a destination the human named always wins. Resolve it once, call it `<OUT>`, and use `<OUT>` everywhere below:
- `<OUT>/graph.json` — the extraction - `<OUT>/kg.html` — the page
Put the pipeline in `todo_write` as five items (fetch, extract, render, verify, report) and write the real `<OUT>` path into the first one so you never re-derive it.
## Step 1 — fetch the two sources
One `web_fetch` per URL (the tool returns Markdown):
- https://www.decodingai.com/p/understanding-neo4j-graph-agent-memory-system - https://www.decodingai.com/p/ship-a-knowledge-graph-ontology-in-5-minutes
Keep the title and body prose. Ignore navigation, subscribe buttons, CTAs, comments, footers and trailing "read more" lists. If a fetch fails or comes back truncated, say so plainly and work with what you have — never invent content you did not fetch.
## Step 2 — extract one merged graph
Distill ONE graph across both articles: an entity discussed in both articles is ONE node, not two. Write it to `<OUT>/graph.json`:
```json { "nodes": [ { "id": "Ontology", "type": "concept", "desc": "one sentence in your own words" }, { "id": "Neo4j", "type": "tool", "desc": "one sentence in your own words" } ], "edges": [{ "source": "Ontology", "target": "KG drift", "label": "prevents" }] } ```
- **20–35 nodes.** The key ideas, not every noun. - `type` is exactly one of `concept` / `tool` / `pattern` / `problem`. - `desc` is one sentence of your own synthesis, not a quote. - Edges are directed; `label` is a short verb phrase (`prevents`, `stores`, `queries`). - Every `source` and `target` matches a node `id` exactly — ids are case-sensitive. - No orphans: every node has at least one edge.
Before moving on, re-read what you wrote and confirm the node count is in range, every edge endpoint exists, and no node is orphaned. Fixing it here is cheap; fixing it after the page is written is not.
## Step 3 — write the page
**One `write` call produces a finished file.** There is no second pass. The data goes in as a literal — the actual `{ "nodes": [...], "edges": [...] }` you just wrote to `graph.json`, copied in full. Never emit `{{GRAPH}}`, `<DATA>`, `/* graph here */`, `...`, or any token you intend to substitute later, and never write an unexpanded template string. If you catch yourself planning to "fill in the data next", stop and write the whole file instead.
Author `<OUT>/kg.html` in this order — each section complete before the next:
1. `<head>`: `<title>`, and one `<style>` block. No external stylesheet, script, or font. 2. `<header>`: the page title, the two article URLs as links, and the type legend (a colored dot plus the type name, four of them). 3. An empty `<svg>` filling the viewport, and an empty detail card `<div>` positioned on the right. 4. One `<script>` block, in this order: the data, the model, the drawing, the simulation, the interactions, the start.
### What goes in the script, in order
**Data.** `const GRAPH = ` followed by the literal object. This is the first statement in the block.
**Model.** Map each node to an object carrying `x`, `y`, `vx`, `vy` and `degree`. Seed positions on a circle around the viewport center — never all at one point, or the repulsion divides by zero. Resolve every edge's `source`/`target` string to its node object once, up front, so the loop never searches by id. Count degree while you do it. Build a neighbor set per node id for the hover step.
**Drawing.** Create the SVG elements once, before the loop starts: a `<line>` and a small `<text>` per edge, and a `<g>` per node holding a `<circle>` and a `<text>` label. Keep references to them. The loop only updates coordinates and classes — it never creates or destroys elements. Order the groups edges → edge labels → nodes so nodes sit on top. Radius is `6 + min(9, degree * 1.4)`; fill is the node's type color.
**Simulation.** A hand-rolled force simulation in vanilla JS — no library, no framework. One `tick()` applying three forces, then integrating:
- _Repulsion_, every node pair: magnitude `5000 / distanceSquared`, pushing apart along the line between them. Clamp `distanceSquared` to a minimum of 1 and jitter coincident nodes. - _Springs_, along each edge: pull proportional to `(distance - 110) * 0.01`. - _Centering_: nudge each node toward the viewport center by `0.0015` of its offset. - Integrate: multiply velocity by `0.86` damping, add to position, clamp inside the viewport with a margin so nothing hides under the header.
Scale all forces by an `alpha` that starts at 1 and decays ~0.5% per tick toward a floor of about 0.06 — that floor is what keeps the layout gently alive instead of frozen. Run ~250 ticks before the first paint so the page opens settled, then `requestAnimationFrame` a loop of tick + draw.
**Interactions.**
- _Drag_: `pointerdown` on a node pins it and captures the pointer; `pointermove` sets its position and zeroes its velocity; `pointerup` unpins and releases. Bump `alpha` on grab so the graph re-settles around it. - _Hover_: highlight the node and its edges, dim every non-neighbor, and fill the detail card with the node's type, id, `desc`, and its relations — outgoing as `label → target`, incoming as `source label →`. Clear it on leave, but not mid-drag.
**Design.** Dark, minimal, no framework: CSS variables for the palette and the four type colors, a system font stack, full-viewport canvas, sticky translucent header, the detail card as a fixed rounded panel, a subtle glow on the hovered node, and dimming via opacity.
## Step 4 — verify
One `bash` call. All four must hold:
```bash python3 -m json.tool <OUT>/graph.json > /dev/null && echo "json ok" grep -c 'src="http' <OUT>/kg.html # 0 — nothing loaded from the network grep -Ec '\{\{|<DATA>|graph here|\.\.\.' <OUT>/kg.html # 0 — no leftover placeholder grep -c 'const GRAPH' <OUT>/kg.html # 1 — the data is inlined ```
Then confirm the page carries the whole graph: count `"id":` occurrences in `kg.html` and in `graph.json` and check they match. Any mismatch means the data was truncated — rewrite the file in full, do not patch it.
## Step 5 — report
Node count by type, edge count, the three most-connected entities, one cross-article relation that surprised you, and the command to open it:
```bash open <OUT>/kg.html ```
Source provenance
Decision snapshot
recent repository activity
Audit
Install and adoption review
Agent-proven evidence
Outcome reports after resolve, review, install, and one narrow run.
No agent outcome data yet. The first agent run can report success, setup needs, risk blocks, failure, or not-relevant through /api/agent/outcome.
Install
Free and open source. Review the report before installing into production agents.
Growth loop
Scenario-led draft for demo-6-article-kg, ready for a manual X post.
demo-6-article-kg: Demo skill that web-fetches two Decoding AI knowledge-graph articles, has the agent itself di... 347 stars https://www.openagentskill.com/skills/decodingai-magazine-demo-6-article-kg?ref=x
Listing + install path for demo-6-article-kg: https://www.openagentskill.com/skills/decodingai-magazine-demo-6-article-kg?ref=x Install: npx skills add decodingai-magazine/building-a-coding-agent-from-scratch-course --...
Listing source
This listing was indexed from public sources and is not marked official until a maintainer claim is approved.
Attribution links to the public repository or creator profile. Creators can claim the listing to update ownership signals.
Claim this skillOwner claim
This Registry indexed listing is attributed to decodingai-magazine but is not marked official yet. Claim it to add a verified owner signal and make future launch, install, and audit updates easier to trust.
Creator backlink kit
Show the canonical listing, current trust and audit signals, and real Agent-Proven evidence where developers evaluate the repository.
[](https://www.openagentskill.com/skills/decodingai-magazine-demo-6-article-kg?ref=github&utm_source=github&utm_medium=referral&utm_campaign=creator_badge)
[](https://www.openagentskill.com/skills/decodingai-magazine-demo-6-article-kg?ref=github&utm_source=github&utm_medium=referral&utm_campaign=creator_badge)
[](https://www.openagentskill.com/skills/decodingai-magazine-demo-6-article-kg/audit)
[](https://www.openagentskill.com/skills/decodingai-magazine-demo-6-article-kg?ref=github&utm_source=github&utm_medium=referral&utm_campaign=creator_badge)decodingai-magazine
@decodingai-magazine
Share whether this skill looks useful for your agent workflow. Aggregated feedback improves rankings over time.
Sandbox only
Code Review
Review a branch or diff against repository standards and the originating spec in two independent analysis passes.
168.6K StarsAppsmith
Platform to build admin panels, internal tools, and dashboards. Integrates with 25+ databases and any API.
40.8K StarsImplement
Implement work from an approved spec or ticket set, run focused and full tests, invoke code review, and commit the result to the current branch.
175.7K StarsVercel React Best Practices
React and Next.js performance guidance for writing, reviewing, and refactoring production UI code.
30.9K StarsSandbox only
Install targets
Codex install prompt
Install the "demo-6-article-kg" agent skill from https://github.com/decodingai-magazine/building-a-coding-agent-from-scratch-course/tree/main/.decode/skills/demo-6-article-kg. Read its SKILL.md or equivalent instructions first, install only the files needed for this workspace, and summarize any required setup before using it. Skill purpose: Demo skill that web-fetches two Decoding AI knowledge-graph articles, has the agent itself distill them into a typed entity/relation graph, and renders an interactive dark-themed force-directed KG into one self-contained kg.html — no graph library, no CDN. After the install attempt, report the result to https://www.openagentskill.com/api/agent/outcome with POST JSON {"event_id":"install_<unique-id>","skill_slug":"decodingai-magazine-demo-6-article-kg","task":"Install demo-6-article-kg","agent":"codex","outcome":"success","install_used":true}. Replace event_id with a unique value and outcome with success or failed. Report success only after the skill is installed and a minimal verification passes.Supply asset profile
Code review, repo analysis, testing, CI, GitHub, DevOps, and developer workflow skills.
Scenario
GitHub automation
I need my agent to triage GitHub issues, review pull requests, and summarize repository changes.
Agent fit
Claude Code + Browser agents + CLI
Codex, Claude Code, Cursor, CLI, or custom agents.
Install
Ready
npx skills add decodingai-magazine/building-a-coding-agent-from-scratch-course --skill demo-6-article-kg
Maintenance
fresh
2d since push
Risk
Needs review
Dependency or permission surface needs review
GitHub quality
347
72/100 Quality · 72/100 Trust
Coverage tags
Review notes
Dependency or permission surface needs review · Permission surface may require sandboxing
Agent adoption scorecard
These scores combine public repository metadata, OpenAgentSkill review signals, maintenance freshness, and install readiness. They are a shortlist signal, not a replacement for human review.
Quality
StrongSolid option that is likely worth shortlisting for production workflows.
Trust
Sandbox onlyUseful candidate with missing or mixed trust signals. Keep it in an isolated workspace until the outcome loop proves task fit.
Audit
Needs reviewA machine-readable review of install readiness, security metadata, maintenance, and adoption risk.
OpenAgentSkill Trust Score v5
Run only in a sandbox and compare close alternatives before using it for real work.
Stars
347 GitHub stars
Repo activity
347 stars, 88 forks
Maintenance
2d since push
License
Apache-2.0
Install
npx skills add decodingai-magazine/building-a-coding-agent-from-scratch-course --skill demo-6-article-kg
Install safety
Agent-readable metadata
Use this block or the embedded JSON to decide whether an agent should install this skill, choose an alternative, or ask for human review first.
Suited tasks
Suited agents
Install decision
Trust and risk
Outcome loop
Install command
npx skills add decodingai-magazine/building-a-coding-agent-from-scratch-course --skill demo-6-article-kgDo not use when
Alternative
168.6K Stars
npx skills add mattpocock/skills --skill code-review
Alternative
40.8K Stars
npx skills add appsmithorg/appsmith
Alternative
175.7K Stars
npx skills add mattpocock/skills --skill implement
Alternative
30.9K Stars
npx skills add vercel-labs/agent-skills --skill vercel-react-best-practices
Agent safety v2
This skill should not be selected by an agent without explicit human security review.
Do not auto-install. Inspect the source, dependencies, and permission surface first.
high
Skill metadata references terminal, CLI, shell, subprocess, or command execution workflows.
medium
Skill may drive a browser or interact with web pages.
medium
Skill likely fetches remote pages, APIs, repositories, or external services.
medium
Skill may read or write project files, documents, generated artifacts, or local workspace state.
Agent resolve plan
The Resolve API returns the selected skill, alternatives, safety policy, audit notes, install target, and copy-paste prompt an agent can follow without scraping this page.
Open JSON
/api/agent/resolve?task=Use%20demo-6-article-kg%20for%20an%20agent%20workflow&agent=codex&max_risk=medium
Resolve text
/api/agent/resolve?task=Use%20demo-6-article-kg%20for%20an%20agent%20workflow&agent=codex&max_risk=medium&format=text
Install handoff
/api/skills/decodingai-magazine-demo-6-article-kg/install
Agent should check
Copy prompt
Task: Use demo-6-article-kg in this workspace.
Resolve first: https://www.openagentskill.com/api/agent/resolve?task=Use%20demo-6-article-kg%20for%20an%20agent%20workflow&agent=codex&max_risk=medium
Review install handoff: https://www.openagentskill.com/api/skills/decodingai-magazine-demo-6-article-kg/install
Install command: npx skills add decodingai-magazine/building-a-coding-agent-from-scratch-course --skill demo-6-article-kg
Before running it, summarize audit warnings, required permissions, and the fallback skill if install is risky.Agent handoff
Use the public install endpoint to fetch the command, safety checklist, target prompts, and canonical links for this skill.
Install handoff
/api/skills/decodingai-magazine-demo-6-article-kg/install
LLM text format
/api/skills/decodingai-magazine-demo-6-article-kg/install?format=text
Find alternatives
/api/skills/search?q=demo-6-article-kg&limit=3
Agent prompt
Use demo-6-article-kg for this task. Review https://www.openagentskill.com/api/skills/decodingai-magazine-demo-6-article-kg/install, then install with: npx skills add decodingai-magazine/building-a-coding-agent-from-scratch-course --skill demo-6-article-kgRegistry metadata
This page exposes the same decision, trust, audit, use-case, and install signals through the Registry API, so agents can rank this skill without scraping the UI.
Manifest
/api/registry/manifest/decodingai-magazine-demo-6-article-kg
LLM text
/api/registry/manifest/decodingai-magazine-demo-6-article-kg?format=text
Install alias
/api/registry/install/decodingai-magazine-demo-6-article-kg
Recommend
/api/registry/recommend?task=Use%20demo-6-article-kg%20in%20an%20agent%20workflow&limit=3
Agent fit
Web scraping
Use-case tags
Platforms
Claude Code, Browser agents
Audit report
A machine-readable review of install readiness, security metadata, maintenance, and adoption risk.
Agent decision cockpit
Prototype with this skill first; keep a fallback candidate ready.
Role in stack
Fallback candidate
Primary fit
Web scraping
Trust label
Prototype first
Install path
Command ready
Use when
Evidence
review first
Implementation path
Trust profile
Useful candidate with missing or mixed trust signals. Keep it in an isolated workspace until the outcome loop proves task fit.
GitHub adoption
INFO347 GitHub stars
Stars/forks activity
INFO347 stars, 88 forks; issue activity unavailable in current metadata
Recent maintenance
PASS2d since push
License clarity
PASSApache-2.0
Good signals
Review before install
Recommended action
Run only in a sandbox and compare close alternatives before using it for real work.
Quality profile
Solid option that is likely worth shortlisting for production workflows.
Workflow fit
Collect structured data
I need my agent to scrape websites and extract structured data from pages.
Search private knowledge
I need my agent to build a RAG workflow over documents and retrieve reliable context.
Investigate faster
I need my agent to research a topic, compare sources, and produce a concise report.
Workflow fit
Scrape, clean, and reuse web data
A practical workflow for agents that crawl public pages, extract clean content, normalize data, and hand it to downstream research or RAG workflows.
Ingest, retrieve, and cite
A workflow for document-heavy agents that ingest files, create searchable knowledge, retrieve relevant context, and answer with grounded sources.
Find, compare, and synthesize
A workflow for agents that gather sources, compare claims, summarize long material, and draft useful research briefs.
Alternative shortlist
Similar skills that may fit this task.
Review a branch or diff against repository standards and the originating spec in two independent analysis passes.
Platform to build admin panels, internal tools, and dashboards. Integrates with 25+ databases and any API.
Implement work from an approved spec or ticket set, run focused and full tests, invoke code review, and commit the result to the current branch.
React and Next.js performance guidance for writing, reviewing, and refactoring production UI code.
--- name: demo-6-article-kg description: Demo skill that web-fetches two Decoding AI knowledge-graph articles, has the agent itself distill them into a typed entity/relation graph, and renders an interactive dark-themed force-directed KG into one self-contained kg.html — no graph library, no CDN. ---
The hardcore one: turn two live articles into a knowledge graph you can play with in the browser. You do all of it — you are the extractor (no NLP library) and you are the renderer (no graph library, no CDN, no framework). Two artifacts, one page that works the instant it lands.
Work the steps in order. Do not skip ahead to the HTML.
## Step 0 — paths and plan
Both artifacts go in the output directory named in the **Output default** line at the very end of these instructions — normally `.decode/outputs/`, but a destination the human named always wins. Resolve it once, call it `<OUT>`, and use `<OUT>` everywhere below:
- `<OUT>/graph.json` — the extraction - `<OUT>/kg.html` — the page
Put the pipeline in `todo_write` as five items (fetch, extract, render, verify, report) and write the real `<OUT>` path into the first one so you never re-derive it.
## Step 1 — fetch the two sources
One `web_fetch` per URL (the tool returns Markdown):
- https://www.decodingai.com/p/understanding-neo4j-graph-agent-memory-system - https://www.decodingai.com/p/ship-a-knowledge-graph-ontology-in-5-minutes
Keep the title and body prose. Ignore navigation, subscribe buttons, CTAs, comments, footers and trailing "read more" lists. If a fetch fails or comes back truncated, say so plainly and work with what you have — never invent content you did not fetch.
## Step 2 — extract one merged graph
Distill ONE graph across both articles: an entity discussed in both articles is ONE node, not two. Write it to `<OUT>/graph.json`:
```json { "nodes": [ { "id": "Ontology", "type": "concept", "desc": "one sentence in your own words" }, { "id": "Neo4j", "type": "tool", "desc": "one sentence in your own words" } ], "edges": [{ "source": "Ontology", "target": "KG drift", "label": "prevents" }] } ```
- **20–35 nodes.** The key ideas, not every noun. - `type` is exactly one of `concept` / `tool` / `pattern` / `problem`. - `desc` is one sentence of your own synthesis, not a quote. - Edges are directed; `label` is a short verb phrase (`prevents`, `stores`, `queries`). - Every `source` and `target` matches a node `id` exactly — ids are case-sensitive. - No orphans: every node has at least one edge.
Before moving on, re-read what you wrote and confirm the node count is in range, every edge endpoint exists, and no node is orphaned. Fixing it here is cheap; fixing it after the page is written is not.
## Step 3 — write the page
**One `write` call produces a finished file.** There is no second pass. The data goes in as a literal — the actual `{ "nodes": [...], "edges": [...] }` you just wrote to `graph.json`, copied in full. Never emit `{{GRAPH}}`, `<DATA>`, `/* graph here */`, `...`, or any token you intend to substitute later, and never write an unexpanded template string. If you catch yourself planning to "fill in the data next", stop and write the whole file instead.
Author `<OUT>/kg.html` in this order — each section complete before the next:
1. `<head>`: `<title>`, and one `<style>` block. No external stylesheet, script, or font. 2. `<header>`: the page title, the two article URLs as links, and the type legend (a colored dot plus the type name, four of them). 3. An empty `<svg>` filling the viewport, and an empty detail card `<div>` positioned on the right. 4. One `<script>` block, in this order: the data, the model, the drawing, the simulation, the interactions, the start.
### What goes in the script, in order
**Data.** `const GRAPH = ` followed by the literal object. This is the first statement in the block.
**Model.** Map each node to an object carrying `x`, `y`, `vx`, `vy` and `degree`. Seed positions on a circle around the viewport center — never all at one point, or the repulsion divides by zero. Resolve every edge's `source`/`target` string to its node object once, up front, so the loop never searches by id. Count degree while you do it. Build a neighbor set per node id for the hover step.
**Drawing.** Create the SVG elements once, before the loop starts: a `<line>` and a small `<text>` per edge, and a `<g>` per node holding a `<circle>` and a `<text>` label. Keep references to them. The loop only updates coordinates and classes — it never creates or destroys elements. Order the groups edges → edge labels → nodes so nodes sit on top. Radius is `6 + min(9, degree * 1.4)`; fill is the node's type color.
**Simulation.** A hand-rolled force simulation in vanilla JS — no library, no framework. One `tick()` applying three forces, then integrating:
- _Repulsion_, every node pair: magnitude `5000 / distanceSquared`, pushing apart along the line between them. Clamp `distanceSquared` to a minimum of 1 and jitter coincident nodes. - _Springs_, along each edge: pull proportional to `(distance - 110) * 0.01`. - _Centering_: nudge each node toward the viewport center by `0.0015` of its offset. - Integrate: multiply velocity by `0.86` damping, add to position, clamp inside the viewport with a margin so nothing hides under the header.
Scale all forces by an `alpha` that starts at 1 and decays ~0.5% per tick toward a floor of about 0.06 — that floor is what keeps the layout gently alive instead of frozen. Run ~250 ticks before the first paint so the page opens settled, then `requestAnimationFrame` a loop of tick + draw.
**Interactions.**
- _Drag_: `pointerdown` on a node pins it and captures the pointer; `pointermove` sets its position and zeroes its velocity; `pointerup` unpins and releases. Bump `alpha` on grab so the graph re-settles around it. - _Hover_: highlight the node and its edges, dim every non-neighbor, and fill the detail card with the node's type, id, `desc`, and its relations — outgoing as `label → target`, incoming as `source label →`. Clear it on leave, but not mid-drag.
**Design.** Dark, minimal, no framework: CSS variables for the palette and the four type colors, a system font stack, full-viewport canvas, sticky translucent header, the detail card as a fixed rounded panel, a subtle glow on the hovered node, and dimming via opacity.
## Step 4 — verify
One `bash` call. All four must hold:
```bash python3 -m json.tool <OUT>/graph.json > /dev/null && echo "json ok" grep -c 'src="http' <OUT>/kg.html # 0 — nothing loaded from the network grep -Ec '\{\{|<DATA>|graph here|\.\.\.' <OUT>/kg.html # 0 — no leftover placeholder grep -c 'const GRAPH' <OUT>/kg.html # 1 — the data is inlined ```
Then confirm the page carries the whole graph: count `"id":` occurrences in `kg.html` and in `graph.json` and check they match. Any mismatch means the data was truncated — rewrite the file in full, do not patch it.
## Step 5 — report
Node count by type, edge count, the three most-connected entities, one cross-article relation that surprised you, and the command to open it:
```bash open <OUT>/kg.html ```
Source provenance
Decision snapshot
recent repository activity
Audit
Install and adoption review
Agent-proven evidence
Outcome reports after resolve, review, install, and one narrow run.
No agent outcome data yet. The first agent run can report success, setup needs, risk blocks, failure, or not-relevant through /api/agent/outcome.
Install
Free and open source. Review the report before installing into production agents.
Growth loop
Scenario-led draft for demo-6-article-kg, ready for a manual X post.
demo-6-article-kg: Demo skill that web-fetches two Decoding AI knowledge-graph articles, has the agent itself di... 347 stars https://www.openagentskill.com/skills/decodingai-magazine-demo-6-article-kg?ref=x
Listing + install path for demo-6-article-kg: https://www.openagentskill.com/skills/decodingai-magazine-demo-6-article-kg?ref=x Install: npx skills add decodingai-magazine/building-a-coding-agent-from-scratch-course --...
Listing source
This listing was indexed from public sources and is not marked official until a maintainer claim is approved.
Attribution links to the public repository or creator profile. Creators can claim the listing to update ownership signals.
Claim this skillOwner claim
This Registry indexed listing is attributed to decodingai-magazine but is not marked official yet. Claim it to add a verified owner signal and make future launch, install, and audit updates easier to trust.
Creator backlink kit
Show the canonical listing, current trust and audit signals, and real Agent-Proven evidence where developers evaluate the repository.
[](https://www.openagentskill.com/skills/decodingai-magazine-demo-6-article-kg?ref=github&utm_source=github&utm_medium=referral&utm_campaign=creator_badge)
[](https://www.openagentskill.com/skills/decodingai-magazine-demo-6-article-kg?ref=github&utm_source=github&utm_medium=referral&utm_campaign=creator_badge)
[](https://www.openagentskill.com/skills/decodingai-magazine-demo-6-article-kg/audit)
[](https://www.openagentskill.com/skills/decodingai-magazine-demo-6-article-kg?ref=github&utm_source=github&utm_medium=referral&utm_campaign=creator_badge)decodingai-magazine
@decodingai-magazine
Share whether this skill looks useful for your agent workflow. Aggregated feedback improves rankings over time.
Sandbox only
Code Review
Review a branch or diff against repository standards and the originating spec in two independent analysis passes.
168.6K StarsAppsmith
Platform to build admin panels, internal tools, and dashboards. Integrates with 25+ databases and any API.
40.8K StarsImplement
Implement work from an approved spec or ticket set, run focused and full tests, invoke code review, and commit the result to the current branch.
175.7K StarsVercel React Best Practices
React and Next.js performance guidance for writing, reviewing, and refactoring production UI code.
30.9K Starsstandard package or runtime install path
Permission surface
secrets or environment access, shell or command execution
Agent outcomes
No agent outcome data yet
Docs
Usable metadata, review docs
Risk summary
Install readiness
standard package or runtime install path
Permission surface
secrets or environment access, shell or command execution
Agent outcomes
No agent outcome data yet
Docs
Usable metadata, review docs
Risk summary
Install readiness
standard package or runtime install path
Permission surface
secrets or environment access, shell or command execution
Agent outcomes
No agent outcome data yet
Docs
Usable metadata, review docs
Risk summary
Install readiness
standard package or runtime install path
Permission surface
secrets or environment access, shell or command execution
Agent outcomes
No agent outcome data yet
Docs
Usable metadata, review docs
Risk summary
Install readiness