frontend-naming

Name: frontend-naming
Availability: InStock
Author: Kwon

Enforce PascalCase, camelCase, UPPER_SNAKE_CASE, and kebab-case naming conventions.

Updated Aug 27, 2026

Search Tags:#linting #frontend #pascalcase #camelcase #kebab-case #naming-conventions #uppercase_snake_case

Ready to run

npx skills add https://github.com/Kwondongkyun/claude-code-settings --skill frontend-naming

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: frontend-naming
Source: https://github.com/Kwondongkyun/claude-code-settings/tree/main/skills/frontend-naming
Command: npx skills add https://github.com/Kwondongkyun/claude-code-settings --skill frontend-naming

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Inconsistent naming across frontend projects makes code hard to read and maintain. This skill standardizes naming conventions to improve readability and collaboration.

Core Features & Use Cases

PascalCase components: component directories and files use PascalCase.
camelCase for functions and hooks: function and hook names follow camelCase.
UPPER_SNAKE_CASE for constants: constants use uppercase snake_case.
kebab-case for files and routes: filenames and routes follow kebab-case.

Quick Start

Adopt the frontend-naming rules across your codebase to enforce consistent naming in new and existing code.

Frequently Asked Questions about frontend-naming

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

FAQPage Schema

What naming conventions should I use for frontend components and files?▼

Standard frontend naming conventions use PascalCase for components, camelCase for functions and hooks, UPPER_SNAKE_CASE for constants, and kebab-case for filenames and routes to improve code consistency and readability across modern projects.

How do I enforce consistent naming across my frontend codebase?▼

You can enforce consistent naming by applying standardized naming rules to components, hooks, constants, and files across new and existing code, ensuring your codebase adheres to established linting and naming convention patterns.

When do I need to apply UPPER_SNAKE_CASE in frontend projects?▼

UPPER_SNAKE_CASE is applied to constants in frontend projects. Using uppercase snake_case for constants ensures that immutable values are visually distinct from camelCase functions and PascalCase components throughout your codebase.

Does this naming convention cover both files and routes?▼

Yes, this naming convention applies kebab-case to both filenames and routes. Standardizing files and routes with kebab-case ensures consistent path structures and aligns with modern frontend project linting expectations.

Can I use these naming rules in existing frontend projects?▼

Yes, these naming rules are designed to be adopted across both new and existing code. Applying the conventions to current projects helps refactor inconsistent component, function, and file names into a unified, readable structure.