Skip to content

Fix demo page anti-slop violations (emoji badge, feature-card wall) - #13

Merged
codeswithroh merged 1 commit into
mainfrom
fix/demo-anti-slop
Jul 20, 2026
Merged

Fix demo page anti-slop violations (emoji badge, feature-card wall)#13
codeswithroh merged 1 commit into
mainfrom
fix/demo-anti-slop

Conversation

@codeswithroh

Copy link
Copy Markdown
Owner

Closes #6 (partial: demo page).

What this fixes

Issue #6 flagged that the pages representing the product fail the skill's own references/anti-slop-checklist.md. This PR fixes the two clearest, unambiguous violations on the demo page (site/demo.html), which is the page reviewers specifically dissected.

1. Emoji as an icon (checklist: "No emoji as icons")

The hero badge was a literal leaf emoji:

🌿 5-minute daily practice

Replaced with a real inline leaf SVG drawn in the page's own flat-illustration style (same palette as the hero art), so the badge uses a real asset instead of an emoji standing in for an icon.

2. The uniform feature-card wall (checklist: "Shows, don't tell / vary rhythm")

The section was three identical centered cards, each icon + heading + one sentence. Reworked into an asymmetric layout:

  • A lead feature ("Actually ten minutes," the core promise) as a wide two-column card: a large timer visual on one side, a short tag, heading, and copy on the other, left-aligned.
  • A supporting pair below (real human voices, no streak guilt) as two smaller cards.

This gives the section real hierarchy and rhythm instead of three same-shaped boxes, which is what the checklist's "vary rhythm" note asks for.

Also

  • Removed em-dashes from the demo copy, per the project's copy style.

Before / after

Before After
Hero badge 🌿 emoji inline leaf SVG
Feature section 3 identical centered cards 1 lead feature + supporting pair

Scope

Deliberately focused on the demo page. Out of scope, tracked under #7: the mono body copy and pill eyebrow labels on the marketing page (site/index.html), because those implicate the Technical/builder preset itself, not just this page, and need the checklist expansion in #7 first. So this PR does not fully close #6; it clears the concrete demo-page violations and leaves the marketing-page tells for the #7 follow-up.

Verification

  • Rendered locally at desktop and mobile widths: layout holds, no content left hidden by the reveal animations, safety nets intact.
  • No emoji and no em-dashes remain in site/demo.html.

Deploy

The live site deploys manually from site/ after merge, so this PR does not touch production. Deploy follows merge to main.

The Calmly demo failed the skill's own anti-slop checklist. Two concrete
fixes:

- Replace the hero badge emoji (a literal leaf emoji) with a real inline
  leaf SVG in the page's own flat-illustration style. The checklist says
  "no emoji as icons"; the demo was doing exactly that.
- Rework the three identical centered feature cards into an asymmetric
  layout: one lead feature (the core "ten minutes" promise) with real
  weight and a left-aligned visual, plus a supporting pair below. This
  breaks the uniform feature-card wall the checklist warns about and adds
  intentional hierarchy instead of three same-shaped boxes.

Also removes em-dashes from the demo copy.

Out of scope here and tracked under #7: the mono body copy and pill
eyebrow tells on the marketing page, which touch the Technical/builder
preset itself rather than just this page.

Refs #6
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Demo and marketing pages fail the skill's own anti-slop checklist

1 participant