The First 5 Codex Skills I Install on Every New Project

Hey guys, welcome to today's video. My

name is Lucas. And now, in this YouTube channel, what I do is I post around five videos a week covering the hottest and most interesting workflows when using Cloud Code or Codex. And in today's

video, what I want to do is I want to show you my favorite skills and MCPs to use with these two tools specifically for design engineers. So guys, without further ado, let's go ahead and get started. Now, before we get started, I'd

started. Now, before we get started, I'd love to invite you all to my Discord community, The Creator Network. We get

together every single weekday to talk about different tools and topics and workflows. So, if you guys are

workflows. So, if you guys are interested in joining that, link is down in the description below. Now, in

today's video, I'm going to be using Codex. You can use Cloud Code, like I

Codex. You can use Cloud Code, like I said, but for the past few days, I kind of prefer Codex. And I'm going to be showing you these examples in this brand new file that I created. Now, the first skill that I want to show you here is

called the Grill Me skill, and it's by this guy called Mac Pocock. And

essentially, what this is is that you give it a, you know, description of what you want to do, and it interviews you relentlessly about every aspect of this plan until that you guys reach a shared

understanding. And I've spoken to some

understanding. And I've spoken to some people in my community, and they say that they can get up to like 60 questions. This AI ask you question

questions. This AI ask you question after question until you reach a shared understanding, then provides a summary of what you've covered. And this is fantastic in the early phases of coding because you need to discover all of the requirements by talking them through.

And in order to install this, you have to visit their GitHub. Just scroll down over here, and you want to copy this install command. And then we can just

install command. And then we can just write install this skill, paste it in here, and the install has been completed. So, what we can do is we

been completed. So, what we can do is we can just restart Codex. And then we can go over here and type Grill Me, and we can see that we have this Grill Me skill. And so, what I can say is I grill

skill. And so, what I can say is I grill me about an idea that I have regarding a local app that I want to build to help me organize my folders. And then we get the first question of the interview,

what is the app's primary job? And then

we can just like copy this, paste this in here. These are the suggestions that

in here. These are the suggestions that it gave me. And then second question, what kind of files or folders are we organizing first? And then question

organizing first? And then question three, almost instantly later, what should the app optimize for when deciding where things go? And then you can go on and on

things go? And then you can go on and on with the questions until you want to stop and you can just say like, "Let's stop. Just give me a prompt based on

stop. Just give me a prompt based on what we have until now."

And it can give you that entire prompt that you can eventually then use in the chat instead of just having to start with one simple prompt and then using using high reasoning to eventually get what you want after several prompts if

that makes sense. Now, the next skill that I want to talk about, which is not really a skill, it's more of like a native/command inside of Codex is goal. And you

basically give Codex a goal to follow.

So, use goal when a task needs Codex to keep working across turns toward a verifiable stopping condition. And I

found a tweet the other day by Pietro Schirano, who is like one of my favorite design engineers, and he wrote this, "Use Codex goal to create a skill based on your quest and test and validate the

skill, grade it, and keep improving it in a loop until it meets a target threshold. And then share the skill on

threshold. And then share the skill on Twitter, monetize it, and repeat." So,

we can then, for example, type goal. We

can then write using the and then we can go {slash} skill creator, which basically is like another skill that allows us to create skills. Then we can say, "Use the skill creator to create a

skill that allows me to drop a URL." And

then the agent gives a critique against the design standards. So, we can go ahead and submit this. And then once this prompt is sent, we can see sent as a goal. And going back to this page, you

a goal. And going back to this page, you can also see that we have different commands that we can eventually give to the agent, for example, like goal pause, goal resume, or goal clear when you want to like completely clear that goal. And

then basically we get this new skill called critique URL design. I can then go ahead and type this in here. We have

critique URL design, and I can give it some type of URL like, let's say stripe.com. And then we get our

stripe.com. And then we get our critique. It says it does the the is

critique. It says it does the the is actually really good, which it is.

Um but it says the critique is less about taste and more about a few places where the polish is so highly visual highly visually that accessibility and clarity lag behind it. So, we have a few

points in different paragraphs. We have,

you know, a little section of what works, next actions. Now, what we can do again is we can again type goal and clear. And then we can basically rewrite

clear. And then we can basically rewrite our goal, say like complete an iterative improvement of the website audit skill so it can reach or it can review each section of the website being reviewed and grade it

between a 0 to 100 based on taste, brevity, consistency, content prior prioritization. All right, now it says I

prioritization. All right, now it says I created and iterated the installed website audit skill here. So, I can just run this again. And then we can do stripe.com again. And now we basically

stripe.com again. And now we basically have our different sections. We have our section scorecard, header, taste, brevity consistency prioritization etc. etc. And we can then take the skill

and kind of run this one whenever we want in any of our Codex conversations.

All right, so the next skill that I want to show you guys is actually a pretty interesting one because we're going to be opening our our browser over here.

And I'm going to search for magicpath.ai.

magicpath.ai.

And you don't need a paid account for this. You can do this completely for

this. You can do this completely for free before you write anything in the comments below. And you want to create a

comments below. And you want to create a new design over here. And once you open this up, what you could do is you can click on connect agent. And this is like this skill command that you can

basically also paste into the chat. And

we can write install this skill and paste this in like that. And it says that magicpath has been installed. We

just have to restart Codex. And then we can just type like, "Can you see my current project?" All right, it says that yes, I can see your magicpath context. Current browser URL matches

context. Current browser URL matches project 11. So, what I'm going to do

