[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"skill:01M6JWDWK5DNXM5452WK538YYW":3,"skill-same:01M6JWDWK5DNXM5452WK538YYW":80},{"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":50,"commitSha":51,"skillDirectory":52,"forksCount":53,"repositoryHtmlUrl":54,"repositoryHomepageUrl":55,"ownerHtmlUrl":56,"ownerBlogUrl":57,"ownerDescription":58,"updatedAt":59,"install":60,"resources":73},"01M6JWDWK5DNXM5452WK538YYW","proximity-data-tables",null,"Use this skill when designing or fixing data tables and tabular layouts — row spacing, column spacing, header treatment, group separators, total rows, sticky headers, dense vs. comfortable variants. Trigger when the user is laying out a table, deciding density, debugging \"rows that are hard to follow,\" picking when to add zebra striping, or arguing for\u002Fagainst borders. Sub-aspect of `proximity`; read that first if you haven't already.","hashgraph-online\u002Fawesome-codex-plugins","hashgraph-online","https:\u002F\u002Favatars.githubusercontent.com\u002Fu\u002F160371962?v=4","01M6CNB6NRJVNNGN14TR01Q6D3","HOL (Hashgraph Online)","01M6JT1HSKKG9V68KQAQGBA7XP",1571,"Apache-2.0","https:\u002F\u002Fgithub.com\u002Fhashgraph-online\u002Fawesome-codex-plugins\u002Fblob\u002Fmain\u002Fplugins\u002FHDeibler\u002Funiversal-design-principles\u002Fplugins\u002Fperception-and-hierarchy-principles\u002Fskills\u002Fproximity-data-tables\u002FSKILL.md",[18],{"categoryNo":19,"categoryName":20,"taxonomyType":21,"taxonomyTypeDesc":22},"01JBSEEDCAT000000000000033","数据分析师","PROFESSION","适用职业",[24,25,26,27,28,29,30,31,32,33,34,35,36,37,38,39,40,41,42,43,44],"data","proximity","proximity data tables","tables","when","debugging","tabular","sticky","variants","for","spacing","headers","you","add","trigger","column","use","user","read","table","first","2026-11-10 10:12:30",false,"---\nname: proximity-data-tables\ndescription: 'Use this skill when designing or fixing data tables and tabular layouts — row spacing, column spacing, header treatment, group separators, total rows, sticky headers, dense vs. comfortable variants. Trigger when the user is laying out a table, deciding density, debugging \"rows that are hard to follow,\" picking when to add zebra striping, or arguing for\u002Fagainst borders. Sub-aspect of `proximity`; read that first if you haven''t already.'\n---\n\n# Proximity in data tables\n\nTables stress proximity in two directions at once: rows should read as discrete records (vertical proximity binding cells of the same row, separating them from cells of neighbor rows), and columns should read as semantic groupings (horizontal proximity within a column header, between header and cells). Most table problems are proximity problems disguised as styling problems.\n\n## The two-axis proximity ladder\n\nIn a table, you're managing two perpendicular spacing systems:\n\n```\nVertical:\n  Inside a row (cell padding)        — ~12-16px\n  Between rows                       — ~0 (or thin border for separation)\n  Header to first row                — slightly more than between rows\n  Footer \u002F total row                 — distinctly more than between rows\n\nHorizontal:\n  Within a cell (text to edge)       — ~12-16px\n  Between columns                    — ~0 (cell border or just padding)\n  Numeric columns: tabular-nums + right alignment for column-internal proximity\n```\n\nThe classic mistake is uniform padding everywhere — every gap the same — so the eye can't tell rows from columns from groups.\n\n## Dense vs. comfortable variants\n\nTables come in two density modes; pick deliberately:\n\n```\nComfortable (default for most apps):\n  Cell padding:  py-3 px-4   (12px \u002F 16px)\n  Row height:    ~48px\n  Best for:      moderate datasets, mixed user proficiency\n\nDense (power-user \u002F spreadsheet-like):\n  Cell padding:  py-1.5 px-3  (6px \u002F 12px)\n  Row height:    ~32px\n  Best for:      high-frequency scanning, expert users, datasets >50 rows visible\n```\n\nDon't mix densities in the same table. Don't try to be \"compact but readable\" with mid-sized padding — it ends up neither dense enough for power users nor comfortable enough for casual ones.\n\n## Header proximity\n\nThe header should bind to its column (vertically tight to the column it labels) but separate clearly from the data rows.\n\n```html\n\u003Cstyle>\n  .table { width: 100%; border-collapse: collapse; }\n  .table th, .table td { padding: 0.75rem 1rem; text-align: left; }\n  .table th {\n    font-size: 0.75rem;\n    font-weight: 600;\n    color: hsl(0 0% 35%);\n    text-transform: uppercase;\n    letter-spacing: 0.04em;\n    border-bottom: 1px solid hsl(0 0% 88%);   \u002F* separates header from data *\u002F\n    padding-bottom: 0.5rem;                    \u002F* tighter to the underline *\u002F\n  }\n  .table td { border-bottom: 1px solid hsl(0 0% 95%); }   \u002F* very subtle row separator *\u002F\n  .table tbody tr:hover { background: hsl(0 0% 98%); }\n\u003C\u002Fstyle>\n\n\u003Ctable class=\"table\">\n  \u003Cthead>\n    \u003Ctr>\n      \u003Cth>Customer\u003C\u002Fth>\n      \u003Cth style=\"text-align: right;\">Amount\u003C\u002Fth>\n      \u003Cth style=\"text-align: right;\">Days late\u003C\u002Fth>\n      \u003Cth>Status\u003C\u002Fth>\n    \u003C\u002Ftr>\n  \u003C\u002Fthead>\n  \u003Ctbody>\n    \u003Ctr>\n      \u003Ctd>Acme Co.\u003C\u002Ftd>\n      \u003Ctd style=\"text-align: right; font-variant-numeric: tabular-nums;\">$2,480.00\u003C\u002Ftd>\n      \u003Ctd style=\"text-align: right; font-variant-numeric: tabular-nums;\">14\u003C\u002Ftd>\n      \u003Ctd>\u003Cspan class=\"badge badge-warning\">Pending\u003C\u002Fspan>\u003C\u002Ftd>\n    \u003C\u002Ftr>\n    \u003C!-- … -->\n  \u003C\u002Ftbody>\n\u003C\u002Ftable>\n```\n\nThe header sits in its own row, visually distinct (smaller, uppercase, lower contrast, with a stronger underline). Data rows have a subtle hairline separator that suggests row boundaries without dominating.\n\n## Numeric column proximity\n\nNumbers in a column should align *within the column*, so the eye can scan vertically and compare magnitudes:\n\n- **Right-align** numeric columns. Left-aligned numbers don't compare.\n- **Tabular nums** (`font-variant-numeric: tabular-nums`) so digits occupy equal width. Without this, \"1,000\" and \"9,999\" don't align by digit position.\n- **Same number of decimals** in every cell of a column. \"$2.5\", \"$10.00\", \"$1,200\" don't align. Pick a precision and stick to it.\n\n```html\n\u003Ctd style=\"text-align: right; font-variant-numeric: tabular-nums;\">$2,480.00\u003C\u002Ftd>\n\u003Ctd style=\"text-align: right; font-variant-numeric: tabular-nums;\">$10.00\u003C\u002Ftd>\n\u003Ctd style=\"text-align: right; font-variant-numeric: tabular-nums;\">$98,001.50\u003C\u002Ftd>\n```\n\nNow the eye can scan the column and see magnitude differences instantly.\n\n## Group separators\n\nWhen rows belong to logical groups (orders by month, projects by team, transactions by status), encode the grouping with a *visible gap* and an optional sub-header — not by adding a heavy border:\n\n```html\n\u003Ctable class=\"table\">\n  \u003Cthead>…\u003C\u002Fthead>\n  \u003Ctbody>\n    \u003Ctr class=\"group-header\">\n      \u003Ctd colspan=\"4\">May 2026\u003C\u002Ftd>\n    \u003C\u002Ftr>\n    \u003Ctr>\u003Ctd>…\u003C\u002Ftd>…\u003C\u002Ftr>\n    \u003Ctr>\u003Ctd>…\u003C\u002Ftd>…\u003C\u002Ftr>\n\n    \u003Ctr class=\"group-header\">\n      \u003Ctd colspan=\"4\">April 2026\u003C\u002Ftd>\n    \u003C\u002Ftr>\n    \u003Ctr>\u003Ctd>…\u003C\u002Ftd>…\u003C\u002Ftr>\n    \u003Ctr>\u003Ctd>…\u003C\u002Ftd>…\u003C\u002Ftr>\n  \u003C\u002Ftbody>\n\u003C\u002Ftable>\n\n\u003Cstyle>\n  .group-header td {\n    font-size: 0.75rem;\n    font-weight: 600;\n    color: hsl(0 0% 35%);\n    background: hsl(0 0% 97%);\n    padding-top: 1rem;        \u002F* extra space above this row separates groups *\u002F\n    padding-bottom: 0.5rem;\n  }\n\u003C\u002Fstyle>\n```\n\nThe extra top padding on group headers creates a perceptual gap; the slight background tint reinforces it. The user reads months as groups, transactions as group members.\n\n## Total \u002F summary rows\n\nTotal rows should bind to the data they summarize (close vertically) and stand out from regular rows (heavier weight, possibly a top border):\n\n```html\n\u003Ctfoot>\n  \u003Ctr style=\"font-weight: 600; border-top: 2px solid hsl(0 0% 88%);\">\n    \u003Ctd>Total\u003C\u002Ftd>\n    \u003Ctd colspan=\"2\" style=\"text-align: right; font-variant-numeric: tabular-nums;\">$24,800.00\u003C\u002Ftd>\n    \u003Ctd>\u003C\u002Ftd>\n  \u003C\u002Ftr>\n\u003C\u002Ftfoot>\n```\n\nThe 2px top border separates the summary from data rows. Bold weight signals \"this is summary, not a regular row.\" Same column alignment as the data above.\n\n## Zebra striping (alternating row backgrounds)\n\nUse sparingly. Zebra striping helps the eye track across very wide rows (~7+ columns) but adds visual noise to compact tables.\n\n- **Use it**: wide tables, many columns, where the user must trace a single row across.\n- **Skip it**: 3–5 column tables where row tracking isn't a problem; a hover background is enough.\n- **Make it subtle**: `hsl(0 0% 98%)` against white — visible but not distracting. Anything stronger competes with the data.\n\n## Anti-patterns\n\n- **Heavy borders everywhere.** Every cell bordered, every row separated, every column ruled. The page becomes a grid prison; data drowns in chrome. Strip borders; let alignment and subtle separation do the work.\n- **Equal padding top and bottom on rows.** With no row separator and equal padding, rows blur into a wall of text. Add either a hairline separator or a slight row-zebra.\n- **Numeric and text columns aligned the same way.** Numbers left-aligned mean the eye can't compare magnitudes; text right-aligned means the eye can't follow words.\n- **Inconsistent decimal precision.** One column shows \"$2\", \"$2.5\", \"$2.50\", \"$2.501\" — eye scan fails. Pick a precision per column.\n- **Sticky header with no separator.** Sticky headers that float over scrolling data without a clear border merge into the data; users don't realize what's a header.\n\n## Heuristics\n\n1. **The single-finger trace.** Can you trace any row with one finger from left to right without losing your place? If not, row separation is too weak (or the row is too tall).\n2. **The numeric-column scan.** Look down a numeric column. Can you spot the largest value at a glance? If not, alignment or tabular-nums is missing.\n3. **Strip the chrome.** Mentally remove every border and background. Does the table still parse? If yes, your chrome is doing redundant work; trim it.\n\n## Related sub-skills\n\n- **`proximity`** (parent).\n- **`proximity-form-fields`** — same principle on input layouts.\n- **`hierarchy-typographic`** — header styling lives at the intersection of hierarchy and proximity.\n- **`signal-to-noise-ratio`** — tables are a primary case for SNR discipline.\n- **`legibility`** — tabular numerals and alignment are legibility decisions as much as proximity ones.\n","# Proximity in data tables\n\nTables stress proximity in two directions at once: rows should read as discrete records (vertical proximity binding cells of the same row, separating them from cells of neighbor rows), and columns should read as semantic groupings (horizontal proximity within a column header, between header and cells). Most table problems are proximity problems disguised as styling problems.\n\n## The two-axis proximity ladder\n\nIn a table, you're managing two perpendicular spacing systems:\n\n```\nVertical:\n  Inside a row (cell padding)        — ~12-16px\n  Between rows                       — ~0 (or thin border for separation)\n  Header to first row                — slightly more than between rows\n  Footer \u002F total row                 — distinctly more than between rows\n\nHorizontal:\n  Within a cell (text to edge)       — ~12-16px\n  Between columns                    — ~0 (cell border or just padding)\n  Numeric columns: tabular-nums + right alignment for column-internal proximity\n```\n\nThe classic mistake is uniform padding everywhere — every gap the same — so the eye can't tell rows from columns from groups.\n\n## Dense vs. comfortable variants\n\nTables come in two density modes; pick deliberately:\n\n```\nComfortable (default for most apps):\n  Cell padding:  py-3 px-4   (12px \u002F 16px)\n  Row height:    ~48px\n  Best for:      moderate datasets, mixed user proficiency\n\nDense (power-user \u002F spreadsheet-like):\n  Cell padding:  py-1.5 px-3  (6px \u002F 12px)\n  Row height:    ~32px\n  Best for:      high-frequency scanning, expert users, datasets >50 rows visible\n```\n\nDon't mix densities in the same table. Don't try to be \"compact but readable\" with mid-sized padding — it ends up neither dense enough for power users nor comfortable enough for casual ones.\n\n## Header proximity\n\nThe header should bind to its column (vertically tight to the column it labels) but separate clearly from the data rows.\n\n```html\n\u003Cstyle>\n  .table { width: 100%; border-collapse: collapse; }\n  .table th, .table td { padding: 0.75rem 1rem; text-align: left; }\n  .table th {\n    font-size: 0.75rem;\n    font-weight: 600;\n    color: hsl(0 0% 35%);\n    text-transform: uppercase;\n    letter-spacing: 0.04em;\n    border-bottom: 1px solid hsl(0 0% 88%);   \u002F* separates header from data *\u002F\n    padding-bottom: 0.5rem;                    \u002F* tighter to the underline *\u002F\n  }\n  .table td { border-bottom: 1px solid hsl(0 0% 95%); }   \u002F* very subtle row separator *\u002F\n  .table tbody tr:hover { background: hsl(0 0% 98%); }\n\u003C\u002Fstyle>\n\n\u003Ctable class=\"table\">\n  \u003Cthead>\n    \u003Ctr>\n      \u003Cth>Customer\u003C\u002Fth>\n      \u003Cth style=\"text-align: right;\">Amount\u003C\u002Fth>\n      \u003Cth style=\"text-align: right;\">Days late\u003C\u002Fth>\n      \u003Cth>Status\u003C\u002Fth>\n    \u003C\u002Ftr>\n  \u003C\u002Fthead>\n  \u003Ctbody>\n    \u003Ctr>\n      \u003Ctd>Acme Co.\u003C\u002Ftd>\n      \u003Ctd style=\"text-align: right; font-variant-numeric: tabular-nums;\">$2,480.00\u003C\u002Ftd>\n      \u003Ctd style=\"text-align: right; font-variant-numeric: tabular-nums;\">14\u003C\u002Ftd>\n      \u003Ctd>\u003Cspan class=\"badge badge-warning\">Pending\u003C\u002Fspan>\u003C\u002Ftd>\n    \u003C\u002Ftr>\n    \u003C!-- … -->\n  \u003C\u002Ftbody>\n\u003C\u002Ftable>\n```\n\nThe header sits in its own row, visually distinct (smaller, uppercase, lower contrast, with a stronger underline). Data rows have a subtle hairline separator that suggests row boundaries without dominating.\n\n## Numeric column proximity\n\nNumbers in a column should align *within the column*, so the eye can scan vertically and compare magnitudes:\n\n- **Right-align** numeric columns. Left-aligned numbers don't compare.\n- **Tabular nums** (`font-variant-numeric: tabular-nums`) so digits occupy equal width. Without this, \"1,000\" and \"9,999\" don't align by digit position.\n- **Same number of decimals** in every cell of a column. \"$2.5\", \"$10.00\", \"$1,200\" don't align. Pick a precision and stick to it.\n\n```html\n\u003Ctd style=\"text-align: right; font-variant-numeric: tabular-nums;\">$2,480.00\u003C\u002Ftd>\n\u003Ctd style=\"text-align: right; font-variant-numeric: tabular-nums;\">$10.00\u003C\u002Ftd>\n\u003Ctd style=\"text-align: right; font-variant-numeric: tabular-nums;\">$98,001.50\u003C\u002Ftd>\n```\n\nNow the eye can scan the column and see magnitude differences instantly.\n\n## Group separators\n\nWhen rows belong to logical groups (orders by month, projects by team, transactions by status), encode the grouping with a *visible gap* and an optional sub-header — not by adding a heavy border:\n\n```html\n\u003Ctable class=\"table\">\n  \u003Cthead>…\u003C\u002Fthead>\n  \u003Ctbody>\n    \u003Ctr class=\"group-header\">\n      \u003Ctd colspan=\"4\">May 2026\u003C\u002Ftd>\n    \u003C\u002Ftr>\n    \u003Ctr>\u003Ctd>…\u003C\u002Ftd>…\u003C\u002Ftr>\n    \u003Ctr>\u003Ctd>…\u003C\u002Ftd>…\u003C\u002Ftr>\n\n    \u003Ctr class=\"group-header\">\n      \u003Ctd colspan=\"4\">April 2026\u003C\u002Ftd>\n    \u003C\u002Ftr>\n    \u003Ctr>\u003Ctd>…\u003C\u002Ftd>…\u003C\u002Ftr>\n    \u003Ctr>\u003Ctd>…\u003C\u002Ftd>…\u003C\u002Ftr>\n  \u003C\u002Ftbody>\n\u003C\u002Ftable>\n\n\u003Cstyle>\n  .group-header td {\n    font-size: 0.75rem;\n    font-weight: 600;\n    color: hsl(0 0% 35%);\n    background: hsl(0 0% 97%);\n    padding-top: 1rem;        \u002F* extra space above this row separates groups *\u002F\n    padding-bottom: 0.5rem;\n  }\n\u003C\u002Fstyle>\n```\n\nThe extra top padding on group headers creates a perceptual gap; the slight background tint reinforces it. The user reads months as groups, transactions as group members.\n\n## Total \u002F summary rows\n\nTotal rows should bind to the data they summarize (close vertically) and stand out from regular rows (heavier weight, possibly a top border):\n\n```html\n\u003Ctfoot>\n  \u003Ctr style=\"font-weight: 600; border-top: 2px solid hsl(0 0% 88%);\">\n    \u003Ctd>Total\u003C\u002Ftd>\n    \u003Ctd colspan=\"2\" style=\"text-align: right; font-variant-numeric: tabular-nums;\">$24,800.00\u003C\u002Ftd>\n    \u003Ctd>\u003C\u002Ftd>\n  \u003C\u002Ftr>\n\u003C\u002Ftfoot>\n```\n\nThe 2px top border separates the summary from data rows. Bold weight signals \"this is summary, not a regular row.\" Same column alignment as the data above.\n\n## Zebra striping (alternating row backgrounds)\n\nUse sparingly. Zebra striping helps the eye track across very wide rows (~7+ columns) but adds visual noise to compact tables.\n\n- **Use it**: wide tables, many columns, where the user must trace a single row across.\n- **Skip it**: 3–5 column tables where row tracking isn't a problem; a hover background is enough.\n- **Make it subtle**: `hsl(0 0% 98%)` against white — visible but not distracting. Anything stronger competes with the data.\n\n## Anti-patterns\n\n- **Heavy borders everywhere.** Every cell bordered, every row separated, every column ruled. The page becomes a grid prison; data drowns in chrome. Strip borders; let alignment and subtle separation do the work.\n- **Equal padding top and bottom on rows.** With no row separator and equal padding, rows blur into a wall of text. Add either a hairline separator or a slight row-zebra.\n- **Numeric and text columns aligned the same way.** Numbers left-aligned mean the eye can't compare magnitudes; text right-aligned means the eye can't follow words.\n- **Inconsistent decimal precision.** One column shows \"$2\", \"$2.5\", \"$2.50\", \"$2.501\" — eye scan fails. Pick a precision per column.\n- **Sticky header with no separator.** Sticky headers that float over scrolling data without a clear border merge into the data; users don't realize what's a header.\n\n## Heuristics\n\n1. **The single-finger trace.** Can you trace any row with one finger from left to right without losing your place? If not, row separation is too weak (or the row is too tall).\n2. **The numeric-column scan.** Look down a numeric column. Can you spot the largest value at a glance? If not, alignment or tabular-nums is missing.\n3. **Strip the chrome.** Mentally remove every border and background. Does the table still parse? If yes, your chrome is doing redundant work; trim it.\n\n## Related sub-skills\n\n- **`proximity`** (parent).\n- **`proximity-form-fields`** — same principle on input layouts.\n- **`hierarchy-typographic`** — header styling lives at the intersection of hierarchy and proximity.\n- **`signal-to-noise-ratio`** — tables are a primary case for SNR discipline.\n- **`legibility`** — tabular numerals and alignment are legibility decisions as much as proximity ones.\n",{"name":5,"description":7},"main","b0f0a87593c578a7898eccaf1b363f7f87c1f99b","plugins\u002FHDeibler\u002Funiversal-design-principles\u002Fplugins\u002Fperception-and-hierarchy-principles\u002Fskills\u002Fproximity-data-tables",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":61,"prompt":71,"zipAvailable":72},[62,65,68],{"tool":63,"command":64},"npx","npx skills add hashgraph-online\u002Fawesome-codex-plugins --skill proximity-data-tables",{"tool":66,"command":67},"bunx","bunx skills add hashgraph-online\u002Fawesome-codex-plugins --skill proximity-data-tables",{"tool":69,"command":70},"pnpm","pnpm dlx skills add hashgraph-online\u002Fawesome-codex-plugins --skill proximity-data-tables","安装技能，技能地址：https:\u002F\u002Fgithub.com\u002Fhashgraph-online\u002Fawesome-codex-plugins\u002Fblob\u002Fmain\u002Fplugins\u002FHDeibler\u002Funiversal-design-principles\u002Fplugins\u002Fperception-and-hierarchy-principles\u002Fskills\u002Fproximity-data-tables\u002FSKILL.md",true,[74],{"path":75,"resourceType":76,"resourceTypeDesc":77,"sizeBytes":78,"sourceHtmlUrl":79},"references\u002Ftable-design-patterns.md","REFERENCE","参考文档",6192,"https:\u002F\u002Fgithub.com\u002Fhashgraph-online\u002Fawesome-codex-plugins\u002Fblob\u002Fmain\u002Fplugins\u002FHDeibler\u002Funiversal-design-principles\u002Fplugins\u002Fperception-and-hierarchy-principles\u002Fskills\u002Fproximity-data-tables\u002Freferences\u002Ftable-design-patterns.md",[81,89,96,103,127,152],{"skillNo":82,"name":83,"nameZh":6,"description":84,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":85,"categories":86,"keywords":87,"publishedAt":88},"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":90,"name":91,"nameZh":6,"description":92,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":93,"categories":94,"keywords":95,"publishedAt":88},"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":97,"name":98,"nameZh":6,"description":99,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":100,"categories":101,"keywords":102,"publishedAt":88},"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":104,"name":105,"nameZh":6,"description":106,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":107,"categories":108,"keywords":109,"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",[],[110,111,112,113,114,115,116,117,118,119,29,28,36,120,121,122,123,124,125,126],"search","deja search","never","error","ready","memory","re","decide","fix","design","done","reviewer","io","change","cli","merge","past",{"skillNo":128,"name":129,"nameZh":6,"description":130,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":131,"categories":132,"keywords":133,"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",[],[134,135,136,122,137,138,139,140,141,142,143,144,145,146,115,147,148,149,150,151],"deja reflect","reflect","review","with","record","github","next","https","node","Rules","decisions","brew","remember","project rules","project","session","end","reflection",{"skillNo":153,"name":154,"nameZh":6,"description":155,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":156,"categories":157,"keywords":169,"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",[158,163,166],{"categoryNo":159,"categoryName":160,"taxonomyType":161,"taxonomyTypeDesc":162},"01JBSEEDCAT000000000000016","图像与多媒体","SCENARIO","使用场景",{"categoryNo":164,"categoryName":165,"taxonomyType":161,"taxonomyTypeDesc":162},"01JBSEEDCAT000000000000023","Skill与智能体开发",{"categoryNo":167,"categoryName":168,"taxonomyType":161,"taxonomyTypeDesc":162},"01JBSEEDCAT000000000000010","后端与接口",[154,170,171,172,173,174,175,148,176,116,177,178,179,180,28,181,182,183,184,185],"URL","Video","short-form","standalone","PDF","viral","tiktok","short","social","MCP","song","image","mcp server","schedule","api","publish"]