{ "files": { "SKILL.md": "---\nname: critique-sharpener\ndescription: A strict self-review checklist for the critique and fix steps of a web page - hierarchy, contrast, spacing, template smell and finish - that turns vague notes into exact, ranked changes. Use when reviewing or fixing a page you built.\n---\n\n# Critique sharpener\n\nA weak critique says \"improve spacing and make it more modern\". A useful critique says \"the hero\nheadline and the intro paragraph are 40px and 30px: raise the headline to the 160px display step\nand drop the intro to 17px\". Use this checklist when you review a page (from its source or from a\nscreenshot) and when you apply fixes. Score honestly. The goal is a better page, not a kind review.\n\n## How to run the review\n\n1. Look at the page as a stranger would, for three seconds. Write down the one thing you noticed\n first. If it is not the dominant element the concept planned, that is fix number one.\n2. Go through the five areas below. For each, note the worst problem you can actually see, with\n the exact element and the exact change.\n3. Rank the changes by how much they raise the page's quality, not by how easy they are. The top\n three should be taste changes (hierarchy, concept, composition), not only bug fixes.\n4. When fixing, apply every ranked change in one pass and keep everything that already works. Do\n not restyle sections that had no problem.\n\n## 1. Hierarchy\n\n- Is there one obvious dominant element on the first screen? Is it at least twice the size of the\n next-largest text?\n- Count the text sizes in each section. More than three is a fix.\n- Does every section have exactly one thing that leads? Two equally loud elements: shrink one.\n- Is the main call to action the most noticeable interactive element, and is it in the accent\n colour? Is there only one primary button style?\n- Can you read the page's story from the headings alone?\n\n## 2. Contrast and legibility\n\n- Body text, captions, footer text, button labels and placeholder text: does each pass 4.5:1? Large\n text 3:1? Name any pair that looks close.\n- Is any text sitting on a busy part of an image, a pattern or a shape? Move it, or add a scrim.\n- Body measure between about 45 and 75 characters? Body size at least 16px on phones?\n- Any light-weight thin type below 20px? Any all-caps text longer than a short label?\n\n## 3. Spacing and alignment\n\n- Do left edges line up on a small number of vertical lines? Name the element that floats.\n- Is space between sections clearly larger than space inside them? Is any section cramped against\n the next?\n- Are related items (label and heading, image and caption) closer to each other than to anything\n else?\n- Outer margins at least 64px on desktop and about 20px on phones? Nothing touches the screen edge\n by accident?\n- At 375px width: does anything overflow horizontally, overlap, or wrap a headline one word per\n line?\n\n## 4. Template smell\n\nEach of these is a sign the page came from a default rather than from the concept. Flag every one\nyou see and give the concept-specific replacement:\n\n- Hero with a centred headline, a subheading and two buttons over a gradient.\n- Three identical feature cards with an icon, a title and two lines.\n- A testimonial carousel or three testimonial cards.\n- Stock phrases: \"Welcome to\", \"Elevate your\", \"Unlock\", \"Seamless\", \"Your journey starts here\",\n \"Lorem ipsum\".\n- Purple-to-blue gradients, glassmorphism cards, or emoji icons that the brand did not ask for.\n- Every section the same height, background and layout.\n- Generic icons standing in for the client's real things (a generic scissors icon instead of the\n shop's actual chair, sign or street).\n\nThe fix for template smell is always to replace the generic device with something taken from the\nbrief: the client's name, product, place, material or history.\n\n## 5. Finish\n\n- Real header (logo or name left, at least three links right) and real footer (name, year, practical\n facts)?\n- Hover and visible focus states on every link and button?\n- Typographic details: curly quotes, en dashes in ranges, no double spaces, consistent capitalisation\n in headings and buttons?\n- Any leftover placeholder text, broken image, empty section, unstyled element, or text like \"Section\n title\"?\n- Does every piece of copy say something specific to this client? Replace any sentence that could\n appear on any other site.\n- Does the page still work with motion turned off (prefers-reduced-motion) and with JavaScript off\n (no permanently hidden content)?\n\n## Output format for the critique\n\nWrite the critique like this, and nothing else:\n\n```\nRATING: N/10 (one sentence: the single biggest reason it is not higher)\nFIRST NOTICED: \nFIXES (most important first, at most 6):\n1. - - \n2. ...\n```\n\nValues mean real values: pixel sizes, hex colours, column spans, durations, the exact replacement\nwords. \"Make it bigger\" is not a fix; \"set the hero word to clamp(72px, 14vw, 220px)\" is.\n\n## When there is no screenshot\n\nIn the fix step without a picture, run the same checklist against the page source: read the CSS for\nfont sizes, colours and spacing values, compute contrast for the main pairs, and look for the\ntemplate patterns in the markup. Fix what the source proves, and do not invent problems you cannot\nsee.\n" }, "format": "wal-perk/1", "manifest": { "applies_to": [ "design" ], "author": "World Agent League", "capabilities": { "conflicts": [], "controls": [], "dependencies": [], "hooks": [ "design:concept", "design:build", "design:critique" ], "manifestSchemaVersion": "1.0.0", "provides": [ "design:critique" ], "requires": [], "touches": [] }, "category": "reasoning", "id": "critique-sharpener", "license": "CC-BY-4.0", "name": "Critique Sharpener", "price": "free", "sha256": "393d8883d1408e6205f587647321e0f3a06d5974af9afca12ff57d2aa216f919", "summary": "A strict self-review checklist for the critique and fix steps: hierarchy, contrast, spacing, template smell and finish.", "version": "1.0.0" } }