Forem: Alonso

PURESLOP.md — teach your AI agent to write terrible code.

Alonso — Fri, 03 Apr 2026 00:55:59 +0000

This is a submission for the DEV April Fools Challenge

What I Built

A CLI that drops a single markdown file into your repo, one that instructs your AI coding agent to produce the most stereotypically AI-generated code imaginable.

Not another .cursor/rules.

Not another CLAUDE.md.

Not another AGENTS.md.

Quite the opposite.

npx pureslop

Drop PURESLOP.md in your repo, tell your agent to follow it, watch it slop-ify everything.

Demo

This is the same function, before and after PURESLOP.md.

Before — clean, typed, readable:

async function getActiveUserEmails(users: User[]): Promise<string[]> {
  return users
    .filter((user) => user.isActive)
    .map((user) => user.email);
}

After — pure, unadulterated slop:

// Function to get active user emails from an array of users
async function getActiveUserEmails(users: any): Promise<any> {
  try {
    // Initialize an empty array to store the results
    const resultArray: any[] = [];

    // Check if users is not null or undefined
    if (!checkIfValueIsNullOrUndefined(users)) {
      // Check if users array has elements
      if (checkIfArrayHasElements(users)) {
        // Loop through each user in the users array
        for (let i = 0; i < users.length; i++) {
          // Get the current user
          const currentUser = users[i] as any;

          // Check if the current user is not null or undefined
          if (!checkIfValueIsNullOrUndefined(currentUser)) {
            if (currentUser.isActive !== null && currentUser.isActive !== undefined) {
              if (currentUser.isActive === true) {
                if (currentUser.email !== null && currentUser.email !== undefined) {
                  // Add the email to the results array
                  resultArray.push(currentUser.email);
                }
              }
            }
          }
        }
      }
    }

    // Return the result array
    return resultArray;
  } catch (error) {
    // Handle error
    console.log("An error occurred while getting active user emails");
    // Return an empty array
    return [];
  }
}

3 lines to 40 lines. Same result. Zero value added.

Code

github.com/alonsarias/pureslop

How I Built It

Two things: a markdown file and a CLI that installs it.

npx pureslop

Running that copies PURESLOP.md into your project root. That's the entire workflow: one command, one file, your agent is now radicalized.

The CLI is intentionally minimal: ~30 lines of vanilla Node.js, no dependencies, supports --force to overwrite and --version to check the release. Slop about slop would have been too much.

The file it installs contains 10 directives that cover every recognizable AI coding pattern:

