القائمة
Create or add a new tool for browser-toolkit.
التثبيت باستخدام Codex أو Claude انسخ هذا Prompt والصقه في Codex أو Claude أو مساعد آخر ليراجع صفحة Skill ويثبّتها لك.
استنادا إلى تصنيف SOC المهني
| name | tool-creation |
| description | Create or add a new tool for browser-toolkit. |
| when_to_use | User asks to add/create/build a new tool in src/tools/*. |
| triggers | ["add a tool","new tool","create a tool","build a tool","can you make a tool"] |
| keywords | ["src/tools","config.json","template.html","index.ts","init cleanup","bun x tsc"] |
Use this skill when user wants to create or add a new tool to browser-toolkit.
Trigger phrases:
Recognition patterns:
/api/* via fetchApi / fetchJson / fetchBlob / uploadFile from src/js/api.tsbackend/routes/* and mount it in backend/app.tsSource of truth: follow AGENTS.md and AGENTS.details.md when any rule conflicts with this skill.
export default function init(): void | (() => void) { // setup return () => { // cleanup listeners/timers/observers }; }
For share-target tools, init() may receive an optional payload: import type { SharedFilesPayload } from '../../js/share-target';
export default function init(payload?: SharedFilesPayload): void | (() => void) { if (payload?.sharedFiles?.length) { // handle shared files } return () => { // cleanup }; }
{ "name": "My Tool", "description": "Does something useful", "icon": "crop", "sectionId": "general", "order": 1, "draft": false, "example": false, "hideHeader": false, "hideFooter": false, "requiresBackend": false, "shareTarget": { "accept": ["image/*"] } }
Avoid:
Prefer:
Example: export default function init(): void | (() => void) { const container = document.getElementById('tool-container'); if (!container) return;
const onClick = (event: Event): void => { // handle delegated click };
container.addEventListener('click', onClick);
return () => { container.removeEventListener('click', onClick); }; }
Global listener exception (only when no local alternative): export default function init(): void | (() => void) { const onKeyDown = (event: KeyboardEvent): void => { // keyboard shortcut handling };
document.addEventListener('keydown', onKeyDown);
return () => { document.removeEventListener('keydown', onKeyDown); }; }
Do not import/call Lucide rendering directly. Use data-lucide and let the observer render automatically.
Prefer DaisyUI/Tailwind tokens:
Use dark: only when tokenized classes cannot express requirement. Keep custom CSS minimal in src/css/style.css.
Do not use short internal DaisyUI variables like --p, --b1. Use full variables:
Optional paste button for image tools: or click here to Paste from clipboard
Common checks before use:
Example: async function copyToClipboard(text: string): Promise { if (!navigator.clipboard) { return false; } try { await navigator.clipboard.writeText(text); return true; } catch (error) { console.error('[Clipboard] Failed to write text:', error); return false; } }
Use existing helpers in src/js/* before writing new ones. This list is not exhaustive; check src/js/* for newly added utilities.
Known utilities:
After creating tool: