메뉴
Audit UI code for AI slop patterns — generic color palettes, missing interaction states, cookie-cutter gradients, and template-clone layouts. Returns SLOP/RISK/CLEAN verdicts with specific remediation.
기본적으로 소스를 먼저 확인하는 Prompt가 선택됩니다. 직접 명령으로 전환하거나 로컬 사본을 다운로드할 수도 있습니다.
설치 여부를 결정하기 전에 SKILL.md와 SkillsMP에 표시된 보조 파일을 읽어 보세요.
Codex 또는 Claude로 설치 이 Prompt를 복사해 Codex, Claude 또는 다른 어시스턴트에 붙여 넣으면 Skill 페이지를 검토하고 설치를 진행할 수 있습니다.
직접 명령은 검토 Prompt를 거치지 않습니다. 실행하기 전에 소스를 확인하세요.
npx skills add https://github.com/andrem-sec/psc-comet --skill ui-slop-guard명령은 한 줄로 유지됩니다. 복사하기 전에 가로로 스크롤해 전체 내용을 확인하세요.
로컬 사본을 원하시나요? SkillsMP에서 현재 제공할 수 있는 파일을 다운로드하세요.
SOC 직업 분류 기준
SKILL.md 표시 중
| name | ui-slop-guard |
| description | Audit UI code for AI slop patterns — generic color palettes, missing interaction states, cookie-cutter gradients, and template-clone layouts. Returns SLOP/RISK/CLEAN verdicts with specific remediation. |
| version | 0.1.0 |
| level | 2 |
| triggers | ["ui slop guard","slop check","check for ai slop","audit this UI","/ui-slop-guard"] |
| context_files | ["context/project.md"] |
| steps | [{"name":"Color Audit","description":"Scan for AI slop hex values and unanchored gradients. Flag any color not from the brand token set."},{"name":"Interaction Audit","description":"Verify every interactive element has hover, focus, active, and disabled states."},{"name":"Typography Audit","description":"Check for Inter/Roboto defaults, missing type scale, and unvaried font weights."},{"name":"Layout Audit","description":"Identify hero-cta-features-pricing-footer clone patterns and surface-level \"premium\" signals."},{"name":"Animation Audit","description":"Detect gratuitous or performance-unsafe animations. Flag missing prefers-reduced-motion."},{"name":"Verdict","description":"Issue SLOP/RISK/CLEAN per category with specific line-level remediation."}] |
Audit code for the patterns that make AI-generated UI look AI-generated. The output is a category-by-category verdict, not a general impression.
Claude produces statistically average output. It has trained on thousands of SaaS landing pages, and without contrary instruction, it reproduces the center of that distribution. The resulting UI is not wrong — it is indistinguishable. Same violet gradient, same Inter font at 16px, same hero-features-pricing-CTA structure, same cards with box-shadow: 0 4px 6px rgba(0,0,0,0.1).
The second failure: slop often hides in omission. The button has a primary style. It has no hover state. It has no focus ring. It has no disabled treatment. It looks complete until someone tabs to it or disables it — and then it falls apart. This skill makes omissions visible.
These are the specific patterns that tag output as AI-generated. Any match is a flag.
Hard block — the AI violet palette:
#7c3aed (violet-700)#8b5cf6 (violet-500)#6366f1 (indigo-500)#a855f7 (purple-500)#ec4899 (pink-500)Any of these in a project without an explicit brand reason is AI slop. These are the default colors of models that learned from a corpus dominated by AI startup landing pages.
Risk flags — unanchored gradients:
linear-gradient(135deg, ...) — the default angle. Real gradient design specifies intent, not default.linear-gradient(to right, #[purple], #[blue]) — the AI purple-to-blue hero background.Risk flags — shadow patterns:
box-shadow: 0 4px 6px rgba(0,0,0,0.1) — Tailwind's default shadow. Present everywhere. Signals no design intent.Missing states are invisible until they are not:
| Element | Required States |
|---|---|
| Button (primary) | default, hover, active, focus, disabled, loading |
| Button (secondary/ghost) | default, hover, active, focus, disabled |
| Link | default, hover, focus, visited (if navigation) |
| Input | default, focus, error, disabled |
| Card (clickable) | default, hover, active, focus |
| Toggle/Switch | default-on, default-off, hover, focus, disabled |
| Tab | default, active, hover, focus |
Audit method: read every interactive element. For each, check that CSS or component props define all required states. A button with only bg-blue-500 and text-white has zero states defined. That is SLOP.
font-family: 'Inter' with no design rationale — Inter is the AI default font, same as violet is the AI default color.font-size: 16px everywhere — no type scale.font-weight: 400 only — no weight variation to create visual hierarchy.The canonical AI landing page structure:
[Hero: headline + subline + CTA button + hero image]
[Features: 3-column icon grid]
[Social proof: logo strip]
[Pricing: 3-tier cards]
[CTA banner]
[Footer]
This structure is not wrong. It is used because it works. The slop signal is when the structure is reproduced without any differentiation — same section order, same column counts, same visual weight distribution.
Flag: sections with class names hero, features, pricing, testimonials, cta-banner in exact canonical order. Not a hard block — a RISK that warrants visual review.
transition: all 0.3s ease — the blanket transition. Flags everything including layout and color, causing performance issues and visual noise.@media (prefers-reduced-motion: reduce) — accessibility violation.Scan the codebase for the hard-block hex values and gradient patterns:
# Hard-block colors
grep -r "#7c3aed\|#8b5cf6\|#6366f1\|#a855f7\|#ec4899" --include="*.css" --include="*.tsx" --include="*.jsx" --include="*.html"
# Unanchored gradients
grep -r "linear-gradient(135deg\|linear-gradient(to right.*#[789a-f][0-9a-f]" --include="*.css" --include="*.tsx"
# Default shadow
grep -r "0 4px 6px rgba(0,0,0,0.1)" --include="*.css" --include="*.tsx"
For each match: check if the color/gradient is explicitly documented in the design brief or brand tokens. If not, it is unanchored and a slop candidate.
For each interactive element in scope:
Check CSS directly — not component names. A file called Button.tsx with className="bg-blue-500 text-white px-4 py-2 rounded" has no interaction states regardless of its name.
Check font-family declarations. If Inter appears without a design rationale in the brief, flag RISK. If no type scale is defined (only a single font-size in use), flag RISK.
Check section order and class names. If the structure matches the canonical AI landing page pattern exactly, flag RISK — not SLOP. Some projects legitimately use this structure. The flag triggers a visual review question: "Is this structure intentional, or was it generated by default?"
Check for transition: all (RISK — too broad), missing prefers-reduced-motion wrapper (SLOP if animations are present), and identical transition timing across all elements (RISK — no motion design intent).
## UI Slop Guard Report: [file or component]
Date: [date]
### Color
Verdict: SLOP | RISK | CLEAN
Findings:
- [line N]: #8b5cf6 — AI violet palette, no brand documentation. Replace with brand token.
### Interaction States
Verdict: SLOP | RISK | CLEAN
Findings:
- Button.tsx: missing hover, focus, disabled states
### Typography
Verdict: SLOP | RISK | CLEAN
Findings:
- font-family: Inter — no design brief rationale. Verify this is intentional.
### Layout
Verdict: SLOP | RISK | CLEAN
Findings:
- Section order matches canonical AI template. Review for differentiation.
### Animation
Verdict: SLOP | RISK | CLEAN
Findings:
- transition: all 0.3s ease on 14 elements — too broad. Specify properties.
- No prefers-reduced-motion wrapper found.
### Overall: SLOP | RISK | CLEAN
[Summary: X hard blocks, Y risk flags. Prioritized remediation:]
1. [Highest priority fix]
2. [Second priority fix]
Verdict definitions:
SLOP — hard block pattern found. Must be remediated before the component is shipped.RISK — pattern that is often slop but may be intentional. Requires explicit confirmation.CLEAN — no slop patterns found in this category.Do not flag Inter as SLOP if the brand explicitly uses Inter. Brand documentation overrides slop heuristics.
Do not treat the canonical landing page structure as automatically bad. The verdict is RISK, not SLOP — it requires a visual review, not an automatic rewrite.
Do not audit class names for semantic meaning (.hero-section, .features-grid). This skill audits CSS values and properties, not naming conventions.
Do not batch all findings into one correction prompt. Fix one SLOP verdict at a time and verify.
transition: all and missing reduced-motion