Skip to main content
skill CX Codex

spatie-javascript — Claude Code skill: what it does, how to install

Applies Spatie's JavaScript and TypeScript coding conventions across projects, configures Prettier, and enforces clean syntax in Vue or TS files.

Install into Claude Code · Skills CLI (Vercel) All methods and platforms ↓
npx skills add spatie/guidelines-skills --skill spatie-javascript -a claude-code
Open on GitHub

What spatie-javascript does

This skill guides AI coding assistants to format and refactor JavaScript, TypeScript, and Vue single-file components according to Spatie guidelines. The agent first inspects references/spatie-javascript-guidelines.md and applies the project's Prettier settings before addressing code syntax. Formatting enforces four-space indentation, single quotes, and standard line limits.

Variable declarations strictly disallow var, reserving let only for values that undergo reassignment. Code changes enforce strict equality with type casting, promote destructuring for arrays and objects, and discourage abbreviated identifiers outside short arrow functions. Declarations use the function keyword, while functions remain pure and restrict reliance on this.

The skill deliberately ignores PHP, Laravel, standalone CSS, and server setup tasks, so running it on backend scripts produces no effect.

What it helps with

  • configure Prettier according to Spatie standards
  • refactor var declarations into const and let
  • enforce strict equality checks with explicit type casting
  • clean up cryptic variable abbreviations across TypeScript and Vue files

Example prompts for the agent

  • Review this Vue component against Spatie JavaScript guidelines and fix formatting.
  • Refactor this TypeScript file to eliminate var and replace loose comparisons.
  • Generate a Prettier configuration file following Spatie conventions.

How to install spatie-javascript

1Skills CLI (Vercel)

npx skills add spatie/guidelines-skills --skill spatie-javascript -a claude-code

2Manually: put the files in place

~/.claude/skills/spatie-javascript/SKILL.md

Copy the whole skill folder; for one project use .claude/skills/spatie-javascript/

Step by step, with commands for each platform: How to install skills in Claude Code: five ways

Questions about spatie-javascript

How to install spatie-javascript in Claude Code?

Run npx skills add spatie/guidelines-skills --skill spatie-javascript -a claude-code in your terminal. This registers the skill for Claude Code sessions.

What file extensions does spatie-javascript support?

It targets .js, .ts, .jsx, .tsx, and .vue files, along with project Prettier configurations.

Does this skill handle PHP or backend configuration?

No. Backend PHP code, Laravel framework logic, server settings, and CSS-only files remain outside the scope of these guidelines.

Source text

SKILL.md · MIT
---
name: spatie-javascript
description: Apply Spatie's JavaScript coding standards for any task that creates, edits, reviews, refactors, or formats JavaScript or TypeScript code; use for variable declarations, comparisons, functions, destructuring, and Prettier configuration to align with Spatie's JS conventions.
license: MIT
metadata:
  author: Spatie
---

# Spatie JavaScript Guidelines

## Overview
Apply Spatie's JavaScript coding standards to keep JS/TS code consistent and readable.

## When to Activate
- Activate this skill for any JavaScript or TypeScript coding work.
- Activate this skill when working on `.js`, `.ts`, `.jsx`, `.tsx`, or `.vue` files.
- Activate this skill when configuring Prettier for a project.

## Scope
- In scope: JavaScript, TypeScript, Vue single-file components, Prettier configuration.
- Out of scope: PHP, Laravel, CSS-only files, server configuration.

## Workflow
1. Identify the JavaScript, TypeScript, Vue, or Prettier artifact being changed.
2. Read `references/spatie-javascript-guidelines.md` and focus on the relevant sections.
3. Apply Prettier configuration first, then the language rules relevant to the change.

## Core Rules (Summary)
- Use four-space indentation, a 120-character print width, and single quotes.
- Prefer `const`, use `let` only for reassignment, and never use `var`.
- Avoid abbreviated variable names except in clear single-line arrow functions.
- Always use strict equality and cast values before comparing different types.
- Use `function` for declarations and arrow functions for anonymous or terse functions when appropriate.
- Keep functions pure, limit `this`, and use shorthand object methods.
- Prefer object and array destructuring.

## References
- `references/spatie-javascript-guidelines.md`

© Spatie · MIT · spatie/guidelines-skills

Similar skills

Everything for Frontend and UI →

From the same set4

Project sponsors

Companies that keep this analytics open
Gold sponsor

Impressions, clicks and code copies — open statistics. We keep the numbers public for the same reason NeBlask itself is public. Become a sponsor