Category: The Art of Vibe Coding

You’ve built the perfect authentication system.

It took months. Every edge case handled. Every security hole plugged. Production-tested across three different apps.

And now you’re starting project number four.

Time to rebuild it. Again. From scratch.

Because that’s how AI works, right? It gives you a solution, not your solution.

Wrong.

Last week, I showed you how Claude Skills changed everything – letting you replicate YOUR exact patterns across every project.

Today, I’m going to show you exactly how to create your own Claude Skills.

By the end of this article, you’ll know how to turn any feature into a reusable skill that Claude Code can deploy perfectly every time.

.

.

.

The Secret: It’s Not About Code, It’s About Documentation

Here’s what most developers get wrong about Claude Skills.

They think it’s about copying code files. Dumping your lib/auth folder into a skill and calling it done.

That’s not how it works.

Claude Skills aren’t code repositories.

They’re implementation guides that teach Claude your specific patterns, your architecture decisions, your way of solving problems.

And the key to creating a powerful skill?

Comprehensive documentation that captures not just WHAT your code does, but HOW and WHY it works.

Let me show you exactly how I turned my authentication system into the Claude Skill I demonstrated in Part 1.

.

.

.

Step 1: Let GPT-5 Document Your Implementation (10 Minutes)

This is counterintuitive, but stay with me.

I don’t use Claude to document my Claude Skills. I use GPT-5.

Why? Because GPT-5 is meticulous. It’s the senior architect who notices every pattern, every decision, every subtle implementation detail.

Here’s my exact process:

I give GPT-5 this prompt:

I want to update the authentication implementation docs at 
#file:authentication.md to match the current implementation of authentication for 
this app.

Read the codebase, analyze how this app implemented the authentication, then 
update the docs.

Ask me clarifying questions until you are 95% confident you can complete this task 
successfully.

a. If the question is about choosing different options, please provide me with a list 
of options to choose from. Mark the option with a clear label, like a, b, c, etc.
b. If the question need custom input that is not in the list of options, please ask me 
to provide the custom input.

Always mark each question with a number, like 1/, 2/, 3/, etc. so that I can easily 
refer to the question number when I answer.

For each question, add your recommendation (with reason why) below each 
options. This would help me in making a better decision.

Notice the key elements:

• 95% confidence threshold (forces thoroughness)
• Structured question format (speeds up the process)
• Recommendations included (leverages GPT-5’s analysis)

Watch as GPT-5 systematically explores:

• Authentication routes (/app/api/auth/**)
• Library files (auth.ts, jwt.ts, rate-limit.ts)
• Middleware implementation
• Database schema
• Environment variables

GPT-5 asks targeted questions:

I answer with just the option letters.

No lengthy explanations needed. GPT-5 already understands my intent.

The result?

A complete authentication implementation guide covering:

• System architecture
• Security measures (CSRF, rate limiting, audit logging)
• Database schema with relationships
• API endpoints with exact paths
• JWT token strategy with sessionVersion
• Environment variables with defaults
• Migration checklist for new projects

302 lines of detailed documentation. Every decision documented. Every pattern explained.

Time spent: 10 minutes.

.

.

.

Step 2: Create ASCII Wireframes for the UX Flow (5 Minutes)

Here’s where most skill creators stop. They have the backend documentation.

But Claude Skills need to understand the FULL implementation – including the UI.

This is where ASCII Wireframes become your secret weapon.

I ask GPT-5:

Why ASCII instead of HTML mockups?

HTML mockup for login page: ~500 lines, ~15,000 tokens ASCII wireframe for login page: ~50 lines, ~1,500 tokens

Same information. 90% less tokens.

GPT-5 creates wireframes for every screen:

Every interaction mapped. Every flow documented. Claude will know EXACTLY what UI to build.

Total documentation time: 15 minutes.

.

.

.

Step 3: Transform Documentation Into a Claude Skill (5 Minutes)

Now we have comprehensive documentation and wireframes. Time to turn them into a Claude Skill.

First, you need the skill-creator skill itself. Get it from Anthropic’s skills repository.

My project structure:

.claude/
  skills/
    skill-creator/     # The skill that creates skills
notes/
  authentication.md            # Our documentation
  authentication_wireframes.md # Our wireframes

Start a new Claude Code session and ask:

Claude shows the available skills:

Now the magic moment:

Please use the skill-creator skill to create a new skill with the skill-creator that shows 
how to set up authentication exactly like this app does. Please refer to the documentation 
@.notes/authentication.md and wireframes @.notes/authentication_wireframes.md.

Watch as Claude:

1. Reads the skill-creator instructions
2. Explores your authentication codebase
3. Analyzes your documentation
4. Studies the wireframes

It’s not just copying files.

It’s understanding your implementation and transforming it into teachable instructions.

Claude creates a complete skill structure:

authentication-setup/
  ├── SKILL.md                    # Main skill instructions
  ├── scripts/                    # Initialization scripts
  ├── references/                 # Your documentation
  │   ├── database_schema.md      # Prisma schema reference
  │   ├── environment_variables.md # Required env vars
  │   ├── dependencies.md         # NPM packages needed
  │   └── implementation_guide.md # Step-by-step guide
  └── assets/                     # Templates and examples
      └── migration_checklist.md  # Deployment checklist

Key insight: The skill doesn’t contain your actual code files. It contains instructions for recreating your patterns.

Claude packages everything into authentication-setup.zip:

Time to create skill: 5 minutes.

.

.

.

Step 4: Deploy Your Skill to Another Project (2 Minutes)

This is where the payoff happens.

Take your authentication-setup.zip and extract it to any project:

new-project/
  .claude/
    skills/
      authentication-setup/  # Your skill goes here

Start Claude Code in the new project. Type:

Claude immediately recognizes the skill:

Claude doesn’t just copy files. It:

• Analyzes your current project structure
• Adapts to your existing patterns
• Integrates with your current code
• Maintains your architectural decisions

Your exact authentication system. In a completely new project. In under 10 minutes.

.

.

.

The Power of Compound Knowledge

Think about what just happened.

You took months of refinement, every bug fix, every security improvement, every UX enhancement…

And packaged it into 20 minutes of documentation work.

Now that skill can be deployed to:

• Every new project you start
• Every team member’s workspace
• Every client implementation
• Every prototype that needs auth

The math is staggering:

1 skill × 10 projects = 10 hours saved 10 skills × 10 projects = 100 hours saved Your entire toolkit as skills = Career-changing productivity

But here’s what nobody talks about…

.

.

.

Why GPT-5 + Claude Skills Is The Ultimate Combo

Using GPT-5 to document for Claude Skills isn’t random. It’s strategic.

GPT-5’s superpower: Meticulous analysis and comprehensive documentation
Claude’s superpower: Following detailed instructions perfectly

When you combine them:

1. GPT-5 extracts every pattern and decision from your code
2. Claude Skills preserves that knowledge permanently
3. Claude Code implements it flawlessly every time

It’s like having a senior architect (GPT-5) document your best practices, then having infinite junior developers (Claude Code instances) who can implement those practices perfectly.

No knowledge loss.
No pattern drift.
No “I think I did it differently last time.”

.

.

.

Common Mistakes to Avoid

Mistake #1: Skipping the Documentation Phase

“I’ll just copy my code files into the skill.”

Wrong.

Skills need context, not just code.

Without documentation, Claude won’t understand your architectural decisions.

Mistake #2: Forgetting the UI Wireframes

Backend-only skills create Frankenstein features.

Same logic, completely different UI.

Always include wireframes.

Mistake #3: Not Testing in a Clean Project

Always test your skill in a fresh project.

That’s where you’ll discover missing dependencies or assumptions.

.

.

.

Your Skills Library Starts Today

Here’s your action plan:

1. Identify Your Most Reused Feature

What do you build in every project?

• Authentication system?
• Admin dashboard?
• Payment integration?
• File upload handling?

2. Document It With GPT-5 (15 minutes)

Use my exact prompt. Let GPT-5 extract every pattern.

3. Create ASCII Wireframes (5 minutes)

Map the UI flow. Every screen. Every interaction.

4. Generate The Skill (5 minutes)

Use skill-creator. Let Claude package your knowledge.

5. Test In a New Project

Deploy it. Use it. Refine it.

6. Repeat For Your Next Feature

Build your library one skill at a time.

.

.

.

The Compound Effect Nobody Sees Coming

Every skill you create makes the next project easier.

But here’s what really happens:

Month 1: You create 3 skills (auth, payments, dashboard) Month 2: You create 5 more (file upload, search, notifications…) Month 3: You realize you can build entire apps in hours

By month 6?

You’re not coding anymore. You’re orchestrating.

• “Use authentication-setup skill.”
• “Use payment-processing skill.”
• “Use admin-dashboard skill.”

Complete applications assembled from your battle-tested components.

Each implementation identical to your best work.

No quality degradation.
No pattern drift.
No forgotten edge cases.

This isn’t the future of development. It’s available right now.

.

.

.

Part 3 Preview: Teaching Claude Any Library

Next week, I’ll show you something even more powerful.

How to create Claude Skills that teach Claude to perfectly integrate ANY library or SDK into your apps.

Imagine:

• “Use the stripe-integration skill” → Your exact Stripe patterns
• “Use the websocket-setup skill” → Your real-time architecture
• “Use the testing-harness skill” → Your testing methodology

Not generic implementations. YOUR implementations.

But for now…

Open that project with your best authentication system.

Document it with GPT-5.

Turn it into a skill.

Watch as 10 minutes of work today saves you 10 hours next month.

What feature will you turn into a Claude Skill first?

Stop rebuilding.

Start packaging.

Now.

P.S. – Since creating my authentication-setup skill two weeks ago, I’ve deployed it to 6 different projects. Total time saved: 14 hours. Total consistency: 100%. Every deployment identical to my best implementation. That’s the power of turning your code into Claude Skills.

P.P.S. – The skill-creator skill itself is open source. You can find it at github.com/anthropics/skills. But the real magic? It’s in the skills YOU create from YOUR battle-tested code.

I used to dive straight into The Codex-Claude Code Workflow and watch it build features.

Sometimes it worked brilliantly.

Other times?

The implementation worked but looked nothing like what I imagined.

The problem wasn’t Claude Code.

It was me.

I was expecting it to read my mind about UI layout and catch its own bugs.

Then I added two things to my workflow:

ASCII wireframes and systematic code review.

Now?

97% of my features work perfectly on the first shot.

No back-and-forth debugging. No “that’s not quite right” moments. Just clean, working code that matches my vision.

Let me show you exactly how this works.

.

.

.

The Old Way Was Good. The New Way Is Magic.

Here’s what I used to do:

1. GPT-5 plans the feature
2. Claude Code implements it
3. Hope for the best

It worked.

Kind of.

But UI was always a gamble, and bugs only showed up during testing.

Here’s what I do now:

1. GPT-5 asks questions until it’s 95% confident
2. GPT-5 creates ASCII wireframes (visual blueprint, minimal tokens)
3. Claude Code implements (following both plan AND wireframes)
4. GPT-5 reviews the git diff (catches bugs before I even test)
5. Claude Code applies fixes (surgical corrections)

The difference?

Night and day.

.

.

.

Real Example: Building WordPress Collapsible Sections

My WordPress newsletter was getting unwieldy. Long code snippets and prompts made posts hard to read.

Readers had to scroll forever to get through everything.

I needed collapsible sections.

Click to expand when you want details, stay collapsed when you don’t.

Here’s how the new workflow handled it.

Step 1: Setting Up for Success

I hit GPT-5 with my requirements.

But here’s the critical part – I told it explicitly: “DON’T WRITE OR EDIT ANY FILES.”

Prompt:

__YOUR_INSTRUCTIONS_HERE__

Read the codebase, and help me come up with a plan to implement everything above.

Make sure to include a short description for this plan in paragrah format at the beginning of the plan.

IMPORTANT: DON'T WRITE OR EDIT ANY FILES.

Use web search if you need to find solutions to problems you encounter, or look for the latest documentation.

Ask me clarifying questions until you are 95% confident you can complete this task successfully.

a. If the question is about choosing different options, please provide me with a list of options to choose from. Mark the option with a clear label, like a, b, c, etc.
b. If the question need custom input that is not in the list of options, please ask me to provide the custom input.

Always mark each question with a number, like 1/, 2/, 3/, etc. so that I can easily refer to the question number when I answer.

For each question, add your recommendation (with reason why) below each options. This would help me in making a better decision.

And I added this game-changer: “Ask me clarifying questions until you are 95% confident you can complete this task successfully.”

Plus numbered questions with lettered options.

No typing paragraphs. Just “1/a, 2/c, 3/b”.

Done.

Step 2: GPT-5 Goes Detective Mode

GPT-5 immediately dove into my codebase:

Then came the questions.

Not random questions.

Strategic ones:

Look at those options:

• Where should content live? (Theme files, CPT, or plugin)
• How should expand/collapse work? (Native HTML, JS toggle, or hybrid)
• Content delivery? (Inline, lazy-load, or auto-switch)

Every question had options. With recommendations. With reasons.

This is what thinking looks like.

Step 3: Quick Answers, Deep Impact

I fired back my choices:

Fast. Decisive. No essays needed.

But GPT-5 wasn’t done:

More edge cases.

More decisions.

Every answer shaped the final implementation.

Step 4: The Plan Emerges

After gathering everything, GPT-5 delivered:

This wasn’t a vague outline.

It was a blueprint:

• Exact file structure
• CPT registration details
• Shortcode parameters
• REST endpoint specs
• Caching strategy
• Security measures

Everything. Decided. Documented.

The ASCII Wireframe Revolution

Here’s where things get interesting.

I asked GPT-5: “Based on this plan, give me the UX flow map and screen-by-screen content using ASCII wireframe.”

Prompt:

Based on this plan, give me the ux flow map and screen-by-screen content using the ASCII wireframe. Put it at @notes/wireframes.md.

What came next blew my mind:

The Power of ASCII Wireframes

Look at this beauty:

This isn’t just a sketch.

It’s a contract.

Claude Code sees this and knows EXACTLY what to build.

No interpretation. No guesswork. Just pure clarity.

Why ASCII beats everything else:

• 10x fewer tokens than HTML
• Zero ambiguity
• Instant understanding
• Easy to modify
• Works in any terminal

Step 5: Claude Code Takes the Wheel

Armed with the plan AND wireframes, I unleashed Claude Code (Sonnet 4.5):

Watch what happened:

Claude didn’t hesitate. Didn’t guess. It knew exactly what to build because the wireframes showed it.

Implementation complete. First try.

Step 6: The code review That Catches Everything

This is where most devs stop.

Not me.

I fired up Codex CLI’s code review feature:

Prompt:

Please read the git diff, and review the code changes to see if the implementation is correct and follows the plan @notes/plan.md and wireframes @notes/wireframes.md, correctly.

GPT-5 went full detective:

Found issues? You bet:

• P1: Missing lazy-mode fallback for non-JS users
• P1: Copy button behavior was wrong
• P2: Preview line count didn’t match CSS
• Security improvements needed

These weren’t “nice to have” fixes. These were bugs waiting to happen.

Step 7: Surgical Fixes

I handed GPT-5’s review to Claude Code:

Claude applied every fix.

No arguments. No confusion. Just clean corrections.

The End Result: From Concept to Production

Here’s what we built. In one shot. With this workflow.

The WordPress Admin Experience

Clean integration into WordPress admin. “Longform Sections” sits right where it should, right below Pages.

Look at that meta box on the right. Copy shortcode with one click. Multiple usage examples. All the parameters documented right there.

Every attribute explained:

• id – Post ID (required)
• title – Custom title or defaults to post title
• lines – Preview line count (default 6)
• mode – smart|inline|lazy
• expand_text / collapse_text – Customizable labels
• deep_link – Enable direct linking to sections
• copy_button – Show copy button for code

No documentation needed. It’s self-explanatory.

The Frontend Magic

This is what readers see. Clean. Collapsed. A bash script preview with “Show more” button ready.

The “Next Worktrees Manager” section shows just enough code to give context. The fade-out effect tells readers there’s more. One click to reveal everything.

Clean.

Collapsed.

A bash script preview with “Show more” button ready.

Click “Show more” and boom – the full script appears.

.

.

.

Why This Workflow Changes Everything

97% Success Rate Isn’t Luck

It’s the result of:

• Clear communication through wireframes
• Systematic planning with questions
• Meticulous review before testing
• Surgical corrections based on feedback

You don’t get 97% success by luck.

You get it by design.

That’s how “good enough” becomes “ships perfectly.”

.

.

.

Your Turn to Level Up

Stop settling for “close enough” implementations.

Stop debugging for hours.

Stop the back-and-forth madness.

Here’s your action plan:

1. Tonight: Save the workflow prompts
2. Tomorrow: Try it on one small feature
3. This week: Build something complex
4. Next month: Wonder how you ever worked differently

.

.

.

The Bottom Line

I built a production-ready WordPress feature in less than 20 minutes.

Not a prototype. Not “mostly working.” Production-ready.

97% of my features now ship on the first try.

The 3% that don’t? External dependencies. Environment issues. Things no AI can predict.

This workflow transform you from someone who “uses AI to code” to someone who orchestrates AI to build exactly what I envision.

ASCII wireframes + systematic planning + code review = development superpowers.

What will you build when implementation matches imagination perfectly?

P.S. – This workflow needs GPT-5 (via Codex CLI) for planning/review and Claude Code (Sonnet 4.5) for implementation. Together, they’re unstoppable. Apart, they’re just good. Choose wisely.

Everyone’s asking “Claude Code vs Codex – which one should I use?”

You’re asking the wrong question.

After tons of testing Claude Code vs Codex head-to-head, I discovered something game-changing: they’re not competitors, they’re the perfect team.

• Claude Code builds brilliantly,
• Codex reviews meticulously, and
• Together they create code that’s both powerful and bulletproof.

Let me show you exactly how this works with a real example from my WordPress theme.

.

.

.

Claude Code vs Codex: The Problem With Choosing Just One

Codex (GPT-5 High) Alone: Minimal to a Fault

Ask Codex to build something from scratch, and you’ll get code that works… technically.

But it’s like asking for a house and getting a tent.

Sure, it provides shelter, but is that really what you wanted?

In the Claude Code vs Codex comparison, Codex’s minimalism means:

• Basic functionality only
• No edge case handling
• Missing quality-of-life features
• Requires significant enhancement

Claude Code Alone: The Over-Engineering Trap

Claude Code (especially Opus 4.1) goes the opposite direction.

Ask for a simple feature, and it builds you a spacecraft.

The code becomes so complex that even Claude loses track of what it created.

The over-engineering pattern:

• Abstract factories for simple functions
• Unnecessary design patterns
• 20 files when 3 would suffice
• Complexity that breeds bugs

.

.

.

Claude Code vs Codex: The Solution is Both

After extensive testing of Claude Code vs Codex in production environments, here’s the breakthrough: Use Claude Code to build, then Codex to review.

When comparing Claude Code vs Codex strengths:

Claude Code excels at:

• Understanding requirements
• Creating comprehensive implementations
• Handling complex integrations
• Building from scratch

GPT-5 (Codex) excels at:

• Finding security vulnerabilities
• Catching inconsistencies
• Identifying missing edge cases
• Suggesting surgical improvements

Together, they’re unstoppable.

.

.

.

Real-World Example: Claude Code + Codex in Action

Let me walk you through exactly how Claude Code + Codex work together on a real feature – adding a newsletter subscription shortcode to my WordPress theme.

Phase 1: Claude Code Implementation

I asked Claude Code to do two things:

1. Create a newsletter subscribe form shortcode
2. Add a guide tab in the theme options to show users how to use this shortcode

Here’s my original prompt:

Claude Code immediately understood the context and used a sub-agent to explore the codebase:

After investigation, Claude successfully implemented both the shortcode and the guide tab:

The initial implementation included:

• ✅ Newsletter subscribe form shortcode
• ✅ Guide tab added to Theme Options
• ✅ Advanced template system with 6 visual styles
• ✅ Comprehensive documentation for users
• ✅ Integration features with FluentCRM
• ✅ Best practices and placement recommendations

Phase 2: Codex Review

This is where the magic happens.

I took Claude Code’s implementation and gave it to Codex for review:

My exact prompt to Codex was simple: “Read the git diff and analyze if the implementation is correct. Attached is how the subscribe form looks like.”

Codex immediately went into detective mode:

Codex immediately went into detective mode, analyzing every aspect:

The Meticulous Review Results

After thorough analysis, Codex identified several critical issues that Claude Code missed:

What Codex Found:

1. Security Gap: The shortcode form lacked nonce and honeypot protection
   • No wp_nonce_field in the shortcode form
   • Template had security features, but shortcode didn’t use them
2. Integration Issues:
   • Shortcode posted to wrong endpoint
   • AJAX handler expected different parameters
   • JS selector wouldn’t catch all form variants
3. Documentation Mismatches:
   • PHP usage example was incorrect
   • Guide showed wrong template path syntax
   • Style parameter documentation was misleading
4. Small but Important Details:
   • Footer template had a stray “◆” character instead of proper close icon
   • Hidden context field missing for non-JS submissions

Phase 3: Applying the Fixes (With a Twist)

Here’s where I made an interesting choice.

Instead of taking Codex’s recommendations back to Claude Code, I asked Codex itself to apply the fixes:

Why did I choose Codex over Claude Code for the fixes?

I wanted to test if Codex could handle implementation as well as review.

Spoiler: it absolutely can.

Codex methodically applied each improvement:

Note: You could absolutely ask Claude Code to apply these fixes instead. Both approaches work. The choice depends on your workflow preference and which tool already has the most context about your specific requirements.

The Final Result

The difference was night and day:

Before Codex Review:

After Codex Review:

The final implementation now included:

• ✅ Full security with nonce + honeypot
• ✅ Proper AJAX/REST integration
• ✅ Consistent styling across all contexts
• ✅ Accurate documentation
• ✅ Clean UI with proper icons
• ✅ Hidden context field for fallback

.

.

.

The Workflow That Changes Everything

Here’s my exact process:

Step 1: Initial Implementation with Claude Code

"Build [feature] following our project rules"

Let Claude Code do what it does best – create comprehensive implementations.

Step 2: Export for Review

Generate a git diff or summary of changes. Include:

• The implementation code
• Any UI screenshots
• The intended functionality

Step 3: Codex Review

"Review this implementation for security, consistency, and correctness.
Attached is [git diff/code/screenshots]"

Watch as Codex finds issues you never would have caught.

Step 4: Apply Improvements (Two Options)

Option A: Ask Claude Code to apply the fixes

"Apply these recommended fixes: [Codex's feedback]"

Claude Code implements the improvements with full context of the original implementation.

Option B: Ask Codex to apply the fixes directly

"Yes, please apply all the fixes"

Codex can handle both review AND implementation – as I demonstrated in this example.

Both approaches work.

Choose based on:

• Which tool has more context about your requirements
• Your comfort level with each tool
• The complexity of the fixes needed

.

.

.

Why Claude Code & Codex Together Works So Well

Complementary Strengths

The Claude Code vs Codex combination leverages what each does best:

Claude Code brings:

• Creative problem-solving
• Comprehensive implementations
• Deep context understanding
• Rapid development

Codex brings:

• Meticulous attention to detail
• Security vulnerability detection
• Consistency checking
• Edge case identification

.

.

.

Pro Tips for Maximum Effectiveness

1. Let Claude Code Explorer First

Always use Claude Code’s codebase-explorer agent for initial investigation.

It understands context better than starting fresh.

2. Be Specific with Codex

Don’t just say “review this.” Say:

• “Check for security vulnerabilities”
• “Verify integration points”
• “Validate documentation accuracy”

3. Screenshot Everything

Visual proof helps both AIs understand what you’re building.

4. Don’t Skip the Review

Even if Claude Code’s implementation seems perfect, run it through Codex.

Those “small” issues compound into big problems.

5. Keep the Feedback Loop Tight

Apply fixes immediately while context is fresh.

Don’t let reviews pile up.

.

.

.

The Bottom Line: Claude Code vs Codex is the Wrong Question

Stop treating Claude Code vs Codex as an either/or decision.

Start using them as collaborators.

The Claude Code vs Codex debate misses the point entirely.

They’re not competitors fighting for your attention – they’re complementary tools that achieve greatness together.

Claude Code is your brilliant architect who designs and builds. Codex is your meticulous inspector who ensures everything is perfect.

Together, they don’t just write code – they craft production-ready solutions that are secure, consistent, and maintainable.

My newsletter shortcode went from “it works” to “it’s bulletproof” in one review cycle.

That’s the power of using the right tool for the right job.

Your next feature deserves both the creativity of Claude Code and the precision of Codex. Why settle for less?

P.S. – This workflow has become so essential that I now budget time for both implementation and review in every feature. The 30 minutes spent on review saves hours of debugging later. Try it on your next feature and see the difference.