Comment the Obvious — add a comment above every line explaining what the code already says
Defensive Everything — wrap every code path in try/catch, even when failure is impossible
Cast Away Your Types — use any at every opportunity
Nest Like Your Life Depends on It — never use early returns, aim for 4+ levels deep
Null Check the Guaranteed — check everything, including things that can never be null
Over-Abstract Mercilessly — create wrapper functions for trivial one-liners
Import the World — import lodash, moment, uuid, chalk — use only one
Name Things Poorly — either x or retrievedAndValidatedUserDataObjectResponse
Swallow Exceptions Silently — catch (e) { // handle error }
Reinvent Every Wheel — reimplement arr.includes() from scratch

Why This Is Useful (Despite Being Useless)

AI coding agents have recognizable habits. They over-comment, over-abstract, swallow errors, nest deeply, and erase type safety. These patterns ship to production every day because developers don't always catch them in review.

PURESLOP.md makes slop visible on purpose. Run it on a codebase, show the output to your team, and suddenly everyone can name exactly what they're looking for and never let it through again.

PURESLOP.md is not meant for production. Using it on real projects will produce terrible code.

Prize Category

Community Favorite: because every dev who has used an AI coding agent will recognize at least one of these patterns from something they almost shipped.

Skills Are Overhyped. I Converted Vercel's Into Cursor Rules and Got Real Performance Wins

Alonso — Wed, 04 Mar 2026 00:22:32 +0000

Skills are having a moment. Vercel launched skills.sh, a curated directory where teams can publish reusable skill packages for AI coding agents. The idea is compelling: instead of re-explaining your stack to the AI every time, you install a skill and it knows the context.

Vercel published two skills of their own that caught my attention:

react-best-practices performance patterns and rendering optimizations
composition-patterns component architecture, compound components, context usage

I read through both. The content is solid. But then I asked myself: do I actually need skills for this, or are Cursor rules a better fit?

Skills vs. Rules: Why I Chose Rules

When I read through the Vercel skill packages, I noticed something: the content isn't really capabilities, it's conventions, rules about when to use useMemo, how to avoid async waterfalls, why you should prefer useRef over useState for non-rendered values. That's not what skills were designed for. That's what rules are.

Here's why rules win for this use case:

1. Universal coverage. A rule activates based on context, Cursor reads the description and decides relevance. A skill requires either explicit invocation or the model detecting it as pertinent, and that's a meaningful difference when you're in the middle of writing a component and the agent needs to know your patterns right now, without you thinking to mention it.

2. Less friction. Rules are part of the context from the start of every interaction. Skills depend on the model remembering to consult them, or you remembering to invoke them. In practice, that means skills get skipped.

3. More robust. If a skill isn't recognized as relevant, it simply doesn't activate. Rules degrade more gracefully: even if a rule isn't perfectly matched, its content is still present in the context window.

4. Predictable behavior. The guidance a rule provides is constant and auditable, you can read it, version it, and review it in a PR. Skills introduce variability depending on how the model interprets the skill's own internal instructions on any given day.

5. Operational simplicity. A folder of .mdc files is easier to maintain than a skill library with its own packaging, versioning, and activation logic. There's nothing to install, no server to run, no registry to depend on.

There's also a practical constraint specific to these Vercel packages: they're written for a Next.js and SWR stack. If you're on plain React (Vite, CRA, or any non-Next setup), a significant chunk of the content either doesn't apply or actively points you toward patterns that don't fit your project.

The Transformation: Stripping Next.js, Keeping React

I went through both skill packages and split the content into six focused rule files, removing everything Next.js or SWR-specific:

.cursor/rules/
├── react-composition-patterns.mdc       # Compound components, context, state management
├── react-performance-critical.mdc       # Async waterfalls, Promise.all, bundle size, lazy loading
├── react-rerender-optimization.mdc      # memo, useMemo, useState, useRef, derived state
├── react-rendering-performance.mdc      # Animations, SVG, CSS content-visibility, conditionals
├── react-javascript-performance.mdc     # Loops, caching, Set/Map, array methods
└── react-advanced-patterns.mdc          # Refs, useEffectEvent, initialization

Each file uses .mdc frontmatter so Cursor can decide when to activate it:

---
description: React re-render optimization. Use when component renders excessively,
  props cause unnecessary updates, or memoization strategies are needed.
globs: "*.tsx,*.jsx"
alwaysApply: false
---

With alwaysApply: false, Cursor reads the description and activates the rule when the context is relevant, so you're not paying the context window cost on every single message. You can also invoke them manually:

@react-rerender-optimization Why is this component rendering 40 times on a single keystroke?

The full rule set is available here: github.com/alonsarias/agent-rules

Applying the Rules: The Audit + Plan Workflow

Having the rules is one thing. Using them to systematically improve an existing codebase is another. Here's the workflow I used with Cursor Agent in Plan Mode.

Step 1: Audit the codebase against one rule

I ran this prompt for each rule file, one at a time:

Read @react-rerender-optimization.mdc to understand the project's coding rules 
and conventions. Then scan the src directory to identify all places where code 
violates or fails to follow these rules.

For each violation found:
* Cite the specific file path and the relevant code.
* Reference which rule from the .mdc is being violated.
* Group violations by rule so the plan is easy to follow.

The goal is to produce a plan that, once confirmed, will implement the minimal 
set of changes needed to bring all code in src into full compliance. 
Prioritize violations by impact: correctness issues first, then 
structural/architectural rules, then style/convention rules.

The agent comes back with a structured plan: file by file, violation by violation, with the specific rule cited for each one.

Step 2: Split the plan into executable chunks

A plan covering 40+ violations across 20 files is too risky to execute as a single unit. One wrong change can cascade. I followed up with:

This plan is too large to execute as a single unit. Split it into smaller, 
self-contained plans that can each be reviewed and executed independently. 

Each sub-plan should:
* Be a logical, cohesive chunk of work (grouped by rule, by module, or by 
  type of change, use your judgment).
* Be ordered so that earlier plans don't depend on later ones (but later 
  plans may build on earlier ones).
