add AI section

Author: tony-xlh

_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)

_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 <a href="javascript:document.getElementById('ask-ai-btn').click()">AI agent</a> 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.
+

_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)

_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