[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"skill:01M6MP3FD5XK9Q3J34ZVMYPRYY":3,"skill-same:01M6MP3FD5XK9Q3J34ZVMYPRYY":89},{"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":31,"publishedAt":52,"linkOnly":53,"markdownContent":54,"markdownBody":55,"frontMatter":56,"refName":59,"commitSha":60,"skillDirectory":61,"forksCount":62,"repositoryHtmlUrl":63,"repositoryHomepageUrl":64,"ownerHtmlUrl":65,"ownerBlogUrl":66,"ownerDescription":67,"updatedAt":68,"install":69,"resources":82},"01M6MP3FD5XK9Q3J34ZVMYPRYY","design-fix",null,"Compare one already-implemented screen or component against its Figma source and fix the deviations you pick -- reads the node live through the figma-bridge MCP, or from the Node Specs of an existing \u002Fdesign plan, then diffs box, layout, typography, fill, stroke, radius, effects, and content against the code that renders it. Reports first, fixes only what you select, and never touches Figma.","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\u002Fyagizdo\u002Fquiver\u002Fskills\u002Fdesign-fix\u002FSKILL.md",[18,23,26],{"categoryNo":19,"categoryName":20,"taxonomyType":21,"taxonomyTypeDesc":22},"01JBSEEDCAT000000000000015","视觉设计","SCENARIO","使用场景",{"categoryNo":24,"categoryName":25,"taxonomyType":21,"taxonomyTypeDesc":22},"01JBSEEDCAT000000000000023","Skill与智能体开发",{"categoryNo":27,"categoryName":28,"taxonomyType":29,"taxonomyTypeDesc":30},"01JBSEEDCAT000000000000032","设计师","PROFESSION","适用职业",[32,33,34,35,36,37,38,39,40,41,42,43,44,45,46,47,48,49,50,51],"fix","design fix","design","bridge","MCP","effects","you","card","pixel","reports","only","never","code","diffs","short","broken","pick","select","plan","figma","2026-11-10 10:12:30",false,"---\nname: design-fix\ndescription: \"Compare one already-implemented screen or component against its Figma source and fix the deviations you pick -- reads the node live through the figma-bridge MCP, or from the Node Specs of an existing \u002Fdesign plan, then diffs box, layout, typography, fill, stroke, radius, effects, and content against the code that renders it. Reports first, fixes only what you select, and never touches Figma.\"\nargument-hint: \"\u003Cnode id, component path, or a short description of the broken UI> [anything extra you want checked]\"\nwhen-to-use: \"user has a UI that is built but does not match the design -- '\u002Fdesign-fix', 'this screen does not match Figma', 'the spacing is off compared to the design', 'why does this button look wrong', 'compare this component to the design and fix it', 'the card is not pixel perfect'\"\n---\n\n# Instructions\n\nYou compare one built thing against one design, and you fix what the user\npicks. The design is the source of truth for values; the code is the source of\ntruth for what exists. You never guess at either -- every number you report was\nread from a Figma node or from a line of code you opened.\n\nThis skill has one target per run. It reports before it changes anything, and\nit changes nothing the user did not select.\n\n**Never call a figma-bridge write tool** (`create_*`, `set_*`, `delete_nodes`,\n`duplicate_nodes`, `reparent_nodes`, `group_nodes`, `ungroup_node`). This skill\nis read-only against Figma. A design that does not match the code is a code\nfinding, never a reason to edit the design.\n\n## Step 0 -- Arguments\n\nRead `$ARGUMENTS` and split it into four things. Any of them may be absent.\n\n1. **A Figma node ID** -- `4029:12345`, or the instance-child form\n   `I12740:17806;12740:17793`. Figma share URLs write IDs with a hyphen\n   (`4029-12345`); the bridge rejects hyphens, so normalize every hyphen\n   between two digit runs into a colon before calling any tool.\n2. **A plan path** -- a `.md` path under a `plans\u002F` directory, or any `.md`\n   path whose file carries a `### Node Specs` block. A plan path is the design\n   side, never a code target; read the file before deciding which of the two a\n   path is.\n3. **A code target** -- a path, a file name, or a component or class name.\n4. **Extra checks** -- anything else the user wrote in plain words\n   (\"also check the icon size\", \"the shadow looks too strong\"). Add these to\n   the field list in Step 3 for this run only.\n\nNothing in the arguments is required. An empty invocation is not an error --\nStep 1 falls through to whatever is selected on the Figma canvas.\n\n## Step 1 -- Resolve the Design Side\n\nResolve the design in this order and stop at the first that answers.\n\n**1. A plan path in the arguments.** Read the `### Node Specs` block of the\nplan and use the recorded values. Say which plan was used and when it was\nwritten -- a plan is a snapshot, and a design that moved since is a deviation\nthis run cannot see. The bridge is not needed on this path; do not load its\nschemas.\n\n**2. A node ID in the arguments, or no plan path given.** Both need the\nbridge. Load the read-side schemas:\n\n`ToolSearch` with query\n`\"select:mcp__figma-bridge__list_files,mcp__figma-bridge__get_selection,mcp__figma-bridge__get_node,mcp__figma-bridge__get_design_context,mcp__figma-bridge__get_variable_defs,mcp__figma-bridge__get_styles\"`\n\nIf `ToolSearch` returns no figma-bridge tools, the MCP server is not\nconfigured. Print exactly:\n\n```\n> figma-bridge MCP is not available. Setup is two pieces -- the MCP server and\n> a Figma plugin imported by hand -- and the steps are in the README's\n> External Dependencies section. Leave the plugin running inside the Figma file\n> you want to read, then retry \u002Fdesign-fix.\n> You can also point this skill at an existing plan, which needs no bridge:\n>   \u002Fdesign-fix .claude\u002Fplans\u002F\u003Cslug>-design-plan.md\n```\n\n**Stop here.**\n\nWith the tools loaded, call `list_files`. An empty result means no Figma file\nis connected -- print the same kind of note, naming the plugin, and stop. One\nfile: use its `fileKey` for every later call. More than one: `AskUserQuestion`\nwith one button per `fileName`, and carry the chosen `fileKey` into every call,\nbecause the bridge requires it once more than one file is connected.\n\nThen resolve the node: the ID from the arguments, otherwise `get_selection`.\n\n**3. Nothing resolves.** Print:\n\n```\n> Nothing to compare against. Select the frame or component in Figma, or pass\n> a node ID or a plan path:\n>   \u002Fdesign-fix 4029:12345\n>   \u002Fdesign-fix .claude\u002Fplans\u002F\u003Cslug>-design-plan.md\n```\n\n**Stop here.**\n\nOn the live path, read the node with `get_node` and `get_design_context`, and\nresolve every variable and style reference with `get_variable_defs` and\n`get_styles` -- a raw hex in a report the project expresses as a token is a\nfinding the user cannot act on.\n\nPrint one line: `> Design side: {node name} ({node id})` or\n`> Design side: {plan path}, written {date}`.\n\nWhen more than one node resolves -- a selection of several frames, or a plan\nwith several specs -- this skill compares **one**. Use `AskUserQuestion` with\none button per node (up to 4, largest first) to pick the target. Batch scanning\nis deliberately not a mode: a run that reports on six screens at once produces\na list nobody acts on.\n\n## Step 2 -- Resolve the Code Side\n\nFind the code that renders the resolved node. This is the only step that\nsearches the codebase: resolve `codegraph_available` and `lsp_available` with\nthe detection flows in `skills\u002Fcode-navigation\u002FSKILL.md`, then search under its\nCode Navigation Strategy. Search, in order, for: the code target named in the\narguments, the node's name as a component or class name, the literal strings in\nits text children, and the route named in the plan's `Route:` line when a plan\nwas used.\n\nPrint the files you resolved: `> Code side: {path}:{line range}`.\n\n**When no implementation is found, print this and stop:**\n\n```\n> No implementation found for {node name}. There is nothing to compare yet.\n>\n> Build it first:\n>   \u002Fquiver:design {node id}        writes an implementation plan\n>   \u002Fdesign-build            builds the plan\n```\n\n**Stop here. Do not ask whether to fix, build, or scaffold anything.** This is\nthe whole reason the gate exists: offering a fix pass for a screen that was\nnever built is a question with no correct answer, and it is the defect this\nskill was written to avoid. A missing implementation is a report, not a prompt.\n\nWhen the search finds several candidates and none is clearly the renderer, ask\nwith `AskUserQuestion` -- one button per candidate path. Do not guess between\ntwo files that both look plausible; a comparison against the wrong file\nproduces findings that are all false.\n\n## Step 3 -- Compare\n\nCompare these fields, plus anything the user named in the arguments. Omit a row\nfor any property the Figma node does not set -- an unset property is not a\ndeviation.\n\n| Field | What is compared |\n|-------|------------------|\n| Box | Width and height, subject to the Fit rule below |\n| Layout | Direction, gap, padding (all four sides), main-axis and cross-axis alignment |\n| Typography | Family, weight, size, line height, letter spacing |\n| Fill | Background color, expressed as the project's token when one maps |\n| Stroke | Width, position (inside, center, outside), color |\n| Radius | All four corners |\n| Effects | Shadows and blurs: offset, blur, spread, color, opacity |\n| Content | The literal text of every text node, or its i18n key when the project has a translation layer |\n\n**The Fit rule.** A Figma axis whose auto-layout sizing mode is `fill` must\nnever be compared against its measured literal. The measured number is what\nthat axis happened to be inside one frame width; code expressing the axis as\nfill (`double.infinity`, `width: 100%`, `flex: 1`, a stretched cross axis) is\n**correct**, and the mismatch is not a finding. The finding on a `fill` axis is\nthe opposite case: a hardcoded literal in the code where the design says fill.\nA comparison that misses this reports a false deviation on every responsive\ncomponent in the project, which is worse than reporting nothing.\n\n**Three things are never a deviation:**\n\n- A difference the Fit rule explains.\n- A property Figma does not set on the node.\n- A value the code reads correctly from a theme token whose *definition* is\n  what differs. That belongs in the Tokens section of Step 4 -- the code is\n  right, the token is wrong, and fixing it changes every screen that uses it.\n\n**Severity is earned, not assigned:**\n\n- **High** -- visible without measuring: a text string that differs, an element\n  present in the design and absent in the code, an element on the wrong axis or\n  in the wrong order, a color from a different token family, a hardcoded\n  literal on an axis the design fills.\n- **Medium** -- right family, wrong step: `12` where the design says `16`,\n  `radii.sm` where the design says `radii.md`, a font weight one step off.\n- **Low** -- a difference at or below one logical pixel, or a property the\n  platform rounds on its own.\n\n## Step 4 -- Report\n\nPrint the deviations, highest severity first:\n\n```\n| # | Field | Figma | Code | Where | Severity |\n|---|-------|-------|------|-------|----------|\n| 1 | Content | \"Continue\" | \"Devam\" | lib\u002Fwidgets\u002Fpay_button.dart:31 | High |\n| 2 | Padding left | 16 | 12 | lib\u002Fwidgets\u002Fpay_button.dart:42 | Medium |\n```\n\nThen, only when they have entries:\n\n- **Missing** -- nodes in the design with no counterpart in the code. One line\n  each: node name, what it is, where it belongs. This skill does not build\n  them; `\u002Fquiver:design` and `\u002Fdesign-build` do.\n- **Tokens** -- deviations that trace to a token definition rather than to the\n  component. One line each: the token, its value, the design's value, the file\n  that defines it. This skill does not edit token files -- a token is shared by\n  every screen, and changing it to fix one component is a change nobody\n  reviewed.\n\n**Zero deviations is a valid and expected result.** Print\n`> {node name} matches the design on every compared field.` and stop. Do not\nmanufacture a Low finding to show the run did something.\n\n## Step 5 -- Fix What the User Picks\n\nOnly reachable when Step 4 listed at least one deviation in the main table.\n\nAsk with `AskUserQuestion`. With three or fewer deviations, give one button per\ndeviation. With more, group by severity:\n\nButtons: `[\"Fix the High ones\", \"Fix High and Medium\", \"Fix all {N}\", \"None -- keep the report\"]`\n\nThe user can name specific numbers instead of taking a button. Apply exactly\nwhat was selected, nothing adjacent, and follow the surrounding code's own\nidiom -- a project that reads spacing from a token gets the token, not the\nliteral the design measured.\n\nAfter applying:\n\n1. Read every modified file back and confirm the change landed.\n2. Print one line per applied fix: the deviation number, the file, and the new\n   value.\n3. Print `> {N} fix(es) applied, uncommitted. Run \u002Fcommit when you are ready.`\n\nThis skill writes no commit and creates no branch, the same default\n`\u002Fdesign-build` runs under. It also runs no build and no test gate: the changes\nare layout and style values, the check that matters is looking at the screen,\nand a test suite run after a padding change is noise standing in for a check\nnobody made. When a fix touched logic rather than a value, say so in the\nsummary line -- that is the case worth a test run, and it is the user's call.\n\n---\n\n## Anti-Patterns\n\n- Don't compare a `fill` axis against the measured literal -- read the Fit rule\n  in Step 3. This is the single most common false finding in design comparison,\n  because the measured number is right there in the node and looks authoritative.\n- Don't offer to fix, build, or scaffold when Step 2 found no implementation.\n  Print the message and stop. The pull toward a helpful \"shall I build it?\" is\n  exactly the defect this gate exists to close.\n- Don't build a component that only exists in the design -- report it as\n  missing and name `\u002Fquiver:design`.\n- Don't edit a theme token definition to fix one component's deviation.\n- Don't call a figma-bridge write tool. The design is never the thing that is\n  wrong here.\n- Don't compare more than one node per run. A six-screen report is a list\n  nobody acts on.\n- Don't report a property Figma never set as a deviation from zero.\n- Don't show raw node JSON, raw variable dumps, or tool output to the user --\n  every number in the report is one you already resolved.\n- Don't apply a fix the user did not select, however obvious the adjacent one\n  looks.\n- Don't commit.\n","# Instructions\n\nYou compare one built thing against one design, and you fix what the user\npicks. The design is the source of truth for values; the code is the source of\ntruth for what exists. You never guess at either -- every number you report was\nread from a Figma node or from a line of code you opened.\n\nThis skill has one target per run. It reports before it changes anything, and\nit changes nothing the user did not select.\n\n**Never call a figma-bridge write tool** (`create_*`, `set_*`, `delete_nodes`,\n`duplicate_nodes`, `reparent_nodes`, `group_nodes`, `ungroup_node`). This skill\nis read-only against Figma. A design that does not match the code is a code\nfinding, never a reason to edit the design.\n\n## Step 0 -- Arguments\n\nRead `$ARGUMENTS` and split it into four things. Any of them may be absent.\n\n1. **A Figma node ID** -- `4029:12345`, or the instance-child form\n   `I12740:17806;12740:17793`. Figma share URLs write IDs with a hyphen\n   (`4029-12345`); the bridge rejects hyphens, so normalize every hyphen\n   between two digit runs into a colon before calling any tool.\n2. **A plan path** -- a `.md` path under a `plans\u002F` directory, or any `.md`\n   path whose file carries a `### Node Specs` block. A plan path is the design\n   side, never a code target; read the file before deciding which of the two a\n   path is.\n3. **A code target** -- a path, a file name, or a component or class name.\n4. **Extra checks** -- anything else the user wrote in plain words\n   (\"also check the icon size\", \"the shadow looks too strong\"). Add these to\n   the field list in Step 3 for this run only.\n\nNothing in the arguments is required. An empty invocation is not an error --\nStep 1 falls through to whatever is selected on the Figma canvas.\n\n## Step 1 -- Resolve the Design Side\n\nResolve the design in this order and stop at the first that answers.\n\n**1. A plan path in the arguments.** Read the `### Node Specs` block of the\nplan and use the recorded values. Say which plan was used and when it was\nwritten -- a plan is a snapshot, and a design that moved since is a deviation\nthis run cannot see. The bridge is not needed on this path; do not load its\nschemas.\n\n**2. A node ID in the arguments, or no plan path given.** Both need the\nbridge. Load the read-side schemas:\n\n`ToolSearch` with query\n`\"select:mcp__figma-bridge__list_files,mcp__figma-bridge__get_selection,mcp__figma-bridge__get_node,mcp__figma-bridge__get_design_context,mcp__figma-bridge__get_variable_defs,mcp__figma-bridge__get_styles\"`\n\nIf `ToolSearch` returns no figma-bridge tools, the MCP server is not\nconfigured. Print exactly:\n\n```\n> figma-bridge MCP is not available. Setup is two pieces -- the MCP server and\n> a Figma plugin imported by hand -- and the steps are in the README's\n> External Dependencies section. Leave the plugin running inside the Figma file\n> you want to read, then retry \u002Fdesign-fix.\n> You can also point this skill at an existing plan, which needs no bridge:\n>   \u002Fdesign-fix .claude\u002Fplans\u002F\u003Cslug>-design-plan.md\n```\n\n**Stop here.**\n\nWith the tools loaded, call `list_files`. An empty result means no Figma file\nis connected -- print the same kind of note, naming the plugin, and stop. One\nfile: use its `fileKey` for every later call. More than one: `AskUserQuestion`\nwith one button per `fileName`, and carry the chosen `fileKey` into every call,\nbecause the bridge requires it once more than one file is connected.\n\nThen resolve the node: the ID from the arguments, otherwise `get_selection`.\n\n**3. Nothing resolves.** Print:\n\n```\n> Nothing to compare against. Select the frame or component in Figma, or pass\n> a node ID or a plan path:\n>   \u002Fdesign-fix 4029:12345\n>   \u002Fdesign-fix .claude\u002Fplans\u002F\u003Cslug>-design-plan.md\n```\n\n**Stop here.**\n\nOn the live path, read the node with `get_node` and `get_design_context`, and\nresolve every variable and style reference with `get_variable_defs` and\n`get_styles` -- a raw hex in a report the project expresses as a token is a\nfinding the user cannot act on.\n\nPrint one line: `> Design side: {node name} ({node id})` or\n`> Design side: {plan path}, written {date}`.\n\nWhen more than one node resolves -- a selection of several frames, or a plan\nwith several specs -- this skill compares **one**. Use `AskUserQuestion` with\none button per node (up to 4, largest first) to pick the target. Batch scanning\nis deliberately not a mode: a run that reports on six screens at once produces\na list nobody acts on.\n\n## Step 2 -- Resolve the Code Side\n\nFind the code that renders the resolved node. This is the only step that\nsearches the codebase: resolve `codegraph_available` and `lsp_available` with\nthe detection flows in `skills\u002Fcode-navigation\u002FSKILL.md`, then search under its\nCode Navigation Strategy. Search, in order, for: the code target named in the\narguments, the node's name as a component or class name, the literal strings in\nits text children, and the route named in the plan's `Route:` line when a plan\nwas used.\n\nPrint the files you resolved: `> Code side: {path}:{line range}`.\n\n**When no implementation is found, print this and stop:**\n\n```\n> No implementation found for {node name}. There is nothing to compare yet.\n>\n> Build it first:\n>   \u002Fquiver:design {node id}        writes an implementation plan\n>   \u002Fdesign-build            builds the plan\n```\n\n**Stop here. Do not ask whether to fix, build, or scaffold anything.** This is\nthe whole reason the gate exists: offering a fix pass for a screen that was\nnever built is a question with no correct answer, and it is the defect this\nskill was written to avoid. A missing implementation is a report, not a prompt.\n\nWhen the search finds several candidates and none is clearly the renderer, ask\nwith `AskUserQuestion` -- one button per candidate path. Do not guess between\ntwo files that both look plausible; a comparison against the wrong file\nproduces findings that are all false.\n\n## Step 3 -- Compare\n\nCompare these fields, plus anything the user named in the arguments. Omit a row\nfor any property the Figma node does not set -- an unset property is not a\ndeviation.\n\n| Field | What is compared |\n|-------|------------------|\n| Box | Width and height, subject to the Fit rule below |\n| Layout | Direction, gap, padding (all four sides), main-axis and cross-axis alignment |\n| Typography | Family, weight, size, line height, letter spacing |\n| Fill | Background color, expressed as the project's token when one maps |\n| Stroke | Width, position (inside, center, outside), color |\n| Radius | All four corners |\n| Effects | Shadows and blurs: offset, blur, spread, color, opacity |\n| Content | The literal text of every text node, or its i18n key when the project has a translation layer |\n\n**The Fit rule.** A Figma axis whose auto-layout sizing mode is `fill` must\nnever be compared against its measured literal. The measured number is what\nthat axis happened to be inside one frame width; code expressing the axis as\nfill (`double.infinity`, `width: 100%`, `flex: 1`, a stretched cross axis) is\n**correct**, and the mismatch is not a finding. The finding on a `fill` axis is\nthe opposite case: a hardcoded literal in the code where the design says fill.\nA comparison that misses this reports a false deviation on every responsive\ncomponent in the project, which is worse than reporting nothing.\n\n**Three things are never a deviation:**\n\n- A difference the Fit rule explains.\n- A property Figma does not set on the node.\n- A value the code reads correctly from a theme token whose *definition* is\n  what differs. That belongs in the Tokens section of Step 4 -- the code is\n  right, the token is wrong, and fixing it changes every screen that uses it.\n\n**Severity is earned, not assigned:**\n\n- **High** -- visible without measuring: a text string that differs, an element\n  present in the design and absent in the code, an element on the wrong axis or\n  in the wrong order, a color from a different token family, a hardcoded\n  literal on an axis the design fills.\n- **Medium** -- right family, wrong step: `12` where the design says `16`,\n  `radii.sm` where the design says `radii.md`, a font weight one step off.\n- **Low** -- a difference at or below one logical pixel, or a property the\n  platform rounds on its own.\n\n## Step 4 -- Report\n\nPrint the deviations, highest severity first:\n\n```\n| # | Field | Figma | Code | Where | Severity |\n|---|-------|-------|------|-------|----------|\n| 1 | Content | \"Continue\" | \"Devam\" | lib\u002Fwidgets\u002Fpay_button.dart:31 | High |\n| 2 | Padding left | 16 | 12 | lib\u002Fwidgets\u002Fpay_button.dart:42 | Medium |\n```\n\nThen, only when they have entries:\n\n- **Missing** -- nodes in the design with no counterpart in the code. One line\n  each: node name, what it is, where it belongs. This skill does not build\n  them; `\u002Fquiver:design` and `\u002Fdesign-build` do.\n- **Tokens** -- deviations that trace to a token definition rather than to the\n  component. One line each: the token, its value, the design's value, the file\n  that defines it. This skill does not edit token files -- a token is shared by\n  every screen, and changing it to fix one component is a change nobody\n  reviewed.\n\n**Zero deviations is a valid and expected result.** Print\n`> {node name} matches the design on every compared field.` and stop. Do not\nmanufacture a Low finding to show the run did something.\n\n## Step 5 -- Fix What the User Picks\n\nOnly reachable when Step 4 listed at least one deviation in the main table.\n\nAsk with `AskUserQuestion`. With three or fewer deviations, give one button per\ndeviation. With more, group by severity:\n\nButtons: `[\"Fix the High ones\", \"Fix High and Medium\", \"Fix all {N}\", \"None -- keep the report\"]`\n\nThe user can name specific numbers instead of taking a button. Apply exactly\nwhat was selected, nothing adjacent, and follow the surrounding code's own\nidiom -- a project that reads spacing from a token gets the token, not the\nliteral the design measured.\n\nAfter applying:\n\n1. Read every modified file back and confirm the change landed.\n2. Print one line per applied fix: the deviation number, the file, and the new\n   value.\n3. Print `> {N} fix(es) applied, uncommitted. Run \u002Fcommit when you are ready.`\n\nThis skill writes no commit and creates no branch, the same default\n`\u002Fdesign-build` runs under. It also runs no build and no test gate: the changes\nare layout and style values, the check that matters is looking at the screen,\nand a test suite run after a padding change is noise standing in for a check\nnobody made. When a fix touched logic rather than a value, say so in the\nsummary line -- that is the case worth a test run, and it is the user's call.\n\n---\n\n## Anti-Patterns\n\n- Don't compare a `fill` axis against the measured literal -- read the Fit rule\n  in Step 3. This is the single most common false finding in design comparison,\n  because the measured number is right there in the node and looks authoritative.\n- Don't offer to fix, build, or scaffold when Step 2 found no implementation.\n  Print the message and stop. The pull toward a helpful \"shall I build it?\" is\n  exactly the defect this gate exists to close.\n- Don't build a component that only exists in the design -- report it as\n  missing and name `\u002Fquiver:design`.\n- Don't edit a theme token definition to fix one component's deviation.\n- Don't call a figma-bridge write tool. The design is never the thing that is\n  wrong here.\n- Don't compare more than one node per run. A six-screen report is a list\n  nobody acts on.\n- Don't report a property Figma never set as a deviation from zero.\n- Don't show raw node JSON, raw variable dumps, or tool output to the user --\n  every number in the report is one you already resolved.\n- Don't apply a fix the user did not select, however obvious the adjacent one\n  looks.\n- Don't commit.\n",{"name":5,"description":7,"when-to-use":57,"argument-hint":58},"user has a UI that is built but does not match the design -- '\u002Fdesign-fix', 'this screen does not match Figma', 'the spacing is off compared to the design', 'why does this button look wrong', 'compare this component to the design and fix it', 'the card is not pixel perfect'","\u003Cnode id, component path, or a short description of the broken UI> [anything extra you want checked]","main","2b63f856ce19c2a797929cacabd9e0fc936812fa","plugins\u002Fyagizdo\u002Fquiver\u002Fskills\u002Fdesign-fix",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":70,"prompt":80,"zipAvailable":81},[71,74,77],{"tool":72,"command":73},"npx","npx skills add hashgraph-online\u002Fawesome-codex-plugins --skill design-fix",{"tool":75,"command":76},"bunx","bunx skills add hashgraph-online\u002Fawesome-codex-plugins --skill design-fix",{"tool":78,"command":79},"pnpm","pnpm dlx skills add hashgraph-online\u002Fawesome-codex-plugins --skill design-fix","安装技能，技能地址：https:\u002F\u002Fgithub.com\u002Fhashgraph-online\u002Fawesome-codex-plugins\u002Fblob\u002Fmain\u002Fplugins\u002Fyagizdo\u002Fquiver\u002Fskills\u002Fdesign-fix\u002FSKILL.md",true,[83],{"path":84,"resourceType":85,"resourceTypeDesc":86,"sizeBytes":87,"sourceHtmlUrl":88},"TEST-PLAN.md","REFERENCE","参考文档",4200,"https:\u002F\u002Fgithub.com\u002Fhashgraph-online\u002Fawesome-codex-plugins\u002Fblob\u002Fmain\u002Fplugins\u002Fyagizdo\u002Fquiver\u002Fskills\u002Fdesign-fix\u002FTEST-PLAN.md",[90,98,105,112,135,160],{"skillNo":91,"name":92,"nameZh":6,"description":93,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":94,"categories":95,"keywords":96,"publishedAt":97},"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":99,"name":100,"nameZh":6,"description":101,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":102,"categories":103,"keywords":104,"publishedAt":97},"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":106,"name":107,"nameZh":6,"description":108,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":109,"categories":110,"keywords":111,"publishedAt":97},"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":113,"name":114,"nameZh":6,"description":115,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":116,"categories":117,"keywords":118,"publishedAt":52},"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",[],[119,120,43,121,122,123,124,125,32,34,126,127,38,128,129,130,131,132,133,134],"search","deja search","error","ready","memory","re","decide","debugging","when","done","reviewer","io","change","cli","merge","past",{"skillNo":136,"name":137,"nameZh":6,"description":138,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":139,"categories":140,"keywords":141,"publishedAt":52},"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",[],[142,143,144,130,145,146,147,148,149,150,151,152,153,154,123,155,156,157,158,159],"deja reflect","reflect","review","with","record","github","next","https","node","Rules","decisions","brew","remember","project rules","project","session","end","reflection",{"skillNo":161,"name":162,"nameZh":6,"description":163,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":164,"categories":165,"keywords":173,"publishedAt":52},"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",[166,169,170],{"categoryNo":167,"categoryName":168,"taxonomyType":21,"taxonomyTypeDesc":22},"01JBSEEDCAT000000000000016","图像与多媒体",{"categoryNo":24,"categoryName":25,"taxonomyType":21,"taxonomyTypeDesc":22},{"categoryNo":171,"categoryName":172,"taxonomyType":21,"taxonomyTypeDesc":22},"01JBSEEDCAT000000000000010","后端与接口",[162,174,175,176,177,178,179,156,180,124,46,181,36,182,127,183,184,185,186,187],"URL","Video","short-form","standalone","PDF","viral","tiktok","social","song","image","mcp server","schedule","api","publish"]