[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"skill:01M6MCDXDTRQRET8HABCS1EM2Y":3,"skill-same:01M6MCDXDTRQRET8HABCS1EM2Y":92},{"skillNo":4,"name":5,"nameZh":6,"description":7,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":16,"categories":17,"keywords":23,"publishedAt":45,"linkOnly":46,"markdownContent":47,"markdownBody":48,"frontMatter":49,"refName":56,"commitSha":57,"skillDirectory":58,"forksCount":59,"repositoryHtmlUrl":60,"repositoryHomepageUrl":61,"ownerHtmlUrl":62,"ownerBlogUrl":63,"ownerDescription":64,"updatedAt":65,"install":66,"resources":79},"01M6MCDXDTRQRET8HABCS1EM2Y","htmx-interactivity",null,"Coordinate htmx with lightweight browser-side interactivity. Use when adding Alpine.js, _hyperscript, local UI state, custom events, dialogs, transitions, keyboard behavior, or browser-only state around htmx swaps in a server-rendered app.","hashgraph-online\u002Fawesome-codex-plugins","hashgraph-online","https:\u002F\u002Favatars.githubusercontent.com\u002Fu\u002F160371962?v=4","01M6CNB6NRJVNNGN14TR01Q6D3","HOL (Hashgraph Online)","01M6JT1HSKKG9V68KQAQGBA7XP",1571,"MIT","https:\u002F\u002Fgithub.com\u002Fhashgraph-online\u002Fawesome-codex-plugins\u002Fblob\u002Fmain\u002Fplugins\u002FLVTD-LLC\u002Fskills\u002Fskills\u002Fhtmx-interactivity\u002FSKILL.md",[18],{"categoryNo":19,"categoryName":20,"taxonomyType":21,"taxonomyTypeDesc":22},"01JBSEEDCAT000000000000009","前端开发","SCENARIO","使用场景",[24,25,26,27,28,29,30,31,32,33,34,35,36,37,38,39,40,41,42,43,44],"htmx interactivity","htmx","local","when","custom","hyperscript","with","events","keyboard","app","swaps","frontend","coordinate","only","use","server","ui","browser","state","code","codex","2026-11-10 10:12:30",false,"---\nname: htmx-interactivity\ndescription: Coordinate htmx with lightweight browser-side interactivity. Use when adding Alpine.js, _hyperscript, local UI state, custom events, dialogs, transitions, keyboard behavior, or browser-only state around htmx swaps in a server-rendered app.\nlicense: MIT\ncompatibility: Codex, Claude Code, and other Agent Skills-compatible clients.\nmetadata:\n  version: \"0.1.0\"\n  displayName: htmx Interactivity\n  category: Frontend\n  tags: htmx,alpinejs,hyperscript,frontend,ui-state\n---\n\n# htmx Interactivity\n\nUse this skill when htmx handles server trips but the page still needs local browser behavior. Keep the ownership line explicit so server-rendered HTML and client-side state do not fight each other.\n\n## Ownership Rules\n\n- htmx owns server requests, fragment swaps, history updates, and server-triggered events.\n- The server owns durable state, validation, permissions, and canonical HTML.\n- Alpine or plain JavaScript owns local state such as menu open\u002Fclosed, tabs, disclosure state, temporary filters, focus helpers, and small transitions.\n- `_hyperscript` is best for short event-driven behaviors attached to markup.\n- Do not mirror the same durable state in both server data and a client store unless there is a reconciliation plan.\n\n## Use Alpine When\n\n- A component has local state that changes without a server request.\n- You need a dropdown, popover, modal shell, tab set, disclosure, or preview toggle.\n- You need to coordinate htmx lifecycle events with UI state.\n- The state naturally belongs near the markup and is simple enough to read inline.\n\nKeep persistent Alpine state outside htmx targets that will be replaced. If htmx swaps the element that owns `x-data`, that state resets.\n\n## Use _hyperscript When\n\n- The behavior is a small event script, such as adding a class, waiting, then removing it.\n- The script reads like a local interaction, not application business logic.\n- The team accepts `_hyperscript` syntax as part of the template layer.\n\nAvoid `_hyperscript` for complex state machines, security-sensitive logic, large data transforms, or behavior that needs substantial tests.\n\n## Event Boundary Pattern\n\nUse events as the bridge between server results and local browser state:\n\n1. The htmx request submits to the server.\n2. The server returns HTML and optionally triggers a domain event.\n3. Alpine, `_hyperscript`, or plain JavaScript listens for the event.\n4. Local UI state updates, such as closing a modal or focusing a saved row.\n\nPrefer domain event names over implementation names:\n\n```html\n\u003Csection x-data=\"{ open: true }\" @profile-saved.window=\"open = false\">\n  \u003Cform hx-post=\"\u002Fprofile\" hx-target=\"#profile-panel\" hx-swap=\"outerHTML\">\n    ...\n  \u003C\u002Fform>\n\u003C\u002Fsection>\n```\n\n## htmx Lifecycle Hooks\n\nUse lifecycle events for cross-cutting behavior:\n\n- `htmx:configRequest` for headers such as CSRF when the framework needs them.\n- `htmx:beforeRequest` and `htmx:afterRequest` for instrumentation and loading behavior that attributes cannot express.\n- `htmx:beforeSwap` for exceptional status handling.\n- `htmx:afterSwap` or `htmx:load` for initializing third-party widgets in swapped content.\n- WebSocket extension events only in code that owns realtime behavior.\n\nPrefer htmx attributes such as `hx-indicator` and `hx-disabled-elt` before writing lifecycle JavaScript.\n\n## Swaps And Local State\n\n- Keep long-lived local state outside replaceable htmx targets.\n- If a target contains initialized third-party widgets, define how they are destroyed or re-initialized.\n- After injecting htmx-enabled markup outside an htmx request, use `htmx.process` from the `htmx-js-api` skill.\n- Avoid global listeners that accumulate every time a fragment is swapped.\n\n## Data From The Server\n\n- Prefer HTML attributes or inert JSON script blocks for server-provided data.\n- Escape all server-rendered values before they enter JavaScript expressions.\n- Use text binding APIs for untrusted display text.\n- Avoid embedding secrets, signed tokens, or authorization facts in local state.\n\n## Accessibility\n\n- Use real buttons for local actions.\n- Bind `aria-expanded`, `aria-controls`, `aria-selected`, and `aria-hidden` from local state.\n- Preserve focus when opening\u002Fclosing dialogs and after successful htmx swaps.\n- Support Escape for dismissible overlays.\n- Avoid replacing focused elements without a plan to move focus somewhere sensible.\n\n## CSP And Security\n\nAlpine, `_hyperscript`, inline event attributes, and `hx-on` can all affect Content Security Policy. Use `htmx-security` when adding or tightening CSP, accepting user-authored HTML, or choosing CSP-compatible builds.\n\n## Avoid\n\n- Do not restart Alpine after every htmx swap.\n- Do not put durable server truth in a client store just to avoid a small htmx request.\n- Do not let local scripts bypass server authorization or validation.\n- Do not place broad event handlers in fragments that may be swapped repeatedly.\n- Do not use `x-html` or equivalent APIs for untrusted content.\n","# htmx Interactivity\n\nUse this skill when htmx handles server trips but the page still needs local browser behavior. Keep the ownership line explicit so server-rendered HTML and client-side state do not fight each other.\n\n## Ownership Rules\n\n- htmx owns server requests, fragment swaps, history updates, and server-triggered events.\n- The server owns durable state, validation, permissions, and canonical HTML.\n- Alpine or plain JavaScript owns local state such as menu open\u002Fclosed, tabs, disclosure state, temporary filters, focus helpers, and small transitions.\n- `_hyperscript` is best for short event-driven behaviors attached to markup.\n- Do not mirror the same durable state in both server data and a client store unless there is a reconciliation plan.\n\n## Use Alpine When\n\n- A component has local state that changes without a server request.\n- You need a dropdown, popover, modal shell, tab set, disclosure, or preview toggle.\n- You need to coordinate htmx lifecycle events with UI state.\n- The state naturally belongs near the markup and is simple enough to read inline.\n\nKeep persistent Alpine state outside htmx targets that will be replaced. If htmx swaps the element that owns `x-data`, that state resets.\n\n## Use _hyperscript When\n\n- The behavior is a small event script, such as adding a class, waiting, then removing it.\n- The script reads like a local interaction, not application business logic.\n- The team accepts `_hyperscript` syntax as part of the template layer.\n\nAvoid `_hyperscript` for complex state machines, security-sensitive logic, large data transforms, or behavior that needs substantial tests.\n\n## Event Boundary Pattern\n\nUse events as the bridge between server results and local browser state:\n\n1. The htmx request submits to the server.\n2. The server returns HTML and optionally triggers a domain event.\n3. Alpine, `_hyperscript`, or plain JavaScript listens for the event.\n4. Local UI state updates, such as closing a modal or focusing a saved row.\n\nPrefer domain event names over implementation names:\n\n```html\n\u003Csection x-data=\"{ open: true }\" @profile-saved.window=\"open = false\">\n  \u003Cform hx-post=\"\u002Fprofile\" hx-target=\"#profile-panel\" hx-swap=\"outerHTML\">\n    ...\n  \u003C\u002Fform>\n\u003C\u002Fsection>\n```\n\n## htmx Lifecycle Hooks\n\nUse lifecycle events for cross-cutting behavior:\n\n- `htmx:configRequest` for headers such as CSRF when the framework needs them.\n- `htmx:beforeRequest` and `htmx:afterRequest` for instrumentation and loading behavior that attributes cannot express.\n- `htmx:beforeSwap` for exceptional status handling.\n- `htmx:afterSwap` or `htmx:load` for initializing third-party widgets in swapped content.\n- WebSocket extension events only in code that owns realtime behavior.\n\nPrefer htmx attributes such as `hx-indicator` and `hx-disabled-elt` before writing lifecycle JavaScript.\n\n## Swaps And Local State\n\n- Keep long-lived local state outside replaceable htmx targets.\n- If a target contains initialized third-party widgets, define how they are destroyed or re-initialized.\n- After injecting htmx-enabled markup outside an htmx request, use `htmx.process` from the `htmx-js-api` skill.\n- Avoid global listeners that accumulate every time a fragment is swapped.\n\n## Data From The Server\n\n- Prefer HTML attributes or inert JSON script blocks for server-provided data.\n- Escape all server-rendered values before they enter JavaScript expressions.\n- Use text binding APIs for untrusted display text.\n- Avoid embedding secrets, signed tokens, or authorization facts in local state.\n\n## Accessibility\n\n- Use real buttons for local actions.\n- Bind `aria-expanded`, `aria-controls`, `aria-selected`, and `aria-hidden` from local state.\n- Preserve focus when opening\u002Fclosing dialogs and after successful htmx swaps.\n- Support Escape for dismissible overlays.\n- Avoid replacing focused elements without a plan to move focus somewhere sensible.\n\n## CSP And Security\n\nAlpine, `_hyperscript`, inline event attributes, and `hx-on` can all affect Content Security Policy. Use `htmx-security` when adding or tightening CSP, accepting user-authored HTML, or choosing CSP-compatible builds.\n\n## Avoid\n\n- Do not restart Alpine after every htmx swap.\n- Do not put durable server truth in a client store just to avoid a small htmx request.\n- Do not let local scripts bypass server authorization or validation.\n- Do not place broad event handlers in fragments that may be swapped repeatedly.\n- Do not use `x-html` or equivalent APIs for untrusted content.\n",{"name":5,"license":15,"metadata":50,"description":7,"compatibility":55},{"tags":51,"version":52,"category":53,"displayName":54},"htmx,alpinejs,hyperscript,frontend,ui-state","0.1.0","Frontend","htmx Interactivity","Codex, Claude Code, and other Agent Skills-compatible clients.","main","2b63f856ce19c2a797929cacabd9e0fc936812fa","plugins\u002FLVTD-LLC\u002Fskills\u002Fskills\u002Fhtmx-interactivity",490,"https:\u002F\u002Fgithub.com\u002Fhashgraph-online\u002Fawesome-codex-plugins","https:\u002F\u002Fhol.org\u002Fplugins\u002Fbest-codex-plugins","https:\u002F\u002Fgithub.com\u002Fhashgraph-online","https:\u002F\u002Fhol.org","Open-source standards and developer tools for interoperable AI agents: discovery, identity, communication, payments, privacy and security.","2026-11-14 02:12:02",{"source":8,"skillName":5,"commands":67,"prompt":77,"zipAvailable":78},[68,71,74],{"tool":69,"command":70},"npx","npx skills add hashgraph-online\u002Fawesome-codex-plugins --skill htmx-interactivity",{"tool":72,"command":73},"bunx","bunx skills add hashgraph-online\u002Fawesome-codex-plugins --skill htmx-interactivity",{"tool":75,"command":76},"pnpm","pnpm dlx skills add hashgraph-online\u002Fawesome-codex-plugins --skill htmx-interactivity","安装技能，技能地址：https:\u002F\u002Fgithub.com\u002Fhashgraph-online\u002Fawesome-codex-plugins\u002Fblob\u002Fmain\u002Fplugins\u002FLVTD-LLC\u002Fskills\u002Fskills\u002Fhtmx-interactivity\u002FSKILL.md",true,[80,86],{"path":81,"resourceType":82,"resourceTypeDesc":83,"sizeBytes":84,"sourceHtmlUrl":85},"agents\u002Fopenai.yaml","REFERENCE","参考文档",319,"https:\u002F\u002Fgithub.com\u002Fhashgraph-online\u002Fawesome-codex-plugins\u002Fblob\u002Fmain\u002Fplugins\u002FLVTD-LLC\u002Fskills\u002Fskills\u002Fhtmx-interactivity\u002Fagents\u002Fopenai.yaml",{"path":87,"resourceType":88,"resourceTypeDesc":89,"sizeBytes":90,"sourceHtmlUrl":91},"assets\u002Ficons8-code.svg","ASSET","资产文件",460,"https:\u002F\u002Fgithub.com\u002Fhashgraph-online\u002Fawesome-codex-plugins\u002Fblob\u002Fmain\u002Fplugins\u002FLVTD-LLC\u002Fskills\u002Fskills\u002Fhtmx-interactivity\u002Fassets\u002Ficons8-code.svg",[93,102,109,116,142,166],{"skillNo":94,"name":95,"nameZh":6,"description":96,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":97,"licenseFileUrl":6,"sourceHtmlUrl":98,"categories":99,"keywords":100,"publishedAt":101},"01M746ZWACVKMZ1BJXJZHYJSSX","migrate-to-e2e","Moves an existing Playwright, Cypress, Selenium, Appium, Detox, Maestro, or TesterArmy suite to e2e one slice at a time, with the old suite running beside the new one until each ported test is proven. Keeps a MIGRATION.md progress file so any later session resumes where the last stopped. Optionally plants a defect to show both suites catch it. Use for \u002Fmigrate-to-e2e, \"migrate our tests to e2e\", \"port these Maestro flows\", \"move our TesterArmy tests\", or when a project has an e2e config and an older suite still running.","Apache-2.0","https:\u002F\u002Fgithub.com\u002Fhashgraph-online\u002Fawesome-codex-plugins\u002Fblob\u002Fmain\u002Fplugins\u002Ftester-army\u002Fe2e\u002Fskills\u002Fmigrate-to-e2e\u002FSKILL.md",[],[],"2026-11-11 15:11:14",{"skillNo":103,"name":104,"nameZh":6,"description":105,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":97,"licenseFileUrl":6,"sourceHtmlUrl":106,"categories":107,"keywords":108,"publishedAt":101},"01M746ZPTAX1Q0FBKAB1CYND7E","e2e","Writes, runs, and debugs end-to-end tests for web and mobile apps with e2e, the agentic test runner, which mixes agent.act goals with exact locator assertions on a Playwright browser or an iOS or Android device. Also drives a project's running app live over the e2e MCP server to look at a screen, check a UI change, take a screenshot or record a video, and try a locator; and runs bug bashes, parallel e2e explore runs with each bug proven by a repro test. Use when a project depends on e2e or has an e2e.config.ts, when asked for end-to-end, browser, mobile, or agentic UI tests, to check a change in the running app, to QA or bug bash an app or branch, or when an e2e run fails.","https:\u002F\u002Fgithub.com\u002Fhashgraph-online\u002Fawesome-codex-plugins\u002Fblob\u002Fmain\u002Fplugins\u002Ftester-army\u002Fe2e\u002Fskills\u002Fe2e\u002FSKILL.md",[],[],{"skillNo":110,"name":111,"nameZh":6,"description":112,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":97,"licenseFileUrl":6,"sourceHtmlUrl":113,"categories":114,"keywords":115,"publishedAt":101},"01M746ZJN784HVHMDP9MQGCSGG","create-verification-skill","Generate a project-local verify-\u003Capp> skill on top of e2e, so any coding agent can launch the app, check it is worth driving, exercise a feature the way a user does, keep evidence, and bug bash it. Writes the skill, a feature map with one explore charter per feature, and proves it once. Use for \u002Fcreate-verification-skill, \"make a verification skill for this repo\", or when a project has no scripted way to prove UI behavior.","https:\u002F\u002Fgithub.com\u002Fhashgraph-online\u002Fawesome-codex-plugins\u002Fblob\u002Fmain\u002Fplugins\u002Ftester-army\u002Fe2e\u002Fskills\u002Fcreate-verification-skill\u002FSKILL.md",[],[],{"skillNo":117,"name":118,"nameZh":6,"description":119,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":97,"licenseFileUrl":6,"sourceHtmlUrl":120,"categories":121,"keywords":122,"publishedAt":45},"01M716A6ETNB9B1SQ3GXZC75VR","deja-search","deja-vu memory — search the user's past AI coding sessions with the deja CLI. Holds what they already settled and never wrote into the repo (naming rules, banned or already-tried tools, required checks before merge, preferred values, who owns what). Use before your first edit in a task, before you call a change done or ready to merge, before you recommend a tool, library, design or reviewer, before re-debugging an error that may already be solved, when they say 'didn't we fix this before', 'what did we decide about X' or 'I already have that', and before telling them something on this machine does not exist.","https:\u002F\u002Fgithub.com\u002Fhashgraph-online\u002Fawesome-codex-plugins\u002Fblob\u002Fmain\u002Fplugins\u002Fvshulcz\u002Fdeja-vu\u002Fskills\u002Fdeja-search\u002FSKILL.md",[],[123,124,125,126,127,128,129,130,131,132,133,27,134,135,136,137,138,139,140,141],"search","deja search","never","error","ready","memory","re","decide","fix","design","debugging","you","done","reviewer","io","change","cli","merge","past",{"skillNo":143,"name":144,"nameZh":6,"description":145,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":97,"licenseFileUrl":6,"sourceHtmlUrl":146,"categories":147,"keywords":148,"publishedAt":45},"01M716A3J2W5SENSE9VGMXB375","deja-reflect","End-of-session reflection and memory curation with deja-vu. Review what was decided, what commands broke and what repaired them, and record durable project rules or decisions with deja remember so the next session starts with them.","https:\u002F\u002Fgithub.com\u002Fhashgraph-online\u002Fawesome-codex-plugins\u002Fblob\u002Fmain\u002Fplugins\u002Fvshulcz\u002Fdeja-vu\u002Fskills\u002Fdeja-reflect\u002FSKILL.md",[],[149,150,151,137,30,152,153,154,155,156,157,158,159,160,128,161,162,163,164,165],"deja reflect","reflect","review","record","github","next","https","node","Rules","decisions","brew","remember","project rules","project","session","end","reflection",{"skillNo":167,"name":168,"nameZh":6,"description":169,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":97,"licenseFileUrl":6,"sourceHtmlUrl":170,"categories":171,"keywords":181,"publishedAt":45},"01M715T3RR4BAYSR57HPPTJ0PF","revid","Make, edit, export and post AI videos with Revid (revid.ai) through the Revid MCP server. Use whenever the user wants a short-form or long-form video made (from an idea, a script, a URL, an article, a PDF, a tweet, a product page, their own clips, or a song), wants to find what is going viral on TikTok, YouTube, Instagram or X before making something, wants to edit or re-export an existing Revid project, generate a standalone AI image or clip, make a series episode, or publish and schedule a finished video to connected social accounts. Covers setup (hosted MCP with OAuth, or an API key), the 36 tools, credits, polling and the rules for publishing. Routes to the more specific revid-* skills when one fits.","https:\u002F\u002Fgithub.com\u002Fhashgraph-online\u002Fawesome-codex-plugins\u002Fblob\u002Fmain\u002Fplugins\u002Ftmakersas\u002Frevid-skills\u002Fskills\u002Frevid\u002FSKILL.md",[172,175,178],{"categoryNo":173,"categoryName":174,"taxonomyType":21,"taxonomyTypeDesc":22},"01JBSEEDCAT000000000000016","图像与多媒体",{"categoryNo":176,"categoryName":177,"taxonomyType":21,"taxonomyTypeDesc":22},"01JBSEEDCAT000000000000023","Skill与智能体开发",{"categoryNo":179,"categoryName":180,"taxonomyType":21,"taxonomyTypeDesc":22},"01JBSEEDCAT000000000000010","后端与接口",[168,182,183,184,185,186,187,162,188,129,189,190,191,192,27,193,194,195,196,197],"URL","Video","short-form","standalone","PDF","viral","tiktok","short","social","MCP","song","image","mcp server","schedule","api","publish"]