skills.rest
Kwondongkyun
KwondongkyunCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

frontend-naming

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
One-click install
npx skills add https://github.com/Kwondongkyun/claude-code-settings --skill frontend-naming
Or copy as Structured Prompt for Agent▼
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.

Related Skills

Explore More Software Engineering Skills→
jungaijungai
2

skill-creator

Create and update Codex skills with standard SKILL.md frontmatter.

Community
Intermediate
mathiasbourgoinmathiasbourgoin
2

code-quality-auditor

Audit source code against team-defined invariants and naming conventions.

Community
Intermediate
nanorepublicananorepublica
61

Global Tech Stack

Validate code against centralized global tech stack standards.

Community
Basic
NolanPicNolanPic

Global Coding Style

Enforce global coding style across codebases during code generation or modification.

Community
Basic