Conversation
Replace oversized border radii (28px→10px), remove glassmorphism (backdrop-blur, shine overlays, stacked gradients), tighten shadows (72px→3px), desaturate warm palette, restrict Fraunces to wordmark, remove page-load cascade animations and translateY hover effects, delete hero icon-pill badges. Achieves Linear/Raycast-clean aesthetic while preserving warm personality. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Contributor
|
No actionable comments were generated in the recent review. 🎉 ℹ️ Recent review info⚙️ Run configurationConfiguration used: defaults Review profile: CHILL Plan: Pro Run ID: 📒 Files selected for processing (2)
🚧 Files skipped from review as they are similar to previous changes (1)
📝 WalkthroughWalkthroughGlobal UI "de‑slop" redesign: tokens and palettes made solid, radii/shadows/motion reduced, decorative gradients/glassmorphism and fade-up animations removed, typography tightened, and several viewer/home chrome and empty-state elements simplified or removed. Changes
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~25 minutes Possibly related PRs
Poem
🚥 Pre-merge checks | ✅ 2 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (2 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches📝 Generate docstrings
🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
Deploying agent-render with
|
| Latest commit: |
931ac60
|
| Status: | ✅ Deploy successful! |
| Preview URL: | https://7a7905de.agent-render.pages.dev |
| Branch Preview URL: | https://claude-ui-de-slop.agent-render.pages.dev |
Code Review SummaryStatus: No Issues Found | Recommendation: Merge Incremental Changes (commit
|
- Restore original light mode colors (#f2ecdf, #ba5937, #0e6c77) — the desaturated palette was soulless - New warm dark mode: espresso/walnut tones (#17120e bg, #1e1814 surface) instead of generic blue-black or neutral gray — distinctive - Flatten card-within-card nesting: remove borders from metric-card, artifact-meta-card, viewer-frame, creator-result-card, sample-link, hero-link-card, creator-kind-card, artifact-switcher when nested inside panels. Use background tints + spacing for hierarchy instead. - Code surfaces now use warm dark (#1a1210) matching the warm dark mode - Subtle body gradient restored (two radials, not the old 3-layer stack) Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
![kilo-code-bot[bot]](https://avatars.githubusercontent.com/in/2193792?s=60&v=4){kind=small}
| background: var(--surface-muted); | ||
| transition: | ||
| transform var(--duration-base) ease, | ||
| border-color var(--duration-base) ease, |
There was a problem hiding this comment.
SUGGESTION: Stale border-color transition — border was removed from .sample-link but the transition still references it. Other card refactors in this diff correctly dropped this property.
Suggested change
| border-color var(--duration-base) ease, | |
| transition: background-color var(--duration-base) ease; |
Dark mode: blue-charcoal (#0c1015 bg, #131920 surface) with warm accents — warm orange and teal pop against cool blue base. Layout sledgehammer — deleted ~300 lines from home page: - Killed hero panel (heading, metric cards, ecosystem link cards) - Killed inspector panel (budget bar, codec/artifact metrics, hash preview, "what happens next" card) - Killed stage panel (fake viewer, step cards, 3 side-grid info cards) - Killed "Zero Data Retention" header pill - Replaced sample card grid with simple row-based list - Simplified viewer state: killed verbose descriptions, tightened artifact headings What remains: header → link creator → sample list. The tool IS the page. No marketing copy, no documentation-as-UI, no cards-in-cards. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
Contributor
There was a problem hiding this comment.
Actionable comments posted: 4
🧹 Nitpick comments (1)
docs/superpowers/specs/2026-03-27-ui-de-slop-design.md (1)
118-126: Please close out the visual verification checklist before merge.This PR materially changes layout and renderer chrome, so snapshot regeneration, mobile viewport checks, and the final contrast pass should not remain follow-up work.
Based on learnings: Verify visual changes with Playwright when they affect layout or renderer presentation.
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@docs/superpowers/specs/2026-03-27-ui-de-slop-design.md` around lines 118 - 126, Close out the visual verification checklist by running the listed commands and confirming manual checks: run "npm run dev" to visually inspect home page, all 5 artifact types and dark mode; run "npm run typecheck" to ensure no TS errors from removed imports/props; run "npm run test" to verify unit tests pass; regenerate snapshots with "npx playwright test tests/e2e/visual.spec.ts --update-snapshots" and then run "npx playwright test" to ensure visual regression passes with the new snapshots; perform manual viewport checks (mobile 360px, tablet 768px) and both light/dark modes, and perform the contrast check to ensure --accent on --page-bg meets WCAG AA for large text before merging.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In `@docs/superpowers/specs/2026-03-27-ui-de-slop-design.md`:
- Around line 22-58: Add a blank line before and after each markdown table to
satisfy MD058 (tables under the "### Border Radius", "### Shadows", "### Colors
(Light)", "### Colors (Dark)", and "### Motion" headings). For each table block
(the pipe-separated token rows and header row shown in the diff), ensure there
is an empty line immediately above the table header and an empty line
immediately below the last table row so markdownlint no longer flags the tables.
- Around line 36-69: The spec at
docs/superpowers/specs/2026-03-27-ui-de-slop-design.md is out of sync with the
shipped changes in src/app/globals.css and src/components/viewer-shell.tsx;
update this spec to match the final implementation by (1) replacing the
"Proposed" color tokens and Motion table entries with the actual values present
in src/app/globals.css (restore the warm light palette, radial body gradients
and the shorter/removed animations as implemented), (2) remove or adjust the
Removals list to reflect which items were actually deleted versus retained
(e.g., note that radial gradients remain, the inspector/stage empty state was
removed in viewer-shell.tsx rather than simplified), (3) propagate the same
corrections across the other docs listed (README.md, docs/architecture.md,
docs/payload-format.md, docs/deployment.md, docs/dependency-notes.md,
docs/testing.md, skills/agent-render-linking/SKILL.md), and (4) apply the same
edits for the duplicate section referenced as "Also applies to: 83-103" so both
occurrences match the shipped code.
In `@src/app/globals.css`:
- Around line 153-156: The .shell-pill min-height is set to 2rem which yields
~32px touch targets and makes ThemeToggle too small on mobile; update the
.shell-pill rule to use a larger minimum (e.g., min-height: 2.5rem) so it
matches other header/action controls and provides an adequate touch target for
ThemeToggle, keeping visual alignment and spacing consistent with the other
button styles in the stylesheet.
In `@src/components/viewer-shell.tsx`:
- Around line 532-547: The navigation region rendered by the <nav
className="sample-list print-hide-on-markdown"> block is missing an accessible
name; update that <nav> (the element that maps over sampleCards and renders each
sample via sample.hash and kindIcons) to include either an aria-label (e.g.,
"Sample examples") or aria-labelledby that references the inner <p> by adding an
id to that <p>, so assistive tech exposes the landmark with a proper name;
ensure the id used for aria-labelledby is unique and descriptive.
---
Nitpick comments:
In `@docs/superpowers/specs/2026-03-27-ui-de-slop-design.md`:
- Around line 118-126: Close out the visual verification checklist by running
the listed commands and confirming manual checks: run "npm run dev" to visually
inspect home page, all 5 artifact types and dark mode; run "npm run typecheck"
to ensure no TS errors from removed imports/props; run "npm run test" to verify
unit tests pass; regenerate snapshots with "npx playwright test
tests/e2e/visual.spec.ts --update-snapshots" and then run "npx playwright test"
to ensure visual regression passes with the new snapshots; perform manual
viewport checks (mobile 360px, tablet 768px) and both light/dark modes, and
perform the contrast check to ensure --accent on --page-bg meets WCAG AA for
large text before merging.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: defaults
Review profile: CHILL
Plan: Pro
Run ID: 1e971b99-2558-4ff7-aab0-2d8ea8f70dcd
📒 Files selected for processing (6)
docs/superpowers/specs/2026-03-27-ui-de-slop-design.mdsrc/app/globals.csssrc/app/layout.tsxsrc/components/home/link-creator.tsxsrc/components/theme-toggle.tsxsrc/components/viewer-shell.tsx
Comment on lines
+22
to
+58
| ### Border Radius | ||
| | Token | Current | Proposed | | ||
| |-------|---------|----------| | ||
| | `--radius-xl` | 28px | 10px | | ||
| | `--radius-lg` | 20px | 8px | | ||
| | `--radius-md` | 14px | 6px | | ||
| | `--radius-sm` | 999px (pill) | 4px | | ||
|
|
||
| ### Shadows | ||
| | Token | Current | Proposed | | ||
| |-------|---------|----------| | ||
| | `--shadow-lg` | `0 26px 72px rgba(21,27,39,0.11)` | `0 1px 3px rgba(0,0,0,0.08), 0 0 0 1px rgba(0,0,0,0.04)` | | ||
| | `--shadow-md` | `0 14px 34px rgba(21,27,39,0.075)` | `0 1px 2px rgba(0,0,0,0.06)` | | ||
|
|
||
| ### Colors (Light) | ||
| | Token | Current | Proposed | | ||
| |-------|---------|----------| | ||
| | `--page-bg` | `#f2ecdf` | `#f7f5f2` | | ||
| | `--surface` | `rgba(255,249,241,0.84)` | `#ffffff` | | ||
| | `--surface-strong` | `rgba(255,252,247,0.96)` | `#fafaf9` | | ||
| | `--accent` | `#ba5937` | `#9c6b52` | | ||
| | `--accent-secondary` | `#0e6c77` | `#5c8a8e` | | ||
|
|
||
| ### Colors (Dark) | ||
| | Token | Current | Proposed | | ||
| |-------|---------|----------| | ||
| | `--page-bg` | `#0a0f15` | `#111113` | | ||
| | `--surface` | `rgba(13,19,27,0.92)` | `#1a1a1c` | | ||
| | `--accent` | `#de7f58` | `#c09478` | | ||
| | `--accent-secondary` | `#72c4cf` | `#8ab5b9` | | ||
|
|
||
| ### Motion | ||
| | Property | Current | Proposed | | ||
| |----------|---------|----------| | ||
| | `--duration-base` | 280ms | 150ms | | ||
| | Page-load animation | 720ms fade-up + staggered delays | Removed entirely | | ||
| | Hover effects | translateY(-2px) + shadow + color | Background color change only | |
Contributor
There was a problem hiding this comment.
Fix the markdownlint table spacing.
markdownlint is already flagging MD058 here, so this doc will stay noisy until each table is surrounded by blank lines.
🧰 Tools
🪛 markdownlint-cli2 (0.22.0)
[warning] 23-23: Tables should be surrounded by blank lines
(MD058, blanks-around-tables)
[warning] 31-31: Tables should be surrounded by blank lines
(MD058, blanks-around-tables)
[warning] 37-37: Tables should be surrounded by blank lines
(MD058, blanks-around-tables)
[warning] 46-46: Tables should be surrounded by blank lines
(MD058, blanks-around-tables)
[warning] 54-54: Tables should be surrounded by blank lines
(MD058, blanks-around-tables)
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@docs/superpowers/specs/2026-03-27-ui-de-slop-design.md` around lines 22 - 58,
Add a blank line before and after each markdown table to satisfy MD058 (tables
under the "### Border Radius", "### Shadows", "### Colors (Light)", "### Colors
(Dark)", and "### Motion" headings). For each table block (the pipe-separated
token rows and header row shown in the diff), ensure there is an empty line
immediately above the table header and an empty line immediately below the last
table row so markdownlint no longer flags the tables.
Comment on lines
+36
to
+69
| ### Colors (Light) | ||
| | Token | Current | Proposed | | ||
| |-------|---------|----------| | ||
| | `--page-bg` | `#f2ecdf` | `#f7f5f2` | | ||
| | `--surface` | `rgba(255,249,241,0.84)` | `#ffffff` | | ||
| | `--surface-strong` | `rgba(255,252,247,0.96)` | `#fafaf9` | | ||
| | `--accent` | `#ba5937` | `#9c6b52` | | ||
| | `--accent-secondary` | `#0e6c77` | `#5c8a8e` | | ||
|
|
||
| ### Colors (Dark) | ||
| | Token | Current | Proposed | | ||
| |-------|---------|----------| | ||
| | `--page-bg` | `#0a0f15` | `#111113` | | ||
| | `--surface` | `rgba(13,19,27,0.92)` | `#1a1a1c` | | ||
| | `--accent` | `#de7f58` | `#c09478` | | ||
| | `--accent-secondary` | `#72c4cf` | `#8ab5b9` | | ||
|
|
||
| ### Motion | ||
| | Property | Current | Proposed | | ||
| |----------|---------|----------| | ||
| | `--duration-base` | 280ms | 150ms | | ||
| | Page-load animation | 720ms fade-up + staggered delays | Removed entirely | | ||
| | Hover effects | translateY(-2px) + shadow + color | Background color change only | | ||
|
|
||
| ## Removals | ||
|
|
||
| 1. **Glassmorphism**: All `backdrop-filter: blur(14px)` → solid backgrounds | ||
| 2. **Shine overlays**: All `.panel::after` gradient gloss → deleted | ||
| 3. **Stacked body gradients**: 3-layer radial gradients → solid `var(--page-bg)` | ||
| 4. **Grid overlay**: Decorative `body::before` grid → deleted | ||
| 5. **Hero icon pills**: ShieldCheck/Sparkles/FolderKanban badge row → deleted | ||
| 6. **Gradient card backgrounds**: On hero-link-card, sample-link, creator-result → solid `var(--surface-elevated)` | ||
| 7. **Gradient toolbar/code-frame headers** → solid `var(--surface-code-raised)` | ||
| 8. **`fade-up` animation class** and `getAnimationStyle` helper → deleted |
Contributor
There was a problem hiding this comment.
Update the spec to match the final implementation.
These sections still describe the earlier neutralized palette/body cleanup and a partially preserved home layout, but the code in this PR has already moved on: src/app/globals.css restores the warm light palette and keeps radial body gradients, and src/components/viewer-shell.tsx removes the inspector/stage-heavy empty state instead of merely simplifying it. Please sync the spec with what actually ships so it stays usable for follow-up work.
Based on learnings: Update docs when changing user-visible behavior or protocol semantics across README.md, docs/architecture.md, docs/payload-format.md, docs/deployment.md, docs/dependency-notes.md, docs/testing.md, and skills/agent-render-linking/SKILL.md.
Also applies to: 83-103
🧰 Tools
🪛 markdownlint-cli2 (0.22.0)
[warning] 37-37: Tables should be surrounded by blank lines
(MD058, blanks-around-tables)
[warning] 46-46: Tables should be surrounded by blank lines
(MD058, blanks-around-tables)
[warning] 54-54: Tables should be surrounded by blank lines
(MD058, blanks-around-tables)
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@docs/superpowers/specs/2026-03-27-ui-de-slop-design.md` around lines 36 - 69,
The spec at docs/superpowers/specs/2026-03-27-ui-de-slop-design.md is out of
sync with the shipped changes in src/app/globals.css and
src/components/viewer-shell.tsx; update this spec to match the final
implementation by (1) replacing the "Proposed" color tokens and Motion table
entries with the actual values present in src/app/globals.css (restore the warm
light palette, radial body gradients and the shorter/removed animations as
implemented), (2) remove or adjust the Removals list to reflect which items were
actually deleted versus retained (e.g., note that radial gradients remain, the
inspector/stage empty state was removed in viewer-shell.tsx rather than
simplified), (3) propagate the same corrections across the other docs listed
(README.md, docs/architecture.md, docs/payload-format.md, docs/deployment.md,
docs/dependency-notes.md, docs/testing.md,
skills/agent-render-linking/SKILL.md), and (4) apply the same edits for the
duplicate section referenced as "Also applies to: 83-103" so both occurrences
match the shipped code.
Comment on lines
153
to
156
| .shell-pill { | ||
| min-height: 2.25rem; | ||
| border-color: var(--border-strong); | ||
| min-height: 2rem; | ||
| color: var(--text-primary); | ||
| background: color-mix(in srgb, var(--surface-strong) 88%, transparent); | ||
| } |
Contributor
There was a problem hiding this comment.
Keep .shell-pill large enough for touch input.
Dropping the shared pill minimum height to 2rem makes ThemeToggle—now the only header control—roughly a 32px-tall target on mobile. That is noticeably smaller than the other action buttons in this stylesheet and easy to miss on touch screens.
💡 Possible fix
.shell-pill {
min-height: 2rem;
color: var(--text-primary);
}
+
+@media (pointer: coarse) {
+ .shell-pill {
+ min-height: 2.75rem;
+ }
+}📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
Suggested change
| .shell-pill { | |
| min-height: 2.25rem; | |
| border-color: var(--border-strong); | |
| min-height: 2rem; | |
| color: var(--text-primary); | |
| background: color-mix(in srgb, var(--surface-strong) 88%, transparent); | |
| } | |
| .shell-pill { | |
| min-height: 2rem; | |
| color: var(--text-primary); | |
| } | |
| `@media` (pointer: coarse) { | |
| .shell-pill { | |
| min-height: 2.75rem; | |
| } | |
| } |
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@src/app/globals.css` around lines 153 - 156, The .shell-pill min-height is
set to 2rem which yields ~32px touch targets and makes ThemeToggle too small on
mobile; update the .shell-pill rule to use a larger minimum (e.g., min-height:
2.5rem) so it matches other header/action controls and provides an adequate
touch target for ThemeToggle, keeping visual alignment and spacing consistent
with the other button styles in the stylesheet.
Comment on lines
+532
to
+547
| <nav className="sample-list print-hide-on-markdown"> | ||
| <p className="mb-3 text-sm font-medium text-[color:var(--text-muted)]">Try a sample</p> | ||
| {sampleCards.map((sample) => { | ||
| const Icon = kindIcons[sample.kind]; | ||
| const isActive = hash === sample.hash; | ||
|
|
||
| return ( | ||
| <a key={sample.hash} href={sample.hash} className={cn("sample-row", isActive && "is-active")}> | ||
| <Icon className="h-4 w-4 shrink-0 text-[color:var(--text-soft)]" /> | ||
| <span className="min-w-0 flex-1 truncate text-sm font-medium">{sample.title}</span> | ||
| <span className="font-mono text-xs text-[color:var(--text-soft)]">{sample.kind}</span> | ||
| <span className="font-mono text-xs text-[color:var(--text-soft)]">{numberFormatter.format(sample.fragmentLength)}</span> | ||
| </a> | ||
| ); | ||
| })} | ||
| </nav> |
Contributor
There was a problem hiding this comment.
Give the new sample nav an accessible name.
The inner <p> does not label the landmark, so assistive tech will expose this as an unnamed navigation region. Add aria-label or aria-labelledby when introducing the compact sample list.
💡 Possible fix
- <nav className="sample-list print-hide-on-markdown">
- <p className="mb-3 text-sm font-medium text-[color:var(--text-muted)]">Try a sample</p>
+ <nav className="sample-list print-hide-on-markdown" aria-labelledby="sample-list-heading">
+ <p id="sample-list-heading" className="mb-3 text-sm font-medium text-[color:var(--text-muted)]">
+ Try a sample
+ </p>📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
Suggested change
| <nav className="sample-list print-hide-on-markdown"> | |
| <p className="mb-3 text-sm font-medium text-[color:var(--text-muted)]">Try a sample</p> | |
| {sampleCards.map((sample) => { | |
| const Icon = kindIcons[sample.kind]; | |
| const isActive = hash === sample.hash; | |
| return ( | |
| <a key={sample.hash} href={sample.hash} className={cn("sample-row", isActive && "is-active")}> | |
| <Icon className="h-4 w-4 shrink-0 text-[color:var(--text-soft)]" /> | |
| <span className="min-w-0 flex-1 truncate text-sm font-medium">{sample.title}</span> | |
| <span className="font-mono text-xs text-[color:var(--text-soft)]">{sample.kind}</span> | |
| <span className="font-mono text-xs text-[color:var(--text-soft)]">{numberFormatter.format(sample.fragmentLength)}</span> | |
| </a> | |
| ); | |
| })} | |
| </nav> | |
| <nav className="sample-list print-hide-on-markdown" aria-labelledby="sample-list-heading"> | |
| <p id="sample-list-heading" className="mb-3 text-sm font-medium text-[color:var(--text-muted)]"> | |
| Try a sample | |
| </p> | |
| {sampleCards.map((sample) => { | |
| const Icon = kindIcons[sample.kind]; | |
| const isActive = hash === sample.hash; | |
| return ( | |
| <a key={sample.hash} href={sample.hash} className={cn("sample-row", isActive && "is-active")}> | |
| <Icon className="h-4 w-4 shrink-0 text-[color:var(--text-soft)]" /> | |
| <span className="min-w-0 flex-1 truncate text-sm font-medium">{sample.title}</span> | |
| <span className="font-mono text-xs text-[color:var(--text-soft)]">{sample.kind}</span> | |
| <span className="font-mono text-xs text-[color:var(--text-soft)]">{numberFormatter.format(sample.fragmentLength)}</span> | |
| </a> | |
| ); | |
| })} | |
| </nav> |
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@src/components/viewer-shell.tsx` around lines 532 - 547, The navigation
region rendered by the <nav className="sample-list print-hide-on-markdown">
block is missing an accessible name; update that <nav> (the element that maps
over sampleCards and renders each sample via sample.hash and kindIcons) to
include either an aria-label (e.g., "Sample examples") or aria-labelledby that
references the inner <p> by adding an id to that <p>, so assistive tech exposes
the landmark with a proper name; ensure the id used for aria-labelledby is
unique and descriptive.
Code surfaces: - Light mode now uses warm cream code background (#ede7da) with dark syntax colors — no more dark blocks clashing with warm page - All syntax colors (string, number, keyword, boolean, etc.) are now CSS variables that switch between light and dark mode - CodeMirror gutter, active line, and selection colors use CSS vars - JSON tree view colors use the same variables Home page content restored with new layout: - Intro section: heading + description + protocol shape (no panel) - Link creator (unchanged) - Sample fragments: simple row-based list - Fragment state: definition list with key-value pairs, no cards - Links: simple text links to GitHub and ClawdHub - All content present, no cards-within-cards Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Copy pass:
- "Share artifacts in the URL, keep the server out of the payload"
→ "Artifacts in the URL. No server required."
- "agent-render opens markdown, code, diff..." (43 words)
→ "Paste markdown, code, diffs, CSV, or JSON. Get a static link
that renders it — nothing uploaded, nothing stored." (20 words)
- "Make a shareable artifact link from pasted content"
→ "Paste content, get a link."
- "Pick a format, paste the artifact, and generate a real..." (22 words)
→ "Choose a format and paste your artifact. The link is generated
entirely in the browser." (14 words)
- "Ready to copy, preview, or open" → "Your link"
- "Generate a link to get a shareable URL that opens this artifact
directly in the viewer" → "Fill out the form and hit Generate to
get a shareable URL."
Links promoted:
- GitHub + ClawdHub skill links moved from buried bottom section
to intro area, inline with protocol shape, with arrow icons
- Removed separate "Links" section
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Fragment state section was always visible — now it only appears when the URL contains a broken fragment (parsed.code !== "empty" and !parsed.ok). When it does appear, it renders as an error banner with a danger-colored left border right below the intro, before the link creator — so it's the first thing you see when something is wrong. Removed the always-visible "Fragment state" section with its Status/Budget/Codec/Artifacts metadata table. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
::aftershine overlays, and stacked gradients → solid backgrounds with 1px borders0 1px 3px— depth from structure, not dramaDesign spec:
docs/superpowers/specs/2026-03-27-ui-de-slop-design.mdTest plan
npm run typecheck— passesnpm run test— 62/62 unit tests passnpm run lint— passesnpm run dev— compiles and serves cleanlynpx playwright test tests/e2e/visual.spec.ts --update-snapshots— regenerate snapshots after visual approval--accent(#9c6b52) on--page-bg(#f7f5f2) meets WCAG AA for large text🤖 Generated with Claude Code
Summary by CodeRabbit
Style
Documentation
Copy