The ShadCN Loop Is The Greatest Fix For Your Broken UI

The video introduces the core problem with using AI agents to build applications with ShadCN UI library. While building one-shot landing pages works fine, implementing new features or building apps causes breakage in other parts of the application. The speaker explains this isn't a new problem - it's already been solved by how engineers currently build apps. AI agents test their code but become unreliable with large contexts, necessitating a method to ensure agents complete their assigned work. This is where agentic loops come into play, with Anthropic's RALPH loop being the proposed solution.

The RALPH loop is explained as a new plugin released by Anthropic based on someone else's technique that they implemented and open-sourced. It uses stop hooks from Claude Code that trigger when Claude stops outputting an answer, at which point the AI agent receives its initial prompt again for iterative improvement. The critical mechanism is the completion promise - any word that Claude outputs when it believes its task is complete. For example, if the promise is the word 'complete', the loop only stops when this word appears in the return prompt. This prevents Claude from quitting prematurely whenever it wants, ensuring task completion before exiting the loop.

After installing the RALPH plugin, three commands become available: the loop command, a cancel command, and a help command. The loop command requires providing the prompt that gets fed to the agent repeatedly. A critical best practice mentioned is setting a max iteration count because the agent might get stuck in an infinite loop when given impossible tasks. The repository contains best practices for prompts, but the video focuses specifically on practices related to the UI workflow. The speaker promises to demonstrate these practices through the implementation examples that follow.

Two features are planned for implementation: a command palette for searching and executing commands, and a board view similar to Notion's database. The approach uses Test-Driven Development (TDD) where tests are written before code implementation to ensure new features don't break existing functionality. Claude Code can set up the TDD structure including an end-to-end test folder, a screenshots folder for checking UI problems, and corresponding tests. The key principle is that in TDD, tests are written first and will initially fail, then minimum code is written to pass those tests, followed by refactoring and adding more functionality while ensuring tests continue to pass.

The automated tests use Playwright for visual verification, but importantly, not through autonomous browser control via MCP. Instead, for each functional behavior (like adding a card), screenshots are taken showing the result (card added to board). The AI agent only needs to examine these screenshots to verify that ShadCN components have been implemented correctly without UI problems. These test files ensure that all behavioral requirements are fulfilled as features are built and new functionality is added. The screenshots serve purely for UI verification purposes, separating visual concerns from functional testing requirements.

The speaker addresses why the RALPH loop is needed when TDD already exists. The answer lies in how AI models behave with larger tasks and nearly-full context windows - they abruptly quit tasks and require constant human input. By writing tests beforehand for any desired function and using the loop to instruct the workflow, the agent can work autonomously. The loop is told what workflow to follow and given the condition for outputting the completion promise, which in this case is passing all 25 unique tests. This combination allows the agent to complete tasks and exit the loop only when truly finished.

Using the RALPH slash command, the speaker provided a prompt to iteratively build the command palette feature. The prompt outlined basic requirements (though these were redundant since requirements exist in tests) and importantly detailed the entire workflow. The workflow started with running tests, knowing they would fail, then implementing components to make them pass. While a broader task might cause Claude to quit when the context window fills, this smaller task was completed in a single iteration. The agent successfully wrote all components, passed all tests, reviewed screenshots for the command palette, verified no UI issues existed, and ran tests again before outputting the completion promise to exit the loop.

Implementing the board view with the same prompt structure revealed a significant problem despite initially appearing successful. While Claude ensured tests passed, there were cases where the number of successful tests decreased because changes broke other functionality - demonstrating why TDD with recursive testing is crucial. The main issue emerged after verification when checking the actual UI: most features were implemented correctly, but Claude had completely missed some UI errors. Upon examining the screenshots, the errors were clearly visible there too, meaning the agent had failed to properly review the visual verification materials.

Analysis revealed the issue was a process failure specifically in UI fixing, not a problem with the RALPH loop itself. The agent successfully ran test files repeatedly as designed, but lacked a specific test for UI beyond the screenshots. It only glanced at a few screenshots, ignored some UI errors it did see, and completely skipped some files. The critical problem was premature output of the completion promise without verifying if the UI was actually fixed. A brainstorming session ensued, including reviewing prompt writing best practices from the repository, ultimately leading to specific rules and process changes to ensure UI correctness.

The solution involved changing the main prompt with no modifications needed to the functional tests themselves. The previous prompt was helpful for large features where Claude wouldn't hallucinate completion but would quit due to full context windows or task complexity. The first major change was implementing a screenshot verification protocol with a simple prefix for each image indicating whether Claude had read it or not. However, the initial implementation still failed - Claude would read a few screenshots, mark them as verified, and quit early just like before, demonstrating that the prefix alone wasn't sufficient to ensure thorough review.

The breakthrough came from changing how Claude thinks about task completion. After renaming all screenshots, Claude is explicitly told not to output the promise yet and not to consider the task complete - it must let the next iteration confirm completion, ensuring at least two loops run. Tests were modified to separate image verification from functional tests. In the next iteration, Claude verifies all files have the verified prefix, and if any are missed, it reviews them again and fixes the output. This change finally eliminated the small UI errors, enabling correct implementation of all features.

The improved process resulted in Claude entering the next loop, running tests, finding and fixing errors, and completing the task in two loops while fixing all major UI errors. The video concludes with promotion for Automata, the company that helps bring ideas to life by building apps and websites using the AI workflows they teach. They position themselves as a technical co-pilot for those with ideas but no tech team, applying the workflows taught in their videos to real projects. Viewers are invited to reach out at hello@automata.dev, support via Super Thanks, and the speaker signs off thanking viewers and promising more content.