[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"skill:01M6JW4VCQ7TFSCWZ0CCX4XGRS":3,"skill-same:01M6JW4VCQ7TFSCWZ0CCX4XGRS":76},{"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":18,"publishedAt":41,"linkOnly":42,"markdownContent":43,"markdownBody":44,"frontMatter":45,"refName":46,"commitSha":47,"skillDirectory":48,"forksCount":49,"repositoryHtmlUrl":50,"repositoryHomepageUrl":51,"ownerHtmlUrl":52,"ownerBlogUrl":53,"ownerDescription":54,"updatedAt":55,"install":56,"resources":69},"01M6JW4VCQ7TFSCWZ0CCX4XGRS","constraint-physical",null,"Use this skill when designing structural constraints that prevent invalid actions through the shape, layout, or behavior of the design itself — paths (channels of motion), axes (rotary controls), barriers (blocks). Trigger when designing input controls, drag-and-drop affordances, modal dialogs, or hardware-style structural prevention. Sub-aspect of `constraint`; read that first.","hashgraph-online\u002Fawesome-codex-plugins","hashgraph-online","https:\u002F\u002Favatars.githubusercontent.com\u002Fu\u002F160371962?v=4","01M6CNB6NRJVNNGN14TR01Q6D3","HOL (Hashgraph Online)","01M6JT1HSKKG9V68KQAQGBA7XP",1559,"Apache-2.0","https:\u002F\u002Fgithub.com\u002Fhashgraph-online\u002Fawesome-codex-plugins\u002Fblob\u002Fmain\u002Fplugins\u002FHDeibler\u002Funiversal-design-principles\u002Fplugins\u002Finteraction-and-control-principles\u002Fskills\u002Fconstraint-physical\u002FSKILL.md",[],[19,20,21,22,23,24,25,26,27,28,29,30,31,32,33,34,35,36,37,38,39,40],"constraint","constraint physical","physical","invalid","when","channels","drag","controls","paths","style","input","trigger","design","structural","layout","drop","motion","use","read","first","prevention","actions","2026-11-10 10:12:30",false,"---\nname: constraint-physical\ndescription: 'Use this skill when designing structural constraints that prevent invalid actions through the shape, layout, or behavior of the design itself — paths (channels of motion), axes (rotary controls), barriers (blocks). Trigger when designing input controls, drag-and-drop affordances, modal dialogs, or hardware-style structural prevention. Sub-aspect of `constraint`; read that first.'\n---\n\n# Physical constraints\n\nPhysical constraints prevent invalid actions through the structure of the design — the shape of a connector, the boundary of a screen, the channel of a slider. The user *can't* take the wrong action because the structure rejects it. Stronger than psychological constraints; not always available.\n\n## The three subtypes (from the book)\n\n### Paths\n\nChannels that direct motion. The user can move along the path; off-path movement is impossible or rejected.\n\nSoftware examples:\n\n- **Sliders** constrain motion to one dimension.\n- **Range inputs** constrain values to a defined min\u002Fmax.\n- **Scroll bars** constrain scrolling direction.\n- **Dropdown lists** constrain selection to provided options.\n\n```html\n\u003C!-- Path constraint: value must be 0-100 -->\n\u003Cinput type=\"range\" min=\"0\" max=\"100\" value=\"50\" \u002F>\n\n\u003C!-- Path constraint: choice from fixed set -->\n\u003Cselect>\n  \u003Coption>Small\u003C\u002Foption>\n  \u003Coption>Medium\u003C\u002Foption>\n  \u003Coption>Large\u003C\u002Foption>\n\u003C\u002Fselect>\n```\n\n### Axes\n\nRotary controls. Convert applied force into rotation; effectively infinite range in a small space.\n\nSoftware examples:\n\n- **Rotation gestures** in canvas tools.\n- **Color-wheel pickers** that constrain hue selection to a circular path.\n- **Dial-style controls** for continuous values.\n\n### Barriers\n\nBlock, slow, or redirect motion.\n\nSoftware examples:\n\n- **Modal dialogs** block interaction with content beneath.\n- **Disabled buttons** block their action.\n- **Permission gates** block access to features.\n- **Screen edges** stop cursor motion (Fitts's edge advantage).\n- **Form-validation blocks** prevent submission when invalid.\n\n## Patterns\n\n### Input-type constraints (paths)\n\n```html\n\u003Cinput type=\"email\" \u002F>     \u003C!-- only accepts email format -->\n\u003Cinput type=\"number\" min=\"0\" \u002F>   \u003C!-- only non-negative numbers -->\n\u003Cinput type=\"date\" \u002F>      \u003C!-- only valid dates -->\n\u003Cinput type=\"color\" \u002F>     \u003C!-- only valid hex colors -->\n```\n\nThe browser enforces the constraint; the user can't submit invalid data.\n\n### Drop-zone constraints (barriers)\n\nA drag-and-drop interaction can constrain valid drops at the API level:\n\n```js\ndropZone.addEventListener('dragover', e => {\n  if (isValidTarget(draggedItem, dropZone)) {\n    e.preventDefault();  \u002F\u002F allow drop\n  }\n  \u002F\u002F not preventing default = drop won't fire\n});\n```\n\nThe browser's drag-and-drop API itself uses constraint: `preventDefault` opens the channel; absence keeps it blocked.\n\n### Modal as barrier\n\n```html\n\u003Cdialog open>\n  \u003Ch2>Required action\u003C\u002Fh2>\n  \u003Cp>You must complete this step before continuing.\u003C\u002Fp>\n  \u003Cbutton onclick=\"proceed()\">Continue\u003C\u002Fbutton>\n\u003C\u002Fdialog>\n```\n\nThe dialog blocks interaction with the page beneath. Use sparingly; barriers irritate when they don't serve a clear purpose.\n\n### Disabled state (block)\n\n```html\n\u003Cbutton id=\"submit\" disabled>Submit\u003C\u002Fbutton>\n```\n\nThe button can't trigger its action until enabled. Pair with explanation of what would enable it.\n\n## When to use physical over psychological\n\n- **When the consequence of the wrong action is severe** (data loss, security breach, irreversible operation). Physical constraints are stronger.\n- **When the user is novice** or the system is unfamiliar — psychological constraints rely on prior knowledge that may not exist.\n- **When there's no acceptable failure mode** — make the wrong action impossible.\n\n## When physical constraints over-restrict\n\n- **Format constraints stricter than necessary** — phone fields that reject parentheses; name fields that reject apostrophes.\n- **Hardware-style barriers in software contexts** — a modal that blocks because of a non-blocking concern.\n- **Disabled states that don't explain themselves** — user can't act and doesn't know why.\n\nThe discipline: constrain real requirements; explain when surprises occur.\n\n## Resources\n\n- **Norman, D.** *The Design of Everyday Things* (1988, 2013).\n- **Lidwell, Holden & Butler** (2003).\n- **WCAG** — input-type and validation constraints contribute to accessibility.\n\n## Related sub-skills\n\n- **`constraint`** (parent).\n- **`constraint-psychological`** — the other half; symbols, conventions, mappings.\n- **`affordance`** — affordance + constraint = the action space.\n- **`accessibility-operable`** — physical constraints must be operable across assistive technologies.\n","# Physical constraints\n\nPhysical constraints prevent invalid actions through the structure of the design — the shape of a connector, the boundary of a screen, the channel of a slider. The user *can't* take the wrong action because the structure rejects it. Stronger than psychological constraints; not always available.\n\n## The three subtypes (from the book)\n\n### Paths\n\nChannels that direct motion. The user can move along the path; off-path movement is impossible or rejected.\n\nSoftware examples:\n\n- **Sliders** constrain motion to one dimension.\n- **Range inputs** constrain values to a defined min\u002Fmax.\n- **Scroll bars** constrain scrolling direction.\n- **Dropdown lists** constrain selection to provided options.\n\n```html\n\u003C!-- Path constraint: value must be 0-100 -->\n\u003Cinput type=\"range\" min=\"0\" max=\"100\" value=\"50\" \u002F>\n\n\u003C!-- Path constraint: choice from fixed set -->\n\u003Cselect>\n  \u003Coption>Small\u003C\u002Foption>\n  \u003Coption>Medium\u003C\u002Foption>\n  \u003Coption>Large\u003C\u002Foption>\n\u003C\u002Fselect>\n```\n\n### Axes\n\nRotary controls. Convert applied force into rotation; effectively infinite range in a small space.\n\nSoftware examples:\n\n- **Rotation gestures** in canvas tools.\n- **Color-wheel pickers** that constrain hue selection to a circular path.\n- **Dial-style controls** for continuous values.\n\n### Barriers\n\nBlock, slow, or redirect motion.\n\nSoftware examples:\n\n- **Modal dialogs** block interaction with content beneath.\n- **Disabled buttons** block their action.\n- **Permission gates** block access to features.\n- **Screen edges** stop cursor motion (Fitts's edge advantage).\n- **Form-validation blocks** prevent submission when invalid.\n\n## Patterns\n\n### Input-type constraints (paths)\n\n```html\n\u003Cinput type=\"email\" \u002F>     \u003C!-- only accepts email format -->\n\u003Cinput type=\"number\" min=\"0\" \u002F>   \u003C!-- only non-negative numbers -->\n\u003Cinput type=\"date\" \u002F>      \u003C!-- only valid dates -->\n\u003Cinput type=\"color\" \u002F>     \u003C!-- only valid hex colors -->\n```\n\nThe browser enforces the constraint; the user can't submit invalid data.\n\n### Drop-zone constraints (barriers)\n\nA drag-and-drop interaction can constrain valid drops at the API level:\n\n```js\ndropZone.addEventListener('dragover', e => {\n  if (isValidTarget(draggedItem, dropZone)) {\n    e.preventDefault();  \u002F\u002F allow drop\n  }\n  \u002F\u002F not preventing default = drop won't fire\n});\n```\n\nThe browser's drag-and-drop API itself uses constraint: `preventDefault` opens the channel; absence keeps it blocked.\n\n### Modal as barrier\n\n```html\n\u003Cdialog open>\n  \u003Ch2>Required action\u003C\u002Fh2>\n  \u003Cp>You must complete this step before continuing.\u003C\u002Fp>\n  \u003Cbutton onclick=\"proceed()\">Continue\u003C\u002Fbutton>\n\u003C\u002Fdialog>\n```\n\nThe dialog blocks interaction with the page beneath. Use sparingly; barriers irritate when they don't serve a clear purpose.\n\n### Disabled state (block)\n\n```html\n\u003Cbutton id=\"submit\" disabled>Submit\u003C\u002Fbutton>\n```\n\nThe button can't trigger its action until enabled. Pair with explanation of what would enable it.\n\n## When to use physical over psychological\n\n- **When the consequence of the wrong action is severe** (data loss, security breach, irreversible operation). Physical constraints are stronger.\n- **When the user is novice** or the system is unfamiliar — psychological constraints rely on prior knowledge that may not exist.\n- **When there's no acceptable failure mode** — make the wrong action impossible.\n\n## When physical constraints over-restrict\n\n- **Format constraints stricter than necessary** — phone fields that reject parentheses; name fields that reject apostrophes.\n- **Hardware-style barriers in software contexts** — a modal that blocks because of a non-blocking concern.\n- **Disabled states that don't explain themselves** — user can't act and doesn't know why.\n\nThe discipline: constrain real requirements; explain when surprises occur.\n\n## Resources\n\n- **Norman, D.** *The Design of Everyday Things* (1988, 2013).\n- **Lidwell, Holden & Butler** (2003).\n- **WCAG** — input-type and validation constraints contribute to accessibility.\n\n## Related sub-skills\n\n- **`constraint`** (parent).\n- **`constraint-psychological`** — the other half; symbols, conventions, mappings.\n- **`affordance`** — affordance + constraint = the action space.\n- **`accessibility-operable`** — physical constraints must be operable across assistive technologies.\n",{"name":5,"description":7},"main","b0f0a87593c578a7898eccaf1b363f7f87c1f99b","plugins\u002FHDeibler\u002Funiversal-design-principles\u002Fplugins\u002Finteraction-and-control-principles\u002Fskills\u002Fconstraint-physical",474,"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-11 14:40:14",{"source":8,"skillName":5,"commands":57,"prompt":67,"zipAvailable":68},[58,61,64],{"tool":59,"command":60},"npx","npx skills add hashgraph-online\u002Fawesome-codex-plugins --skill constraint-physical",{"tool":62,"command":63},"bunx","bunx skills add hashgraph-online\u002Fawesome-codex-plugins --skill constraint-physical",{"tool":65,"command":66},"pnpm","pnpm dlx skills add hashgraph-online\u002Fawesome-codex-plugins --skill constraint-physical","安装技能，技能地址：https:\u002F\u002Fgithub.com\u002Fhashgraph-online\u002Fawesome-codex-plugins\u002Fblob\u002Fmain\u002Fplugins\u002FHDeibler\u002Funiversal-design-principles\u002Fplugins\u002Finteraction-and-control-principles\u002Fskills\u002Fconstraint-physical\u002FSKILL.md",true,[70],{"path":71,"resourceType":72,"resourceTypeDesc":73,"sizeBytes":74,"sourceHtmlUrl":75},"references\u002Fstructural-prevention-cases.md","REFERENCE","参考文档",2700,"https:\u002F\u002Fgithub.com\u002Fhashgraph-online\u002Fawesome-codex-plugins\u002Fblob\u002Fmain\u002Fplugins\u002FHDeibler\u002Funiversal-design-principles\u002Fplugins\u002Finteraction-and-control-principles\u002Fskills\u002Fconstraint-physical\u002Freferences\u002Fstructural-prevention-cases.md",[77,85,92,99,124,149],{"skillNo":78,"name":79,"nameZh":6,"description":80,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":81,"categories":82,"keywords":83,"publishedAt":84},"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.","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":86,"name":87,"nameZh":6,"description":88,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":89,"categories":90,"keywords":91,"publishedAt":84},"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":93,"name":94,"nameZh":6,"description":95,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":96,"categories":97,"keywords":98,"publishedAt":84},"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":100,"name":101,"nameZh":6,"description":102,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":103,"categories":104,"keywords":105,"publishedAt":41},"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",[],[106,107,108,109,110,111,112,113,114,31,115,23,116,117,118,119,120,121,122,123],"search","deja search","never","error","ready","memory","re","decide","fix","debugging","you","done","reviewer","io","change","cli","merge","past",{"skillNo":125,"name":126,"nameZh":6,"description":127,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":128,"categories":129,"keywords":130,"publishedAt":41},"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",[],[131,132,133,119,134,135,136,137,138,139,140,141,142,143,111,144,145,146,147,148],"deja reflect","reflect","review","with","record","github","next","https","node","Rules","decisions","brew","remember","project rules","project","session","end","reflection",{"skillNo":150,"name":151,"nameZh":6,"description":152,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":153,"categories":154,"keywords":166,"publishedAt":41},"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",[155,160,163],{"categoryNo":156,"categoryName":157,"taxonomyType":158,"taxonomyTypeDesc":159},"01JBSEEDCAT000000000000016","图像与多媒体","SCENARIO","使用场景",{"categoryNo":161,"categoryName":162,"taxonomyType":158,"taxonomyTypeDesc":159},"01JBSEEDCAT000000000000023","Skill与智能体开发",{"categoryNo":164,"categoryName":165,"taxonomyType":158,"taxonomyTypeDesc":159},"01JBSEEDCAT000000000000010","后端与接口",[151,167,168,169,170,171,172,145,173,112,174,175,176,177,23,178,179,180,181,182],"URL","Video","short-form","standalone","PDF","viral","tiktok","short","social","MCP","song","image","mcp server","schedule","api","publish"]