suitable-rename

Rename files and components to kebab-case names matching the feature module and project domain.

Updated Oct 3, 2025
One-click install
npx skills add https://github.com/zunokit/zuno-marketplace-ui --skill suitable-rename-zunokit
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: suitable-rename
Source: https://github.com/zunokit/zuno-marketplace-ui/tree/main/.claude/skills/suitable-rename
Command: npx skills add https://github.com/zunokit/zuno-marketplace-ui --skill suitable-rename-zunokit

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Inconsistent file naming (PascalCase, camelCase, or generic names like Button.tsx) makes a Next.js/React codebase hard to navigate and breaks project conventions. This Skill standardizes file and folder names to kebab-case while ensuring names reflect the feature module and project domain. ## Core Features & Use Cases - Kebab-case conversion: Converts PascalCase and camelCase filenames (e.g. MintNFT.tsx, useMintState.ts) to kebab-case (mint-nft.tsx, use-mint-state.ts) while leaving component and hook exports unchanged. - Context-fit naming: Replaces generic names with domain-specific ones (e.g. Dialog.tsx in a mint flow becomes mint-confirm-dialog.tsx) aligned with modules like launch-pad, marketplace, and mint-nft. - Import path updates: Rewrites every import referencing the old filename and verifies with grep plus a build check. - Use Case: When adding a new component to the launch-pad/mint-nft module, invoke the Skill to pick a conventional kebab-case name, rename the file, and fix all imports automatically. ## Quick Start Ask the assistant to rename the files in a module to suitable kebab-case names and update all imports accordingly.

Frequently Asked Questions about suitable-rename

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I rename React component files to kebab-case?▼

Convert the filename from PascalCase to kebab-case (e.g. `MintPanel.tsx` becomes `mint-panel.tsx`), then update every import path to match the new filename. Keep the component export itself in PascalCase since JSX expects it.

How to name new files in a Next.js feature module?▼

Use kebab-case names that reflect the module and domain, such as `mint-submit.tsx` in a mint-nft module or `marketplace-filter.tsx` in marketplace. Avoid generic names like `Button.tsx` or `utils.ts` that could belong to any app.

Should React hook files use camelCase or kebab-case?▼

Hook filenames should be kebab-case (e.g. `use-mint-state.ts`), while the exported function stays camelCase with the `use` prefix (`export function useMintState`). Import paths must match the kebab-case filename.

Does renaming files break existing imports in a project?▼

Yes, unless all imports are updated. After renaming, grep the source directory for the old filename without extension, replace each reference with the new kebab-case path, and run the build to confirm nothing is broken.

When should a generic component name be made more specific?▼

Rename it when the name does not indicate the feature or domain, such as `Card.tsx` in a mint flow. Prefer names like `collection-card.tsx` or `mint-stage-card.tsx` that describe what the component actually does.