From ebcc8475514c70d770d1900a92d190925aa5cfc9 Mon Sep 17 00:00:00 2001 From: tony-xlh Date: Thu, 2 Jul 2026 17:23:34 +0800 Subject: [PATCH 1/9] add AI section --- _articles/ai/agent-skills.md | 46 ++++++++++++++++++++++++++++++++++++ _articles/ai/index.md | 19 +++++++++++++++ _articles/index.md | 5 ++++ _data/full_tree.yml | 6 +++++ 4 files changed, 76 insertions(+) create mode 100644 _articles/ai/agent-skills.md create mode 100644 _articles/ai/index.md diff --git a/_articles/ai/agent-skills.md b/_articles/ai/agent-skills.md new file mode 100644 index 00000000..33f25337 --- /dev/null +++ b/_articles/ai/agent-skills.md @@ -0,0 +1,46 @@ +--- +layout: default-layout +needAutoGenerateSidebar: true +title: Agent Skills | Dynamic Web TWAIN Documentation +keywords: Dynamic Web TWAIN, Documentation, Agent Skills +breadcrumbText: Agent Skills +description: This post teaches you how to use Dynamic Web TWAIN's offical agent skills. +--- + +# Agent Skills + +Agent Skills are structured instruction files that teach AI agents how to use Dynamic Web TWAIN in your web apps accurately and efficiently. They work with Claude Code, Cursor, Codex, and other AI agents. + +You can run the following command to install the skills: + +```bash +npx skills add https://github.com/Dynamsoft/web-twain-samples/ +``` + +## Example prompts + +Try the following prompts after installing. Your AI agent will automatically use the installed skills: + +1. Use Web TWAIN in an existing Angular project. + + ``` + Please create a component to use Dynamic Web TWAIN for document scanning in this angular app. Just a scan button to perform scanning and view the document in a viewer. + ``` + +2. Create a plain JavaScript HTML file to scan documents. + + ``` + Please write an html file which loads Web TWAIN via CDN. The page contains a scan button, which triggers scanning with the scanner ui. The scanned images are displayed in Web TWAIN's viewer. + ``` + +3. Ask questions about Web TWAIN. + + ``` + What is Dynamic Web TWAIN service? + ``` + + +## Additional Resources + +* [GitHub repo](https://github.com/Dynamsoft/web-twain-samples/tree/main/skills) +* [Agent Skills documentation](https://agentskills.io/home) diff --git a/_articles/ai/index.md b/_articles/ai/index.md new file mode 100644 index 00000000..fe9bb99f --- /dev/null +++ b/_articles/ai/index.md @@ -0,0 +1,19 @@ +--- +layout: default-layout +needAutoGenerateSidebar: true +noTitleIndex: true +title: AI Overview | Dynamic Web TWAIN Documentation +keywords: Dynamic Web TWAIN, TWAIN, AI, Documentation +breadcrumbText: AI Overview +description: Overview of Dynamic Web TWAIN and AI. +--- + +# AI Overview + +AI can answer questions related to Dynamic Web TWAIN and write codes directly. You can utilize AI in several ways. + +## How to Use + +1. Ask the AI agent questions about the SDK. +2. Use the [agent skills](./agent-skills.md) in your AI agent like Claude Code, Codex and Cursor. Skills teach the agent how to include Web TWAIN in your project and use its APIs correctly. + diff --git a/_articles/index.md b/_articles/index.md index d7be4f7b..b32f441e 100644 --- a/_articles/index.md +++ b/_articles/index.md @@ -94,6 +94,11 @@ description: Dynamic Web TWAIN SDK Documentation Homepage - [Addon]({{site.info}}schedule/Addon.html) - [Deprecated]({{site.info}}schedule/deprecated.html) +### AI + +- [Overview](/_articles/ai/index.md) +- [Agent Skills](/_articles/ai/agent-skills.md) + ### [Upgrade Instructions]({{site.indepth}}development/upgrade.html) ### [End-User Guide](/_articles/end-user/index.md) ### [Resources]({{site.about}}resources.html) diff --git a/_data/full_tree.yml b/_data/full_tree.yml index ac2aaa62..acc0bc4a 100644 --- a/_data/full_tree.yml +++ b/_data/full_tree.yml @@ -197,6 +197,12 @@ tree_list: path: /info/schedule/Addon.html - name: Deprecated path: /info/schedule/deprecated.html + - name: AI + childList: + - name: Overview + path: /ai/index.html + - name: Agent Skills + path: /ai/agent-skills.html - name: Upgrade Instructions path: /indepth/development/upgrade.html - name: End-User Guide From 72081da0118af4701f5365d40de15efe9b5d2a61 Mon Sep 17 00:00:00 2001 From: tony-xlh Date: Thu, 2 Jul 2026 17:25:52 +0800 Subject: [PATCH 2/9] capital case --- _articles/ai/agent-skills.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/_articles/ai/agent-skills.md b/_articles/ai/agent-skills.md index 33f25337..8690519c 100644 --- a/_articles/ai/agent-skills.md +++ b/_articles/ai/agent-skills.md @@ -17,7 +17,7 @@ You can run the following command to install the skills: npx skills add https://github.com/Dynamsoft/web-twain-samples/ ``` -## Example prompts +## Example Prompts Try the following prompts after installing. Your AI agent will automatically use the installed skills: From befd6eebf87b42753d68b2c45167b82ff29fc9ac Mon Sep 17 00:00:00 2001 From: tony-xlh Date: Thu, 2 Jul 2026 17:36:58 +0800 Subject: [PATCH 3/9] add noTitleIndex to agent-skills --- _articles/ai/agent-skills.md | 1 + 1 file changed, 1 insertion(+) diff --git a/_articles/ai/agent-skills.md b/_articles/ai/agent-skills.md index 8690519c..c8212100 100644 --- a/_articles/ai/agent-skills.md +++ b/_articles/ai/agent-skills.md @@ -1,6 +1,7 @@ --- layout: default-layout needAutoGenerateSidebar: true +noTitleIndex: true title: Agent Skills | Dynamic Web TWAIN Documentation keywords: Dynamic Web TWAIN, Documentation, Agent Skills breadcrumbText: Agent Skills From fa8f86781008d7efc1f627d3412495f4218982dd Mon Sep 17 00:00:00 2001 From: tony-xlh Date: Thu, 2 Jul 2026 17:39:11 +0800 Subject: [PATCH 4/9] use click event for the ai agent anchor --- _articles/ai/index.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/_articles/ai/index.md b/_articles/ai/index.md index fe9bb99f..d7d48325 100644 --- a/_articles/ai/index.md +++ b/_articles/ai/index.md @@ -14,6 +14,6 @@ AI can answer questions related to Dynamic Web TWAIN and write codes directly. Y ## How to Use -1. Ask the AI agent questions about the SDK. +1. Ask the AI agent questions about the SDK. 2. Use the [agent skills](./agent-skills.md) in your AI agent like Claude Code, Codex and Cursor. Skills teach the agent how to include Web TWAIN in your project and use its APIs correctly. From 42602d70fcabd067c467d0deb017ae93ea249b2a Mon Sep 17 00:00:00 2001 From: tony-xlh Date: Thu, 2 Jul 2026 17:41:46 +0800 Subject: [PATCH 5/9] use table for example prompts --- _articles/ai/agent-skills.md | 22 +++++----------------- 1 file changed, 5 insertions(+), 17 deletions(-) diff --git a/_articles/ai/agent-skills.md b/_articles/ai/agent-skills.md index c8212100..6dce24a8 100644 --- a/_articles/ai/agent-skills.md +++ b/_articles/ai/agent-skills.md @@ -22,23 +22,11 @@ npx skills add https://github.com/Dynamsoft/web-twain-samples/ Try the following prompts after installing. Your AI agent will automatically use the installed skills: -1. Use Web TWAIN in an existing Angular project. - - ``` - Please create a component to use Dynamic Web TWAIN for document scanning in this angular app. Just a scan button to perform scanning and view the document in a viewer. - ``` - -2. Create a plain JavaScript HTML file to scan documents. - - ``` - Please write an html file which loads Web TWAIN via CDN. The page contains a scan button, which triggers scanning with the scanner ui. The scanned images are displayed in Web TWAIN's viewer. - ``` - -3. Ask questions about Web TWAIN. - - ``` - What is Dynamic Web TWAIN service? - ``` +| Prompt | Description | +|--------|-------------| +| Please create a component to use Dynamic Web TWAIN for document scanning in this angular app. Just a scan button to perform scanning and view the document in a viewer. | Use Web TWAIN in an existing Angular project. | +| Please write an html file which loads Web TWAIN via CDN. The page contains a scan button, which triggers scanning with the scanner ui. The scanned images are displayed in Web TWAIN's viewer. | Create a plain JavaScript HTML file to scan documents. | +| What is Dynamic Web TWAIN service? | Ask questions about Web TWAIN. | ## Additional Resources From aee2a230829ac51a1f949e6097e4fd1fcc04c1d0 Mon Sep 17 00:00:00 2001 From: tony-xlh Date: Thu, 2 Jul 2026 17:58:43 +0800 Subject: [PATCH 6/9] register click event on span --- _articles/ai/index.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/_articles/ai/index.md b/_articles/ai/index.md index d7d48325..4af4bfdf 100644 --- a/_articles/ai/index.md +++ b/_articles/ai/index.md @@ -14,6 +14,6 @@ AI can answer questions related to Dynamic Web TWAIN and write codes directly. Y ## How to Use -1. Ask the AI agent questions about the SDK. +1. Ask the AI agent questions about the SDK. 2. Use the [agent skills](./agent-skills.md) in your AI agent like Claude Code, Codex and Cursor. Skills teach the agent how to include Web TWAIN in your project and use its APIs correctly. From 15c56b7d6382a619cb53e889955f401d3a79e8fb Mon Sep 17 00:00:00 2001 From: tony-xlh Date: Fri, 3 Jul 2026 09:52:28 +0800 Subject: [PATCH 7/9] rename ai index to ai overview --- _articles/ai/{index.md => overview.md} | 6 +++++- _articles/index.md | 2 +- _data/full_tree.yml | 2 +- assets/imgs/ask-ai-button.jpg | Bin 0 -> 2292 bytes 4 files changed, 7 insertions(+), 3 deletions(-) rename _articles/ai/{index.md => overview.md} (70%) create mode 100644 assets/imgs/ask-ai-button.jpg diff --git a/_articles/ai/index.md b/_articles/ai/overview.md similarity index 70% rename from _articles/ai/index.md rename to _articles/ai/overview.md index 4af4bfdf..4fc33f17 100644 --- a/_articles/ai/index.md +++ b/_articles/ai/overview.md @@ -14,6 +14,10 @@ AI can answer questions related to Dynamic Web TWAIN and write codes directly. Y ## How to Use -1. Ask the AI agent questions about the SDK. +1. Use the "Ask AI" buttton to ask questions about the SDK. + + ![](/assets/imgs/ask-ai-button.jpg) + 2. Use the [agent skills](./agent-skills.md) in your AI agent like Claude Code, Codex and Cursor. Skills teach the agent how to include Web TWAIN in your project and use its APIs correctly. +3. Use [llms.txt](/llms.txt) and [llms-full.txt](/llms-full.txt) to provide documentation for large language models (LLMs) and apps that use them. \ No newline at end of file diff --git a/_articles/index.md b/_articles/index.md index b32f441e..8a8e3d0b 100644 --- a/_articles/index.md +++ b/_articles/index.md @@ -96,7 +96,7 @@ description: Dynamic Web TWAIN SDK Documentation Homepage ### AI -- [Overview](/_articles/ai/index.md) +- [Overview](/_articles/ai/overview.md) - [Agent Skills](/_articles/ai/agent-skills.md) ### [Upgrade Instructions]({{site.indepth}}development/upgrade.html) diff --git a/_data/full_tree.yml b/_data/full_tree.yml index acc0bc4a..0f8e2cb0 100644 --- a/_data/full_tree.yml +++ b/_data/full_tree.yml @@ -200,7 +200,7 @@ tree_list: - name: AI childList: - name: Overview - path: /ai/index.html + path: /ai/overview.html - name: Agent Skills path: /ai/agent-skills.html - name: Upgrade Instructions diff --git a/assets/imgs/ask-ai-button.jpg b/assets/imgs/ask-ai-button.jpg new file mode 100644 index 0000000000000000000000000000000000000000..b6d4774065d9d2dc82711a4db6b2e3052d35076a GIT binary patch literal 2292 zcmbW1dpMN)7RP^M#@)CzgR+^*Wx}R%+o75h8>yptT%t<wchSa^&45w8<0_mCHtU zTchSslItXwLCH0fAq-QI%9v@G88h>qSLZx?KhJs2ALpF){?;GwTHoLAw?5DNt_8n= zr-0@jHxD;}LZQGB$!l-e zx=Ue=SBT=qSe*66>{2Bo=jv9x_W;+}=IH55$|^d#dTZC2m=ZUcncLdg|FF%$(d9>1 zH}~BhdwhKN`}rR@7!dkX*sxU>*1ISdAkQC#Ih$t56;*22hd*s7qt%S$mNcFjiXi%K}>?9%F1 zWg{DJF8=800Tmr%TeivKD%v-){|@ZZ|3&r(*q>Z1poT^v9}lesNI=+$s$nqqfeiypiC{=p3IkrWY*?g_v7%#7 zRT_puVKCI!CQ~NO)1)pi;7m#@7xVB-RZ%{jezG734hq0Q04_Lz>FkqNml#c1e~`%JK@e|Bcu1;4V? zg^Iq%-Eq;MuWqmYuJC5AU$dAvnqVv03Iiik_G&O_l1hEmrQz(1&JZV^YiylFoq<8xgg%qfY*<^~*)TkR zS7b;oiP3ZHqrX3C7AA^0TT&4;kYq*^5*d@4+np+e`}pmK>aR~dSWpx1EPLYb*KK;( z{>p-Pk8&6T&Ed?X3<)YLd!_l@uK~8jEeQ?7JVSps-`Q3Y^qKW}W#BX=W2v_4Q3{`_(45ZM9ccKzXX;Sym{yz zQ^1Je(pd!8k*Z|lLm$`O{578H8RR-~r*ge?e5rRCAN!28|h*NQ()ycAE{$Oo zRe}Gzx2+lddzMjmT%ure#_{IBy<|88)CSdJA3U-#*Q&r zQN5LDm5`hx^VdR(=-hQL=6&Mwc~9z-eY~K=1p8utXWP;dFYgbpzs&W-Hq7ih_uv zr?j{6IoXVYpE+T?#<(HNxx?heKz2!H5@87&-9EU3(@kzg-BT(F6CFN@lfKVyohkAG8NPl{kjTIsw<82p_Uy5g=Xfk6t=@G~Xq?@Rde zFfhF)Dz3@$Gm7Au2-$VABXp4+4Bq%KXMUR$U4l51FbHv9qUefXpeS>TPUDkB0%Q=m zOZq~x?)TW88)SGZ$eHEqMm<;*hriX?dy)YK1{I;o}H$|4xV(4ue~t zwQ3Kz(X@kEYY-*rn{qgF#WhqG1_MbE3_hQM!r4#>7vi|E3z@PcWMU4$z-HWw8tSvC zQ$e#V7>+h+TKP_nrQuNHy~RUiNBs`yS6XrY(zP)dSTD==Aycv;8#>`h=UYLXWf(+O zNJ}p_i|C57A7MZ}_}tSxfVAKagB+)YtaO=WaxDx_LSK{Oc@>HIl${P9Gn=u8=9J4H z?2ql!go*OZ2I;*-_wI*+_+MiOFhHTi2dd_pRRgE;sjY_bPJcl3QJI R{x>hgc)8-he{d8$`VSQ0Rxkhn literal 0 HcmV?d00001 From 9b0aa82844440751359249a67a84be0f949d6b1e Mon Sep 17 00:00:00 2001 From: tony-xlh Date: Fri, 3 Jul 2026 15:06:45 +0800 Subject: [PATCH 8/9] fix spelling --- _articles/ai/agent-skills.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/_articles/ai/agent-skills.md b/_articles/ai/agent-skills.md index 6dce24a8..178643a8 100644 --- a/_articles/ai/agent-skills.md +++ b/_articles/ai/agent-skills.md @@ -5,7 +5,7 @@ noTitleIndex: true title: Agent Skills | Dynamic Web TWAIN Documentation keywords: Dynamic Web TWAIN, Documentation, Agent Skills breadcrumbText: Agent Skills -description: This post teaches you how to use Dynamic Web TWAIN's offical agent skills. +description: This post teaches you how to use Dynamic Web TWAIN's official agent skills. --- # Agent Skills From 1ccefc0273926276ab3113d79f277970690768ba Mon Sep 17 00:00:00 2001 From: tony-xlh Date: Fri, 3 Jul 2026 15:08:36 +0800 Subject: [PATCH 9/9] add img alt --- _articles/ai/overview.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/_articles/ai/overview.md b/_articles/ai/overview.md index 4fc33f17..06981123 100644 --- a/_articles/ai/overview.md +++ b/_articles/ai/overview.md @@ -16,7 +16,7 @@ AI can answer questions related to Dynamic Web TWAIN and write codes directly. Y 1. Use the "Ask AI" buttton to ask questions about the SDK. - ![](/assets/imgs/ask-ai-button.jpg) + ![Ask AI Button](/assets/imgs/ask-ai-button.jpg) 2. Use the [agent skills](./agent-skills.md) in your AI agent like Claude Code, Codex and Cursor. Skills teach the agent how to include Web TWAIN in your project and use its APIs correctly.