1 Hour to 3 Minutes: Frontend Automation with Claude Code

Every technical team eventually faces an inevitable tension:

Which tasks should be executed manually and which can be safely delegated to an AI?

We —my team— are answering this question. In this article, I'll share the entire process.

Let's start with a clear example: automating AVO events.

For this, we've used a very special AI tool: Claude Code.

But let me tell you the whole story.

Claude Code: Much More Than Autocomplete

Important: Claude Code is just one example of an agent that lives in the terminal. There are other options, you just need to look for them. The key point is that nothing you'll learn here is exclusive to Claude Code.

Claude Code isn't another copilot inside your editor.

It's a tool designed to automate technical tasks through structured prompts, executed from the terminal.

It functions as a command-line tool capable of:

• Reading an entire project.
• Maintaining context between sessions.
• Integrating into real workflows (CI/CD, scripts, terminal).
• Sharing versioned commands with the team.
• Among many other things.

Why Do I Think It's a Great Option?

In the three weeks I've been working with Claude Code, I must say I'm impressed.

Claude is more or less accepted as the best model for programming. Now, being able to use it from the terminal takes it to another level.

These are the aspects that stand out for me, but I recommend you check out its documentation.

Makes Decisions and Executes: From Copilot to Operational Agent

Many AI tools for development stay at the suggestion layer.

Claude Code goes one step further: it takes direct action.

It doesn't just complete code. It edits files, executes commands, creates branches, performs commits, generates PRs.

This makes it an operational tool, not just an assistant.

If you need to go beyond your local repository/project, Claude can integrate with your real work system through MCP (Multi-Context Prompting).

This allows it to access:

• Documentation in Google Drive.
• Tickets in Jira.
• Distributed repositories or monorepos.
• Internal development tools.

Lives in the Terminal: Our Common Language

Claude Code doesn't depend on the development environment.

It works the same whether you work with code editors like Visual Studio Code, IDEs like WebStorm, or skip GUIs with VIM/NeoVIM (in fact, it has VIM mode ❤️).

One of the most widespread errors in AI tool design is assuming all web professionals share the same editor.

That's not true. But there is a real convergence point: the terminal.

The terminal is the only truly common language among developers.

That's why Claude Code runs there, without a graphical environment, without plugins (although it has them, if that's what you want), without lock-in. Just text, context, and commands.

$claude "analyze GraphQL query structure"
$claude "generate integration tests for Auth module"
$claude "refactor Vue components in src/components"

This approach makes it a portable, interoperable, and useful tool for any technical profile, regardless of their stack or editor preferences.

Applied Unix Philosophy: Claude Code is Part of the System, Not an Assistant

Claude Code isn't designed to accompany you while writing code line by line.

It's designed to compose with your system, like any tool based on Unix principles: standard input and output, piping, small commands that do one thing and do it well.

It's not a plugin. It's a piece of the operating system.

# Detect changes in translation files and create a PR with newly translated strings
git diff main...HEAD -- src/i18n | claude -p "Detect new English strings and generate a PR with their Spanish translations for review"

# Monitor the development console log and notify if a new error pattern is detected
tail -f logs/dev-console.log | claude -p "Notify me if a new error pattern appears in this log stream"

# Analyze Vue components and identify missing unit tests
find src/components -name '*.vue' | claude -p "For each file, check if a corresponding unit test exists and suggest missing test cases"

Claude Code doesn't try to guess what you mean. It executes exactly what you ask for, with precision, without assuming your context or depending on your editor.

This —for me— makes it a more real tool, not a prosthesis.

Delegating Tasks to Claude Code

Claude Code can handle tasks that combine analysis, transformation, and execution: it not only generates code but executes it, leaves traceability, and integrates it into your workflow.

Feature Construction from Descriptions

• Claude generates the structure, updates components, creates tests, and proposes a complete PR.

Error Debugging

• Claude analyzes the code, locates the failure, applies the fix, and validates with tests or usage examples.

Navigation Through Complex Projects

• Claude reads the complete structure, identifies dependencies, documents flows, and guides you with precision (for me this is revolutionary).

Repetitive Task Automation

