Frontend Design Skills for Claude Code, Codex & AI Agents

These skills push an agent's frontend output past the default generic look that people call AI slop. They include taste and style guides, image-to-UI conversion, component state modeling and stress tests that break a component on purpose.

31 skills

Explore Frontend Design skills

3 skills

Prevent and remove generic AI-generated design defaults, incoherent visual choices, and established UI defects while creating, revising, or reviewing websites, apps, screenshots, mockups, and design code. Use as a passive quality gate during UI work or for an explicit anti-slop cleanup; preserve the chosen art direction instead of forcing a neutral redesign.

  • ui review
  • design quality
7.5KStars861Forks
Repository last pushed

Audit websites, apps, screenshots, mockups, and design code for harmful AI-design clichés, generic generated defaults, and established UI defects. Use when the user wants evidence-backed design feedback, an anti-slop review, or a removal-first cleanup plan without a speculative redesign.

  • ui review
  • design quality
7.5KStars861Forks
Repository last pushed

Deterministic design critique for HTML/CSS screens. Runs 73 slop guards extracted from the set of rules professional designers use in production-grade designs to catch the tells that make UI read as AI-generated (gradient-clipped headlines, the default indigo accent, puffy shadows, emoji icons, fake dot charts and decorated gauges, badges floated over the hero, eyebrow kickers above the H1, fake magazine mastheads, colored edge-stripe rails, two-tone headlines, over-designed list rows, layout-collapse bugs, em-dash copy, placeholder imagery), auto-fixes what can be safely rewritten, and reports the rest with concrete edits. Use whenever generated or hand-written HTML/CSS is about to be shown, exported, shipped, or committed, or when asked to critique a design, check it for slop, or give a second opinion on a generated screen.

  • ui review
  • design quality
94Stars5Forks
Repository last pushed

Related topics

Related guides

How to choose Frontend Design skills

Pick a taste-focused skill when everything looks the same, image-to-UI when you have a mockup, and the stress-test or state-machine skills when components fail on edge cases.

  • Restyle a generated UI so it stops looking generic
  • Turn a screenshot or mockup into working components
  • Stress-test a component with long text and empty states