project 11. So, what I'm going to do over here is I'm going to say build me a build me a a website that allows people to search for skills and read about them and then we can like type a little bit

more about the initial design style and it says that it's going to build us directly in the magic path project that I have open as a new canvas component.

And as you can see we have Codex kind of moving around over here. And so this canvas component over here is going to be called skill marketplace editorial.

All right, and we basically get our design and what's great about magic path is that we it's like this infinite canvas, right? We can move around move

canvas, right? We can move around move this around we can create more designs.

I can like duplicate this. I can select this and create like more variants in a different layout and create three of these and put them underneath and they start creating like that and they're all

connected to Codex. But what I can also do is I can go back to that skill that we just created which we called website audit and then once we click this component, we have this like little

preview button which basically opens like the preview of this design. We can

copy this URL and paste it over here.

And by the way, while we wait for this, we also see that our different variants start getting generated. And so we start to get our score. We actually get an 82 out of 100. So we have the header, we

have the hero, the search and filters, skill results list, skill detail panel.

And it gives us these like different suggestions as to what to fix. And then

we can just select this component and we can type something like apply these fix suggestions to the current component in magic path. And now it says that it

has been updated and this is the before and this is the after the update and it doesn't look like much. You can see that there's a few details like with this little shadow or with this like little

um you know black left outline on the left side. Um but you can see read skill

left side. Um but you can see read skill now opens, compare now adds and removes skills. So if I were to for example

skills. So if I were to for example click on this, nothing happens. But now

in the new version, I can compare different skills for example by selecting them. you can see that one is

selecting them. you can see that one is selected, website audit, and I can remove that. I can close this read

remove that. I can close this read skill, open it up. We also have the search now has a real empty state, so if I for example were to search something and nothing shows up, it's just empty.

But over here, if I search something it says no skills no skill matches this search yet. So

it's made like these minor UX details, basically like these UX enhancements that my skills suggested. But now going to another skill by Jacob Krehl, I've

mentioned this in my YouTube channel once, I think. It's called make interfaces feel better, and we can copy this and again install this skill, and then again restart CodeX to pick up the

new skill, and then we can basically duplicate this after.

And then we can just say to, you know, build the selected component and run it on a local host. All right, and once that's done, we basically have this running in the local host, and I can just click on this link, and we can see

our project built over here. And then

what I can say is I can say like, "Hey, slash make interfaces feel better. Use

this skill to improve the design and then upload or update to the same port."

And before we open this up, we can see the before and after. So headings could wrap awkwardly or clip on narrow screens. So added balance wrapping for

screens. So added balance wrapping for major headings and tuned mobile headline scale. And so this is for typography,

scale. And so this is for typography, but we also have for services, for interaction as well, for for performance even. And basically what this does is

even. And basically what this does is that it it polishes the entire site, right? Um as you can see, this header

right? Um as you can see, this header text is smaller, we have this max width of a of like around 1,000 or 1,200 pixels for the width of the content of

the site. These buttons seem to be

the site. These buttons seem to be rounded now, as well as down here. So as

you can see, this is how it looked like before, and this isn't how it looks like afterwards. And overall, it just looks

afterwards. And overall, it just looks much tidier, I'd say. And last but not least is this impeccable skill. So, I

can go ahead and click on get started and I'm just going to install this skill and just write like install this skill.

And I have a great video about this um skill in my channel. I'll link it down below. But basically, you have 23

below. But basically, you have 23 different commands that are part of this one skill. And you can, for example,

one skill. And you can, for example, have audit, you can have critique as well. There's more of refinements like

well. There's more of refinements like animation or to make or or for layout or for colorize. Now, I, for example, to

for colorize. Now, I, for example, to choose the impeccable animate. And so,

I'm going to just going to write impeccable and then animate the navbar and hero section. And so, once that's done, we can kind of see how that animates the navbar and the hero

section. We can also look into things

section. We can also look into things like polish, which is the meticulous final pass between good and great. And

so, we can again just write impeccable, click on enter, and polish the page. And

what's also cool about impeccable is that they also have a Chrome extension that you can just run and it'll scan the page for anti-patterns, which are basically like common things that like a

vibe-coded website would have like, you know, a purple and pink gradient, gradient text, an AI color palette. All

right. And basically, what that what that's done is that it polished my site a little bit. So, in the skill marketplace editorial, which is down here,

we have a broader search indexing, accessible press, and expanded state, required submit fields, and an inline success state. So, I can maybe, for

success state. So, I can maybe, for example like click on this and we have different types of button states. I can see also with the filters that we have like this

nice little um motion for these for these buttons as I hover over them and also up here in the navbar. But then, we can also like

the navbar. But then, we can also like use impeccable to kind of redesign the page. So, we can do like {slash}

page. So, we can do like {slash} impeccable build me a pricing page or redo this hero section. So, I'm just going to write Impeccable, redesign this page. And basically, what that gives us

page. And basically, what that gives us is like a new kind of look. You get

something like this, which is pretty interesting. It has this new sticky

interesting. It has this new sticky scroll effect on the on the uh right side. We have this nice little shadow

side. We have this nice little shadow for the different buttons over here. And

step-by-step, we kind of went a long way from this first initial design to get something like this. But anyways, guys, that's pretty much it for today. Hope

you enjoyed today's workflow. And if you have any comments or questions, please let me know down in the comments below.

And guys, like always, thank you all so much for watching. Hope to see you next time. Goodbye.

time. Goodbye.