A right-edge minimap: one hairline tick per entry (short ticks for the
prose sections), grouped like the catalogue, with the current position
inked. Hover or keyboard focus swaps the ticks for a card panel listing
every entry by number and title; a scroll-spy keeps both in sync and
centres the active row unless the pointer is browsing the panel.
Chrome stays monochrome (ink bar, no accent), all four languages ride
the existing <T> mechanism, and the rail only appears ≥82rem where it
has margin of its own beside the 76rem container.
A loading spinner that doesn't rotate around its own centre — the ring
limps around a small circle as it spins. Calibrated frame-by-frame
against a real shipping app: rigid rotation, but the rotation centre
sits ~8% of the radius off the ring's visual centre (off-centre glyph
artwork; the rotate-keyframe-clobbers-the-centering-translate bug is
the other spelling).
The demo reproduces the exact mechanism: a near-full ring SVG whose
circle is drawn off the viewBox centre while the box rotates normally.
Verified by circle-fitting rendered frames (slop: 3.1px orbit, constant
radius; clean: ≤0.3px).
Inserted in the motion group as #27; tells 27–34 renumber to 28–35
across taxonomy/detection/fixes/scan.mjs, and the scanner gains
clobbered-translate / off-centre transform-origin leads.
Catalogue:
- New evolved-slop tell #34 "the editorial dashboard": a serif "Good
evening" greeting, serif stat numerals, and cream paper stamped on an
operational UI. Full update across catalogue + i18n + demo, the skill's
taxonomy/detection/fixes/scan.mjs, and the 33->34 counts.
Website refinement (craft, not scale — no enlarged type):
- Wire every corner back to the --radius tokens the site already defines;
the chrome had been hardcoding border-radius:0 against them. Adds
--radius-sm and nests per the site's own "corners that don't nest" rule.
- Luminous paper + deeper ink + true-white cards on tighter contact shadows.
- Optical sizing, hanging punctuation, refined section eyebrow.
- Refined secondary-button surface; nav underline + hairline-on-scroll.
- Subtle, reduced-motion-safe entrance reveal.
- LICENSE: Apache-2.0, plus a License section in the README
- CI: run the scanner tests on Node 20/22 for pushes/PRs touching skill/
- scanner: scan .php/.twig templates (WordPress themes/plugins)
- scanner: --only/--skip tell filters, --exclude path filter, and
deslop-ignore / -next-line / -file comment directives, id-scopable
- scanner: --rules=extra.mjs extension hook for project/language tells,
with scripts/rules.ru.mjs as a shipped Russian-copy example
- scanner: realpath both roots so the skill-root exclusion survives
symlinked paths (macOS /var/folders vs /private/var)
- Slop→Clean now wipes progressively: complementary static masks on
transform-driven wrapper pairs (WebKit can't animate mask-position and
clips mask paint to the border box — wrappers enlarge the box via
negative margin + padding), edge locked to the wipe band's trailing
edge; tempo eased to 1.35x via --sweep-t
- Sweep sound rebuilt as a musical phrase: one dark panned air swell plus
a C5→C6 pentatonic run riding the wipe; end-of-clean chime removed
- oversized-shadow demo: both panes share Linear's dark stage/card/ink so
the only variable left is the shadow itself
- clean-icon.png: replace the AI-drawn SVG stand-in with a flat-vector red
mascot (same brief as the slop blob, executed by a pro hand), answering the
slop pane on its own terms instead of showing a placeholder icon.
- .sc-copy: SF Mono's tall ascent parks the word ~1px low in a `normal` line
box; split the vertical padding unevenly to re-center it optically.
A rounded rectangle whose 1px stroke survives on the straight edges but
vanishes at the corners — the radius and the border live on different
boxes (a `rounded-xl overflow-hidden` wrapper clips a square-cornered
child's border ring at every corner). The demo reproduces the bug with
the exact code that causes it, not a mock-up.
- website: new entry (en/zh + ja/ko), before→after demo, scoped CSS
- skill: taxonomy / detection / fixes / scan.mjs entry; renumber the
old 22–32 → 23–33 (badge-spam onward shift down one, nothing dropped)
- 32 → 33 tells across skill docs; site heading now derives the count
from catalogue.length instead of hardcoding it
The Agent Skills spec caps the description field at 1024 characters;
ours was 1352. Keep the trigger phrases and a representative slice of
the tell catalogue, drop the exhaustive enumeration — the full list
lives in the skill body and README.
Fixes#3
The live site served neither — requests for /robots.txt and /sitemap.xml
soft-404'd back to the homepage HTML. Ship a real robots.txt that allows
crawling and points to the sitemap, plus a single-URL sitemap for this
one-page static site (no @astrojs/sitemap, keeping the zero-integration build).
Readers kept preferring the slop side of many before/afters — because the
clean side only deleted the slop and never spent craft on what remained.
Deletion is not design. Reworked the 12 weakest afters against how Linear
actually handles each case:
- status-dot-glow: 0.85rem whisper → one confident step-2 headline
(not display — a five-word slogan hasn't earned display scale)
- oversized-hero-headline: clean keeps display size (the entry's own fix:
'let those be big'), wins on word count / weight 640 / tracking -0.03em;
escapes the 23rem column so four words sit on one line, balance on wrap
- fake-stat-trio: footnote sentence → label + big 1,847 + source (the real
number earns the stat treatment)
- feature-grid: the one point at step-3 with conviction
- pastel-icon-tiles: bare list → three hairline-split columns (Linear's
FIG-row structure without the decorative tiles)
- tinted-icon-tile: three orphan glyphs → icon + label rows, currentColor
- left-border-callout: unstyled list → hairline-ruled editorial rows
- default-semantic-palette: Info/New drop their indistinguishable grey dots
(not states → no dot); the three real states get saturated dots, the way
Linear's own label dots are vivid
- atmosphere-gradient: chart bars from invisible grey-on-grey to flat
Linear indigo — colour spent on data, the one place it's signal
- over-rounded-glass: clean context panel no longer melts into the stage
- warm-cozy-palette: orphaned brown dot → the one warm accent does a job
(caramel primary button)
- highlighted-keywords: exactly one decided bold
Also: the toggle hint no longer promises 'same content' (several entries'
fixes rewrite the copy by design), and the demos.ts header now states the
rule: the after pane must win the eye, not just the argument.
Each stat tile washed in a tint of its own accent (green revenue tile,
purple users tile) — the bento-card flavour of the tell — across the
catalogue entry, its 4-language copy, the skill's taxonomy/detection/fixes
references, and the demo's slop pane.
Re-read the source page raw (their own AI-slop vs Quality badges included)
instead of a summarized fetch. Two entries they badge "AI slop" that the
first pass wrongly filed under craft:
12 flat-type-hierarchy every size 14–18px, hierarchy left to gray —
the inverse of tell 11, same absent decision
30 monotone-spacing one gap token everywhere; proximity carries
nothing ("Danger zone" floats mid-list)
Eight variants folded into existing tells, each with detect chips, docs
notes, and greppable scanner rules: italic-serif hero → 08, repeating
stripes + dark glow accents → 06, crushed tracking → 11, "X theater"
copy → 14, thick accent ring on rounded cards → 17, giant filler icons
→ 18, ghost card (hairline + wide shadow) → 20, gray-on-tinted text → 03.
Deliberately not added: everything they badge Quality (line length,
contrast, skipped headings…), modal abuse / redundant microcopy (showcase
only, not visual slop), and single-font-for-everything (Quality badge —
and this site's own system stack is exactly that, chosen).
skill/: all four files renumbered and extended to the same 32, verified
1:1 against the catalogue; scanner rules smoke-tested.
New entries, each with en/zh/ja/ko copy and a before→after demo:
10 section-kicker the kicker above every heading
11 oversized-hero-headline the full-sentence display headline
24 springy-hover hover:scale + transition-all + bounce (new Motion group)
26 fake-stat-trio 10k+ / 99.9% / 24/7 invented stats
27 numbered-sections ornamental 01/02/03 ordinals
28 nested-cards cards inside cards inside cards
29 overused-font Inter/Space Grotesk by default (evolved)
Skipped impeccable's generic craft bugs (low contrast, tiny text, broken
images…) — quality defects, not machine-default tells.
Also, tell 11 caught this site's own definition section: the heading was a
whole sentence at display size. Shortened to the four words that carry the
scale (widening the stale 20ch measure), and confessed in the entry's why,
per the decorative-text-lines precedent.
skill/: taxonomy, detection, fixes, and scan.mjs renumbered and extended to
the same 30, verified 1:1 against the catalogue.
The pill was hardcoded to its dark incarnation, so in light mode it sat
as an alien dark blob on light paper. Build its surface from --card /
--rule / --ink instead (the same convention the one-hue demo uses), so
the tell renders natively in both modes: a floating white marketing
pill on light, the glassy dark pill on dark — same fake 'live' dot
either way.
The old before (glowing green ● Online on dark) was a defensible use of
the pattern, so the demo argued for the slop. The before is now the
pattern's least defensible incarnation: a pulsing, haloed green 'live'
dot glued into a dark hero marketing pill, playing status for a tagline
with no state behind it. The after is the same tagline, honest — no
state, so no dot and no pill. Both panes sit directly on the stage, no
private backdrops. Catalogue what/detect/fix (en/zh/ja/ko) and the
skill taxonomy now cover the hero-pill incarnation and the 'no state →
no dot' rule.
The mono-hue-alert demo was hardcoded to dark-only values, so it broke in light mode (now reachable via the theme toggle). Rebuild the slop rows from the hue mixed against the theme tokens — a see-through tint over the current surface, text mixed toward the ink — so the one-hue tell renders pale-on-light and deep-on-dark, same hue either way. Retint the clean toast with --card/--rule/--ink, and drop its drop shadow so it sits flat on the stage (a soft hairline defines it) instead of floating.
Replace the four-button language switch with a compact custom dropdown — a square, ink-on-card menu that matches the chrome, since a native <select>'s popup can't be styled. Focus moves with preventScroll so opening/selecting never jumps the page.
Add a theme toggle (sun/moon) that overrides the OS prefers-color-scheme, persists to localStorage, and is resolved pre-paint to avoid a flash. tokens.css now applies dark for OS-dark-unless-forced-light OR forced-dark, and sets color-scheme so native controls follow the forced theme.
Add a GitHub icon link to the header. The bar stays one line down to a 280px foldable; the wordmark folds to just the mark only below 304px.
Zero the border-radius on the site's own chrome: hero buttons, the category and Slop/Clean verdict tags, code-signal chips, the skill card and its terminal block, the skip link, legend swatches, and the focus ring. The slop demo specimens keep their rounded, glowing look — that is the tell they exist to show. The brand mark glyph is left as-is.
Drop the raised sliding thumb, the recessed track fill, the inset well and every shadow. The toggle is now a single hairline rectangle with square corners, split down the middle by one divider. The selected segment is marked in place — a faint wash, ink-weight bold, and a lit dot — while the inactive side's dot dims and its label greys out. The thumb-positioning script still runs harmlessly on the now-hidden node.
Drop the outer rounded card (hairline border, 12px radius, contact shadow) from every demo. The catalogue now reads as an editorial document of insets instead of a stack of identical rounded cards — the exact 'rounded card' tell it was drawing fire for, and a return to the site's own token rule (hairline rules, not drop shadows). Each demo sits on a faint recessed plate; the toggle head loses its band.
Rework the segmented Slop/Clean toggle for a more crafted feel: a tight contact shadow plus a per-mode hairline ring on the thumb, a recessed track well, softer 6px corners (still not a pill), and tuned label spacing.
Rework the zh strings across the hero, principles, and catalogue for a
more natural, idiomatic voice, and give CJK locales a looser line-height
on ledes and headings — their glyphs fill the em box, so the Latin-tuned
values read cramped.
Replace the thin Panel mock with an invented "premium dark SaaS"
overview card — glowing page, glass gradient surface, gradient stat
tiles, a gradient bar chart, a glassy segmented control, and a glowing
gradient CTA. The clean pane keeps the identical layout but flattens
every surface to Linear's real dark stack, with a porcelain solid
button and a bright-neutral peak bar (no accent hue) so the green
delta stays the only colour, where it's a real signal.
- mono-hue-alert: drop the enclosing panel (background/padding/radius) so
only the sample rows remain. Flatten the slop rows' translucent tints to
opaque (over the old #12161d) so each row is self-contained.
- mono-hue-alert clean: match Linear's real toast (sonner, rich-colours
off) — neutral #191a1c surface + #212224 ring, 8px radius, soft float
shadow. The slop side is literally sonner's richColors default.
- atmosphere-gradient: enlarge the backdrop — wider (max-width 34rem) with
a much thicker glow frame (padding 4.8/4.4rem) so the atmosphere itself
reads bigger, card stays ~its width.
- Replace the hard background-swap with a single white thumb that glides
between the two tabs (measured live off the active tab, so it tracks the
per-language label widths; no fly-in on first paint; respects
prefers-reduced-motion).
- Reserve each label's bold width in both states via a hidden always-bold
ghost, so selecting a tab no longer resizes it — the switch stays a
constant width across toggles instead of twitching.
- BeforeAfter: make the card / switch-track / selected-pill corners
concentric (each inner radius = outer − its gap) so the corner gaps
match the straight-edge gaps.
- tokens: shift paper & ink from a warm to a faint-cool cast (same
lightness, hue only); lift the pine --mark from near-black #2c4a3d to a
legibly-green emerald #246a50 (~6:1 on paper).
- index: min-width:0 on skill-grid children so the code block scrolls
internally instead of widening the page on phones.
- Nav: tighter clamp gap so a 320px phone fits everything on one line.
- Sound: a top-right speaker toggle for the Slop→Clean sweep sound.
New SoundToggle, wired into Nav; preference resolved pre-paint in
Base (<html data-sound>, persisted to localStorage) so a muted
visitor never hears a stray sound and the icon never flashes.
- Tokens: reverse-engineer Linear's control radius (8/12px) and its
tight contact shadows off the running app; match the dark demo
surfaces (atmosphere-gradient, mono-hue-alert, oversized-shadow)
to Linear's measured surface stack.
- Nav/lang: keep the wordmark and CJK language labels on one line;
tighten gaps responsively so controls never crowd the brand.
- Type/copy: loosen CJK heading leading; trim hero padding; refine
the zh definition line.
- Fix: make the before/after switch's inner pill radius concentric
with its track (5px inner = 8px outer − 3px padding).
Mirror the website's definition verbatim — AI slop 'piles on every possible
style and detail without settling on a focus' — so the skill opens with the
same framing the site now leads with. Content already matches the current
23-tell catalogue; this is the one framing gap.
- Drop the OpenClaw specimen callouts from the site: the hero specimen line
(index), the footer reference link, and the OpenClaw mentions in the
warm-palette and tasteful-terminal entries (en/zh/ja/ko). The catalogue
stands on the tells themselves, not one named product.
- Rewrite the root README: no Chinese, no OpenClaw, and describe the site as
the multilingual, all-HTML-rebuild field guide it now is (screenshots were
already dropped in favour of demos).
- skill/README: install by asking any agent to copy the whole skill directory
into its own skills folder, instead of hardcoding Claude Code and a file list.
The Clean demo showed a monogram 'N', which implied the fix was 'just use a
letter'. Replace it with a genuine flat, on-brand app icon and rewrite the fix
copy (en/zh/ja/ko) to say what it should: get a real, high-quality icon from a
designer or the best image model, refined until crisp. Sync the skill's fix
text (taxonomy/fixes/scanner) to match.
Seongjae Ryu