#LLM coding agents (particularly #ClaudeCode and #Cursor) are powerful. But they can leave a mess in their wake if you let them do too much all at once.

I'm spending the morning cleaning up generated code that looks like this:

<div class="compose-drawer">
    <i class="compose-drawer__pull"/>
    <button class="compose-drawer__btn compose-drawer__secondary"/>
    <some_other_set_of_elements/>
</div>


<style lang="scss">
compose-drawer {
    background: black;


    &__pull {
        background: white;
    }


    &__btn {
        some-style: something;
    }


    &__secondary {
        some-style: something-else;
    }
}
</style>

I don't use that __ syntax - maybe that's something that real front-end coders do, but it looks terrible to me. In tens of thousands of lines of code, I don't do that anywhere, but the LLM decided it should write a lot of it like that. What I generally write is more like this:

<div class="compose-drawer">
    <i class="pull"/>
    <button class="secondary"/>
    <some_other_set_of_elements/>
</div>


<style lang="scss">
compose-drawer {
    background: black;


    .pull {
        background: white;
    }


    button {
        some-style: something;


        &.secondary {
            some-style: something-else;
        }
    }
}
</style>

It may not look like that matters much, but with deeply nested HTML, those long a__b__c__d class names just piss me off.

It's probably the sort of stylistic choice I could enforce in an instructions file and I should look into that. But in general, the LLM doesn't seem to do a great job with CSS stylistic conformity. The code it generates works, but I hate looking at it and certainly wouldn't want to impose it on anyone else without adjustment.