spatie-javascript
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.
Install
npx skills add https://github.com/spatie/guidelines-skills --skill spatie-javascriptSKILL.md
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.vuefiles. - 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
- Identify the JavaScript, TypeScript, Vue, or Prettier artifact being changed.
- Read
references/spatie-javascript-guidelines.mdand focus on the relevant sections. - 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, useletonly for reassignment, and never usevar. - Avoid abbreviated variable names except in clear single-line arrow functions.
- Always use strict equality and cast values before comparing different types.
- Use
functionfor 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
Related skills
improve-codebase-architecturemattpocock1MScan a codebase for deepening opportunities, present them as a visual HTML report, then grill through whichever one you pick.codebase-designmattpocock691KShared vocabulary for designing deep modules. Use when the user wants to design or improve a module's interface, find deepening opportunities, decide where a seam goes, make code more testable or AI-navigable, or when another skill needs the deep-module vocabulary.web-design-guidelinesvercel-labs676KReview UI code for Web Interface Guidelines compliance. Use when asked to "review my UI", "check accessibility", "audit design", "review UX", or "check my site against best practices".code-reviewmattpocock631KReview the changes since a fixed point (commit, branch, tag, or merge-base) along two axes: Standards (does the code follow this repo's documented coding standards?) and Spec (does the code match what the originating issue/spec asked for?). Runs both reviews in parallel sub-agents and reports them side by side. Use when the user wants to review a branch, a PR, work-in-progress changes, or asks to \"review since X\".
