Muhammad SharjeelSenior Software Engineer

Islamabad · --:--:--


Unslopping AI output with nothing but a skill

You do not need a better model to get rid of the purple gradients. You need your taste written down as a skill the agent loads before it touches the screen.

You can spot a vibecoded screen from across the room. Purple gradient, glowing cards, an emoji on every label, a headline that shouts. The model is not broken. Nobody told it what you consider good, so it gave you the average of everything it has seen.

The usual fixes are a longer prompt, a bigger model or a plugin. I think the cheapest one is a skill.

What a skill is

A skill is a folder with a SKILL.md inside. The agent sees a one-line description up front and loads the full instructions only when the task calls for them. There is no fine-tune, no server and no API. It is taste and procedure written in plain text, sitting in your repo.

What unslop gets right

unslop by Damir Sokolovsky is the best example I have read. Three things make it work.

It audits before it edits. The skill ships a list of signs, each paired with its fix. Gradient text becomes a solid colour. An arbitrary mt-[13px] moves onto a 4px scale. The agent has to name what is wrong, and where, before it changes a line.

It fixes in a fixed order. Spacing, colour, icons, copy, type, layout, details, visuals, motion. One layer across the whole screen, then the next, the way a designer does a redline review. Order matters because type choices mean little while the spacing is still random.

It knows when to stop. If a screen is already good, the skill says so and suggests two or three refinements. Most prompts cannot do that. Ask a model to improve something and it will always find something to change.

Writing your own

The same shape works well outside UI. I use it for specs, commit messages and code review.

  1. Name the signs. Write the tells you actually reject, with the fix beside each. “Be concise” does nothing. “A summary that repeats the title, delete it” does.
  2. Order the passes. Decide what gets fixed first and say why.
  3. Define done. Give the skill permission to change nothing.
  4. Keep the references next to it. Examples of good output teach more than adjectives.

Then put it in version control. A skill is reviewed, diffed and improved like any other code, and every agent on the team picks up the same standard from the next run onward.

Slop was never a model problem. It is what you get when the standard lives only in your head.

esc
HomeThe hero, the system map and selected workPageWorkAll 6 projects, each with a glimpse of its interfacePageAboutExperience, how I work and the stack I usePageWriting12 posts on engineering, AI and designPageGet in touchContact me by email or hire me on UpworkSection
Alara CodeTurns a client brief into a complete, human-approved software delivery pack.ProjectPolyXIdentity, tenancy and access platform shared by every product in the company.ProjectPolyX SDKTypeScript auth SDK on npm that puts the platform behind one typed client.ProjectAlara SpaceMulti-tenant team wiki that AI agents can read and write through MCP.ProjectAlara PlanProject tracker with AI meeting minutes, support intake and an MCP server.ProjectODINOmni-channel customer engagement platform on a microservices backend.Project
A portfolio that builds itself while you scrollThis site starts as a blank canvas and a swarm of cursors draws it in front of you. Here is why I wanted that, what it is made of, and everything that went wrong on the way.8 min readUnslopping AI output with nothing but a skillYou do not need a better model to get rid of the purple gradients. You need your taste written down as a skill the agent loads before it touches the screen.2 min readAI Assistant Coding vs Vibe CodingAs AI becomes ubiquitous in software development, a dangerous pattern is emerging: developers blindly accepting AI suggestions without understanding the code. This 'vibe coding' approach undermines the fundamentals of being a developer. Here's why understanding code matters more than shipping it, and how to use AI as a proper assistant.8 min readHosting Multiple Domains on One Server with Docker, NGINX & SSL (DevOps for Developers)As a full-stack developer, I recently had to deploy multiple backend services on one server, each with its own domain and SSL certificate. Here's how I combined Docker, NGINX, and Certbot to build a scalable, production-grade setup — without needing a dedicated DevOps engineer.3 min readTaming CORS in a Microservices Monorepo: From Async Validation to a Unified ConfigCORS errors can be frustrating, especially in a microservices monorepo setup. This blog dives into what CORS really is, why it matters, and how I solved the CORS challenge using a shared JSON config file — establishing a single source of truth for all services.4 min readDebugging Tips for Frontend Developers (React + Next.js)Effective debugging is one of the most valuable skills for frontend developers. Here's a practical guide to debugging with logs, using the debugger keyword, troubleshooting APIs, and improving performance — with a special focus on React and Next.js.3 min readIs the ‘AI Developer’ a Threat to Jobs – or a Marketing Stunt?AI dev tools are booming — but are they replacing developers or just reshaping workflows? Here's the balanced view.3 min readUsing Docker & NGINX to Build a Suite of MicroservicesExplore how to use Docker and NGINX to containerize and orchestrate a scalable microservices suite. Includes setup tips, architecture advice, and real-world tradeoffs.3 min readGetting Started with Next.js: Structure, Tips & DeploymentA developer-friendly introduction to Next.js — learn how to scaffold projects, understand folder structure, configure features, and deploy to Vercel seamlessly.3 min readGrid Systems: The Foundation of Great UI DesignWant cleaner, more balanced layouts? A grid system brings structure, rhythm, and clarity to your UI — and Tailwind makes it easier than ever to implement.2 min readUsing Generative AI to Speed Up Creative and Dev WorkflowsFrom ChatGPT to v0.dev — here's how generative AI helps streamline UI design, prototyping, coding, and problem-solving in modern workflows.3 min readWhat Is Accessible Design and Why It MattersAccessibility isn’t a nice-to-have. It’s a necessity. Here's why accessible design matters — and how to get it right in your UI and frontend code.3 min read
GitHubgithub.com/isharjeelddNew tabLinkedInlinkedin.com/in/muhammad-sharjeel-254a48108New tabUpworkHire me for freelance workNew tab