@litfamily/litclaude 1.0.10 → 1.0.13

package/plugins/litclaude/skills/frontend-ui-ux/references/slop-register.md

@@ -0,0 +1,150 @@
+# Slop register
+
+This register loads with `references/craft-floor.md` whenever `frontend-ui-ux` activates. A row
+earns a `SLOP-*` id when a designer would read it as a reflex default, the "made by a generator"
+tell, rather than a plain bug below a number. A genericness tell is at most `MEDIUM`: it never
+blocks "done" by itself. The only `HIGH` rows are the three functional ones (SLOP-057 broken
+image, SLOP-058 dead text, nav or call-to-action link, SLOP-059 typeless button beside another
+submit), which block "done" like a craft-floor HIGH until fixed or stated as a limitation.
+
+How to use it:
+
+- **Run the deterministic rows first.** The interface probe measures every row marked
+  *probe*; the static fallback reads the rows marked *static* from source when no browser can
+  render. Only then form a holistic view (SLOP-055, SLOP-056), and ground it in the rows that
+  fired. "Looks generic" with no cited row is not a finding.
+- **Coverage "judgment"** means DET-assist: the probe prints the hit under "Judgment calls", never
+  as a finding, and a person decides (a recorded reason for a common font, a real sequence behind
+  section numbers, an emoji policy the brief asked for, a real source behind a figure). The
+  severity applies only once you confirm it; state the call as Inferred.
+- **Copy rows read authored copy only**: visible text of the top document, outside code, form
+  values, `<title>` and attributes. Text inside a frame is never charged to the page.
+- **Fix with the cheapest tool**: delete, then use the platform, then reuse, then correct a
+  value, then add.
+- **Page type decides nothing.** Every surface, from a form to a marketing page, gets the same
+  register.
+
+Coverage column: *probe* (rendered check), *static* (source check without a browser), *both*,
+or *checklist* (review by eye).
+
+## Layout and composition
+
+| Id | Tell | Signal and threshold | Severity | Fix | Coverage |
+|---|---|---|---|---|---|
+| SLOP-001 | The same text-and-image split stamped section after section | ≥ 3 consecutive sections with the same column shape and image side | MEDIUM | Break the run with a stacked or full-width section | checklist |
+| SLOP-002 | Identical icon-heading-text tiles as the default way to show anything | ≥ 4 tiles of equal size (±4 px) and structure in one grid, each an icon or image, a heading and text; `ul`, `ol` and `table` grids skipped | MEDIUM | Vary tile size or content shape, or present the items as a list | probe |
+| SLOP-003 | Cards inside cards, or bento cells with nothing in them | nesting depth ≥ 3, or cell count ≠ content count | MEDIUM | Remove the extra shell or reshape the grid | checklist |
+| SLOP-004 | A split header whose side column only restates the headline | short side column (< 15 words) with no role of its own | MEDIUM | Stack headline and body | checklist |
+| SLOP-005 | One section shape reused for unrelated topics | the same structure ≥ 3 times | MEDIUM | Give later repeats a different layout | checklist |
+| SLOP-006 | Every gap the same size on a page that needs grouping | ≥ 5 regions and ≥ 10 samples, one 4 px bucket > 85 %, ≤ 3 buckets | MEDIUM | Space by relationship on a real scale | checklist |
+| SLOP-007 | Big empty gaps that separate nothing | a gap much larger than its neighbours with no job | LOW | Remove it or give it a grouping role | checklist |
+
+## Decoration
+
+| Id | Tell | Signal and threshold | Severity | Fix | Coverage |
+|---|---|---|---|---|---|
+| SLOP-008 | The reflex violet accent | a gradient stop, or heading text (h1 to h3 or ≥ 20 px), with hue 260° to 310° and an RGB channel spread ≥ 50, unless that hue is the brand's own action colour in ≥ 2 regions | MEDIUM | Neutral surface plus one real brand hue | both |
+| SLOP-009 | Gradient-filled headline text | `background-clip: text` with a gradient | MEDIUM | Solid colour; emphasis through weight or size | both |
+| SLOP-010 | The same coloured glow repeated | CF-404's glow test (≤ 2 px offset, ≥ 16 px blur, saturation > 0.4) on ≥ 2 unrelated controls or headings, not a focus state; a single glow is CF-404 | MEDIUM | Neutral offset shadow or none | probe |
+| SLOP-011 | A faint floating blob with no focal job | an absolutely placed radial gradient under 0.3 opacity that paints only itself (no text, media, control or link inside) | MEDIUM | Remove or tie it to a real focal point | probe (judgment) |
+| SLOP-012 | Dot or line grid texture next to other decoration | ≥ 2 gradient layers or a radial dot on a fixed px cell ≤ 48 px, no canvas, table, grid, `role=img` or SVG over 48 px in its section or landmark, beside a SLOP-008 or SLOP-011 signal | MEDIUM | Remove unless it stands in for real data | probe |
+| SLOP-013 | Grain or noise dense enough to hide the layout | layout reads better with the layer hidden | LOW | Lighten it or remove it | checklist |
+| SLOP-014 | Glass blur as a default surface | no stated reason and no solid fallback for reduced transparency | LOW | Solid surface unless the brief earns it | checklist |
+| SLOP-015 | Coloured side stripes faking emphasis on cards | on rounded elements: a single-side accent (one side ≥ 2 px saturated, the other three 0 or ≤ 1 px neutral; an all-round outline is not a stripe), an absolutely placed 3 to 12 px `::before`/`::after` bar pinned to one edge (tab and nav indicators skipped), ≥ 2 per scope; an inset 3 to 12 px chromatic shadow counts at 1; status regions and callouts excepted | MEDIUM | Carry emphasis with the fill or an icon | probe |
+
+## Typography
+
+| Id | Tell | Signal and threshold | Severity | Fix | Coverage |
+|---|---|---|---|---|---|
+| SLOP-016 | A reflex default face (Inter, Roboto, Open Sans, Lato, Montserrat, Arial, Helvetica, Space Grotesk and similar; the Geist family is exempt) | the first family in the stack that actually loaded matches the list (a fallback further down never counts; form controls' browser default is skipped) | MEDIUM | Choose a face for the product or record why the common one stays | both (judgment) |
+| SLOP-017 | A display serif with no reason | a shortlisted serif on headings and no recorded rationale | MEDIUM | Sans display, or record the reason | checklist |
+| SLOP-018 | A giant headline over a tiny afterthought subhead | size ratio ≥ 3.5 and subhead < 14 px | MEDIUM | Raise the subhead or shorten the pairing | checklist |
+| SLOP-019 | Too many type moods | > 3 base families (icon fonts excepted) | MEDIUM | Cut to three or fewer | probe |
+| SLOP-020 | Long all-caps text | uppercase leaf text > 40 characters in a cased script | LOW | Uppercase only for short labels | probe |
+
+## Colour
+
+| Id | Tell | Signal and threshold | Severity | Fix | Coverage |
+|---|---|---|---|---|---|
+| SLOP-021 | Neutral mid-gray text on a coloured surface | text lightness 40 % to 70 % and saturation < 10 % on a surface with saturation ≥ 25 % (see CF-201 for the contrast floor) | MEDIUM | Tint the text from the surface hue | probe |
+| SLOP-022 | Several accent hues competing | more than one saturated cluster among filled surfaces; measured as CF-205 | MEDIUM | One accent; the rest neutral | via CF-205 |
+| SLOP-023 | Pure #000 or #fff as the base | exact black or white body background or ink (a deliberate all-black dark theme excepted) | LOW | Move a few percent toward the brand neutral | probe |
+
+## Motion
+
+| Id | Tell | Signal and threshold | Severity | Fix | Coverage |
+|---|---|---|---|---|---|
+| SLOP-024 | Bouncy easing on routine feedback | measured as CF-505 | MEDIUM | Ease-out, no overshoot | via CF-505 |
+| SLOP-025 | Entrances growing out of nothing | measured as CF-503 (start ≥ 0.95) | MEDIUM | Start near 0.95 with opacity 0 | via CF-503 |
+| SLOP-026 | Animating layout properties | measured as CF-508 | MEDIUM | Transform and opacity instead | via CF-508 |
+| SLOP-027 | An endless pulse or blink bound to nothing | infinite opacity or shadow animation with no `data-*`, `aria-busy` or loading class | LOW | Remove, or bind it to real live status | probe |
+| SLOP-028 | Full transitions on every hover and re-render | > 150 ms on repeated interactions (CF-506) | LOW | Instant or ≤ 150 ms for routine changes | checklist |
+
+## Structural micro-labels
+
+| Id | Tell | Signal and threshold | Severity | Fix | Coverage |
+|---|---|---|---|---|---|
+| SLOP-029 | A tracked uppercase eyebrow over most headings | the visible element right before an h1 to h3 with ≤ 4 words, uppercase, letter-spacing ≥ 0.05 em and ≤ 0.75 × the heading's size; more of them than ceil(visible h2 count / 3) | MEDIUM | Drop the eyebrows | probe |
+| SLOP-030 | 01 / 02 / 03 numbering with no real order | ≥ 2 distinct zero-padded labels before headings | MEDIUM | Remove, or name the real steps | probe (judgment) |
+| SLOP-031 | A fake version or beta stamp in marketing copy | a `vN.N`, beta or build-hash token outside real release notes | MEDIUM | Remove unless the brief is about a release | checklist |
+| SLOP-032 | Decorative status dots | a small coloured dot before labels with no bound state | LOW | Remove or bind to real status | checklist |
+| SLOP-033 | Chained middle-dot strips | ≥ 3 `·` on one line, or a city, offset and weather strip | LOW | Lines or columns instead | probe |
+| SLOP-034 | A strip of mood words along the hero's foot | uppercase non-link tokens in the bottom 15 % of the hero (compliance badges excepted) | MEDIUM | Remove | checklist |
+| SLOP-035 | A "scroll" cue in the first viewport | scroll text or a bouncing chevron | LOW | Remove | checklist |
+
+## Copy
+
+| Id | Tell | Signal and threshold | Severity | Fix | Coverage |
+|---|---|---|---|---|---|
+| SLOP-036 | Stock marketing phrases | ≥ 1 whole-phrase match against the fixed phrase list in the rule table ("seamless experience", "harness the power", "best-in-class", "차세대 플랫폼" and similar), outside quotes; a bare common word such as "seamless" alone never counts | MEDIUM | A specific, product-true claim | both |
+| SLOP-037 | A placeholder brand name | a stock fictional company name in visible copy | MEDIUM | Name the product from the brief | probe (judgment: it may be the real name) |
+| SLOP-038 | A filler person name | "John Doe", "Jane Smith", "홍길동" and the like | MEDIUM | A specific, local name | probe |
+| SLOP-039 | The "Not X. Y." cadence | ≥ 3 sentence pairs of two shapes: "Not a/an" + a short clause then a capitalised sentence, or a sentence then one opening "No" or "Just" (Latin copy only; no Hangul shape is defined) | LOW | Vary the rhythm | probe |
+| SLOP-040 | Em dashes in shipped copy | any U+2014, or a U+2013 with spaces on both sides that is not a number, time or date range; a doubled dash in Han-majority text and a quote with a cross-origin `cite` are LOW | MEDIUM | Period, comma or parentheses | both |
+| SLOP-041 | Suspiciously round or precise numbers with no source | a stat-shaped number (percent, multiplier, 48k, 10,000+, a unit rate) outside money, dates, times, versions, tables and forms, with no source, footnote, example or mock marker in its block | MEDIUM | Cite it, label it as an example, or cut it | probe (judgment) |
+| SLOP-042 | Several labels for one action | > 1 wording for the same intent | LOW | One label per intent | checklist |
+
+## Fake assets and data
+
+| Id | Tell | Signal and threshold | Severity | Fix | Coverage |
+|---|---|---|---|---|---|
+| SLOP-043 | A product screenshot built from divs | a ≥ 240 × 160 px box with no media and no focusable control inside showing a row of ≥ 3 window-chrome dots in its top 48 px, or tilted by a transform | MEDIUM | Real screenshot or real component | probe (judgment: a real component preview looks the same) |
+| SLOP-044 | A fake build or sync footer | a version or "synced 4s ago" string outside real docs | MEDIUM | Remove | checklist |
+| SLOP-045 | Matching stat blocks with nothing behind them | ≥ 4 same-height siblings whose figure is ≥ 1.5 × its label (≥ 3 beside a call to action) | MEDIUM | Remove, or back each number with a source | probe (judgment: needs the brief) |
+| SLOP-046 | A gauge or sparkline with a hard-coded value | a progress, meter, dash-array ring or single-series sparkline ≤ 64 px tall with no visible value, axis or accessible name | MEDIUM | Remove unless it shows real data | probe (judgment) |
+| SLOP-047 | A looping logo wall too small to read | an infinite sideways loop of ≤ 6 distinct logos with a median height < 20 px at 1440 px | MEDIUM | Static row, larger logos | probe |
+| SLOP-048 | Carousel dots that do nothing | ≥ 2 dot controls beside ≥ 2 slides, declared autoplay, and no focusable named dot, `aria-controls`, `aria-selected`, `aria-disabled` or `aria-current` (without a declared autoplay attribute the timed read is not run: not verified) | LOW | Remove or wire them up | probe |
+| SLOP-049 | Egg or silhouette avatars | a generic avatar asset | LOW | A believable photo or a deliberate style | checklist |
+| SLOP-050 | Category captions under trust logos | a category word under each logo | LOW | Logo only | checklist |
+
+## Icons and illustration
+
+| Id | Tell | Signal and threshold | Severity | Fix | Coverage |
+|---|---|---|---|---|---|
+| SLOP-051 | An illustration stacked from primitives | an inline SVG ≥ 200 × 200 px with ≥ 8 rect, circle, ellipse or polygon shapes, ≥ 3 fills, ≤ 2 text elements and no pattern | MEDIUM | Simplify or use a real asset | probe (judgment: an honest diagram clears it) |
+| SLOP-052 | A many-vertex mask faking a photo edge | `clip-path: polygon()` with ≥ 10 vertices, at least half its coordinates off the 25 % grid, or `path()` with ≥ 3 curves | LOW | A real crop or a simple shape | probe |
+| SLOP-053 | Emoji in place of an icon set | emoji as the whole content of a small control, or leading a nav item, badge, list item or heading | LOW | The project's icon set | probe (judgment) |
+| SLOP-054 | Hover zoom on the image itself | a `:hover` transform on `img` | LOW | Transform the container | checklist |
+
+## Whole-page reads (last)
+
+| Id | Tell | Signal and threshold | Severity | Fix | Coverage |
+|---|---|---|---|---|---|
+| SLOP-055 | Several small tells stacked on one component | ≥ 2 deterministic rows on the same component | MEDIUM (else LOW) | Change that component's visual language | checklist |
+| SLOP-056 | "Could be any competitor's product" | only after every row above ran | LOW | Act on the rows that contribute | checklist |
+
+## Functional tells
+
+| Id | Tell | Signal and threshold | Severity | Fix | Coverage |
+|---|---|---|---|---|---|
+| SLOP-057 | Broken image | empty, `#` or `undefined` `src` or `srcset` with no lazy-loader attribute, or a fetch that finished and failed; an image not yet fetched at capture is not verified | HIGH | Fix the source or remove the element | both |
+| SLOP-058 | Link to nowhere | `href="#"` or `javascript:` (tier derived: a script handler is invisible to the scan) | HIGH for text, nav or call-to-action links; MEDIUM for logo or icon-only links | A real destination, or a real button | both |
+| SLOP-059 | A typeless button beside another submit | `<button>` without `type` whose form owner (`button.form`, so `form="id"` counts) has ≥ 2 submit-capable buttons; a lone typeless button is the form's intended submit | HIGH | `type="button"` unless it really submits | probe |
+| SLOP-060 | Lorem or placeholder copy | lorem ipsum, `[placeholder]`, TODO, TBD in visible text | LOW | Real copy | both |
+| SLOP-061 | Text in an endless marquee | `<marquee>` or a looping sideways keyframe with no pause | LOW | Static row or a pause control | both |
+| SLOP-062 | A modal opened by reflex | the content did not need to block the page | LOW | Inline panel, toast or disclosure | checklist |
+| SLOP-063 | Monospace as a "technical" costume | monospace on prose with no code or aligned data | LOW | The normal text face | checklist |
+
+Slides, documents and diagrams share the layout, decoration, typography, colour, copy and
+fake-data rows; motion, scroll, hover and carousel rows do not transfer. The office and diagram
+skills enforce their own subset in their QA scripts.

package/plugins/litclaude/skills/frontend-ui-ux/references/visual-reconstruction.md

@@ -1,97 +1,51 @@
-A reference shows one state at one width, produced by a stack you do not control. Rebuild it as
-real markup with real semantics; never close the gap with a screenshot.
+# Visual reconstruction from references
 
-## Claim classes
+A reference image shows one state at one viewport, rendered by a stack you may not know.
+Rebuild semantic, responsive markup and tune it toward the reference. Never use a screenshot
+as the page background or as a substitute for real content.
 
-Label every claim about the reference and carry the labels into its `references` entry.
+## Measure the frame
 
-- Observed: measurable in the image — a pixel distance, a sampled hex value, a glyph.
-- Inferred: a reading the image does not prove, such as a scale behind three gaps.
-- Unknown: not depicted — hover, focus, error, empty, loading, any other width.
+Record the image dimensions and device scale. Measure the main content width, outer margins,
+columns, type sizes, baseline spacing, and large color regions before coding. Sample flat
+interior pixels, not edges or gradients. Use the smallest spacing scale that explains the
+measured gaps; do not choose values only because they look close.
 
-Only observed claims are criteria; inferred claims need an owner, unknowns are user questions.
+Keep an internal note that separates direct observations from responsive or behavior
+assumptions and states that other states are not shown. A reference does not establish
+hover, focus, error, loading, or narrower layouts. Add those states from the product's
+interaction contract or ask about a material unknown. Do not place observation labels on
+the interface itself.
 
-## Measurement pass
+## Rebuild meaning and assets
 
-Measure before writing code. Guessed numbers cost the most to unwind.
+- Use heading elements in outline order, real navigation lists, and selectable text.
+- Do not reproduce contrast failures or suppress visible keyboard focus.
+- Recreate permitted geometry, rules, simple icons, and gradients.
+- Extract only assets the project is allowed to use; preserve their source resolution.
+- Substitute an unavailable permitted asset at the same dimensions, or omit decoration
+  that carries no information. Never recreate a logo, wordmark, or licensed photograph.
 
-1. Record pixel dimensions and device scale; divide the scale out before quoting.
-2. Sample color at flat interior pixels, never on an edge or in a gradient.
-3. Measure cap height and baseline-to-baseline distance per size; derive line height.
-4. Fit every gap, gutter, and outer margin to the smallest plausible scale.
+When the reference font is unavailable or unlicensed, choose a metric-compatible fallback.
+Compare cap height, x-height, and advance width; adjust line-box metrics only when needed;
+then verify that the longest real label still fits.
 
-## Semantic reconstruction
+## Infer responsive behavior
 
-Build the structure the content deserves, then style it toward the reference.
+One frame proves one width. Classify regions as fixed rail, fluid column, or centered max
+width. Set breakpoints where measured content stops fitting. Decide what wraps, stacks,
+collapses, or scrolls, and inspect the narrowest supported width plus one width around each
+breakpoint. Keep these assumptions in the Design Contract until the user or another source
+confirms them.
 
-- Headings become heading elements in outline order; large and bold is not an `h1`.
-- A row of links becomes a navigation list, not a flex row of `div`s.
-- Text baked into the image becomes real, selectable, translatable text.
-- Contrast failures and suppressed focus in the reference are not reproduced.
+## Iterate against the capture
 
-## Asset decisions
+Capture the build at the reference dimensions and device scale. Compare structure, spacing,
+type, then color. Fix the largest measured mismatch and recapture. Stop after three passes
+that do not reduce the overall difference. A fidelity review record can retain per-region
+measurements, source and output paths, unconfirmed states, and asset decisions; the normal
+reader reply needs only the result and a material limitation once.
 
-Decide per asset and record the decision.
-
-- Recreate: geometric shapes, rules, dividers, simple icons, gradients.
-- Extract: only assets you are permitted to use, at source resolution.
-- Substitute: a placeholder at identical dimensions, marked as a placeholder.
-- Omit: decoration carrying no information; record it in `omissions`.
-
-Never recreate a logo, wordmark, or licensed photograph. Substitute and raise a hard stop.
-
-## Metric-compatible font fallback
-
-When the reference face is unavailable or unlicensed, choose the fallback by metrics.
-
-1. Match units-per-em, cap height, x-height, and default advance width.
-2. Hold line boxes with `size-adjust`, `ascent-override`, `descent-override`.
-3. Verify the longest real label still fits at the fallback's advance.
-4. Record the substitution and its metric delta as an owned inferred claim.
-
-## Responsive inference from one frame
-
-One frame proves one width. State every adaptation as an assumption until confirmed.
-
-- Classify each region: fixed rail, fluid column, or centered maximum width.
-- Break where your measured content breaks, not at the reference's width.
-- Name what wraps, stacks, collapses, or scrolls below that width.
-- Check the narrowest supported width and one width above each break.
-
-## Iteration loop
-
-Iterate on measured deltas, never on impressions.
-
-1. Capture your build at the reference's exact dimensions and device scale.
-2. Compare region by region in order: structure, spacing, type, then color.
-3. Fix the single largest measured delta and recapture.
-4. Stop after three passes that do not reduce total delta; report the remainder.
-
-## Fidelity report
-
-Report per region so no reviewer has to re-measure.
-
-- Region name, measured delta per axis, both artifact paths compared.
-- Every inferred claim with its owner, every unknown state still awaiting input.
-- Substituted or omitted assets, with the reason.
-- Verdict `PASS`, `FAIL`, or `BLOCKED`, handed to the independent review pass bound to the design
-  contract hash.
-
-## The "pixel perfect" gate
-
-Use the phrase only when all five hold. Otherwise state measured fidelity as a number.
-
-1. Both captures share identical dimensions and device scale.
-2. Every observed claim is checked, with zero unexplained delta.
-3. No inferred claim is unowned and no unknown state unanswered.
-4. The reference face is licensed and loaded, not a metric fallback.
-5. The comparison covers every declared state, not one frame.
-
-## Failure patterns
-
-Reject:
-
-- A screenshot used as a background, an overlay, or filler content.
-- A spacing value chosen because it "looks right".
-- A reproduced logo or licensed image with no permission recorded.
-- "Pixel perfect" asserted from one width and one state.
+Use “pixel perfect” only when dimensions and scale match, every visible state is compared,
+no unexplained measured gap remains, and the typeface and assets are approved. Otherwise
+describe the measured result and the remaining mismatch plainly.