* Keep the same structure: cite specific files, reference the rule being 
  addressed, and describe the exact changes.

You end up with 4–8 smaller plans that each touch a specific concern.

Step 3: Execute, build, and iterate

For each sub-plan:

Review it manually, you should understand every change before approving
Let the agent implement it
Run the build (npm run build or equivalent)
Fix any breakage before moving to the next sub-plan

Then repeat the entire process for the next rule file. The order matters: start with react-performance-critical.mdc (structural issues, async waterfalls) before tackling react-rerender-optimization.mdc (micro-optimizations). Fixing the architecture first means the re-render fixes land on stable ground.

The Result

After completing the full cycle for all six rules, I ran a Lighthouse audit. Here's what changed:

Metric	Before	After
Performance score	26	60
First Contentful Paint	6.7 s	2.3 s
Total Blocking Time	1,320 ms	90 ms
Speed Index	8.7 s	2.7 s
Largest Contentful Paint	13.0 s	8.6 s
Cumulative Layout Shift	0	0

The TBT drop, from 1,320ms to 90ms, is the most telling number. That's the metric most directly tied to interactivity and how "frozen" a page feels to users. The bulk of it came from the react-performance-critical pass: the codebase had multiple places where async operations ran sequentially instead of in parallel, and several heavy components loading eagerly on the initial render.

The FCP improvement (6.7s → 2.3s) came largely from lazy loading and bundle splitting. The Speed Index followed from both.

LCP is still high at 8.6s, there's more work to do, likely at the data-fetching layer - but the improvement from 13.0s is real. The refactor covered the React side of the equation, and the remaining gains would require looking at the API response times and server-side rendering decisions.

The specific numbers will vary by project, but the categories of improvement are predictable, they map directly to what each rule targets.

What to Take Away

You don't need to adopt this whole workflow at once. Here are three things you can do today:

1. Copy the rules into your project

git clone https://github.com/alonsarias/agent-rules.git
cp agent-rules/.cursor/rules/react-*.mdc /your-project/.cursor/rules/

2. Start with one rule, one audit
Pick react-rerender-optimization.mdc, it tends to surface the most violations in mature React codebases. Run the audit prompt. Review the plan before executing anything.

3. Make it a recurring practice
After any significant feature work, run an audit pass against the relevant rules. Catching regressions before they accumulate is cheaper than doing a large refactor later.

The skills directory is genuinely useful, it's a good source of curated, community-maintained knowledge. But for coding conventions that should apply across every PR, every feature, and every AI-assisted edit, rules that live in your repo and activate automatically are just more practical.

If you try this on your own project, I'd be curious what violations came up most often.

Rules repo: github.com/alonsarias/agent-rules

Original Vercel skills: github.com/vercel-labs/agent-skills

7 Essential Design Patterns for Building Better AI Products

Alonso — Wed, 20 Aug 2025 15:17:35 +0000

Building effective AI products isn't just about having access to powerful language models—it's about implementing the right design patterns that bridge the gap between AI capabilities and user needs. Whether you're developing a coding assistant, content generator, or analytical tool, these seven patterns will help you create AI experiences that users actually want to use.

1. Restating: Clear Communication From the Start

The Restating pattern addresses one of the most common friction points in AI interactions: miscommunication. Instead of immediately executing a request, the AI explicitly states what it understood from the user's input.

Why it works: LLMs excel at filling gaps and correcting imprecise human input by leveraging conversational context. By restating before acting, you eliminate confusion and prevent costly mistakes.

Implementation tip: The decision to restate should depend on the potential impact of a false positive. High-stakes operations warrant confirmation, while low-risk tasks can proceed directly.

