技能 htmx-skill
📄

htmx-skill

低风险 🌐 网络访问📁 文件系统访问

الحصول على وثائق htmx

تحتاج إلى وثائق دقيقة لقواعد htmx والسلوك. توفر هذه المهارة مرجعاً شاملاً لسمات htmx والأحداث وواجهات البرمجة والإضافات والأمثلة لمساعدتك في بناء تطبيقات الويب الحديثة.

支持: Claude Codex Code(CC)
🥉 74 青铜
1

下载技能 ZIP

2

在 Claude 中上传

前往 设置 → 功能 → 技能 → 上传技能

3

开启并开始使用

测试它

正在使用“htmx-skill”。 كيف أستخدم hx-load لتحميل المحتوى عند النقر؟

预期结果:

  • تطلق سمة hx-get طلب GET وتستبدل الاستجابة في DOM.
  • مثال: <button hx-get="/example" hx-target="#result">تحميل</button>
  • هذا يحمّل المحتوى من /example ويضعه في العنصر بالمعرف 'result'.
  • الخيارات الشائعة: hx-trigger (أي حدث يبدأ الطلب)، hx-swap (كيفية إدراج المحتوى)، hx-indicator (عرض حالة التحميل).

正在使用“htmx-skill”。 ماذا تفعل hx-boost؟

预期结果:

  • تحول سمة hx-boost الروابط والنماذج إلى طلبات AJAX.
  • تحافظ على التراجع السلس للمستخدمين الذين ليس لديهم JavaScript مفعل.
  • للنماذج، يكون الهدف هو body ويستخدم استبدال innerHTML افتراضياً.
  • استخدم سمة hx-push-url إذا كنت تريد دفع عناوين URL إلى السجل.

安全审计

低风险
v5 • 1/17/2026

This is a pure documentation/reference skill containing markdown files and a build script. The 2454 static findings are 99%+ false positives. The 'Ruby/shell backtick execution' findings are markdown code formatting. 'Weak cryptographic algorithm' findings are regex false positives from documentation text. Network/filesystem operations are for downloading documentation from GitHub. No malicious patterns detected.

87
已扫描文件
9,084
分析行数
2
发现项
5
审计总数

风险因素

🌐 网络访问 (2)
htmx_builder.py:127-135 htmx_builder.py:149-157
📁 文件系统访问 (2)
htmx_builder.py:248-253 htmx_builder.py:354-358
审计者: claude 查看审计历史 →

质量评分

64
架构
100
可维护性
85
内容
23
社区
90
安全
91
规范符合性

你能构建什么

إضافة سلوك ديناميكي

البحث في سمات htmx لإضافة وظيفة AJAX لعناصر HTML دون كتابة JavaScript.

بناء واجهات مستخدم تفاعلية

المرجع في رؤوس الاستجابة لتنفيذ التحديثات وإعادة التوجيهات ومحفزات الأحداث المدعومة من الخادم.

دمج الإضافات

العثور على وثائق لإضافات SSE و WebSocket لإضافة ميزات الوقت الفعلي إلى تطبيقك.

试试这些提示

صيغة السمات 
كيف أستخدم hx-post لإرسال نموذج واستبدال الاستجابة في div؟
معالجة الأحداث 
ما الأحداث التي يتم إطلاقها أثناء طلب htmx وما الخصائص التي تتضمنها؟
رؤوس الاستجابة 
كيف أستخدم HX-Location لإعادة التوجيه بدون إعادة تحميل كاملة للصفحة؟
استخدام الإضافات 
أرني كيفية استخدام إضافة SSE لتحديث المحتوى من أحداث الخادم.

最佳实践

  • ابدأ بالصفحة الأكثر تحديداً لسؤالك - يفضل وثائق السمات على الأدلة العامة.
  • افتح الملف المشار إليه لتأكيد التفاصيل قبل التنفيذ، حيث قد تكون الأوصاف موجزة.
  • تحقق من api.md لطرق واجهة البرمجة JavaScript عندما تحتاج إلى تحكم برمجي في htmx.

避免

  • لا تستخدم htmx لإدارة الحالة المعقدة من جانب العميل - فهو مصمم لواجهات المستخدم المدعومة من الخادم.
  • لا تنسَ معالجة أخطاء التحقق من الصحة - استخدم hx-validate مع واجهة برمجة التحقق من الصحة في HTML5.
  • لا تتجاهل خيارات توقيت hx-swap - الإعدادات غير الصحيحة للاستبدال يمكن أن تسبب وميضاً أو فقدان التركيز.

