chore: add unslop skill

.opencode/skills/unslop/references/signs.md

@@ -0,0 +1,103 @@
+# Signs of slop
+
+Go through every group and note each sign you find with where it lives. Each line pairs the sign with its fix.
+
+## Surfaces and color
+
+- Purple to blue or violet to pink gradients on backgrounds, cards, buttons or the active nav item → one neutral surface, accent only where it means something
+- Gradient text in headings, numbers or the logo → solid primary text color
+- Colored glows, like `shadow-[0_0_20px_rgba(139,92,246,0.5)]`, `drop-shadow` on emoji or glowing pills → remove, depth from surface steps and hairlines
+- Radial color washes or blurred blobs behind content → remove
+- Neon or high contrast colored borders → hairline at 6 to 10% opacity
+- Many near identical tints of the same hue for text, like five lavenders → three text roles from one neutral ramp
+- Every element highlighted, so nothing stands out → one accent used once or twice per screen
+- Glass cards with a white inner highlight and a colored shadow → plain raised surface with a hairline
+
+## Type
+
+- Headings at weight 800 or 900 → 400 to 500 and size for hierarchy
+- Uppercase labels with wide tracking, like `NAVIGATION` or `PAID THIS MONTH` → sentence case at normal or slightly open tracking
+- Too many sizes and weights on one screen → a few sizes from the scale, weights 400 and 500
+- Numbers in mixed formats, like `$48,210` next to `$124,860.40`, or `07` → one format, tabular figures
+- Negative letter spacing on small text → zero or slightly positive
+- Italic used for emphasis → color or weight instead
+
+## Icons
+
+- Emoji as nav icons, label decoration or status, like 🏠 📥 🚀 💰 ⚠️ 📈 🔥 😬 → one line icon set or nothing
+- Emoji inside pills and counts, like `18 👤` → plain number
+- Icons in many sizes and colors → one size, one stroke, text role color
+- Icons nudged off the column → same icon box width in every row
+- A sparkle ✨ for anything AI → remove or use a plain icon only where it explains something
+
+## Spacing
+
+- Arbitrary values, like `mt-[13px]`, `ml-[7px]`, `h-[31px]` → steps on the 4px scale
+- Rows in one list with different heights or gaps → one height, one gap
+- Groups that sit closer to their neighbours than to their own items → smaller gaps inside groups, bigger between them
+- Uneven padding inside sibling cards → one padding
+- Big empty gaps above a section and cramped space below it → balanced rhythm
+
+## Copy
+
+- Greeting headlines, like `Welcome back, Damir! 👋` → the page or period as the title
+- Exclamation marks and `!!` → plain statement
+- Changes without a reference, like `+12%!!` or `3 less!!` → `+12% vs last month`, `3 fewer vs last month`
+- Wordy placeholders, like `Search anything...` → `Search`
+- Hype words, like supercharge, seamless, unlock, magic, revolutionize → what the thing actually does
+- Trailing periods on labels and buttons → none
+- Fake looking data, like `$123,456` or `[X]` → plausible numbers
+
+## Components
+
+- Glowing pills for counts, plans, shortcuts or status → quiet mono text or a keycap
+- `PRO`, `New ✨`, `Beta 🚀` badges everywhere → remove or one quiet text badge
+- Every element a full pill, from search to buttons to cards → radius by size, nested radius math
+- Charts with rainbow bars, glowing bars, pill shaped bars or uppercase day labels → one or two series, muted grid and mono labels, one highlight color
+- Every chart or stack in several shades of the accent, so nothing leads → neutral steps with the accent only on the one thing that matters
+- Sparklines, tallies or mini bars added to every stat card → the number, its label and its change
+- Equal cards side by side, each with the same chart or layout → one main chart, compact stats, varied widths
+- Logo as a gradient tile with a sparkle and a gradient wordmark → product name as text plus a simple flat mark
+- Logo mark as a glossy orb, a gradient ball or a glowing dot → a flat glyph in one solid color, or the wordmark alone
+
+## Landing pages and heroes
+
+- A pill badge above the headline, like `✨ Introducing X 2.0` → remove, or a quiet text link if it is real news
+- A headline that could fit any product, like `Supercharge your workflow with AI` → say what the product does for whom
+- Gradient or shimmer on the headline → solid text
+- Floating blobs, orbs, grids and glowing lines behind the hero → plain background or one real product visual
+- Everything stacked and centered, headline, text, buttons and a picture below → an asymmetric split or text over a large product view, see the Layout pass
+- Three or more buttons, or chips and avatars stacked under the buttons → one primary and at most one secondary action
+- `Trusted by 10,000+ teams`, `Loved by 10,000+`, rows of avatar dots or five stars without a source → ask if it is real, then make it quiet and specific or remove it
+- Parallax and elements floating on scroll → static layout, motion only with a purpose
+- Feature cards with an emoji, a bold title and a vague line each → fewer features, concrete copy, line icons or none
+
+## Visuals
+
+- Glossy 3D blobs, orbs, liquid chrome shapes or a purple nebula as the hero visual → the product itself or one concrete metaphor for what it does
+- Stock robots, glowing brains, circuit lines or holograms for anything AI → remove, or show what the AI actually produces
+- Text, fake buttons or a fake logo baked into an image → real text in the page, a clean image without text
+- An image that does not blend into the page, with a hard edge and a different black → background matched to the page and a soft mask at the edges
+- A visual on every section → one visual where it helps, usually only the hero
+
+## Motion
+
+- `animate-pulse`, `animate-ping` or breathing glows on things that are not live → static
+- `transition-all` and `hover:scale` on cards and buttons → color or surface step on hover, a tiny scale down on press
+- Bouncy springs and overshoot on simple UI → one ease-out curve
+- Everything flying in on load from different directions → one short fade and rise with a small stagger
+- Parallax, floating loops and elements that move on scroll → static layout
+- Animating width, height, top or left → transform and opacity
+
+## Template look
+
+These are not slop, but they are what a cleaned up screen falls back to when nobody made a decision. Watch for them after the passes.
+
+- Pure grey #161616 page, Inter, white text and the old brand color on one button, on a product whose world is warm or bright → a ramp tinted toward the world and an accent from it
+- A headline that would fit another product if you swapped the name → say what this product does, with its own nouns
+- A hero visual that is an empty box or a generic picture → a product preview in code or an image from the world
+- Every product getting the same layout, type and palette → let the direction choose
+
+---
+
+Part of unslop by Damir Sokolovsky ([@heydamir](https://x.com/heydamir)), CC BY 4.0. Keep this credit in copies and adaptations.