• Claude edits, formats, creates commits, and keeps the history clean, executing everything from your terminal (what we're doing here).

Advanced Operations via MCP

• If your flow involves external documentation, ticket management, or design resources, MCP (Multi‑Context Prompting) expands capabilities:
  • Reads Google Docs with UI specifications and applies those decisions in code
  • Updates Jira tickets with status and links to PR
  • Interacts with internal tools: Storybook, custom migrators, CI/CD workflows

The Ideal Test (AVO Case)

We started with the implementation of tracking events —like AVO ones.

It seems, at first glance, like a routine task. But it actually combines multiple steps with technical dependencies, cross-validation, and repeatability.

When dealing with several events and/or the target system is unknown, the human time invested grows exponentially.

The solution? Design a reusable command, shared across the entire team, and backed by an AI capable of understanding the complete project context.

Reusable Commands: .claude/commands/

In my opinion, the real power of Claude Code lies in the ability to define custom commands versioned alongside the project.

For the described case (AVO), we created a command called implement-avo-event, which encapsulates all the necessary steps to add an AVO event.

Commands are actually prompts where you must provide all the necessary context for the agent to do its job optimally and avoid hallucinations.

To add a command, just create a Markdown file in your project's .claude directory (you can version it and share the command with the rest of the team).

File PROJECT_DIR/.claude/commands/implement-avo-event.md

1. Ask me for clarification regarding ANY step.
2. If I don't provide #$ARGUMENTS, ask me, independently, for EVENT_NAME, BRANCH_NAME, AVO_BRANCH_NAME and comma-separated FILES_TO_APPLY the event.
3. If I do, parse the space-separated arguments from #$ARGUMENTS.
4. Extract: EVENT_NAME, BRANCH_NAME, AVO_BRANCH_NAME and comma-separated FILES_TO_APPLY to apply the event.
5. Before starting, make sure the event and the file/s exists.
6. Create and checkout a new GIT branch named [BRANCH_NAME].
7. Checkout AVO branch using: `avo:checkout [AVO_BRANCH_NAME]`.
8. Read `@avo-types/events.ts` for [EVENT_NAME] definition.
9. Add the event to `src/tracking/events.ts`, following the file pattern.
10. Check the `EventTracker` class located in `src/tracking/tracker.ts` for context.
11. Implement the new event in specified [FILES_TO_APPLY].
12. Generate essential unit tests (make sure you are not breaking existing ones).
13. Create a basic GitHub PR detailing, in a to-do list fashion, what you have done. Follow conventional commits.

As you can see, we have access to $ARGUMENTS to customize the command and make it even more versatile. It's how Claude understands what I mean by EVENT_NAME, BRANCH_NAME, AVO_BRANCH_NAME, and FILES_TO_APPLY.

Using the Command

$claude /implement-avo-event PurchaseCompleted feature/purchase avo/purchase src/checkout.ts,src/analytics.ts

What Does It Do?

If you've created a good prompt/command, just reading it will be enough to understand how it works:

• Reads existing definitions.
• Asks the appropriate questions to get all the context.
• Examines the codebase.
• Incorporates the new event from AVO.
• Implements the correct pattern.
• Adds tests.
• Generates a PR with detailed description and checklist .

You're Still in Control

Claude starts working when it has all the necessary context. When it does, by default, it will propose what it wants to do and you'll have to validate it.

Once this phase is passed, you can tell it to do it on its own, further reducing the time needed to perform the action.

It's Much More Than a Command

Something that can go unnoticed but is vital to understand is that this is much more than a command:

You're not activating an inert process. You're communicating with an AI entity that can respond to you.

This completely changes the perspective, as each session can be radically different from the previous one, allowing you to focus your efforts on solving a problem instead of writing boilerplate.

The Result

After implementing the command, the results are promising. Most events are included (with validations and incorporation) in a matter of minutes. If dealing with a more abstract context, Claude may require more "hand-holding," but you're still automating most of the process.

Let me summarize:

Before

1. Data team defines the AVO event.
2. Developer receives the definition.
3. Implements the event "by hand".
4. Writes the tests.
5. Validates the entire flow.
6. Creates a pull request.

Now

1. Data team defines the AVO event.
2. Developer receives the definition.
3. Developer executes a command that handles steps 3, 4, 5, and 6.

Difference

• Before: 1–3 hours per event.
• Now: less than 5 minutes.
• Gain: time, context, consistency.

Moreover, the difference isn't just technical. It's about context. Many details of the AVO system aren't formally documented. The validation cost is high and difficult to estimate without automation.

What Does It Really Cost?

One of the most frequent questions about AI tools is operational cost. It's understandable: enterprise solutions often have opaque pricing, and individual development tools don't always scale well to teams.

Claude Code operates with a transparent pricing model based on processed tokens. Below, I show you the real cost breakdown for our specific use case, without inflated estimates or ideal scenarios.

Per Command Executed:

Profitability Comparison:

In Practice:

• 10 events per sprint = $1.00 in tokens
• Time savings = 20-30 hours

The bottleneck isn't money. It's time to value and the learning curve.

Real Benefits

What Works Especially Well

• Generated code quality.
• Structure recognition.
• Immediate adoption.
• Automated documentation.
• Continuous integration.

Current Limitations

• Limited context in really large projects.
• Token cost, if abused or necessary context isn't provided.
• Non-deterministic results (require review).

Conclusion

Claude Code is a tool that can integrate with your real workflow and transform processes that were previously inefficient, tedious, or prone to human error.

Instead of just generating code, Claude operates. It makes decisions, edits, executes, validates. And it does so from the universal language that every technical team shares: the terminal.

But don't be confused: this doesn't mean you can delegate everything.

• If a task is repeatable, contextual, and pattern-based: it can be delegated.
• If a task requires judgment, validation, or critical decision-making: it must be reviewed.
• If a task requires creativity or deep criteria: it can't be delegated, yet. But you can automate the remaining 80%.

And most importantly: you maintain control. It's not about disconnecting from the process, but elevating the point where you add value.

Main Takeaways

• Claude Code is an operational agent, not a passive copilot. It takes real action.
• Lives in the terminal, not in your editor. Portability and total control.
• Integrates with your real work system (CI/CD, Jira, GDocs) via MCP.
• You can define versioned commands that encapsulate advanced prompts.
• Automates real tasks: event integration, tests, refactoring, PRs.
• Saves hours per task. Literally.
• Costs pennies. The bottleneck no longer has to be money, but willingness.