常见问题

ما التوافق الذي يدعمه htmx؟
htmx يعمل مع أي إطار عمل من جانب الخادم ولا يتطلب أدوات بناء. يتراجع بشكل أنيق عندما يكون JavaScript معطلاً.
ما حدود طلبات htmx؟
htmx ينفذ طلبات HTTP قياسية. الحدود تعتمد على تكوين الخادم وإعدادات الشبكة.
هل يمكن لدمج htmx مع مكتبات أخرى؟
نعم، لدى htmx إضافات لحالات استخدام كثيرة ويمكن أن يعمل مع React أو Vue أو أطر عمل أخرى لمكونات محددة.
هل البيانات آمنة مع htmx؟
يستخدم htmx ميزات الأمان القياسية للمتصفح. لا يجب تخزين البيانات الحساسة في HTML من جانب العميل بدون حماية.
لماذا لا يعمل طلب htmx الخاص بي؟
تحقق من وحدة التحكم في المتصفح بحثاً عن الأخطاء، وتحقق من أن عنوان URL يُرجع HTML صالحاً، وتأكد من أن hx-target يحدد العنصر الصحيح.
كيف يقارن htmx بواجهة برمجة fetch؟
يوفر htmx AJAX تعريفي عبر سمات HTML. تتطلب fetch API كود JavaScript. استخدم htmx لواجهات المستخدم المدعومة من الخادم وfetch للمنطق المعقد من جانب العميل.

开发者详情

作者

DrZoot

许可证

Apache-2.0

仓库

https://github.com/DrZoot/htmx-skill/tree/main/

引用

main

文件结构

📁 references/

📁 attributes/

📄 hx-boost.md

📄 hx-confirm.md

📄 hx-delete.md

📄 hx-disable.md

📄 hx-disabled-elt.md

📄 hx-disinherit.md

📄 hx-encoding.md

📄 hx-ext.md

📄 hx-get.md

📄 hx-headers.md

📄 hx-history-elt.md

📄 hx-history.md

📄 hx-include.md

📄 hx-indicator.md

📄 hx-inherit.md

📄 hx-on.md

📄 hx-params.md

📄 hx-patch.md

📄 hx-post.md

📄 hx-preserve.md

📄 hx-prompt.md

📄 hx-push-url.md

📄 hx-put.md

📄 hx-replace-url.md

📄 hx-request.md

📄 hx-select-oob.md

📄 hx-select.md

📄 hx-swap-oob.md

📄 hx-swap.md

📄 hx-sync.md

📄 hx-target.md

📄 hx-trigger.md

📄 hx-validate.md

📄 hx-vals.md

📄 hx-vars.md

📁 examples/

📁 move-before/

📄 details.md

📄 active-search.md

📄 animations.md

📄 async-auth.md

📄 bulk-update.md

📄 click-to-edit.md

📄 click-to-load.md

📄 confirm.md

📄 delete-row.md

📄 dialogs.md

📄 edit-row.md

📄 file-upload-input.md

📄 file-upload.md

📄 infinite-scroll.md

📄 inline-validation.md

📄 keyboard-shortcuts.md

📄 lazy-load.md

📄 modal-bootstrap.md

📄 modal-custom.md

📄 modal-uikit.md

📄 progress-bar.md

📄 reset-user-input.md

📄 sortable.md

📄 tabs-hateoas.md

📄 tabs-javascript.md

📄 update-other-content.md

📄 value-select.md

📄 web-components.md

📁 extensions/

📄 building.md

📄 head-support.md

📄 htmx-1-compat.md

📄 idiomorph.md

📄 preload.md

📄 response-targets.md

📄 sse.md

📄 ws.md

📁 headers/

📄 hx-location.md

📄 hx-push-url.md

📄 hx-push.md

📄 hx-redirect.md

📄 hx-replace-url.md

📄 hx-trigger.md

📄 api.md

📄 events.md

📄 _post_SKILL.md

📄 _pre_SKILL.md

📄 config.yaml

📄 htmx_builder.py

📄 LICENSE

📄 README.md

📄 SKILL.md