skills.rest
abdul7867
abdul7867COMMUNITY
Explore all skills by this author →
WebsiteGitHub

anti-slop

Enforces design rules that prevent generic AI-generated frontend UI patterns.

Updated Jun 21, 2026
Search Tags:#typography#react#design system#tailwind#frontend design#ui patterns#anti-generic
One-click install
npx skills add https://github.com/abdul7867/affinity --skill anti-slop-abdul7867
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: anti-slop
Source: https://github.com/abdul7867/affinity/tree/main/frontend/.agent/skills/anti-slop
Command: npx skills add https://github.com/abdul7867/affinity --skill anti-slop-abdul7867

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? AI-generated frontend code tends to converge on recognizable, generic patterns: Inter fonts, purple gradients, centered hero sections, identical section padding, and placeholder content like "Acme Inc". This Skill provides a rule system that detects and bans these AI tells while guiding the model toward distinctive, well-crafted interfaces. ## Core Features & Use Cases - Design Dials: Tune DESIGN_VARIANCE, MOTION_INTENSITY, and VISUAL_DENSITY on 1-10 scales to control layout diversity, animation strength, and information density per project. - Banned-Pattern Enforcement: Explicitly forbids AI tells such as Inter as default font, rgba(0,0,0,0.05) surfaces, linear-gradient accents, lorem ipsum, stock testimonial grids, and decorative em-dashes. - Concrete Directives: Prescribes typography (Geist, serif editorial headings), color calibration (OKLCH, hue anchoring), layout diversification rules (bento cell counts, zigzag caps), and full interactive state definitions. - Use Case: When building a React/Next.js landing page with Tailwind v4, activate this Skill so every section uses a unique layout architecture, motion follows the configured intensity, and no generic AI patterns slip into the output. ## Quick Start Redesign this landing page using the anti-slop rules with DESIGN_VARIANCE 8 and MOTION_INTENSITY 6, removing all generic AI patterns.

Frequently Asked Questions about anti-slop

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

FAQPage Schema
How do I avoid generic AI-generated UI design?▼

Apply a rule system that bans common AI tells: Inter as default font, purple gradient accents, centered hero layouts, and identical section padding. This Skill enforces those bans and provides layout diversification rules like unique section architectures and bento cell constraints.

What fonts should I use instead of Inter for web design?▼

Use Geist as the default sans-serif instead of Inter, and SF Pro Display for Apple-ecosystem projects. For editorial hero headings, choose a serif face such as Lyon, Newsreader, Literata, or Source Serif to differentiate the typographic hierarchy.

Does this design system work with Tailwind and Next.js?▼

Yes, the default architecture is React/Next.js with Tailwind v4 and Motion (motion/react) for animation. It also specifies icon library priorities, mobile-first responsive rules, and container query usage within that stack.

What are AI tells in frontend code?▼

AI tells are overused patterns that reveal machine-generated design, such as rgba(0,0,0,0.05) surface colors, linear-gradient decorative accents, lorem ipsum content, "Acme Inc" placeholders, scroll-down cues, and fake product preview frames. The Skill lists and bans each category.

How do I control animation intensity in a design system?▼

Set the MOTION_INTENSITY dial from 1 to 10: 1 means static pages, 6 enables scroll reveals and staggered entrances, and 10 adds GSAP sticky-stack, liquid glass, and magnetic micro-physics. All animation must use transform and opacity with prefers-reduced-motion support.

Related Skills

Explore More Design & Creative Skills→
I2olanDI2olanD

application-design-concept

Develop design concepts, visual identities, and design systems for digital products.

Community
Advanced
phuonghxphuonghx
1

performance-profiling

Conduct Lighthouse audits and optimize Core Web Vitals in web applications.

Community
Intermediate
trevorc-aitrevorc-ai

visual_accessibility

Audit UI color contrast, color-reliant cues, and focus state visibility.

Community
Intermediate
liqiongyuliqiongyu
51

design-systems

Generate a Design System Operating Pack with token models and roadmaps.

Community
Advanced