Examples:

# Database Operations
User: "Delete all the test files"
AI: "I understand you want to delete all files containing 'test' in their name from the current directory. Should I proceed?"

# Code Generation
User: "Create a login function"
AI: "I'll create a user authentication function that handles email/password login with error handling and session management. Is this what you need?"

# Data Analysis
User: "Show me sales trends"
AI: "I'll analyze your sales data to display monthly trends over the past year, including growth rates and seasonal patterns. Correct?"

2. Auto-Complete: Proactive Intelligence

Auto-complete goes beyond traditional text suggestions by offering contextually relevant concepts and vocabulary before ambiguity arises. This pattern can construct intelligent queries based on content, data structure, and historical interaction patterns.

Advanced features:

Dynamic field labeling ("changeable" vs "unmatched" parameters)
Sophisticated query construction from previous questions library
Real-time execution as users type (with appropriate safeguards)

Caution: Balance automation with accuracy. Consider the impact of output errors and accidental inputs when implementing real-time features.

Examples:

# SQL Query Builder
User types: "show sales from las"
AI suggests: "show sales from last_month", "show sales from las_vegas_store"

# API Documentation
User types: "user.get"
AI suggests: "user.getProfile()", "user.getPreferences()", "user.getHistory()"
Visual indicators: ✓ Available methods | ⚠ Requires authentication

# Content Writing
User types: "write about machine learn"
AI suggests: "machine learning fundamentals", "machine learning algorithms", "machine learning applications"

3. Talk-Back: Beyond Simple Responses

Talk-Back transforms error handling from frustration into learning opportunities. Instead of just stating what went wrong, this pattern provides comprehensive explanations of the issue, its causes, and alternative exploration strategies.

Key characteristics:

More sophisticated than simple restatement
Guides users through complex problem-solving
Requires chat interface for effective deployment
Verbose but valuable for user education

This pattern turns dead-ends into pathways, making your AI feel more like a knowledgeable colleague than a rigid tool.

Examples:

# Code Debugging
User: "My API isn't working"
AI: "I see the API call is failing. This typically happens for three reasons: 
1) Authentication issues - check your API key format
2) Endpoint URL problems - verify the base URL is correct  
3) Request format mismatch - ensure JSON structure matches API docs
Let's start by examining your authentication headers. Can you share how you're setting up the request?"

# Data Query Error
User: "SELECT * FROM users WHERE signup_date > 2024"
AI: "The query failed because 'signup_date' column doesn't exist in the users table. 
Available date columns are: 'created_at', 'last_login', 'updated_at'.
Did you mean: SELECT * FROM users WHERE created_at > '2024-01-01'?"

4. Initial Suggestions: Smart Engagement

Initial Suggestions re-engage users with prompts derived from previous interactions and contextual awareness. The most effective implementations combine multiple suggestion types to accurately anticipate immediate user needs.

What makes them powerful:

Generated from recent conversation themes
Continuation of previous chat contexts
"Mind-reading" effect through anticipated questions
Minimal user effort required

Think of these as conversation starters that make users feel understood and help them discover capabilities they didn't know existed.

Examples:

# Code Editor
"Based on your recent React work:"
- "Need help with useState optimization?"
- "Want to add TypeScript to this component?"
- "Should we implement error boundaries?"

# Data Analysis Tool
"Continue your sales analysis:"
- "Compare Q4 performance across regions?"
- "Analyze customer churn patterns?"
- "Forecast next quarter's revenue?"

# Content Platform
"Pick up where you left off:"
- "Finish the blog post about API design?"
- "Create social media posts for your recent article?"
- "Generate SEO keywords for your draft?"

5. Next Steps: Contextual Progression

Supporting conversational and exploratory AI environments, Next Steps proposes subsequent actions based on the user's journey and current context. This pattern leverages comprehensive data including prior queries, user preferences, historical patterns, data types, and result anomalies.

Critical component: Continuous reinforcement learning where the AI learns from user clicks and interactions, constantly improving suggestion accuracy.

Data sources:

Query history
User preferences
Data anomalies and trends
Contextual journey mapping

