6/9/25, 9:56 PM Outlier
Golden Code Quality - How to score a 5/5
[Link] THE GOLDEN RESPONSE
(Code Quality)
💫 Edit the response code and text to make it a Golden Code-Only
Response. Make sure it looks like a commercial website (look up commercial
websites related to the prompt and then use that as inspiration). You will
spend 3 to 5 hours hours fixing the code till it generates a production ready
UI.
Step 1: You will write your own Golden Response by
rewriting the response we call this doing a Golden
Rewrite.
1a: Look up a commercial website that you will use as a reference for your
golden response.
1b: Expect to do rewrites 9/10 times. The model sucks at implementing
functionality.
1c: React files need to be self-contained (you cannot have a separate CSS file
imported) and must always export default components. All the styling needs
to be in the file.
Step 2: Validate that the response is feature
complete and satisfies the response completely
using the** UI Rubric Generator**
[Link] 1/4
6/9/25, 9:56 PM Outlier
2a: Validate that it contains all features requested in the prompt. THIS IS
REALLY IMPORTANT
Input your prompt into the tool
2b: Validate that all features work as expected. Explicit features requested in
the prompt must be fully functional. THIS IS ALSO REALLY IMPORTANT
Verify the requirements are implemented in the response and check them
off as you add them.
Note: For the rewrite step you may use Deepseek V3 to help you further
improve the code. You cannot use any other model to assist you in any
way possible. The same for restructuring/paraphrasing the turn 5
response as if it was a direct response to the target prompt.
Also make sure:
[Link] 2/4
6/9/25, 9:56 PM Outlier
You are using Typescript for React tasks
The most common way contributors mess up is by using JavaScript instead
of TypeScript for React tasks. They often also forget to add Typescript
typing. You can literally just ask the model to generate the typing for you
using process supervision.
You are using Tailwind CSS
Projects that use Tailwind produces code that is easier to read and edit in a
single file. This makes it easier to score a 5. It's a strict requirement that
every task uses Tailwind.
You are using Component Libraries, Icon Libraries, and Other Useful
Packages
It is easier to design visually impressive UIs by leveraging existing libraries.
We recommend using the following packages to enhance your UI:
1. react-icons
2. lucide-react
3. motion
4. shadcn-ui
5. recharts
Before proceeding, always check for logic errors
If your app has logic errors, for example wrongly functioning menus,
buttons etc (something unexpected happens or it doesn't work at all), you
must fix your code. Make sure to check for edge cases to prevent getting a
bad score.
You will view these steps in the task as follows:
[Link] 3/4
6/9/25, 9:56 PM Outlier
[Link] 4/4
