Build a Module Standardization Agent with Claude Code Skills

Introduction

AI helps us to reduce the time costs of development. Even though the code generation is extremely fast, we still need to take time to review and standardize the generated code (For the code review agent introduction, refer to this article).

Regarding the unpredictable behaviors of AI, standardizing the generated code is helpful to improve the readability.

• Move duplicated code to public folders (e.g., utilities, styles, constants, hooks, etc)
• Replace hardcoded colors and constants
• Tokenize stylesheets (for antd)
• Translate hardcoded texts (for react-i18next)
• Update comments for newly generated files
• … and so on

This article aims to introduce the concept of building a module standardization agent — one piece of automating the development workflow. It won’t reveal the implementation detail of the skills.

Agenda

• Development Workflow
• Example File Structure
• Example Agent

Development Workflow

The following diagram is a rough workflow for a single module development in our team. After standardizing the code by the AI agent (new stage 2), the quality of the generated code can be improved before moving to the next stage.

The purple to-do list is the responsibility of the standardizing agent. Each item corresponds to a skill. Our team uses React, antd, react-i18next so the skills should be customized to those specific libraries.

The different teams have their own technical stacks, so the implementation of the agent and the skills should be based on it.

Example File Structure

For the agents and skills implementations, we can use Claude to make a draft then improving them with [skill-creator](https://medium.com/a-layman/create-agent-skills-for-code-review-9dc76b104b7d#b221).

All agent files and skill files should be placed in the .claude folder.

.claude/
├── agents/
│   └── standardize-module.md
└── skills/
    ├── extract-color-tokens/
    │   └── SKILL.md
    ├── extract-constants/
    │   └── SKILL.md
    ├── tokenize-stylesheet/
    │   └── SKILL.md
    ├── extract-utils/
    │   └── SKILL.md
    ├── localize-strings/
    │   └── SKILL.md
    ├── split-components/
    │   └── SKILL.md
    ├── extract-domain-types/
    │   └── SKILL.md
    ├── component-library-integration/
    │   └── SKILL.md
    ├── document-declarations/
    │   └── SKILL.md
    ├── verify-no-behavior-change/
    │   └── SKILL.md
    └── standardization-report/
        └── SKILL.md

Example Agent

This agent is an orchestrator for module standardized refactoring; it manages the pipeline and checkpoints each small task. So it’s fine to stop and resume the pipeline.

The purpose of this pipeline is to standardize the module, not add new features. So we have to verify the module to ensure that it’s behavior-equivalent after each small task.

• standardize-module.md

[embed]

Summary

Thanks for your patient. I am Sean. I work as a software engineer.

This article is my note. Please feel free to give me advice if any mistakes. I am looking forward to your feedback.

• Subscribe me

[embed]Join Medium with my referral link — Jen-Hsuan Hsieh (Sean) As a Medium member, a portion of your membership fee goes to writers you read, and you get full access to every story…medium.com

• Recommended places for digital nomads

[embed]A Layman Emoji cafe is founded by the Taiwan Digital Nomad Association (TDNA) on 2023. Sometimes I like to worked for my side…seanhs.blogspot.com

• The Daily Learning website

[embed]Search Articles for Web Development | ALayman Daily Learning ALayman Daily learning provides articles, challenges, or videos to people who are also self-learner for programming.www.alayman.io