ClassName Refactor

Task Objectives

• This Skill is used to: check and convert template strings of the

  className

  attribute in code to

  cn

  function calls
• Capabilities include: recursive folder scanning, detailed location reporting, batch conversion, result summary
• Trigger condition: user uploads files/folders and requests to check/convert className

Core Principles

• ❌ Incorrect:

  className={

  flex ${condition}

  }

• ✅ Correct:

  className={cn("flex", condition)}

import { cn } from "@/lib/utils";

Standard Process

Step 1: Identify Input Type and Recursively Scan

• Single file: Directly read the file content
• Folder: Recursively scan all subfolders and list all .tsx/.jsx/.vue files

Step 2: Detailed Check for Each File

1. Read the complete file content
2. Check if the cn function has been imported
3. Scan all className attributes
4. Record the location (file name, line number) and format of each className
5. Categorical statistics:
   • className using template strings (must be converted to cn function calls)
   • className using ordinary strings (compliant)
   • className already using cn function (compliant)

Step 3: Generate Detailed Report

Report Structure

📁 Scanning completed! A total of X target files found

✅/🔍 Check Results: [Summary]

Detailed Check Report:
[Detailed list for each file, including file name, line number, className content, type label]

📊 Statistical Summary:
- Scanned files: X
- Total className: Y
- Using template strings: Z (must be converted to cn function calls)
- Compliant: W
- Need to import cn function: N

[If conversion is needed]
Files that need to be converted to cn function calls:
- File list and conversion count

[If import is needed]
Files that need to add cn function import:
- File list

Report Label Instructions

• ⚠️ Must be converted to cn function calls: className using template strings
• Compliant: ordinary strings or already using cn function

Step 4: Execute Conversion (Only When Needed)

import { cn } from "@/lib/utils";

Step 5: Verification and Reminders

1. Check import statements and list files that need to add cn function imports
2. Provide a conversion summary
3. Recommend testing and verification

Conversion Rules (Must Call cn Function)

// Rule 1: Static class names
className={`flex gap-4`}
→ className={cn("flex gap-4")}

// Rule 2: Dynamic variables
className={`${myClass}`}
→ className={cn(myClass)}

// Rule 3: Mixed
className={`base ${dynamic}`}
→ className={cn("base", dynamic)}

// Rule 4: Conditional expressions
className={`base ${isActive ? 'active' : ''}`}
→ className={cn("base", isActive ? "active" : "")}

// Rule 5: Multiple parameters
className={`base ${a} ${b}`}
→ className={cn("base", a, b)}

cn Function Import

Standard Import Method

@/lib/utils

import { cn } from "@/lib/utils";

Check Import

• If already imported: no additional action required
• If not imported: remind the user to add the import statement

Import Location

import { useState } from "react";
import { cn } from "@/lib/utils";
import { Button } from "@/components/ui/button";

Resource Index

• references/conversion-rules.md (Detailed Rules)
• references/examples.md (Example Documentation)

Notes

• Must call cn function: All template string-formatted className must be converted to cn function calls
• Must import cn function: Converted files must import the cn function, with the standard path being

  @/lib/utils

• Recursive scanning: Must recursively scan all subfolders, no files can be missed
• Detailed report: Display the file and line number of all className regardless of compliance
• Complete statistics: Provide a complete statistical summary, including the number of all className
• Clear classification: Clearly label the type of each className (template string/ordinary string/cn function call)
• Testing and verification: Must test the display effect of components after conversion

Frequently Asked Questions

@/lib/utils