Examples:

# After analyzing user engagement data:
"Next steps you might want to explore:"
- "Segment users by behavior patterns"
- "Create retention strategies for at-risk users"  
- "Build a dashboard for daily monitoring"

# After generating API documentation:
"Consider these follow-up actions:"
- "Generate client SDK examples"
- "Create integration tutorials"
- "Set up automated testing scenarios"

# After debugging a performance issue:
"Recommended next actions:"
- "Profile memory usage patterns"
- "Implement caching strategy"
- "Set up monitoring alerts"

6. Regen Tweaks: Creative Control

Essential for generative AI workflows, Regen Tweaks provides users with precise control over content variations. This pattern offers single-click tools that adjust the LLM's "temperature"—controlling the degree of variation in subsequent iterations.

Features include:

Temperature control for variation intensity
Region-specific modification capabilities
Viewpoint adjustment options
Iteration refinement tools

Perfect for creative workflows where users need multiple variations while maintaining control over the generation process.

Examples:

# Content Generation
Original: "Write a product description for wireless headphones"
Regen options:
🎯 More Technical | 🎨 More Creative | 📝 Shorter Version | 📈 Sales-Focused

# Code Generation  
Original: Function that validates email addresses
Tweaks available:
⚡ Optimize for Performance | 🛡️ Add Security Features | 📚 Include More Comments | 🧪 Add Unit Tests

# Design Copy
Original: Landing page headline
Region-specific tweaks:
• Modify tone (professional → friendly)
• Adjust for mobile users
• Focus on different value proposition
• Change call-to-action style

7. Guardrails: Responsible AI Implementation

Guardrails establish explicit protocols defining what content AI systems can and cannot generate. This pattern ensures responses align with ethical standards while maintaining functionality.

Essential considerations:

Prevention of harmful content (hate speech, explicit material, illegal instructions)
Handling of denied or malformed requests
Acknowledgment that no LLM is perfectly resistant to bypass attempts
Balance between safety and utility

Implementation reality: While sophisticated models show resistance to harmful prompts, defining clear protocols for edge cases remains crucial.

Examples:

# Content Restrictions
❌ "I can't generate content that includes hate speech or discriminatory language."
✅ "I can help you write inclusive marketing copy instead."

# Code Safety
❌ "I can't provide code for unauthorized system access."  
✅ "I can help you implement proper authentication and security measures."

# Malformed Requests
User: "Write SQL to delete everything important"
AI: "That request is too vague and potentially destructive. Could you specify:
- Which table you want to modify?
- What criteria define 'important'?
- Do you want to backup data first?"

Putting It All Together

These patterns work best when implemented thoughtfully and in combination. Consider your specific use case:

High-stakes applications: Emphasize Restating and Guardrails
Creative tools: Focus on Regen Tweaks and Next Steps
Analytical platforms: Prioritize Talk-Back and Auto-Complete
User engagement: Leverage Initial Suggestions and Next Steps

The Bottom Line

Successful AI products don't just demonstrate technical capability—they solve real user problems through thoughtful design. These seven patterns provide a foundation for creating AI experiences that users trust, understand, and want to continue using.

The key is remembering that behind every AI interaction is a human trying to accomplish something meaningful. These patterns help ensure your AI becomes a valuable partner in that journey.

Stop Wrestling with AI Prompts: Build UI Components Visually and Generate Perfect Prompts

Alonso — Fri, 11 Jul 2025 20:23:46 +0000

Ever tried describing a complex UI layout to an AI? You know the struggle:

"Create a UI component with an App Bar containing a Toolbar, which has a Typography component with variant h6 and some text, plus a Button with variant contained and primary color, and below that a Container with max width md containing a Card with Card Content..."

By the time you finish typing, you've forgotten half the details, and the AI misunderstands the hierarchy. There's a better way.

Try the Live Demo - See it in action before reading more!

🎯 The Problem Every Developer Faces

When working with AI assistants to generate UI components, we constantly run into the same issues:

