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).
2. •

   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").
3. •

   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.
4. •

   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.
5. •

   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.