[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"skill:01M72T2GKBRE4K8KY8FVGJSRCN":3,"skill-same:01M72T2GKBRE4K8KY8FVGJSRCN":82},{"skillNo":4,"name":5,"nameZh":6,"description":7,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":9,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":15,"categories":16,"keywords":17,"publishedAt":18,"linkOnly":19,"markdownContent":20,"markdownBody":21,"frontMatter":22,"refName":23,"commitSha":24,"skillDirectory":25,"forksCount":26,"repositoryHtmlUrl":27,"repositoryHomepageUrl":6,"ownerHtmlUrl":28,"ownerBlogUrl":29,"ownerDescription":6,"updatedAt":30,"install":31,"resources":44},"01M72T2GKBRE4K8KY8FVGJSRCN","ywc-design-renew",null,"(ywc) Use when an existing frontend surface looks generic or \"AI-made\" and needs distinctive visual-design renewal, or an AI-slop audit (gradient text, cyan-on-dark, uniform card grids) before shipping. Triggers: \"design renew\", \"de-slop this UI\", \"make it look less AI-generated\", \"AI slop check\", \"디자인 리뉴얼\", \"디자인이 너무 평범해\", \"AI 슬롭\", \"デザインリニューアル\", \"AIっぽいデザインを直して\". Do not use for usability\u002Faccessibility\u002FUX review (use ywc-ui-ux-review), new UI from scratch (use ywc-frontend-coder or frontend-design\u002Fimpeccable), backend or API review (use ywc-impl-review), product\u002Fbusiness strategy review (use ywc-product-review), or persisting a preference without code changes (use ywc-review-learnings).","yongwoon\u002Fywc-agent-toolkit","yongwoon","https:\u002F\u002Favatars.githubusercontent.com\u002Fu\u002F9317029?v=4","01M72SZSF6VKANKG5QTMV4V95S","01M72SZSG8HHC3W2CV5P7EJ5AH",8,"MIT","https:\u002F\u002Fgithub.com\u002Fyongwoon\u002Fywc-agent-toolkit\u002Fblob\u002Fmain\u002Fclaude-code\u002Fskills\u002Fywc-design-renew\u002FSKILL.md",[],[],"2026-11-10 22:39:42",false,"---\nname: ywc-design-renew\ndescription: >-\n  (ywc) Use when an existing frontend surface looks generic or \"AI-made\" and\n  needs distinctive visual-design renewal, or an AI-slop audit (gradient\n  text, cyan-on-dark, uniform card grids) before shipping. Triggers: \"design\n  renew\", \"de-slop this UI\", \"make it look less AI-generated\", \"AI slop\n  check\", \"디자인 리뉴얼\", \"디자인이 너무 평범해\", \"AI 슬롭\", \"デザインリニューアル\",\n  \"AIっぽいデザインを直して\". Do not use for usability\u002Faccessibility\u002FUX review (use\n  ywc-ui-ux-review), new UI from scratch (use ywc-frontend-coder or frontend-design\u002Fimpeccable),\n  backend or API review (use ywc-impl-review), product\u002Fbusiness strategy\n  review (use ywc-product-review), or persisting a preference without code\n  changes (use ywc-review-learnings).\n---\n\n# Design Renew — De-Slop & Check\n\n**Announce at start:** \"I'm using the ywc-design-renew skill to renew the design and check it against AI-slop tells.\"\n\nThis skill takes an existing frontend surface that reads as generic or\n\"AI-generated\" and renews it into something distinctive, then verifies the result\nagainst an anti-slop audit. The user provides a target (component, page, or\nroute) and design context (audience, use-case, brand tone); the skill produces\neither renewed code with before\u002Fafter evidence (`--mode renew`, default) or a\nprioritized slop-audit report with a pass\u002Ffail gate (`--mode check`). It uses the\n`impeccable` skill as its design engine when installed, and a self-contained\nportable ruleset otherwise — so it works in any project or runtime.\n\n## Rationalization Defense\n\nWhen tempted to bypass a rule, check this table first:\n\n| Excuse | Reality |\n|---|---|\n| \"I can infer the design context from the codebase — skip the context step\" | Code tells you what was built, not who it is for or how it should feel. Renewing without audience \u002F use-case \u002F brand tone produces *generic* output — the exact AI-slop you were asked to remove. Always confirm the three context inputs first. |\n| \"impeccable isn't installed, so I can't renew the design\" | impeccable is an enhancement, not a hard dependency. The self-contained `references\u002Fanti-slop-ruleset.md` is the portable baseline — run it. Refusing to act because an optional skill is absent defeats the skill's portability purpose. |\n| \"Inter is banned, so I'll just switch to Fraunces \u002F my next-favorite font\" | Swapping to your second-favorite recreates the monoculture one font over. The whole reflex set is banned. Pick against 3 concrete brand words from a catalog, evaluating the font as a physical object. |\n| \"A colored border-left stripe \u002F gradient heading adds visual flair\" | Those are the top AI tells (Critical bans B1\u002FB2). They never look intentional. Rewrite the element structure entirely — do not just recolor the stripe. |\n| \"Beauty is subjective — I can't audit design quality objectively\" | Token inconsistency and the banned-pattern set are objective and grep-able. The AI Slop Test is the gate. Subjectivity is not a license to skip the audit. |\n| \"Renew means redesign everything from scratch\" | Renewal changes aesthetic *execution*, not behavior or information architecture. Preserve working flows, routes, and IA; do not break functionality to chase a look. |\n| \"Default to dark mode with glowing accents — it looks polished\" | That is the lazy reflex and itself a slop tell (B4). Theme is derived from audience and viewing context, not picked for cool factor. |\n| \"The code diff is enough — skip the before\u002Fafter screenshot\" | Design is visual. A diff hides layout shift, contrast regressions, and broken hover states. Capture both states when a live URL exists; this is the only proof the renewal helped. |\n\n**Violating the letter of these rules is violating the spirit.** A \"renewal\" that swaps one slop pattern for another, or skips the context gate, ships the same AI-generated feel under a new coat of paint.\n\n## Arguments\n\n| Parameter | Format | Example | Description |\n|-----------|--------|---------|-------------|\n| `--mode` | `--mode renew\\|check` | `--mode check` | `renew` (default): apply de-slop improvements. `check`: audit only, no edits, with a pass\u002Ffail gate. |\n| `--target` | `--target \u003Cpath\\|route>` | `--target src\u002Fcomponents\u002Fhero` | Surface to renew or check. Required. |\n| `--url` | `--url \u003Clive-url>` | `--url http:\u002F\u002Flocalhost:3000` | Live URL for before\u002Fafter screenshots (Phase 1 + 4). Optional; degrades to code-only. |\n| `--fail-on` | `--fail-on critical\\|high\\|none` | `--fail-on high` | check-mode gate threshold. Default `critical` (fail if any Critical slop finding). |\n| `--format` | `--format markdown\\|html` | `--format html` | Report format for check mode. Default `markdown`. See [..\u002Freferences\u002Fhtml-output.md](..\u002Freferences\u002Fhtml-output.md). |\n\n## Workflow\n\nRun the phases in order. `--mode check` stops after Phase 2.\n\n### Phase 0 — Capability & context gate\n\n1. **Detect impeccable.** Set `IMPECCABLE_AVAILABLE` per\n   [references\u002Fimpeccable-delegation.md](references\u002Fimpeccable-delegation.md).\n   This decides the engine for every later phase.\n2. **Load prior learnings.** If `docs\u002Freview-learnings.md` exists, run\n   ywc-review-learnings `--mode read` scoped to the target's file glob and apply\n   any design-polarity learnings (e.g. a project that prefers a specific font\n   pairing, or has marked a pattern as a `FALSE-POSITIVE`).\n3. **Confirm design context (REQUIRED).** You cannot infer this from code.\n   Obtain audience, use-cases, and brand tone via the handshake in\n   impeccable-delegation.md (read `.impeccable.md` \u002F `PRODUCT.md` \u002F `DESIGN.md`\n   → else `\u002Fimpeccable teach` → else ask the three questions inline). Do not\n   proceed to renew without it.\n\n### Phase 1 — Baseline capture\n\n- Read the target's component\u002Fstyle\u002Ftoken files; note the current fonts, color\n  values, spacing scale, and layout structure.\n- If `--url` is set, capture **before** screenshots at 320 \u002F 768 \u002F 1024 \u002F 1440\n  via Chrome DevTools MCP (`new_page` → `resize_page` → `take_screenshot`).\n- This baseline is the comparison anchor for Phase 4 — do not skip it.\n\n### Phase 2 — Check (anti-slop audit)\n\nDetect every slop tell against the target:\n\n- **With impeccable**: delegate to `\u002Fimpeccable audit \u003Cscope>` (or\n  `npx impeccable detect \u003Cpath>` for the CLI-only path).\n- **Self-contained**: grep the Part B \u002F Part C detection signals in\n  [references\u002Fanti-slop-ruleset.md](references\u002Fanti-slop-ruleset.md), then apply\n  the AI Slop Test and Part E required-qualities count as a judgment pass.\n\nClassify each finding with the scoring map (Critical \u002F High \u002F Medium \u002F Low).\n\n**If `--mode check`**: emit the audit report (see Output Format), apply the\n`--fail-on` gate, and **stop**. Do not edit code in check mode.\n\n### Phase 3 — Renew (apply improvements)\n\n1. **Commit to a bold direction.** From the Phase 0 context, choose one clear\n   aesthetic point of view (editorial, brutalist, refined-minimal, retro-\n   futuristic, etc.). Intentionality over intensity — both maximal and minimal\n   work if executed precisely. Do not converge on the same direction across\n   projects.\n2. **Apply the engine.**\n   - **With impeccable**: `\u002Fimpeccable craft \u003Cfeature>` for a new surface, or\n     `\u002Fimpeccable polish \u003Cscope>` to refine the existing one.\n   - **Self-contained**: apply Part D DO rules — modular type scale + deliberate\n     font pairing, OKLCH palette tinted to the brand hue, 4pt spacing with varied\n     rhythm, asymmetric\u002Fgrid-breaking composition, motion on transform\u002Fopacity —\n     while removing every Part B \u002F Part C tell found in Phase 2.\n3. **Preserve behavior.** Keep routes, IA, data flow, and accessibility\n   semantics intact. Renewal is aesthetic execution, not a functional rewrite.\n\n### Phase 4 — Verify\n\n- **Re-audit.** Re-run Phase 2 detection; confirm Critical\u002FHigh findings are\n  resolved and no new tell was introduced.\n- **Before\u002Fafter.** If `--url` is set, capture **after** screenshots at the same\n  breakpoints and present them paired with the Phase 1 baseline.\n- **Hand off the other axis.** Renewal covers aesthetics only. Recommend\n  ywc-ui-ux-review for the usability \u002F IA \u002F WCAG axis — do not claim those here.\n\n### Phase 5 — Capture learnings (optional)\n\nIf the user accepted or rejected a specific design choice during renewal (a font\npairing, a palette, a \"we never use X here\"), offer to persist it via\nywc-review-learnings `--mode update --source review` so future renewals on this\nrepo start sharper. Never write learnings without the user's confirmation.\n\n## Banned Output Patterns\n\nNever emit these in renewed code — they are the slop tells the skill exists to\nremove. Full detection signals in\n[references\u002Fanti-slop-ruleset.md](references\u002Fanti-slop-ruleset.md).\n\n| Banned pattern | Replace with |\n|---|---|\n| `border-left\u002Fright` > 1px accent stripe (incl. CSS vars) | Full border, background tint, leading number\u002Ficon, or no indicator |\n| `background-clip: text` + any gradient (gradient text) | Single solid color; emphasize with weight\u002Fsize |\n| cyan-on-dark \u002F purple→blue gradient \u002F neon-on-dark palette | OKLCH palette derived from the brand hue |\n| Pure `#000` \u002F `#fff` on large surfaces | Tinted near-black \u002F near-white toward brand hue |\n| `Inter` \u002F `Roboto` \u002F system stack \u002F the reflex font set | A font chosen against 3 brand words from a catalog |\n| Animating `width`\u002F`height`\u002F`top`\u002F`left`\u002F`margin`\u002F`padding` | Animate `transform` \u002F `opacity` only |\n| Bounce \u002F elastic \u002F `back` easing | Exponential ease-out |\n| Nested cards \u002F uniform icon-heading-text card grid | Flattened hierarchy; varied, grid-breaking composition |\n\n## Output Format\n\n**check mode** — Markdown audit report (default path\n`claudedocs\u002Fdesign-slop-audit-{YYYY-MM-DD}.md`):\n\n```text\n# Design Slop Audit — \u003Ctarget>\n## Verdict: FAIL (2 Critical) — gate: --fail-on critical\n## Summary: 2 Critical · 3 High · 1 Medium · 0 Low\n\n### Critical\n- [B2 Gradient text] src\u002Fcomponents\u002FHero.tsx:42\n  Observed: `background-clip: text` on the H1 with a purple→blue gradient.\n  Why: top-3 AI tell — decorative, not meaningful.\n  Fix: solid `oklch(...)` fill; emphasize with weight.\n\n### High\n- [C1 Overused font] src\u002Fstyles\u002Ftokens.css:7 — `--font-display: Inter`.\n  Fix: pair a display face chosen against the brand words \"\u003Cw1> \u003Cw2> \u003Cw3>\".\n...\n### Required-qualities check (Part E): 2 \u002F 4 minimum — BELOW BAR\n```\n\n**renew mode** — renewal report:\n\n```text\n# Design Renewal — \u003Ctarget>\n## Direction: \u003Cchosen aesthetic POV> — rationale: \u003C1 line from context>\n## Engine: impeccable polish | self-contained ruleset\n## Slop findings resolved: 2 Critical, 3 High (before → after table)\n## Files changed: \u003Clist>\n## Verification: re-audit 0 Critical · before\u002Fafter screenshots @ 320\u002F768\u002F1024\u002F1440\n## Next: ywc-ui-ux-review for the usability \u002F IA \u002F WCAG axis\n```\n\n## Validation\n\nBefore declaring the task complete, verify:\n\n- [ ] Design context (audience \u002F use-cases \u002F brand tone) was confirmed, not inferred\n- [ ] `IMPECCABLE_AVAILABLE` was detected and the correct engine path was used\n- [ ] (renew) Every Phase 2 Critical\u002FHigh finding is resolved in the re-audit\n- [ ] (renew) No new Banned Output Pattern was introduced\n- [ ] (renew) Behavior \u002F routes \u002F IA \u002F a11y semantics are unchanged\n- [ ] (check) Every finding has an ID, file:line, observed, why, and fix\n- [ ] (check) The `--fail-on` gate verdict is stated explicitly\n- [ ] Before\u002Fafter screenshots captured when `--url` was provided\n\n## Common Mistakes\n\n- **Skipping the context gate** because \"the codebase makes it obvious\" — it does\n  not. Generic context is the root cause of generic output. Confirm the three\n  inputs every time.\n- **Treating impeccable as required** — the skill must degrade gracefully to the\n  self-contained ruleset. Never refuse to act because impeccable is absent.\n- **Font monoculture by reflex** — banning Inter and reaching for Fraunces is the\n  same failure one step over. Use the brand-words procedure.\n- **Claiming the usability axis** — this skill audits aesthetics\u002Fslop, not WCAG or\n  IA. Hand that to ywc-ui-ux-review rather than over-claiming coverage.\n- **Renewing without a before baseline** — without Phase 1 capture there is no\n  evidence the renewal improved anything.\n\n## Integration\n\n- **Upstream**: N\u002FA — standalone; optionally consumes `.impeccable.md` \u002F\n  `PRODUCT.md` \u002F `DESIGN.md` and `docs\u002Freview-learnings.md` when present.\n- **Downstream**: ywc-ui-ux-review (usability \u002F IA \u002F WCAG verification on the\n  renewed surface); ywc-review-learnings (persist accepted design preferences).\n- **Pairs with**: the `impeccable` skill (design engine when installed) and the\n  `frontend-design` skill (alternative generative engine).\n","# Design Renew — De-Slop & Check\n\n**Announce at start:** \"I'm using the ywc-design-renew skill to renew the design and check it against AI-slop tells.\"\n\nThis skill takes an existing frontend surface that reads as generic or\n\"AI-generated\" and renews it into something distinctive, then verifies the result\nagainst an anti-slop audit. The user provides a target (component, page, or\nroute) and design context (audience, use-case, brand tone); the skill produces\neither renewed code with before\u002Fafter evidence (`--mode renew`, default) or a\nprioritized slop-audit report with a pass\u002Ffail gate (`--mode check`). It uses the\n`impeccable` skill as its design engine when installed, and a self-contained\nportable ruleset otherwise — so it works in any project or runtime.\n\n## Rationalization Defense\n\nWhen tempted to bypass a rule, check this table first:\n\n| Excuse | Reality |\n|---|---|\n| \"I can infer the design context from the codebase — skip the context step\" | Code tells you what was built, not who it is for or how it should feel. Renewing without audience \u002F use-case \u002F brand tone produces *generic* output — the exact AI-slop you were asked to remove. Always confirm the three context inputs first. |\n| \"impeccable isn't installed, so I can't renew the design\" | impeccable is an enhancement, not a hard dependency. The self-contained `references\u002Fanti-slop-ruleset.md` is the portable baseline — run it. Refusing to act because an optional skill is absent defeats the skill's portability purpose. |\n| \"Inter is banned, so I'll just switch to Fraunces \u002F my next-favorite font\" | Swapping to your second-favorite recreates the monoculture one font over. The whole reflex set is banned. Pick against 3 concrete brand words from a catalog, evaluating the font as a physical object. |\n| \"A colored border-left stripe \u002F gradient heading adds visual flair\" | Those are the top AI tells (Critical bans B1\u002FB2). They never look intentional. Rewrite the element structure entirely — do not just recolor the stripe. |\n| \"Beauty is subjective — I can't audit design quality objectively\" | Token inconsistency and the banned-pattern set are objective and grep-able. The AI Slop Test is the gate. Subjectivity is not a license to skip the audit. |\n| \"Renew means redesign everything from scratch\" | Renewal changes aesthetic *execution*, not behavior or information architecture. Preserve working flows, routes, and IA; do not break functionality to chase a look. |\n| \"Default to dark mode with glowing accents — it looks polished\" | That is the lazy reflex and itself a slop tell (B4). Theme is derived from audience and viewing context, not picked for cool factor. |\n| \"The code diff is enough — skip the before\u002Fafter screenshot\" | Design is visual. A diff hides layout shift, contrast regressions, and broken hover states. Capture both states when a live URL exists; this is the only proof the renewal helped. |\n\n**Violating the letter of these rules is violating the spirit.** A \"renewal\" that swaps one slop pattern for another, or skips the context gate, ships the same AI-generated feel under a new coat of paint.\n\n## Arguments\n\n| Parameter | Format | Example | Description |\n|-----------|--------|---------|-------------|\n| `--mode` | `--mode renew\\|check` | `--mode check` | `renew` (default): apply de-slop improvements. `check`: audit only, no edits, with a pass\u002Ffail gate. |\n| `--target` | `--target \u003Cpath\\|route>` | `--target src\u002Fcomponents\u002Fhero` | Surface to renew or check. Required. |\n| `--url` | `--url \u003Clive-url>` | `--url http:\u002F\u002Flocalhost:3000` | Live URL for before\u002Fafter screenshots (Phase 1 + 4). Optional; degrades to code-only. |\n| `--fail-on` | `--fail-on critical\\|high\\|none` | `--fail-on high` | check-mode gate threshold. Default `critical` (fail if any Critical slop finding). |\n| `--format` | `--format markdown\\|html` | `--format html` | Report format for check mode. Default `markdown`. See [..\u002Freferences\u002Fhtml-output.md](..\u002Freferences\u002Fhtml-output.md). |\n\n## Workflow\n\nRun the phases in order. `--mode check` stops after Phase 2.\n\n### Phase 0 — Capability & context gate\n\n1. **Detect impeccable.** Set `IMPECCABLE_AVAILABLE` per\n   [references\u002Fimpeccable-delegation.md](references\u002Fimpeccable-delegation.md).\n   This decides the engine for every later phase.\n2. **Load prior learnings.** If `docs\u002Freview-learnings.md` exists, run\n   ywc-review-learnings `--mode read` scoped to the target's file glob and apply\n   any design-polarity learnings (e.g. a project that prefers a specific font\n   pairing, or has marked a pattern as a `FALSE-POSITIVE`).\n3. **Confirm design context (REQUIRED).** You cannot infer this from code.\n   Obtain audience, use-cases, and brand tone via the handshake in\n   impeccable-delegation.md (read `.impeccable.md` \u002F `PRODUCT.md` \u002F `DESIGN.md`\n   → else `\u002Fimpeccable teach` → else ask the three questions inline). Do not\n   proceed to renew without it.\n\n### Phase 1 — Baseline capture\n\n- Read the target's component\u002Fstyle\u002Ftoken files; note the current fonts, color\n  values, spacing scale, and layout structure.\n- If `--url` is set, capture **before** screenshots at 320 \u002F 768 \u002F 1024 \u002F 1440\n  via Chrome DevTools MCP (`new_page` → `resize_page` → `take_screenshot`).\n- This baseline is the comparison anchor for Phase 4 — do not skip it.\n\n### Phase 2 — Check (anti-slop audit)\n\nDetect every slop tell against the target:\n\n- **With impeccable**: delegate to `\u002Fimpeccable audit \u003Cscope>` (or\n  `npx impeccable detect \u003Cpath>` for the CLI-only path).\n- **Self-contained**: grep the Part B \u002F Part C detection signals in\n  [references\u002Fanti-slop-ruleset.md](references\u002Fanti-slop-ruleset.md), then apply\n  the AI Slop Test and Part E required-qualities count as a judgment pass.\n\nClassify each finding with the scoring map (Critical \u002F High \u002F Medium \u002F Low).\n\n**If `--mode check`**: emit the audit report (see Output Format), apply the\n`--fail-on` gate, and **stop**. Do not edit code in check mode.\n\n### Phase 3 — Renew (apply improvements)\n\n1. **Commit to a bold direction.** From the Phase 0 context, choose one clear\n   aesthetic point of view (editorial, brutalist, refined-minimal, retro-\n   futuristic, etc.). Intentionality over intensity — both maximal and minimal\n   work if executed precisely. Do not converge on the same direction across\n   projects.\n2. **Apply the engine.**\n   - **With impeccable**: `\u002Fimpeccable craft \u003Cfeature>` for a new surface, or\n     `\u002Fimpeccable polish \u003Cscope>` to refine the existing one.\n   - **Self-contained**: apply Part D DO rules — modular type scale + deliberate\n     font pairing, OKLCH palette tinted to the brand hue, 4pt spacing with varied\n     rhythm, asymmetric\u002Fgrid-breaking composition, motion on transform\u002Fopacity —\n     while removing every Part B \u002F Part C tell found in Phase 2.\n3. **Preserve behavior.** Keep routes, IA, data flow, and accessibility\n   semantics intact. Renewal is aesthetic execution, not a functional rewrite.\n\n### Phase 4 — Verify\n\n- **Re-audit.** Re-run Phase 2 detection; confirm Critical\u002FHigh findings are\n  resolved and no new tell was introduced.\n- **Before\u002Fafter.** If `--url` is set, capture **after** screenshots at the same\n  breakpoints and present them paired with the Phase 1 baseline.\n- **Hand off the other axis.** Renewal covers aesthetics only. Recommend\n  ywc-ui-ux-review for the usability \u002F IA \u002F WCAG axis — do not claim those here.\n\n### Phase 5 — Capture learnings (optional)\n\nIf the user accepted or rejected a specific design choice during renewal (a font\npairing, a palette, a \"we never use X here\"), offer to persist it via\nywc-review-learnings `--mode update --source review` so future renewals on this\nrepo start sharper. Never write learnings without the user's confirmation.\n\n## Banned Output Patterns\n\nNever emit these in renewed code — they are the slop tells the skill exists to\nremove. Full detection signals in\n[references\u002Fanti-slop-ruleset.md](references\u002Fanti-slop-ruleset.md).\n\n| Banned pattern | Replace with |\n|---|---|\n| `border-left\u002Fright` > 1px accent stripe (incl. CSS vars) | Full border, background tint, leading number\u002Ficon, or no indicator |\n| `background-clip: text` + any gradient (gradient text) | Single solid color; emphasize with weight\u002Fsize |\n| cyan-on-dark \u002F purple→blue gradient \u002F neon-on-dark palette | OKLCH palette derived from the brand hue |\n| Pure `#000` \u002F `#fff` on large surfaces | Tinted near-black \u002F near-white toward brand hue |\n| `Inter` \u002F `Roboto` \u002F system stack \u002F the reflex font set | A font chosen against 3 brand words from a catalog |\n| Animating `width`\u002F`height`\u002F`top`\u002F`left`\u002F`margin`\u002F`padding` | Animate `transform` \u002F `opacity` only |\n| Bounce \u002F elastic \u002F `back` easing | Exponential ease-out |\n| Nested cards \u002F uniform icon-heading-text card grid | Flattened hierarchy; varied, grid-breaking composition |\n\n## Output Format\n\n**check mode** — Markdown audit report (default path\n`claudedocs\u002Fdesign-slop-audit-{YYYY-MM-DD}.md`):\n\n```text\n# Design Slop Audit — \u003Ctarget>\n## Verdict: FAIL (2 Critical) — gate: --fail-on critical\n## Summary: 2 Critical · 3 High · 1 Medium · 0 Low\n\n### Critical\n- [B2 Gradient text] src\u002Fcomponents\u002FHero.tsx:42\n  Observed: `background-clip: text` on the H1 with a purple→blue gradient.\n  Why: top-3 AI tell — decorative, not meaningful.\n  Fix: solid `oklch(...)` fill; emphasize with weight.\n\n### High\n- [C1 Overused font] src\u002Fstyles\u002Ftokens.css:7 — `--font-display: Inter`.\n  Fix: pair a display face chosen against the brand words \"\u003Cw1> \u003Cw2> \u003Cw3>\".\n...\n### Required-qualities check (Part E): 2 \u002F 4 minimum — BELOW BAR\n```\n\n**renew mode** — renewal report:\n\n```text\n# Design Renewal — \u003Ctarget>\n## Direction: \u003Cchosen aesthetic POV> — rationale: \u003C1 line from context>\n## Engine: impeccable polish | self-contained ruleset\n## Slop findings resolved: 2 Critical, 3 High (before → after table)\n## Files changed: \u003Clist>\n## Verification: re-audit 0 Critical · before\u002Fafter screenshots @ 320\u002F768\u002F1024\u002F1440\n## Next: ywc-ui-ux-review for the usability \u002F IA \u002F WCAG axis\n```\n\n## Validation\n\nBefore declaring the task complete, verify:\n\n- [ ] Design context (audience \u002F use-cases \u002F brand tone) was confirmed, not inferred\n- [ ] `IMPECCABLE_AVAILABLE` was detected and the correct engine path was used\n- [ ] (renew) Every Phase 2 Critical\u002FHigh finding is resolved in the re-audit\n- [ ] (renew) No new Banned Output Pattern was introduced\n- [ ] (renew) Behavior \u002F routes \u002F IA \u002F a11y semantics are unchanged\n- [ ] (check) Every finding has an ID, file:line, observed, why, and fix\n- [ ] (check) The `--fail-on` gate verdict is stated explicitly\n- [ ] Before\u002Fafter screenshots captured when `--url` was provided\n\n## Common Mistakes\n\n- **Skipping the context gate** because \"the codebase makes it obvious\" — it does\n  not. Generic context is the root cause of generic output. Confirm the three\n  inputs every time.\n- **Treating impeccable as required** — the skill must degrade gracefully to the\n  self-contained ruleset. Never refuse to act because impeccable is absent.\n- **Font monoculture by reflex** — banning Inter and reaching for Fraunces is the\n  same failure one step over. Use the brand-words procedure.\n- **Claiming the usability axis** — this skill audits aesthetics\u002Fslop, not WCAG or\n  IA. Hand that to ywc-ui-ux-review rather than over-claiming coverage.\n- **Renewing without a before baseline** — without Phase 1 capture there is no\n  evidence the renewal improved anything.\n\n## Integration\n\n- **Upstream**: N\u002FA — standalone; optionally consumes `.impeccable.md` \u002F\n  `PRODUCT.md` \u002F `DESIGN.md` and `docs\u002Freview-learnings.md` when present.\n- **Downstream**: ywc-ui-ux-review (usability \u002F IA \u002F WCAG verification on the\n  renewed surface); ywc-review-learnings (persist accepted design preferences).\n- **Pairs with**: the `impeccable` skill (design engine when installed) and the\n  `frontend-design` skill (alternative generative engine).\n",{"name":5,"description":7},"main","7e8ac872e53df8c89d75663e031626281a2a2f5c","claude-code\u002Fskills\u002Fywc-design-renew",1,"https:\u002F\u002Fgithub.com\u002Fyongwoon\u002Fywc-agent-toolkit","https:\u002F\u002Fgithub.com\u002Fyongwoon","https:\u002F\u002Fwww.webhani.com","2026-11-08 17:14:59",{"source":8,"skillName":5,"commands":32,"prompt":42,"zipAvailable":43},[33,36,39],{"tool":34,"command":35},"npx","npx skills add yongwoon\u002Fywc-agent-toolkit --skill ywc-design-renew",{"tool":37,"command":38},"bunx","bunx skills add yongwoon\u002Fywc-agent-toolkit --skill ywc-design-renew",{"tool":40,"command":41},"pnpm","pnpm dlx skills add yongwoon\u002Fywc-agent-toolkit --skill ywc-design-renew","安装技能，技能地址：https:\u002F\u002Fgithub.com\u002Fyongwoon\u002Fywc-agent-toolkit\u002Fblob\u002Fmain\u002Fclaude-code\u002Fskills\u002Fywc-design-renew\u002FSKILL.md",true,[45,51,55,59,63,67,70,74,78],{"path":46,"resourceType":47,"resourceTypeDesc":48,"sizeBytes":49,"sourceHtmlUrl":50},"evals\u002Fevals.json","REFERENCE","参考文档",2501,"https:\u002F\u002Fgithub.com\u002Fyongwoon\u002Fywc-agent-toolkit\u002Fblob\u002Fmain\u002Fclaude-code\u002Fskills\u002Fywc-design-renew\u002Fevals\u002Fevals.json",{"path":52,"resourceType":47,"resourceTypeDesc":48,"sizeBytes":53,"sourceHtmlUrl":54},"README.en.md",2990,"https:\u002F\u002Fgithub.com\u002Fyongwoon\u002Fywc-agent-toolkit\u002Fblob\u002Fmain\u002Fclaude-code\u002Fskills\u002Fywc-design-renew\u002FREADME.en.md",{"path":56,"resourceType":47,"resourceTypeDesc":48,"sizeBytes":57,"sourceHtmlUrl":58},"README.es.md",3547,"https:\u002F\u002Fgithub.com\u002Fyongwoon\u002Fywc-agent-toolkit\u002Fblob\u002Fmain\u002Fclaude-code\u002Fskills\u002Fywc-design-renew\u002FREADME.es.md",{"path":60,"resourceType":47,"resourceTypeDesc":48,"sizeBytes":61,"sourceHtmlUrl":62},"README.ja.md",3281,"https:\u002F\u002Fgithub.com\u002Fyongwoon\u002Fywc-agent-toolkit\u002Fblob\u002Fmain\u002Fclaude-code\u002Fskills\u002Fywc-design-renew\u002FREADME.ja.md",{"path":64,"resourceType":47,"resourceTypeDesc":48,"sizeBytes":65,"sourceHtmlUrl":66},"README.ko.md",3089,"https:\u002F\u002Fgithub.com\u002Fyongwoon\u002Fywc-agent-toolkit\u002Fblob\u002Fmain\u002Fclaude-code\u002Fskills\u002Fywc-design-renew\u002FREADME.ko.md",{"path":68,"resourceType":47,"resourceTypeDesc":48,"sizeBytes":65,"sourceHtmlUrl":69},"README.md","https:\u002F\u002Fgithub.com\u002Fyongwoon\u002Fywc-agent-toolkit\u002Fblob\u002Fmain\u002Fclaude-code\u002Fskills\u002Fywc-design-renew\u002FREADME.md",{"path":71,"resourceType":47,"resourceTypeDesc":48,"sizeBytes":72,"sourceHtmlUrl":73},"README.zh.md",3197,"https:\u002F\u002Fgithub.com\u002Fyongwoon\u002Fywc-agent-toolkit\u002Fblob\u002Fmain\u002Fclaude-code\u002Fskills\u002Fywc-design-renew\u002FREADME.zh.md",{"path":75,"resourceType":47,"resourceTypeDesc":48,"sizeBytes":76,"sourceHtmlUrl":77},"references\u002Fanti-slop-ruleset.md",7143,"https:\u002F\u002Fgithub.com\u002Fyongwoon\u002Fywc-agent-toolkit\u002Fblob\u002Fmain\u002Fclaude-code\u002Fskills\u002Fywc-design-renew\u002Freferences\u002Fanti-slop-ruleset.md",{"path":79,"resourceType":47,"resourceTypeDesc":48,"sizeBytes":80,"sourceHtmlUrl":81},"references\u002Fimpeccable-delegation.md",3641,"https:\u002F\u002Fgithub.com\u002Fyongwoon\u002Fywc-agent-toolkit\u002Fblob\u002Fmain\u002Fclaude-code\u002Fskills\u002Fywc-design-renew\u002Freferences\u002Fimpeccable-delegation.md",[83,89,95,102,109,116],{"skillNo":84,"name":85,"nameZh":6,"description":6,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":9,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":86,"categories":87,"keywords":88,"publishedAt":18},"01M72TQ84GTCPCV2VJ778V17TW","missing-frontmatter","https:\u002F\u002Fgithub.com\u002Fyongwoon\u002Fywc-agent-toolkit\u002Fblob\u002Fmain\u002Fscripts\u002Ffixtures\u002Fcodex-description-limit\u002Fmissing-frontmatter\u002FSKILL.md",[],[],{"skillNo":90,"name":91,"nameZh":6,"description":6,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":9,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":92,"categories":93,"keywords":94,"publishedAt":18},"01M72TQ6M4BFWE7P9EPW0GZDCM","malformed-frontmatter","https:\u002F\u002Fgithub.com\u002Fyongwoon\u002Fywc-agent-toolkit\u002Fblob\u002Fmain\u002Fscripts\u002Ffixtures\u002Fcodex-description-limit\u002Fmalformed-frontmatter\u002FSKILL.md",[],[],{"skillNo":96,"name":97,"nameZh":6,"description":98,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":9,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":99,"categories":100,"keywords":101,"publishedAt":18},"01M72TQ3ESGKXZ4QRWGTX92BKJ","fixture-501-fail","(ywc) Use when aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa Do not use for x.","https:\u002F\u002Fgithub.com\u002Fyongwoon\u002Fywc-agent-toolkit\u002Fblob\u002Fmain\u002Fscripts\u002Ffixtures\u002Fcodex-description-limit\u002F501-fail\u002FSKILL.md",[],[],{"skillNo":103,"name":104,"nameZh":6,"description":105,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":9,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":106,"categories":107,"keywords":108,"publishedAt":18},"01M72TQ0HJ8H3R37J9WPWGKJZR","fixture-500-pass","(ywc) Use when aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa Do not use for x.","https:\u002F\u002Fgithub.com\u002Fyongwoon\u002Fywc-agent-toolkit\u002Fblob\u002Fmain\u002Fscripts\u002Ffixtures\u002Fcodex-description-limit\u002F500-pass\u002FSKILL.md",[],[],{"skillNo":110,"name":111,"nameZh":6,"description":112,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":9,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":113,"categories":114,"keywords":115,"publishedAt":18},"01M72TPWNCC7NEYD0D9N12KSQS","ywc-worktrees","(ywc) Use when creating, auditing, pruning, or resolving git worktrees for isolated task workspaces, whether delegated from an executor or used standalone. Triggers: \"worktree 생성\", \"worktree audit\", \"worktree 정리\", \"worktree prune\", \"ywc-worktrees\", \"create worktree\". Do not use for branch creation\u002Fdeletion alone, PR creation (use ywc-create-pr), CI or merge delivery (use ywc-finish-branch), task orchestration (use ywc-sequential-executor or ywc-parallel-executor), or non-git isolation.","https:\u002F\u002Fgithub.com\u002Fyongwoon\u002Fywc-agent-toolkit\u002Fblob\u002Fmain\u002Fplugins\u002Fywc-agent-toolkit\u002Fskills\u002Fywc-worktrees\u002FSKILL.md",[],[],{"skillNo":117,"name":118,"nameZh":6,"description":119,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":9,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":120,"categories":121,"keywords":122,"publishedAt":18},"01M72TPRNR3E6QWB91GM98ABBV","ywc-wayfinder","(ywc) Use when a large or uncertain change needs multi-session discovery with a deterministic local map and exactly one active ticket before planning or implementation. Triggers: \"wayfinder\", \"길찾기\", \"discovery map\", \"multi-session discovery\", \"탐색 ticket\", \"経路整理\", \"探索マップ\", \"ywc-wayfinder\". Do not use for ordinary planning (use ywc-plan), idea clarification (use ywc-brainstorm), direct implementation, or tracker\u002Fdatabase writes outside the local Markdown map.","https:\u002F\u002Fgithub.com\u002Fyongwoon\u002Fywc-agent-toolkit\u002Fblob\u002Fmain\u002Fplugins\u002Fywc-agent-toolkit\u002Fskills\u002Fywc-wayfinder\u002FSKILL.md",[],[]]