Complex hierarchies are impossible to describe clearly in natural language
Prop configurations get lost in translation
Nested relationships become confusing for both you and the AI
Maintaining consistency across similar components is a nightmare

What if you could visually build your component tree and automatically generate the perfect prompt for any AI?

🚀 A Better Approach

This new tool transforms how you work with AI for UI development. Instead of wrestling with text descriptions, you get:

🎨 A Complete Component Library at Your Fingertips

100+ Material-UI components organized across 8 categories
Smart search and filtering to find exactly what you need
Component details showing props, descriptions, and compatibility

🛠️ Visual Tree Builder That Actually Makes Sense

Click-to-add simplicity for building component hierarchies
Real-time preview of your component structure
Automatic validation to prevent incompatible parent-child relationships
Undo/redo support because everyone makes mistakes

⚡ Intelligent Property Management

Type-safe form inputs tailored to each prop type
Required field validation with visual indicators
Enum value dropdowns for predefined options
Direct text editing for component content

🚀 Perfect Prompt Generation Every Time

Structured output with clean, indented syntax
AI-optimized format designed for maximum comprehension
One-click copying and file export
Instant prompt preview as you build

💡 How It Works (It's Ridiculously Simple)

Select components from the comprehensive library
Build your hierarchy with the visual tree interface
Configure properties using intelligent forms
Generate the perfect prompt automatically
Copy and paste to your favorite AI assistant

What You Get: Clean, Structured Prompts

Instead of messy natural language, you get perfectly formatted prompts like this:

Convert the following structure into a component:

Container maxWidth="md"
  AppBar position="static"
    Toolbar
      Typography variant="h6" "My App"
      Button variant="contained" color="primary" "Login"
  Box sx={{padding: 2}}
    Card
      CardContent
        Typography variant="h5" "Welcome"
        Typography variant="body1" "This is a sample layout"
        Button variant="outlined" "Learn More"

Clear hierarchy. Precise props. Zero ambiguity.

🛠️ Built for Real Developers

This isn't just another toy tool. It's built with production-grade technologies:

React 19 with TypeScript for reliability
Material-UI v7 for comprehensive component support
Vite for lightning-fast development
Immutable state management for predictable updates

🚀 Ready to Transform Your Workflow?

The tool is open source and ready to use. Here's how to get started:

Quick Start

git clone https://github.com/alonsarias/structured-prompts-ui.git
cd structured-prompts-ui
npm install
npm run dev

Whether you're prototyping quick layouts, building complex applications, or just tired of explaining component hierarchies in text, this tool will transform your workflow.

Forem: Alonso

PURESLOP.md — teach your AI agent to write terrible code.

What I Built

Demo

Code

How I Built It

Why This Is Useful (Despite Being Useless)

Prize Category

Skills Are Overhyped. I Converted Vercel's Into Cursor Rules and Got Real Performance Wins

Skills vs. Rules: Why I Chose Rules

The Transformation: Stripping Next.js, Keeping React

Applying the Rules: The Audit + Plan Workflow

Step 1: Audit the codebase against one rule

Step 2: Split the plan into executable chunks

Step 3: Execute, build, and iterate

The Result

What to Take Away

7 Essential Design Patterns for Building Better AI Products

1. Restating: Clear Communication From the Start

2. Auto-Complete: Proactive Intelligence

3. Talk-Back: Beyond Simple Responses

4. Initial Suggestions: Smart Engagement

5. Next Steps: Contextual Progression

6. Regen Tweaks: Creative Control

7. Guardrails: Responsible AI Implementation

Putting It All Together

The Bottom Line

Further Reading

Stop Wrestling with AI Prompts: Build UI Components Visually and Generate Perfect Prompts

🎯 The Problem Every Developer Faces

🚀 A Better Approach

🎨 A Complete Component Library at Your Fingertips

🛠️ Visual Tree Builder That Actually Makes Sense

⚡ Intelligent Property Management

🚀 Perfect Prompt Generation Every Time

💡 How It Works (It's Ridiculously Simple)

What You Get: Clean, Structured Prompts

🛠️ Built for Real Developers

🚀 Ready to Transform Your Workflow?

Quick Start