accessibility-patterns
WCAG 2.2 AA compliance, ARIA patterns, keyboard navigation, screen reader optimization
Post-implementation cleanup that removes AI-generated bloat while preserving functionality. Runs pass-by-pass with test verification after each pass. Activate after kraken/spark complete a feature, or when a codebase needs hygiene work.
$ npx -y skills add vibeeval/vibecosystem --skill ai-slop-cleaner --agent claude-codeHow it fires
How this skill gets triggered: by you, by Claude, or both.
/ai-slop-cleanerContext preview
The summary Claude sees to decide when to auto-load this skill.
Post-implementation cleanup that removes AI-generated bloat while preserving functionality. Runs pass-by-pass with test verification after each pass. Activate after kraken/spark complete a feature, or when a codebase needs hygiene work.
name: ai-slop-cleaner description: Post-implementation cleanup that removes AI-generated bloat while preserving functionality. Runs pass-by-pass with test verification after each pass. Activate after kraken/spark complete a feature, or when a codebase needs hygiene work.
AI code generation produces working code. It also produces unnecessary code alongside it. This skill removes the unnecessary parts while keeping everything that matters.
AI slop is code that:
Common slop categories and their signals:
| Category | Signal | |----------|--------| | Dead imports | Imported but never referenced in the file | | Unused variables | Declared, never read | | Commented-out code | Blocks of `// old code` or `/* removed */` | | Debug remnants | `console.log`, `print()`, `debugger`, `fmt.Println` | | Obvious comments | `// increment counter` above `count++` | | Redundant JSDoc | `@param name - the name` above `name: string` | | Premature abstractions | A factory that creates exactly one thing | | One-use helpers | Private function called exactly once, trivially inlinable | | Overly generic types | `<T extends object>` when `T` is always `User` | | Over-parameterized | `fn(a, b, c, d, e)` where 4 params never vary | | Unreachable branches | `if (false)` or `if (isLoggedIn && !isLoggedIn)` | | Speculative features | Code paths for requirements that don't exist | | Copy-paste duplication | Two blocks identical except one variable name | | Placeholder remnants | `TODO: implement`, lorem ipsum, example data in prod |
**Tests are sacred. Never clean test files.**
Tests exist to protect behavior. Any cleanup that breaks a test reveals that the "slop" was actually load-bearing. That is good information. The test wins.
BEFORE ANYTHING: Run full test suite → all tests must pass (baseline) FOR EACH PASS: 1. Identify targets for this pass category 2. Apply cleanup 3. Run tests 4. If tests pass: keep cleanup, continue 5. If tests fail: git checkout -- . (revert), skip this pass category 6. Log what was reverted and why AFTER ALL PASSES: Run full test suite → confirm all tests still pass Report: lines removed, files touched, passes skipped, reason for each skip
Never batch multiple pass categories together. If combined changes break a test, you cannot know which change caused it.
**Risk: Very Low**
What to remove:
Before:
import { useState, useEffect, useCallback, useMemo } from 'react'
import { formatDate } from '@/lib/utils'
import { ApiClient } from '@/lib/api'
export function UserCard({ user }) {
const [count, setCount] = useState(0)
const formatted = formatDate(user.createdAt)
return <div>{user.name}</div>
}After:
import { useState } from 'react'
import { formatDate } from '@/lib/utils'
export function UserCard({ user }) {
const [count, setCount] = useState(0)
const formatted = formatDate(user.createdAt)
return <div>{user.name}</div>
}Note: `count`, `setCount`, and `formatted` are still present because they may be used elsewhere in a larger component. Pass 1 only removes imports.
**Risk: Very Low**
What to remove:
Before:
async function processOrder(orderId: string) {
console.log('processing order', orderId)
const order = await db.orders.findById(orderId)
// const cached = await cache.get(orderId)
// if (cached) return cached
console.log('order fetched:', order)
const result = await payments.charge(order)
// TODO: add retry logic here
// console.log('charge result', result)
return result
}After:
async function processOrder(orderId: string) {
const order = await db.orders.findById(orderId)
const result = await payments.charge(order)
// TODO: add retry logic here
return result
}Rule: `// TODO:` comments are preserved. They are documentation of known gaps, not slop.
**Risk: Low**
What to remove:
Before:
/**
* Gets a user by ID.
* @param id - the user ID
* @param db - the database instance
* @returns the user object
*/
async function getUserById(id: string, db: Database): Promise<User> {
// Query the database for the user
const user = await db.users.findById(id)
// Return the user
return user
} // end getUserByIdAfter:
async function getUserById(id: string, db: Database): Promise<User> {
return db.users.findById(id)
}Keep comments that explain WHY (business rules, performance choices, known gotchas). Remove comments that explain WHAT (the code already says what).
**Risk: Medium — Run tests immediately after**
What
Your AI software team. Built on Claude Code. vibecosystem turns Claude Code into a full AI software team — 138 specialized agents that plan, build, review, test, and learn from every mistake. No configuration needed — just install and code.
Repo: vibeeval/vibecosystem
WCAG 2.2 AA compliance, ARIA patterns, keyboard navigation, screen reader optimization
axe-core integration, WCAG 2.2 AA checklist, keyboard navigation testing, screen reader testing, and ARIA pattern validation.
Steam-style achievement system with XP, levels, streaks, and skill trees. Gamifies the development workflow. 25 achievements across 5 categories.
Framework for measuring and tracking agent response quality over time. Detects regressions before they reach production. Use when evaluating agent changes,…
Agent ve skill dosyalarinin yapisal dogrulamasi. Frontmatter kontrol, naming convention, zorunlu bolum kontrolu, tutarlilik denetimi. Yeni agent/skill…