frontend-anti-slop

Audit frontend UI for anti-slop patterns and accessibility gaps.

Updated Mar 18, 2026

Search Tags:#ui #accessibility #frontend #audit #ux #design-system #redesign

Ready to run

npx skills add https://github.com/Canepro/codex-skills --skill frontend-anti-slop

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: frontend-anti-slop
Source: https://github.com/Canepro/codex-skills/tree/main/skills/frontend-anti-slop
Command: npx skills add https://github.com/Canepro/codex-skills --skill frontend-anti-slop

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

Frontend teams often default to templated UI patterns that dilute product intent and accessibility. This skill guides auditing, redesign, and implementation to produce intentional, usable interfaces aligned with the product design system.

Core Features & Use Cases

Audit: identify anti-slop UI patterns, misalignments with design tokens, and accessibility gaps.
Redesign: propose concrete improvements to layout, typography, spacing, and visual hierarchy.
Implement: apply changes in codebase with guidance for engineering teams.
Verify: validate across viewports and accessibility checks using the verification protocol.
Use Case: when tasked with reviewing a dashboard or workflow screen to tighten UI and remove generic patterns.

Quick Start

Inspect a frontend screen by asking me to run an anti-slop audit and I will return a prioritized, implementable plan.

Frequently Asked Questions about frontend-anti-slop

High-intent search queries and answers about installing and using this skill.

FAQPage Schema

How do I audit my frontend UI for generic patterns and accessibility gaps?▼

An anti-slop audit identifies generic UI patterns, misalignments with design tokens, and accessibility gaps in frontend interfaces. It analyzes dashboards, forms, and components to produce a prioritized, implementable plan for UI improvements.

What is frontend anti-slop and when do I need it for my product interface?▼

Frontend anti-slop is a structured workflow to audit and improve frontend UI. You need it when your product interfaces default to templated patterns that dilute product intent, ensuring usable interfaces aligned with your design system.

How do I redesign dashboard components to tighten visual hierarchy and spacing?▼

To redesign dashboard components, apply the anti-slop redesign mode to propose concrete improvements to layout, typography, spacing, and visual hierarchy, leveraging existing design tokens and component systems for accessible results.

Can I verify UI accessibility across viewports after implementing design system changes?▼

Yes, you can verify UI accessibility across viewports using the verification protocol. It validates the implemented frontend changes to ensure testable, accessible results aligned with the product design system.

Does this UI audit approach work with existing component systems and design tokens?▼

Yes, the UI audit approach works directly with existing component systems and design tokens. It leverages them during the redesign and implementation phases to produce intentional, usable interfaces without breaking established standards.

What are the limitations of using structured UI audits for frontend implementation tasks?▼

The limitation of structured UI audits is they require following a structured workflow including pre-design discovery and verification protocols. They focus on dashboards, forms, and pages rather than entirely new product interface creation.