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.
npx skills add spatie/guidelines-skills --skill spatie-javascript -a claude-codeWhat 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
vardeclarations intoconstandlet - 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
varand 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-code2Manually: put the files in place
~/.claude/skills/spatie-javascript/SKILL.mdCopy the whole skill folder; for one project use .claude/skills/spatie-javascript/
1Skills CLI (Vercel)
npx skills add spatie/guidelines-skills --skill spatie-javascript -a codex2Manually: put the files in place
.agents/skills/spatie-javascript/SKILL.mdFor all projects use ~/.agents/skills/
1Skills CLI (Vercel)
npx skills add spatie/guidelines-skills --skill spatie-javascript -a cursor2Manually: put the files in place
.cursor/skills/spatie-javascript/SKILL.mdCursor also reads .agents/skills/ and .claude/skills/
1GitHub CLI
gh skill install spatie/guidelines-skills spatie-javascript2Manually: put the files in place
.github/skills/spatie-javascript/SKILL.md1Skills CLI (Vercel)
npx skills add spatie/guidelines-skills --skill spatie-javascript -a gemini-cli2Platform CLI
gemini skills install https://github.com/spatie/guidelines-skills --path resources/boost/skills/spatie-javascriptManually: put the files in place
.devin/skills/spatie-javascript/SKILL.mdThe legacy .windsurf/skills/ path still works
Skills CLI (Vercel)
npx skills add spatie/guidelines-skills --skill spatie-javascript -a opencodeClaude.ai
Zip the folder and upload it in Settings → Capabilities → Skills
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