Unslop

Overview

Eliminate low-signal artifacts from AI-generated code while preserving behavior and intent.

Workflow

1. Triage the files

- Scan each file for redundancy, dead code, and style inconsistencies. - Identify the UI framework (Vue/Nuxt) and styling system (Tailwind, Nuxt UI, plain CSS).

1. Remove redundant commentary

- Delete comments that restate the obvious (function names, prop names, component names). - Remove template comments in .vue/HTML/JSX unless they explain non-obvious UX or business logic. - Drop TODOs that add no actionable information (e.g., "TODO: add logic").

1. Delete unused code paths

- Remove unused imports, variables, props, computed values, watchers, and helpers. - Delete commented-out code blocks unless the user asks to keep them. - Prune branches that are never reached or are placeholders.

1. Normalize styling conventions

- Consolidate duplicated Tailwind utilities; prefer size- over w- h-* when equal. - Align class order and grouping with nearby components. - In Nuxt UI, prefer semantic tokens (e.g., color-success) over raw color classes.

1. Validate output

- Confirm behavior and UI output remain unchanged except for cleanup. - Keep any "why" commentary that preserves intent or constraints.

Decision Checklist

• **Is the comment telling me why?** Keep.
• Is the comment just paraphrasing code? Remove.
• Is this code referenced anywhere? If not, delete it.
• Would removing this change behavior or test expectations? If yes, keep or re-evaluate.

Comment Removal Heuristics

• Remove: "Handle click", "Render header", "Fetch user" when the code is explicit.
• Keep: "Workaround for Safari focus bug", "Required by backend contract", "Do not reorder due to animation timing".
• Shorten: Replace a paragraph with a single line explaining the non-obvious constraint.

Tailwind & UI Normalization

• Replace paired width/height with size utilities:

- w-10 h-10 → size-10 - w-6 h-6 → size-6

• Keep consistent axis usage:

- Use px- + py- or p-* consistently within the same component.

• Favor semantic UI tokens in Nuxt UI:

- color-green-500 dark:color-green-400 → color-success - Align with variant/color props when available.

File-Type Guidance

Vue/Nuxt (.vue)

• Remove HTML comments inside templates unless they explain layout constraints.
• Drop unused defineProps, defineEmits, or computed properties.
• Remove unused ref/computed imports from Vue.

TypeScript/JavaScript

• Remove unused imports and variables; collapse trivial one-use helpers.
• Prefer direct inlining when helpers only wrap a single line.

CSS

• Remove unused classes if not referenced in templates/components.
• Consolidate duplicated declarations.

Output Expectations

• Provide a clean diff that focuses solely on removal/normalization.
• Avoid unrelated refactors or renames.
• If behavior might change, explain the risk and avoid the change.

Examples

• "Remove all useless comments in these components and trim unused imports."
• "Clean up this Vue file: remove template comments and align Tailwind classes."
• "Normalize Nuxt UI button colors to semantic tokens."
• "Delete dead code and placeholders, but keep any workaround comments."

Guardrails

• Keep comments that encode constraints, historical context, or known bugs.
• Preserve references to tickets/issues if they explain a workaround.
• Do not change runtime behavior, data flow, or UI output beyond cleanup.