|
| 1 | +# DBR JavaScript Sample Creator — AI Coding Skill |
| 2 | + |
| 3 | +An AI coding skill that helps developers quickly build working web applications with the |
| 4 | +[Dynamsoft Barcode Reader JavaScript Edition](https://www.dynamsoft.com/barcode-reader/sdk-javascript/) |
| 5 | +SDK. Feed this skill to your AI agent (GitHub Copilot, Claude, Cursor, Windsurf, etc.) and |
| 6 | +describe what you need — the agent will generate correct, production-ready code. |
| 7 | + |
| 8 | +## Who Is This For? |
| 9 | + |
| 10 | +Developers evaluating or integrating the `dynamsoft-barcode-reader-bundle` JavaScript SDK who want |
| 11 | +to **accelerate POC development** using AI coding assistants. Instead of reading through |
| 12 | +documentation and samples manually, let your AI agent do the heavy lifting with full SDK knowledge |
| 13 | +built in. |
| 14 | + |
| 15 | +## No Installation Required |
| 16 | + |
| 17 | +This skill is organized into agent-specific directories so it is **auto-discovered** with no |
| 18 | +configuration needed: |
| 19 | + |
| 20 | +| Directory | Agent | |
| 21 | +|---|---| |
| 22 | +| `.github/skills/dbr-js-sample-creator/` | GitHub Copilot (auto-discovered) | |
| 23 | +| `.claude/skills/dbr-js-sample-creator/` | Claude Code (auto-discovered) | |
| 24 | +| `.codex/skills/dbr-js-sample-creator/` | OpenAI Codex (auto-discovered) | |
| 25 | + |
| 26 | +Just clone the repository and open it in your AI-enabled editor. The skill is active immediately. |
| 27 | + |
| 28 | +## What's Inside |
| 29 | + |
| 30 | +``` |
| 31 | +.github/skills/dbr-js-sample-creator/ |
| 32 | +├── SKILL.md # Entry point — SDK architecture, patterns, conventions |
| 33 | +├── README.md # This file |
| 34 | +├── references/ |
| 35 | +│ ├── api-sdk.md # SDK loading (CDN/npm/ES6), namespaces, CoreModule, templates |
| 36 | +│ ├── api-camera.md # CameraView, CameraEnhancer, result receiver, filter |
| 37 | +│ ├── api-image.md # File/image capture, CapturedResult, BarcodeResultItem |
| 38 | +│ ├── api-frameworks.md # React, Vue, Angular integration patterns |
| 39 | +│ └── sample-patterns.md # Complete working code for every common scenario |
| 40 | +└── evals/ |
| 41 | + └── evals.json # Test prompts & expectations for skill validation |
| 42 | +
|
| 43 | +.claude/skills/dbr-js-sample-creator/SKILL.md # Claude Code entry point |
| 44 | +.codex/skills/dbr-js-sample-creator/SKILL.md # Codex entry point |
| 45 | +``` |
| 46 | + |
| 47 | +The AI agent reads `SKILL.md` first, which directs it to the appropriate reference files based on |
| 48 | +your task. You do not need to understand these files — they are written for the AI. |
| 49 | + |
| 50 | +## SDK at a Glance |
| 51 | + |
| 52 | +- **Package:** `dynamsoft-barcode-reader-bundle@11.4.2001` |
| 53 | +- **CDN:** `https://cdn.jsdelivr.net/npm/dynamsoft-barcode-reader-bundle@11.4.2001/dist/dbr.bundle.js` |
| 54 | +- **npm:** `npm install dynamsoft-barcode-reader-bundle` |
| 55 | +- **Trial license:** [Get a 30-day free trial](https://www.dynamsoft.com/customer/license/trialLicense?product=dbr&package=js&utm_source=sampleReadme) |
| 56 | + |
| 57 | +## Example Prompts |
| 58 | + |
| 59 | +Once the skill is active, try prompts like: |
| 60 | + |
| 61 | +| Prompt | What the AI generates | |
| 62 | +|---|---| |
| 63 | +| *"Create a plain HTML barcode scanner with camera"* | Full HTML with CDN UMD, camera pipeline, dedup filter | |
| 64 | +| *"Build a React component that scans barcodes from camera"* | TypeScript React component with proper lifecycle + cleanup | |
| 65 | +| *"Make a Vue 3 image barcode decoder"* | Vue SFC with `<script setup>`, Composition API, file input | |
| 66 | +| *"Scan QR codes only using a custom template"* | Custom JSON template with `BF_QR_CODE` filter + HTML page | |
| 67 | +| *"Write an ES6 module barcode scanner"* | `<script type="module">` with named imports from CDN .mjs | |
| 68 | +| *"Add barcode scanning to my Angular app"* | Angular component with `ngAfterViewInit` / `ngOnDestroy` | |
| 69 | + |
| 70 | +## Validating the Skill |
| 71 | + |
| 72 | +Test with this prompt: |
| 73 | + |
| 74 | +> *"Write a plain HTML page that uses the Dynamsoft Barcode Reader to scan barcodes via camera |
| 75 | +> and display results."* |
| 76 | +
|
| 77 | +The AI should produce code that: |
| 78 | +- Loads the SDK from CDN |
| 79 | +- Calls `Dynamsoft.License.LicenseManager.initLicense()` |
| 80 | +- Creates `CameraView`, `CameraEnhancer`, and `CaptureVisionRouter` |
| 81 | +- Adds a `CapturedResultReceiver` with `onDecodedBarcodesReceived` |
| 82 | +- Adds a `MultiFrameResultCrossFilter` for deduplication |
| 83 | +- Appends the camera UI to a container div |
| 84 | +- Calls `cameraEnhancer.open()` and `cvRouter.startCapturing("ReadBarcodes_SpeedFirst")` |
| 85 | + |
| 86 | +More test prompts are available in [`evals/evals.json`](evals/evals.json). |
0 commit comments