agentsclimarketplace

Javascript typescript conventions

Skill ceilidhboy/skills/skills/javascript-typescript-conventions

Agent skills for Laravel and PHP development. Installable via npx skills@latest add ceilidhboy/skills

Install
npx -y skills add ceilidhboy/skills --skill javascript-typescript-conventions

Assembled from the repository path, not quoted from the project. Check it against their README if it does not work.

One thing to look at

  • 0 stars0 stars. Stars are a popularity signal and not a quality one, but at this level it is likely that nobody has read this closely except its author, and you would be relying on your own review.

What its author says it does

Copied from the file, not written here

Provides JavaScript and TypeScript coding conventions including casing rules, naming patterns, and best practices for variables, constants, components, and types. Use when writing or editing .ts, .tsx, .js, .jsx files, creating React components, or working with TypeScript types.

SKILL.md

3.9 KB, as published. Nobody here has run it

JavaScript/TypeScript Conventions

Quick Start

// Variables and constants - camelCase
const maxRetries = 3;
const defaultTimeout = 30;
const campaignsPerPage = 10;

// Function parameters and return types - camelCase
function processUserData(userName: string, userId: number): void {
    const isActive = true;
    const totalAmount = 100;
}

// Component names - PascalCase
function ActiveBadge({ count }: Props) { ... }
export function CampaignCard({ campaign }: CampaignCardProps) { ... }

// Type names - PascalCase
type CampaignData = {
    name: string;
    location: string;
};

interface Props {
    count: number;
}

// Environment variables - SCREAMING_SNAKE_CASE
const appName = import.meta.env.VITE_APP_NAME;

Casing Rules

Variables, Parameters, and Constants

Use camelCase for:

  • Variable declarations
  • Function parameters
  • Constant values (even though they're declared with const)
// Good
const maxRetries = 3;
const defaultTimeout = 30;
const campaignsPerPage = 10;

function processUserData(userName: string, userId: number): void {
    const isActive = true;
}

// Bad
const MAX_RETRIES = 3;  // Only use for environment variables
const default_timeout = 30;  // Don't use snake_case

Component Names

Use PascalCase for:

  • React components (both functions and classes)
  • Component file names (e.g., LoginCard.tsx)
// Good
function ActiveBadge({ count }: Props) { ... }
export function CampaignCard({ campaign }: CampaignCardProps) { ... }

// Bad
function activeBadge({ count }: Props) { ... }
function loginCard() { ... }

Type Names

Use PascalCase for:

  • TypeScript types (type)
  • Interfaces
  • Enum values
// Good
type CampaignData = {
    name: string;
    location: string;
};

interface Props {
    count: number;
}

// Bad
type campaignData = { ... };
type user_props = { ... };

Environment Variables

Use SCREAMING_SNAKE_CASE only for environment variables, particularly those accessed via import.meta.env:

// Good
const appName = import.meta.env.VITE_APP_NAME;
const apiKey = import.meta.env.VITE_API_KEY;

// Bad (regular constants should be camelCase)
const APP_NAME = import.meta.env.VITE_APP_NAME;

Naming Best Practices

Variables and Functions

  • Use descriptive, semantic names
  • Prefer nouns for variables, verbs for functions
  • Avoid single letters except in loops
// Good
const userCount = 10;
const isActive = true;
function getUserById(id: number) { ... }
function calculateTotal(items: Item[]) { ... }

// Bad
const n = 10;
const x = true;
function get(id: number) { ... }
function calc(items: Item[]) { ... }

Boolean Variables

Use prefixes like is, has, can, should for boolean values:

// Good
const isActive = true;
const hasPermission = false;
const canEdit = true;
const shouldRedirect = false;

// Bad
const active = true;
const permission = false;

Component Props

  • Use PascalCase for prop types
  • Append Props to the component name for the type
// Good
interface ButtonProps {
    onClick: () => void;
    variant?: 'primary' | 'secondary';
}

function Button({ onClick, variant = 'primary' }: ButtonProps) { ... }

// Bad
interface buttonProps {
    onclick: () => void;
}

File Naming

  • Use PascalCase for component files: LoginCard.tsx, UserProfile.tsx
  • Use camelCase for utility files: formatDate.ts, apiClient.ts
  • Use lowercase with dashes for config files: eslint.config.js, vite.config.ts

Keep looking

Skills are one crate of 328,083. Ordering is by how many stacks a row turns up in, so the top of any crate is what has actually been picked rather than what has the most stars.