[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"skill:01M6JWF94VP4MS8CX8XSSY8PXM":3,"skill-same:01M6JWF94VP4MS8CX8XSSY8PXM":86},{"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":28,"publishedAt":51,"linkOnly":52,"markdownContent":53,"markdownBody":54,"frontMatter":55,"refName":56,"commitSha":57,"skillDirectory":58,"forksCount":59,"repositoryHtmlUrl":60,"repositoryHomepageUrl":61,"ownerHtmlUrl":62,"ownerBlogUrl":63,"ownerDescription":64,"updatedAt":65,"install":66,"resources":79},"01M6JWF94VP4MS8CX8XSSY8PXM","signal-to-noise-ratio",null,"Use this skill whenever a design has too much or too little visual content competing for attention — when a screen \"feels noisy,\" \"looks busy,\" \"feels cluttered,\" \"feels empty,\" or when the user can't find the meaningful information amid decoration. Trigger when reviewing dashboards, data tables, settings pages, marketing surfaces, or any layout under critique. Trigger when designing chart axes\u002Flegends\u002Fgrids, when picking icon density, when deciding whether to add a divider\u002Fborder\u002Fillustration, or when a design \"passes\" the requirements but doesn't feel right. Signal-to-Noise Ratio is the discipline of subtraction; this skill teaches what counts as signal vs. noise, how to audit and reduce noise, and the trade-offs of overcorrecting.","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\u002Fperception-and-hierarchy-principles\u002Fskills\u002Fsignal-to-noise-ratio\u002FSKILL.md",[18,23],{"categoryNo":19,"categoryName":20,"taxonomyType":21,"taxonomyTypeDesc":22},"01JBSEEDCAT000000000000013","分析与可视化","SCENARIO","使用场景",{"categoryNo":24,"categoryName":25,"taxonomyType":26,"taxonomyTypeDesc":27},"01JBSEEDCAT000000000000033","数据分析师","PROFESSION","适用职业",[29,30,31,32,33,34,35,36,37,38,39,40,41,42,43,44,45,46,47,48,49,50],"signal","signal to noise ratio","chart","when","trade-offs","reduce","tables","information","add","how to","screen","design","layout","but","surfaces","discipline","marketing","dashboards","how","critique","data","audit","2026-11-10 10:12:30",false,"---\nname: signal-to-noise-ratio\ndescription: 'Use this skill whenever a design has too much or too little visual content competing for attention — when a screen \"feels noisy,\" \"looks busy,\" \"feels cluttered,\" \"feels empty,\" or when the user can''t find the meaningful information amid decoration. Trigger when reviewing dashboards, data tables, settings pages, marketing surfaces, or any layout under critique. Trigger when designing chart axes\u002Flegends\u002Fgrids, when picking icon density, when deciding whether to add a divider\u002Fborder\u002Fillustration, or when a design \"passes\" the requirements but doesn''t feel right. Signal-to-Noise Ratio is the discipline of subtraction; this skill teaches what counts as signal vs. noise, how to audit and reduce noise, and the trade-offs of overcorrecting.'\n---\n\n# Signal-to-Noise Ratio\n\nSignal-to-Noise Ratio (SNR) is the proportion of meaningful information to irrelevant or decorative content in a composition. The principle, borrowed from communications engineering, asserts that comprehension and aesthetic quality both improve as SNR rises — every visible element that doesn't carry meaning competes with the elements that do.\n\n## Definition (in our own words)\n\nIn a design, *signal* is anything that helps the viewer accomplish their task or understand the content: data, labels, controls, focal imagery, navigation paths, and the typographic and spatial structure that makes them legible. *Noise* is anything else: decorative borders that don't separate meaningful groups, illustrations unrelated to the content, repeated branding marks, gratuitous gradients, drop shadows on cards that don't elevate, status icons next to fields that have no status, hover effects on non-interactive elements. A high-SNR design strips away noise so the signal can land. A low-SNR design buries the signal in chrome.\n\n## Origins and research lineage\n\n- **Information theory** (Shannon, 1948) gave us the SNR ratio as a measurable property of communication channels. The more noise on a channel, the more redundancy required to transmit a message reliably.\n- **Edward Tufte's *data-ink ratio*** (*The Visual Display of Quantitative Information*, 1983) translated this into design vocabulary: maximize the ratio of ink that conveys information to total ink on the page; \"erase non-data-ink, within reason.\"\n- **Modern minimalist design movements** (Swiss design, Dieter Rams' \"Less, but better\") have applied the same discipline to product design at large.\n- **Cognitive load theory** explains why low SNR is costly: every visible element is processed, however briefly, by the viewer's perceptual system. Noise consumes attention even when consciously ignored.\n\n## Why SNR matters\n\nA composition with high SNR feels effortless — the viewer reads it without working. A composition with low SNR feels exhausting in ways the viewer often can't articulate. They report it as \"busy\" or \"overwhelming\" or \"cluttered,\" but the underlying mechanism is preattentive: the eye is constantly evaluating elements, and unproductive elements steal effort that could go to signal.\n\nLow SNR also degrades the meaningful elements. A status badge is informative when it's the only colored element in a row; the same badge in a row of three other colored chips and an illustration becomes part of the visual texture and stops registering.\n\n## When to apply\n\n- **Always**, as a final pass: after a draft is functionally complete, audit for noise.\n- **Particularly on dashboards, data tables, settings, and admin UIs** — surfaces where users return repeatedly and noise compounds.\n- **When the design \"feels right\" in a mockup but cluttered in production** — usually because real data is messier than sample data, and accumulated chrome was tolerable in the mockup but isn't in use.\n- **When users describe the UI as \"overwhelming\" or \"I don't know where to look\"** — these are SNR diagnoses.\n\n## When NOT to apply (or when to be careful)\n\n- **Marketing and brand surfaces** sometimes need elements that aren't strictly informational — atmosphere, character, illustration. Low SNR is sometimes the *point* (a luxury hero image isn't supposed to read as \"data\"). Apply SNR within the goals of the surface, not as a universal subtraction rule.\n- **Empty states** can use illustration to set tone; an absolutely empty empty-state may read as broken.\n- **Complete sterility** can also be a failure mode — a UI so stripped that it loses character or warmth. SNR is not minimalism for minimalism's sake.\n\n## What counts as signal vs. noise\n\nThe distinction is **always relative to the user's task**. The same element can be signal on one surface and noise on another.\n\n| Element | Signal when… | Noise when… |\n|---|---|---|\n| Border on a card | The card needs to be distinguished from surrounding content | Proximity already does the grouping work |\n| Drop shadow | The element actually floats above context (popover, modal) | Applied to inert content (a card sitting on the page) |\n| Illustration | It teaches, illustrates, or sets emotional tone for the moment | It fills space because the page felt empty |\n| Status icon | Status varies and matters | Status is always the same or rarely changes |\n| Background gradient | It separates a region or sets atmosphere | It's \"polish\" with no role |\n| Divider | The two regions need stronger separation than spacing alone provides | Spacing already does the work |\n| Color swatch | It encodes meaning the user must recognize | Brand decoration |\n| Animated transition | It signals state change (open\u002Fclose, success) | Eye-candy that interrupts focus |\n\nThe audit question is always: *if I removed this, would the user lose information they need?* If no, it's noise.\n\n## How to raise SNR\n\nA practical four-step audit:\n\n### 1. Strip every border, then put back only the borders that serve\n\nMost UIs have too many borders. Lines around cards, lines between rows, lines around inputs, lines around containers of inputs. Many of these are redundant — proximity, alignment, and background tint already group the content.\n\nProcedure: in your CSS, set `* { border: 0 !important; }` temporarily. Look at the page. What broke? Anywhere structure collapsed, you needed the border. Restore those. Anywhere the page is fine without it, leave the border off.\n\n### 2. Strip every shadow and gradient, then put back only the ones that earn\n\nShadows are particularly easy to overuse. Default `shadow-sm` on every card, `shadow-md` on every popover, `shadow-2xl` on every dialog. A sea of shadowed elements feels like a toy box.\n\nReserve shadows for genuine elevation: a popover floating above content, a sticky header that needs to recess content under it, a dragged item that lifts.\n\n### 3. Strip every icon that isn't load-bearing\n\nIcons should make ambiguity disappear or save text space. An icon next to \"Save\" doesn't reduce ambiguity (the word is unambiguous) and doesn't save space (the button has the word too). Strip it.\n\nIcons earn their pixels when:\n\n- They replace text in space-constrained chrome (toolbar, tab bar, mobile nav).\n- They disambiguate (a sparkle on \"AI suggest\" tells you the action is AI-assisted, which \"Suggest\" alone wouldn't).\n- They encode status (a check, a warning triangle) where the user scans for state.\n\n### 4. Strip every duplicate signal\n\nIf status is encoded in color, icon, *and* text, you have redundancy. Sometimes redundancy is correct (accessibility — color-blind users need a non-color signal). But if all three signals are firing for a low-stakes piece of metadata, you're spending three signals where one would do.\n\n## Worked examples\n\n### Example 1: a dashboard tile (before \u002F after)\n\n**Low SNR (before):**\n\n```html\n\u003Cdiv class=\"kpi-tile\" style=\"\n  border: 1px solid hsl(0 0% 88%);\n  border-radius: 0.75rem;\n  padding: 1.5rem;\n  background: linear-gradient(180deg, hsl(0 0% 99%), hsl(0 0% 96%));\n  box-shadow: 0 4px 12px rgba(0,0,0,0.04);\n\">\n  \u003Cdiv style=\"display: flex; align-items: center; gap: 0.5rem;\">\n    \u003Cdiv style=\"background: hsl(220 90% 95%); padding: 0.5rem; border-radius: 0.5rem;\">\n      \u003CDollarIcon style=\"color: hsl(220 90% 50%);\" \u002F>\n    \u003C\u002Fdiv>\n    \u003Cp style=\"font-size: 0.875rem; color: hsl(0 0% 35%); font-weight: 500;\">\n      MONTHLY REVENUE\n    \u003C\u002Fp>\n  \u003C\u002Fdiv>\n  \u003Cp style=\"font-size: 2.5rem; font-weight: 600; margin-top: 1rem;\">$48,200\u003C\u002Fp>\n  \u003Cdiv style=\"display: flex; align-items: center; gap: 0.25rem; margin-top: 0.5rem;\">\n    \u003CChevronUpIcon style=\"color: hsl(142 70% 35%);\" \u002F>\n    \u003Cp style=\"color: hsl(142 70% 35%); font-size: 0.875rem;\">12% vs last month\u003C\u002Fp>\n  \u003C\u002Fdiv>\n  \u003Chr style=\"margin: 1rem 0;\" \u002F>\n  \u003Cp style=\"font-size: 0.75rem; color: hsl(0 0% 60%);\">Last updated 3 minutes ago\u003C\u002Fp>\n\u003C\u002Fdiv>\n```\n\nAudit: gradient (noise), shadow on inert card (noise), icon-in-tinted-square next to label (decoration, not load-bearing), divider before metadata (proximity does this for free).\n\n**High SNR (after):**\n\n```html\n\u003Cdiv class=\"kpi-tile\" style=\"border: 1px solid hsl(0 0% 92%); border-radius: 0.5rem; padding: 1.5rem;\">\n  \u003Cp style=\"font-size: 0.8rem; color: hsl(0 0% 45%);\">Monthly revenue\u003C\u002Fp>\n  \u003Cp style=\"font-size: 2.5rem; font-weight: 600; margin-top: 0.25rem; font-variant-numeric: tabular-nums;\">$48,200\u003C\u002Fp>\n  \u003Cp style=\"color: hsl(142 70% 30%); font-size: 0.875rem; margin-top: 0.25rem;\">↑ 12% vs last month\u003C\u002Fp>\n  \u003Cp style=\"font-size: 0.75rem; color: hsl(0 0% 60%); margin-top: 1rem;\">Last updated 3 minutes ago\u003C\u002Fp>\n\u003C\u002Fdiv>\n```\n\nSame information, half the visual weight. The number — the actual signal — dominates.\n\n### Example 2: a chart (Tufte-style data-ink discipline)\n\n**Low SNR:** chart with thick axis lines, every gridline labeled, 3D bars, drop shadows, gradient bar fills, legend repeated in tooltip, axis title in 18px bold.\n\n**High SNR:** thin axis lines (or none), gridlines only at major intervals (light grey), flat bars, single-color fills, axis title in 12px lowercase, label values directly on bars when there are \u003C8 of them.\n\n```html\n\u003Csvg viewBox=\"0 0 320 200\">\n  \u003C!-- subtle baseline only -->\n  \u003Cline x1=\"40\" y1=\"180\" x2=\"310\" y2=\"180\" stroke=\"hsl(0 0% 80%)\" stroke-width=\"1\" \u002F>\n  \u003C!-- bars, flat fill -->\n  \u003Crect x=\"50\" y=\"80\" width=\"30\" height=\"100\" fill=\"hsl(220 70% 50%)\" \u002F>\n  \u003Crect x=\"100\" y=\"60\" width=\"30\" height=\"120\" fill=\"hsl(220 70% 50%)\" \u002F>\n  \u003Crect x=\"150\" y=\"100\" width=\"30\" height=\"80\" fill=\"hsl(220 70% 50%)\" \u002F>\n  \u003Crect x=\"200\" y=\"40\" width=\"30\" height=\"140\" fill=\"hsl(220 70% 50%)\" \u002F>\n  \u003C!-- value labels above bars (replace the y-axis entirely) -->\n  \u003Ctext x=\"65\" y=\"72\" font-size=\"10\" text-anchor=\"middle\">42\u003C\u002Ftext>\n  \u003Ctext x=\"115\" y=\"52\" font-size=\"10\" text-anchor=\"middle\">58\u003C\u002Ftext>\n  \u003Ctext x=\"165\" y=\"92\" font-size=\"10\" text-anchor=\"middle\">31\u003C\u002Ftext>\n  \u003Ctext x=\"215\" y=\"32\" font-size=\"10\" text-anchor=\"middle\">71\u003C\u002Ftext>\n  \u003C!-- x labels -->\n  \u003Ctext x=\"65\" y=\"195\" font-size=\"10\" text-anchor=\"middle\" fill=\"hsl(0 0% 45%)\">Q1\u003C\u002Ftext>\n  \u003Ctext x=\"115\" y=\"195\" font-size=\"10\" text-anchor=\"middle\" fill=\"hsl(0 0% 45%)\">Q2\u003C\u002Ftext>\n  \u003Ctext x=\"165\" y=\"195\" font-size=\"10\" text-anchor=\"middle\" fill=\"hsl(0 0% 45%)\">Q3\u003C\u002Ftext>\n  \u003Ctext x=\"215\" y=\"195\" font-size=\"10\" text-anchor=\"middle\" fill=\"hsl(0 0% 45%)\">Q4\u003C\u002Ftext>\n\u003C\u002Fsvg>\n```\n\nThe signal here is four numbers (Q1–Q4 values) and their relative magnitudes. Everything else is at the bare minimum needed to read them.\n\n### Example 3: a settings page\n\nA common low-SNR pattern: every setting wrapped in its own card, every section heading colored in brand, every help text in a tinted callout box, \"save\" buttons under every section.\n\nA high-SNR settings page uses one or two `Card` containers per section (proximity does the rest), section headings in normal text weight at the top of each section, help text in dim grey under the field it concerns, and a single \"Save changes\" button at the bottom (or auto-save with toast confirmation).\n\n## Anti-patterns\n\n- **The brand-everywhere page.** Every available surface tinted with the brand color, every separator in brand. The brand becomes background noise; users tune it out.\n- **The \"polish\" pass.** A late-stage designer adds shadows, gradients, hover effects, and micro-illustrations to \"make it feel more designed.\" The new chrome reduces SNR; the page loses clarity.\n- **The empty-state mascot.** A 400px-tall illustration of a sad cat under three lines of empty-state copy. The illustration is the signal; the actual instruction recedes.\n- **The data table with everything bordered.** Cells, rows, columns, and table border all 1px solid. The data is now jail.\n- **Decorative redundancy.** A \"Bell\" icon next to a label that says \"Notifications\" next to another bell icon next to a section heading \"Notification preferences.\" Pick one.\n\n## Heuristics\n\n1. **The squint test (again).** Squint at the page. Is one thing dominant? If the page is uniformly busy, SNR is low.\n2. **The screenshot reduction.** Take a screenshot, scale to 25%. If you can still tell what the page is for and where the actions are, SNR is good. If it looks like noise pixels, low.\n3. **The \"delete and see\" test.** Delete a candidate noise element. Does the page feel diminished? If yes, it was signal. If no, you've improved the page.\n4. **The data-ink ratio.** For information graphics specifically: estimate the proportion of ink that conveys data versus chrome. Tufte's heuristic was to push toward 100%; in practice 70%+ is healthy.\n\n## Related principles\n\n- **`hierarchy`** — strong hierarchy raises SNR by making one element carry the message.\n- **`proximity`** — proximity reduces the need for borders and dividers (which are often noise).\n- **`horror-vacui`** — the impulse to fill empty space, which directly lowers SNR.\n- **`highlighting`** — emphasis only works in low-noise environments.\n- **`form-follows-function`** (aesthetics) — every form choice should derive from a function; SNR is the operational version.\n- **`ockhams-razor`** (cognition \u002F process) — among solutions that work, prefer the simplest.\n\n## Sub-aspect skills\n\n- **`snr-densification`** — when SNR is *too* high (sterile, sparse), how to add signal density without adding noise.\n- **`snr-decoration-removal`** — a structured audit method for removing decorative chrome.\n- **`snr-emphasis-economy`** — how to spend emphasis (color, weight, size) sparingly so each instance lands.\n\n## Final note\n\nSNR is a discipline of subtraction. The pull toward addition is constant — every stakeholder wants their feature on the dashboard, every designer wants polish, every product manager wants a callout for the new thing. The job of the SNR-aware designer is to keep saying *no* — and *yes* only to the few things that earn their pixels.\n","# Signal-to-Noise Ratio\n\nSignal-to-Noise Ratio (SNR) is the proportion of meaningful information to irrelevant or decorative content in a composition. The principle, borrowed from communications engineering, asserts that comprehension and aesthetic quality both improve as SNR rises — every visible element that doesn't carry meaning competes with the elements that do.\n\n## Definition (in our own words)\n\nIn a design, *signal* is anything that helps the viewer accomplish their task or understand the content: data, labels, controls, focal imagery, navigation paths, and the typographic and spatial structure that makes them legible. *Noise* is anything else: decorative borders that don't separate meaningful groups, illustrations unrelated to the content, repeated branding marks, gratuitous gradients, drop shadows on cards that don't elevate, status icons next to fields that have no status, hover effects on non-interactive elements. A high-SNR design strips away noise so the signal can land. A low-SNR design buries the signal in chrome.\n\n## Origins and research lineage\n\n- **Information theory** (Shannon, 1948) gave us the SNR ratio as a measurable property of communication channels. The more noise on a channel, the more redundancy required to transmit a message reliably.\n- **Edward Tufte's *data-ink ratio*** (*The Visual Display of Quantitative Information*, 1983) translated this into design vocabulary: maximize the ratio of ink that conveys information to total ink on the page; \"erase non-data-ink, within reason.\"\n- **Modern minimalist design movements** (Swiss design, Dieter Rams' \"Less, but better\") have applied the same discipline to product design at large.\n- **Cognitive load theory** explains why low SNR is costly: every visible element is processed, however briefly, by the viewer's perceptual system. Noise consumes attention even when consciously ignored.\n\n## Why SNR matters\n\nA composition with high SNR feels effortless — the viewer reads it without working. A composition with low SNR feels exhausting in ways the viewer often can't articulate. They report it as \"busy\" or \"overwhelming\" or \"cluttered,\" but the underlying mechanism is preattentive: the eye is constantly evaluating elements, and unproductive elements steal effort that could go to signal.\n\nLow SNR also degrades the meaningful elements. A status badge is informative when it's the only colored element in a row; the same badge in a row of three other colored chips and an illustration becomes part of the visual texture and stops registering.\n\n## When to apply\n\n- **Always**, as a final pass: after a draft is functionally complete, audit for noise.\n- **Particularly on dashboards, data tables, settings, and admin UIs** — surfaces where users return repeatedly and noise compounds.\n- **When the design \"feels right\" in a mockup but cluttered in production** — usually because real data is messier than sample data, and accumulated chrome was tolerable in the mockup but isn't in use.\n- **When users describe the UI as \"overwhelming\" or \"I don't know where to look\"** — these are SNR diagnoses.\n\n## When NOT to apply (or when to be careful)\n\n- **Marketing and brand surfaces** sometimes need elements that aren't strictly informational — atmosphere, character, illustration. Low SNR is sometimes the *point* (a luxury hero image isn't supposed to read as \"data\"). Apply SNR within the goals of the surface, not as a universal subtraction rule.\n- **Empty states** can use illustration to set tone; an absolutely empty empty-state may read as broken.\n- **Complete sterility** can also be a failure mode — a UI so stripped that it loses character or warmth. SNR is not minimalism for minimalism's sake.\n\n## What counts as signal vs. noise\n\nThe distinction is **always relative to the user's task**. The same element can be signal on one surface and noise on another.\n\n| Element | Signal when… | Noise when… |\n|---|---|---|\n| Border on a card | The card needs to be distinguished from surrounding content | Proximity already does the grouping work |\n| Drop shadow | The element actually floats above context (popover, modal) | Applied to inert content (a card sitting on the page) |\n| Illustration | It teaches, illustrates, or sets emotional tone for the moment | It fills space because the page felt empty |\n| Status icon | Status varies and matters | Status is always the same or rarely changes |\n| Background gradient | It separates a region or sets atmosphere | It's \"polish\" with no role |\n| Divider | The two regions need stronger separation than spacing alone provides | Spacing already does the work |\n| Color swatch | It encodes meaning the user must recognize | Brand decoration |\n| Animated transition | It signals state change (open\u002Fclose, success) | Eye-candy that interrupts focus |\n\nThe audit question is always: *if I removed this, would the user lose information they need?* If no, it's noise.\n\n## How to raise SNR\n\nA practical four-step audit:\n\n### 1. Strip every border, then put back only the borders that serve\n\nMost UIs have too many borders. Lines around cards, lines between rows, lines around inputs, lines around containers of inputs. Many of these are redundant — proximity, alignment, and background tint already group the content.\n\nProcedure: in your CSS, set `* { border: 0 !important; }` temporarily. Look at the page. What broke? Anywhere structure collapsed, you needed the border. Restore those. Anywhere the page is fine without it, leave the border off.\n\n### 2. Strip every shadow and gradient, then put back only the ones that earn\n\nShadows are particularly easy to overuse. Default `shadow-sm` on every card, `shadow-md` on every popover, `shadow-2xl` on every dialog. A sea of shadowed elements feels like a toy box.\n\nReserve shadows for genuine elevation: a popover floating above content, a sticky header that needs to recess content under it, a dragged item that lifts.\n\n### 3. Strip every icon that isn't load-bearing\n\nIcons should make ambiguity disappear or save text space. An icon next to \"Save\" doesn't reduce ambiguity (the word is unambiguous) and doesn't save space (the button has the word too). Strip it.\n\nIcons earn their pixels when:\n\n- They replace text in space-constrained chrome (toolbar, tab bar, mobile nav).\n- They disambiguate (a sparkle on \"AI suggest\" tells you the action is AI-assisted, which \"Suggest\" alone wouldn't).\n- They encode status (a check, a warning triangle) where the user scans for state.\n\n### 4. Strip every duplicate signal\n\nIf status is encoded in color, icon, *and* text, you have redundancy. Sometimes redundancy is correct (accessibility — color-blind users need a non-color signal). But if all three signals are firing for a low-stakes piece of metadata, you're spending three signals where one would do.\n\n## Worked examples\n\n### Example 1: a dashboard tile (before \u002F after)\n\n**Low SNR (before):**\n\n```html\n\u003Cdiv class=\"kpi-tile\" style=\"\n  border: 1px solid hsl(0 0% 88%);\n  border-radius: 0.75rem;\n  padding: 1.5rem;\n  background: linear-gradient(180deg, hsl(0 0% 99%), hsl(0 0% 96%));\n  box-shadow: 0 4px 12px rgba(0,0,0,0.04);\n\">\n  \u003Cdiv style=\"display: flex; align-items: center; gap: 0.5rem;\">\n    \u003Cdiv style=\"background: hsl(220 90% 95%); padding: 0.5rem; border-radius: 0.5rem;\">\n      \u003CDollarIcon style=\"color: hsl(220 90% 50%);\" \u002F>\n    \u003C\u002Fdiv>\n    \u003Cp style=\"font-size: 0.875rem; color: hsl(0 0% 35%); font-weight: 500;\">\n      MONTHLY REVENUE\n    \u003C\u002Fp>\n  \u003C\u002Fdiv>\n  \u003Cp style=\"font-size: 2.5rem; font-weight: 600; margin-top: 1rem;\">$48,200\u003C\u002Fp>\n  \u003Cdiv style=\"display: flex; align-items: center; gap: 0.25rem; margin-top: 0.5rem;\">\n    \u003CChevronUpIcon style=\"color: hsl(142 70% 35%);\" \u002F>\n    \u003Cp style=\"color: hsl(142 70% 35%); font-size: 0.875rem;\">12% vs last month\u003C\u002Fp>\n  \u003C\u002Fdiv>\n  \u003Chr style=\"margin: 1rem 0;\" \u002F>\n  \u003Cp style=\"font-size: 0.75rem; color: hsl(0 0% 60%);\">Last updated 3 minutes ago\u003C\u002Fp>\n\u003C\u002Fdiv>\n```\n\nAudit: gradient (noise), shadow on inert card (noise), icon-in-tinted-square next to label (decoration, not load-bearing), divider before metadata (proximity does this for free).\n\n**High SNR (after):**\n\n```html\n\u003Cdiv class=\"kpi-tile\" style=\"border: 1px solid hsl(0 0% 92%); border-radius: 0.5rem; padding: 1.5rem;\">\n  \u003Cp style=\"font-size: 0.8rem; color: hsl(0 0% 45%);\">Monthly revenue\u003C\u002Fp>\n  \u003Cp style=\"font-size: 2.5rem; font-weight: 600; margin-top: 0.25rem; font-variant-numeric: tabular-nums;\">$48,200\u003C\u002Fp>\n  \u003Cp style=\"color: hsl(142 70% 30%); font-size: 0.875rem; margin-top: 0.25rem;\">↑ 12% vs last month\u003C\u002Fp>\n  \u003Cp style=\"font-size: 0.75rem; color: hsl(0 0% 60%); margin-top: 1rem;\">Last updated 3 minutes ago\u003C\u002Fp>\n\u003C\u002Fdiv>\n```\n\nSame information, half the visual weight. The number — the actual signal — dominates.\n\n### Example 2: a chart (Tufte-style data-ink discipline)\n\n**Low SNR:** chart with thick axis lines, every gridline labeled, 3D bars, drop shadows, gradient bar fills, legend repeated in tooltip, axis title in 18px bold.\n\n**High SNR:** thin axis lines (or none), gridlines only at major intervals (light grey), flat bars, single-color fills, axis title in 12px lowercase, label values directly on bars when there are \u003C8 of them.\n\n```html\n\u003Csvg viewBox=\"0 0 320 200\">\n  \u003C!-- subtle baseline only -->\n  \u003Cline x1=\"40\" y1=\"180\" x2=\"310\" y2=\"180\" stroke=\"hsl(0 0% 80%)\" stroke-width=\"1\" \u002F>\n  \u003C!-- bars, flat fill -->\n  \u003Crect x=\"50\" y=\"80\" width=\"30\" height=\"100\" fill=\"hsl(220 70% 50%)\" \u002F>\n  \u003Crect x=\"100\" y=\"60\" width=\"30\" height=\"120\" fill=\"hsl(220 70% 50%)\" \u002F>\n  \u003Crect x=\"150\" y=\"100\" width=\"30\" height=\"80\" fill=\"hsl(220 70% 50%)\" \u002F>\n  \u003Crect x=\"200\" y=\"40\" width=\"30\" height=\"140\" fill=\"hsl(220 70% 50%)\" \u002F>\n  \u003C!-- value labels above bars (replace the y-axis entirely) -->\n  \u003Ctext x=\"65\" y=\"72\" font-size=\"10\" text-anchor=\"middle\">42\u003C\u002Ftext>\n  \u003Ctext x=\"115\" y=\"52\" font-size=\"10\" text-anchor=\"middle\">58\u003C\u002Ftext>\n  \u003Ctext x=\"165\" y=\"92\" font-size=\"10\" text-anchor=\"middle\">31\u003C\u002Ftext>\n  \u003Ctext x=\"215\" y=\"32\" font-size=\"10\" text-anchor=\"middle\">71\u003C\u002Ftext>\n  \u003C!-- x labels -->\n  \u003Ctext x=\"65\" y=\"195\" font-size=\"10\" text-anchor=\"middle\" fill=\"hsl(0 0% 45%)\">Q1\u003C\u002Ftext>\n  \u003Ctext x=\"115\" y=\"195\" font-size=\"10\" text-anchor=\"middle\" fill=\"hsl(0 0% 45%)\">Q2\u003C\u002Ftext>\n  \u003Ctext x=\"165\" y=\"195\" font-size=\"10\" text-anchor=\"middle\" fill=\"hsl(0 0% 45%)\">Q3\u003C\u002Ftext>\n  \u003Ctext x=\"215\" y=\"195\" font-size=\"10\" text-anchor=\"middle\" fill=\"hsl(0 0% 45%)\">Q4\u003C\u002Ftext>\n\u003C\u002Fsvg>\n```\n\nThe signal here is four numbers (Q1–Q4 values) and their relative magnitudes. Everything else is at the bare minimum needed to read them.\n\n### Example 3: a settings page\n\nA common low-SNR pattern: every setting wrapped in its own card, every section heading colored in brand, every help text in a tinted callout box, \"save\" buttons under every section.\n\nA high-SNR settings page uses one or two `Card` containers per section (proximity does the rest), section headings in normal text weight at the top of each section, help text in dim grey under the field it concerns, and a single \"Save changes\" button at the bottom (or auto-save with toast confirmation).\n\n## Anti-patterns\n\n- **The brand-everywhere page.** Every available surface tinted with the brand color, every separator in brand. The brand becomes background noise; users tune it out.\n- **The \"polish\" pass.** A late-stage designer adds shadows, gradients, hover effects, and micro-illustrations to \"make it feel more designed.\" The new chrome reduces SNR; the page loses clarity.\n- **The empty-state mascot.** A 400px-tall illustration of a sad cat under three lines of empty-state copy. The illustration is the signal; the actual instruction recedes.\n- **The data table with everything bordered.** Cells, rows, columns, and table border all 1px solid. The data is now jail.\n- **Decorative redundancy.** A \"Bell\" icon next to a label that says \"Notifications\" next to another bell icon next to a section heading \"Notification preferences.\" Pick one.\n\n## Heuristics\n\n1. **The squint test (again).** Squint at the page. Is one thing dominant? If the page is uniformly busy, SNR is low.\n2. **The screenshot reduction.** Take a screenshot, scale to 25%. If you can still tell what the page is for and where the actions are, SNR is good. If it looks like noise pixels, low.\n3. **The \"delete and see\" test.** Delete a candidate noise element. Does the page feel diminished? If yes, it was signal. If no, you've improved the page.\n4. **The data-ink ratio.** For information graphics specifically: estimate the proportion of ink that conveys data versus chrome. Tufte's heuristic was to push toward 100%; in practice 70%+ is healthy.\n\n## Related principles\n\n- **`hierarchy`** — strong hierarchy raises SNR by making one element carry the message.\n- **`proximity`** — proximity reduces the need for borders and dividers (which are often noise).\n- **`horror-vacui`** — the impulse to fill empty space, which directly lowers SNR.\n- **`highlighting`** — emphasis only works in low-noise environments.\n- **`form-follows-function`** (aesthetics) — every form choice should derive from a function; SNR is the operational version.\n- **`ockhams-razor`** (cognition \u002F process) — among solutions that work, prefer the simplest.\n\n## Sub-aspect skills\n\n- **`snr-densification`** — when SNR is *too* high (sterile, sparse), how to add signal density without adding noise.\n- **`snr-decoration-removal`** — a structured audit method for removing decorative chrome.\n- **`snr-emphasis-economy`** — how to spend emphasis (color, weight, size) sparingly so each instance lands.\n\n## Final note\n\nSNR is a discipline of subtraction. The pull toward addition is constant — every stakeholder wants their feature on the dashboard, every designer wants polish, every product manager wants a callout for the new thing. The job of the SNR-aware designer is to keep saying *no* — and *yes* only to the few things that earn their pixels.\n",{"name":5,"description":7},"main","b0f0a87593c578a7898eccaf1b363f7f87c1f99b","plugins\u002FHDeibler\u002Funiversal-design-principles\u002Fplugins\u002Fperception-and-hierarchy-principles\u002Fskills\u002Fsignal-to-noise-ratio",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":67,"prompt":77,"zipAvailable":78},[68,71,74],{"tool":69,"command":70},"npx","npx skills add hashgraph-online\u002Fawesome-codex-plugins --skill signal-to-noise-ratio",{"tool":72,"command":73},"bunx","bunx skills add hashgraph-online\u002Fawesome-codex-plugins --skill signal-to-noise-ratio",{"tool":75,"command":76},"pnpm","pnpm dlx skills add hashgraph-online\u002Fawesome-codex-plugins --skill signal-to-noise-ratio","安装技能，技能地址：https:\u002F\u002Fgithub.com\u002Fhashgraph-online\u002Fawesome-codex-plugins\u002Fblob\u002Fmain\u002Fplugins\u002FHDeibler\u002Funiversal-design-principles\u002Fplugins\u002Fperception-and-hierarchy-principles\u002Fskills\u002Fsignal-to-noise-ratio\u002FSKILL.md",true,[80],{"path":81,"resourceType":82,"resourceTypeDesc":83,"sizeBytes":84,"sourceHtmlUrl":85},"references\u002Fdata-ink-and-information-design.md","REFERENCE","参考文档",5614,"https:\u002F\u002Fgithub.com\u002Fhashgraph-online\u002Fawesome-codex-plugins\u002Fblob\u002Fmain\u002Fplugins\u002FHDeibler\u002Funiversal-design-principles\u002Fplugins\u002Fperception-and-hierarchy-principles\u002Fskills\u002Fsignal-to-noise-ratio\u002Freferences\u002Fdata-ink-and-information-design.md",[87,95,102,109,134,159],{"skillNo":88,"name":89,"nameZh":6,"description":90,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":91,"categories":92,"keywords":93,"publishedAt":94},"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":96,"name":97,"nameZh":6,"description":98,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":99,"categories":100,"keywords":101,"publishedAt":94},"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":103,"name":104,"nameZh":6,"description":105,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":106,"categories":107,"keywords":108,"publishedAt":94},"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":110,"name":111,"nameZh":6,"description":112,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":113,"categories":114,"keywords":115,"publishedAt":51},"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",[],[116,117,118,119,120,121,122,123,124,40,125,32,126,127,128,129,130,131,132,133],"search","deja search","never","error","ready","memory","re","decide","fix","debugging","you","done","reviewer","io","change","cli","merge","past",{"skillNo":135,"name":136,"nameZh":6,"description":137,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":138,"categories":139,"keywords":140,"publishedAt":51},"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",[],[141,142,143,129,144,145,146,147,148,149,150,151,152,153,121,154,155,156,157,158],"deja reflect","reflect","review","with","record","github","next","https","node","Rules","decisions","brew","remember","project rules","project","session","end","reflection",{"skillNo":160,"name":161,"nameZh":6,"description":162,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":163,"categories":164,"keywords":174,"publishedAt":51},"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",[165,168,171],{"categoryNo":166,"categoryName":167,"taxonomyType":21,"taxonomyTypeDesc":22},"01JBSEEDCAT000000000000016","图像与多媒体",{"categoryNo":169,"categoryName":170,"taxonomyType":21,"taxonomyTypeDesc":22},"01JBSEEDCAT000000000000023","Skill与智能体开发",{"categoryNo":172,"categoryName":173,"taxonomyType":21,"taxonomyTypeDesc":22},"01JBSEEDCAT000000000000010","后端与接口",[161,175,176,177,178,179,180,155,181,122,182,183,184,185,32,186,187,188,189,190],"URL","Video","short-form","standalone","PDF","viral","tiktok","short","social","MCP","song","image","mcp server","schedule","api","publish"]