dev-skills

Appearance

Dev Skills ​

A collection of agent skills for Claude Code, GitHub Copilot, Antigravity CLI, and Pi. These skills encode development patterns, workflows, and best practices for AI-assisted software development.

See Installing Dev Skills for setup.

Agent Instructions ​

  • Fewer Approvals: Strategies for minimizing approval prompts by using built-in tools over shell commands and npm scripts. Use when the user says there are too many approvals.
  • Follow Instructions: Force the agent to re-read instruction files, identify violations, and correct its approach. Use when the user says the agent isn't following instructions.
  • Interview Me: Structured, one-question-at-a-time interview process that minimizes user effort. Use when the user asks to be interviewed about a topic.
  • No Hallucination: Force the agent to verify claims via web search and cite authoritative sources. Use when the user says the agent is hallucinating or making things up.
  • Prevent Mistake: Guide the agent to diagnose an error and propose an instruction edit to prevent recurrence. Use when the user points out the agent made a mistake.
  • Recap Current Work: Brief summary of goals, progress, current status, and next steps. Use when the user asks for a recap or summary of the session.
  • Research: Concise, factual web search findings from authoritative sources. Use when the user asks the agent to research something online.

Agent Skills ​

  • Create Skill: Full workflow for creating a new skill, from naming through frontmatter, single vs multi-file structure, and content patterns. Use when authoring a new skill.
  • Installing Dev Skills: Symlink-based installation for Claude Code, GitHub Copilot, Antigravity CLI, Pi, and Claude.ai zip upload. Use when installing or uninstalling the dev-skills library.
  • Skills Library Maintenance: Validation and fix workflow for frontmatter, categories, index coverage, and consistency. Use when auditing or repairing the skills library.

Apple Development ​

  • XcodeBuildMCP Setup: Install and configure the MCP server that connects Claude Code to Xcode. Use when setting up a new Apple development environment or adding Xcode automation to an existing project.
  • SwiftUI Project Setup: Create a new Xcode project optimized for AI-assisted development with SwiftUI, SPM, and the right file boundaries. Use when starting a new app for any Apple platform.
  • The Development Loop: The core build-run-screenshot-fix cycle that Claude Code uses to iterate on features autonomously. Use when writing or modifying SwiftUI views, debugging layout issues, or verifying user flows.
  • SwiftUI Architecture: Data layer, navigation, and state management patterns for personal apps. Use when deciding how to structure a new SwiftUI app or choosing between SwiftData, UserDefaults, and other persistence options.
  • TestFlight Distribution: Share apps with a small group via TestFlight internal testing or Ad Hoc distribution. Use when distributing an app to 2–3 people without the App Store.
  • Troubleshooting: Common pitfalls and fixes for Xcode builds, simulator issues, signing errors, and SwiftUI type-checker problems. Use when a build fails or the simulator misbehaves.

Code Design ​

  • Intention-Revealing Code: Names that reveal intent at the call site and contents that reveal intent at the read site — code should read as prose, not syntax. Use when naming or restructuring functions, or reviewing low-level code.

Code Style ​

  • Bash Style: Bash script formatting including clean multiline strings with strip_indent. Use when writing or modifying bash scripts.
  • Code Style: Language-agnostic formatting rules — indentation, line length, braces, trailing commas, and comments. Use when writing or modifying any code file.
  • CSS Style: CSS formatting rules including one property per line. Use when writing or modifying CSS.
  • HTML Style: HTML formatting rules including boolean attributes. Use when writing or modifying HTML.
  • JavaScript Style: JavaScript formatting rules — double quotes, trailing commas, and consistent syntax. Use when writing or modifying JavaScript.
  • Markdown Style: Markdown formatting rules — backticks for code, reference-style links, and line length. Use when writing or modifying markdown.

Coding Agents ​

  • Claude Code Permissions: Configure Claude Code tool permissions (allow, ask, deny). Use when setting up permissions or syncing the recommended permission lists to the current machine.
  • Claude Code Settings: Configure and sync Claude Code settings (default model). Use when setting up Claude Code or syncing recommended settings to the current machine.
  • LLM Environment Tools: CLI tools that improve LLM coding agent performance (ripgrep, fd, fzf, DuckDB, git-delta, xh, watchexec, just, semgrep). Use when setting up or auditing a development environment for AI agent effectiveness.
  • Pi Coding Agent: Setup, CLI commands, extensions, and workflows for Pi, the open-source minimal terminal coding agent. Use when working with Pi or comparing it to other coding agents.
  • Update AI Agent CLIs: Update Claude, Codex, Copilot, Antigravity, and Pi CLI tools to their latest versions via Volta. Use when the user wants to update their AI coding tools.

Design ​

  • Visual Language Through Style Tiles: Guide a conversation from intended user response to visual attributes to candidate directions, then compare style tiles side-by-side. Use before building UI to commit to a visual language.
  • Style Tiles Worked Example: Full transcript of a design agent guiding a user through the first part of establishing a visual direction. Use as a reference for what a good run looks like in practice.

Dev Tasks ​

  • Address FIXMEs: Find and resolve FIXME, TODO, and REFACTOR comments in specified files, prioritized by severity. Use when the user wants to clean up code annotations.
  • Dev Serve: Start a dev server on a safe port with worktree-aware ownership, automatic port allocation, and race-condition handling. Use when starting a dev server or hitting "port already in use" / EADDRINUSE errors.
  • Diagnose Root Cause: Hypothesis-driven debugging that identifies the root cause without applying fixes. Use when the user wants to understand why something is broken.
  • macOS Source Code Volume: Create a case-sensitive APFS volume at /Volumes/src for source code. Use when setting up a macOS development environment.

Development Methods ​

  • Phased Migrations: Phased migrations for databases, secrets, and certificates that maintain backward compatibility at every stage. Use when changing stateful systems where a single-step change risks downtime or data corruption.
  • Refactoring: Restructure code in small verified steps — establish a verification mechanism, make one change, verify, commit or revert.
  • Test-Driven Development: One failing test, implement to pass, repeat.
  • Diagnose Root Cause: Hypothesis-driven debugging — form hypotheses, add targeted logging, analyze evidence, confirm.

Node.js ​

  • Auto Port Selection: Find an available port when the default is occupied. Use when running dev servers that may conflict on a fixed port.
  • Child Process Cleanup: Reliable termination of child process trees with pipe cleanup and exit handlers. Use when spawning long-lived processes that must not outlive the parent.
  • CJS Utilities in ESM: One-call bridge that gives ESM modules require, __filename, and __dirname. Use when ESM code needs CJS utilities or must load a CJS-only package.
  • CLI Subcommands: Directory-mirrored CLI architecture using Commander.js executableFile with co-located resources. Use when building a CLI tool with multiple nested commands.
  • Dotpath Template Tag: Tagged template literal for constructing file paths with interpolation. Use when building paths from dynamic segments more cleanly than path.join() calls.
  • EJS with Includes and require(): Enhanced EJS rendering with require() support inside templates, recursive includes, and linting. Use when server-side rendering HTML, SQL, or other structured text in Node.js.
  • Express Utility Handlers: Reusable middleware for blocking requests until async startup completes and sending 404 responses. Use when gating routes behind preconditions.
  • Express.js Core Patterns: App creation, settings, middleware pipelines, and route mounting. Use when starting or structuring an Express server.
  • file() Utility: Synchronous file reading that resolves paths relative to the calling module, not the working directory. Use when loading SQL queries, templates, or config files at module init time.
  • File Path Resolver: Single resolve() function that handles absolute, relative, and module paths from the caller's location. Use when you need flexible path resolution beyond path.join().
  • File-System Auto-Routing: Map directory structure to URL routes automatically, with [param] directory conventions. Use when you want Next.js-style file routing in plain Express.
  • Fix npm Vulnerabilities: Minimal, controlled fixes for npm audit vulnerabilities via package.json edits and overrides. Use when resolving npm security warnings.
  • Fractal Express Pattern: Use full Express instances — not Routers — as composable modules. Use when structuring a server with multiple independently testable concerns.
  • HTTP Error Classes: Class hierarchy for HTTP errors with automatic status codes and attachable details. Use when throwing structured errors that map to HTTP status codes.
  • Named SQL Parameters: Replace positional ? placeholders with readable :param names in SQL queries. Use when writing queries that accept input values.
  • Node.js child_process Functions: Guide to spawn, exec, execFile, and fork — choosing the right function based on synchronicity and shell usage. Use when running external commands from Node.js.
  • Node.js Module Patterns: ESM-first package.json setup, subpath exports, and private import aliases. Use when configuring module systems for a Node.js project.
  • npm Workspaces: Multi-package repository management with npm's built-in workspace support. Use when a repo contains multiple packages that share code.
  • Pretty Error Formatting: Turn dense stack traces into readable, color-highlighted output. Use in CLI tools or dev scripts where default Node.js errors are hard to read.
  • Promisified Server Startup: Wrap server.listen() in a promise returning url, port, and listener. Use when starting an HTTP server with await.
  • Proxy Middleware with Fallthrough: Proxy that falls through to the next handler on 404. Use when composing multiple backend servers behind a single entry point.
  • Publish to GitHub Packages: GitHub Actions workflow that publishes npm packages on version tags. Use when automating package publishing to GitHub Packages.
  • Query Objects and Resource Classes: Namespace SQL queries into objects and wrap CRUD operations in static Resource class methods. Use when building a data access layer.
  • Request Logging Middleware: One structured log entry per request using canonical log lines. Use when replacing scattered console.log() calls with queryable structured logs.
  • Shell Command Tag: Tagged template literal that builds shell commands with automatic escaping to prevent injection. Use when executing shell commands with dynamic values from Node.js.
  • Simple RPC: Lightweight RPC layer using an ES6 Proxy client and Express middleware — call server methods as if local, no schemas required. Use when building internal APIs between browser and Node.js.
  • SQL Queries in Separate Files: Store SQL in .sql files for editor syntax highlighting and linting support. Use when queries are complex enough to benefit from dedicated files.
  • Watch Mode: Automatic rebuilds and retests on file changes using npm script watchers. Use when developing locally and you want continuous feedback on changes.
  • WHATWG Request/Response Adapter: Adapt Express to standard WHATWG Request/Response objects. Use when writing handlers portable across Node.js, Deno, and Cloudflare Workers.

Git ​

  • Commit: Two-command workflow for committing only the changes from the current session or specified files. Use when committing work.
  • Conflict Resolution: Strategies for resolving merge conflicts — simple merge, patch replay, and commit replay — while preserving the intent of all commits. Use when facing merge conflicts.
  • Git Fundamentals: Core git patterns for everyday development — status, diff, log, branching, tagging, stashing, and reset. Use as a reference during any git operation.
  • Uncommitted Changes: Detect uncommitted changes and derive path-safe branch names. Use in deployment scripts or CI pipelines that depend on repository state.
  • Worktrees: Separate working directories per branch sharing one repository. Use when you need multiple branches checked out simultaneously.

GitHub ​

  • CI Browser Tests: GitHub Actions workflow for running Playwright browser tests with headless Chromium. Use when adding browser test CI to a project.
  • Claude GitHub Action: GitHub Actions workflow that lets @claude mentions and the claude issue label trigger Claude to respond and open PRs. Use when adding Claude as a teammate in a repo.
  • GitHub CLI and Repository Patterns: Core patterns for the gh CLI — authentication, repository setup, and common operations. Use when setting up or interacting with GitHub repos from the command line.
  • GitHub Issue Editing: Safe editing of issue bodies and comments via temp files to avoid escaping corruption. Use when modifying GitHub issue content programmatically.
  • GitHub Issues: List open issues with their associated PRs, branches, and merge status. Use when deciding what to work on next.
  • GitHub Workflow: Four-phase development process — plan, implement, review, merge. Use when following a structured feature development workflow.
  • Publish to GitHub Pages: GitHub Actions workflow that builds and deploys static sites. Use when automating deployment to GitHub Pages.
  • Pull Request Workflow: Full PR lifecycle — creation, review comment resolution, and GraphQL review threads. Use when creating or responding to pull requests.

Google Cloud ​

  • App Engine Deployment: Safe deployment script that validates git state, derives version names, and tags deployments. Use when deploying a Node.js app to App Engine.
  • Cloud SQL Proxy Lifecycle: Manage Cloud SQL Proxy startup, socket/port coordination, and process cleanup for local development. Use when connecting a Node.js app to Cloud SQL locally.
  • Google Cloud General Patterns: gcloud CLI usage, project setup, service accounts, and credential management. Use when configuring Google Cloud authentication or project settings.

JavaScript ​

  • Async JavaScript Patterns: Promise combinators including allSettled, race timeouts, retry with backoff, and concurrency-limited mapping. Use when writing async control flow.
  • Async Pipe: Compose async functions into a sequential pipeline where each step receives the previous output. Use when chaining multiple async transformations.
  • Deferred Promise: A promise whose resolve/reject are accessible from outside the executor. Use when the creator and settler of a promise are in different scopes.
  • Delay and Interval Utilities: Promise-based delays, random stagger for animations, and frame-synced intervals. Use when you need timing utilities in async code.
  • Non-Concurrent Operations: Lock class and nonConcurrent wrapper that serialize async operations. Use when only one instance of an operation should run at a time.
  • Progress Tracking: EventEmitter-based progress reporting for batch async operations. Use when showing progress feedback for uploads, API calls, or parallel tasks.
  • Resolve All Promises: Prevent event loop hangs from unresolved promises in background async work. Use when running fire-and-forget async functions, background loops, or async iterator consumers.
  • Timer Patterns: Cancellable, awaitable timers with explicit state management and elapsed-time measurement. Use when scheduling one-shot actions or measuring durations.
  • Async Iterators with Repeater: Repeater library fundamentals — push/stop, backpressure, SlidingBuffer, merge, and latest combinators. Use when building async iterables.
  • Chunking Async Iterables: Fixed-size batching for arrays and async streams. Use when processing data in bulk.
  • Debouncing Async Iterables: Collapse rapid async events into single values after a quiet period. Use when coalescing bursts from event sources.
  • Event to Async Iterator: Convert EventEmitter or EventTarget sources into async iterables with automatic cleanup. Use when bridging events to for await...of.
  • Multicasting Async Iterables: Fan out values from one async iterable to multiple subscribers. Use when multiple consumers need the same stream.
  • Dot-Path Property Access: Tagged template literal that safely traverses deeply nested properties like user.profile.address.city. Use when reading nested object paths known at definition time.
  • Filter Object: Create a new object containing only allow-listed keys. Use when sanitizing user input or stripping unexpected properties.
  • Options with Defaults: Merge user options and default options using spread or nullish coalescing. Use when a function accepts optional configuration.
  • Index File Re-exports: Barrel files that re-export directory modules through a single entry point, converting defaults to named exports. Use when organizing module imports into clean paths.
  • Automatic Resource Management: Create-use-dispose lifecycle that guarantees resource cleanup even when errors occur. Use when managing temp dirs, connections, or file handles.
  • Composable Schema Validation: Chainable validators with message overrides, nesting, and value coercion. Use when validating user input, form fields, or API payloads.
  • Enum Classes: Sealed, frozen enum instances with identity semantics and iteration. Use when you need a fixed set of named values that prevent invalid states.
  • Layered Dispatch: First-match routing that dispatches items to handlers based on predicate tests, like Express middleware. Use when processing heterogeneous collections where each item needs different treatment.
  • Readable Regular Expressions: Tagged template literals that build regex from named, composable pieces. Use when a regex is too complex to read as a single literal.
  • RelativeURL: URL subclass that works with relative paths without requiring an origin. Use in SPAs or server-side route generation where the origin is irrelevant.
  • Result Type: Frozen Result class with ok/err factories and a try() wrapper that makes error handling explicit instead of throwing. Use for parsing, validation, or I/O where failure is expected.
  • Class-Based State Machines: EventEmitter-based state machine with lifecycle hooks and defined transitions. Use when a workflow has explicit states and boolean flags become unmanageable.
  • Random Utilities: Helper functions for random floats in a range, random integers, Fisher-Yates shuffle, and picking random elements. Use when you need randomness utilities beyond raw Math.random().
  • Unit-of-Work Telemetry: Accumulate context throughout a unit of work and emit one rich log entry when it completes. Extends to function-level tracing with automatic parent–child spans via AsyncLocalStorage. Use when implementing structured logging or tracing.
  • Custom Logger: Pino-based logger factory with auto-detected module names, Google Cloud severity mapping, and child loggers. Use when setting up structured logging for an application.
  • Browser Log Forwarding: Forward browser-side log entries and uncaught errors to a server endpoint so client and server logs appear in one stream. Use when building full-stack apps.

Personas ​

  • Full-Stack Software Engineer: Expert persona spanning system architecture, frontend/backend development, testing, performance, and DevOps. Use when you need an engineering perspective on architecture, trade-offs, or technical decisions.
  • Product Designer: Expert persona combining design psychology, visual design, interaction patterns, and UX research. Use when you need a design perspective on usability, layout, or interaction choices.
  • Product Manager: Expert persona bridging product strategy, requirements analysis, data-driven prioritization, and market intelligence. Use when you need a product perspective on scope, priorities, or user value.

Prompt Engineering ​

  • Adaptive Goal Decomposition: Extend the target convergence prompt with on-demand subgoals so agents decide dynamically whether to work directly or decompose. Use when writing prompts for complex tasks that benefit from incremental decomposition.
  • Target Convergence Prompt: Prompt pattern that defines acceptance criteria and a convergence loop so agents iterate until the end state is met. Use when writing prompts for tasks that need self-correcting iteration.
  • Task List: Structured task files with ordered steps, verification checks, and execution notes for multi-session continuity. Use when organizing agent work into trackable, resumable units.
  • Test-Driven Development: One-test-per-task workflow where agents write a failing test first, then implement the minimum code to pass. Use when guiding agents through feature work with built-in verification.

Testing ​

  • In-Browser Testing: Lightweight in-browser test runner with HTML fixtures and method stubs, plus a Playwright CI bridge. Use when tests should live in the same file as the code being tested.
  • JavaScript Testing: Testing patterns using the Node.js test runner and node:assert/strict — test exports, signatures, and observable behaviors. Use when writing or running tests in Node.js.
  • Playwright Browser Testing: End-to-end browser testing with Playwright and Chromium, including GitHub Actions CI setup. Use when tests need a real browser for navigation, clicks, or screenshots.
  • Playwright Mouse Cursor: Inject a visible mouse cursor overlay into Playwright pages. Use when screenshots, recordings, or demos need to show cursor position.
  • Playwright Screenshots: Retina-quality screenshots with custom viewports, cursor overlays, and tooltip capture. Use when capturing polished screenshots for documentation or design review.
  • Screenshot Diff Testing: Visual regression testing that commits screenshots to git and uses git diff for pass/fail. Use when verifying visual output changes with human approval.

Web ​

HTML, CSS, JavaScript, browser APIs, and the full web platform — including web components, animations, modals, URL state, accessibility, prototyping, browser HTTP, Playwright browser automation, Vue, Vite, and VitePress.

  • Roving Tabindex: Accessibility: single tab stop into a list or toolbar, arrow keys move between items, Tab exits. Use when building composite widgets like nav lists, tab bars, or toolbars.
  • Animate Overlay from Trigger: Use the View Transitions API to morph overlays from their trigger element for spatial continuity.
  • Animated SVGs: CSS keyframe animations inside SVG with custom properties for parametric control.
  • Animated Collection Updates: View Transitions API for animating sorted/filtered collection elements.
  • Multi-Page App Layout Stability: Prevent UI flicker during MPA navigation with view-transition-name.
  • Chrome DevTools MCP: Install Chrome DevTools for agents 1.0 as a Claude Code plugin, connect to a running browser session via auto-connect or remote debugging port, and run Lighthouse audits and Core Web Vitals analysis. Use when setting up or using Chrome DevTools MCP.
  • Playwright CLI: One-shot browser commands for screenshots, PDFs, and codegen.
  • Persistent Browser: Long-lived Chromium session for observe-then-act workflows.
  • Site Interaction: Discover and drive a site's backend API by inspecting its frontend network calls.
  • Authentication: Playwright session persistence and secure credential storage.
  • Binary File Handling: Upload and download files across the Node-to-browser boundary in Playwright.
  • Content Diffing: Detect what changed before pushing content to a remote destination.
  • Browser HTTP: Thin fetch wrapper and pre-configured Axios client with error handling and connection-status interceptors.
  • Local Dev No Cache: Hostname-based localhost detection that bypasses the browser cache during development.
  • Encapsulation: Light DOM vs shadow DOM — when to encapsulate component styles.
  • Extension Patterns: CSS-first patterns for shipping custom elements with sensible defaults and clean override surfaces.
  • Async Component Loading: Fetch component HTML files on demand.
  • Document Bootstrap: Clone a <template>, discover bindings, and return a reactive render function powered by Vue's effect().
  • HTML Includes: Runtime HTML composition via <html-include> elements.
  • Reactive DOM Binding: Plugin-based binding system with seven binding types and TreeWalker traversal.
  • CSS Centering: Modern centering methods for block containers, grid, flexbox, absolute positioning, anchor positioning, and text.
  • Focus Styling: Global :focus-visible outline with a --color-focus token.
  • CSS Color Scales: Perceptually uniform color palettes from a seed color using LCH, chroma easing, and gamma correction.
  • Dynamic Styles: Runtime style changes via CSS custom properties or CSS-in-JS template literals.
  • Text Highlighting: CSS Custom Highlight API for painting text ranges without modifying DOM structure.
  • Better DOM API: Convenience wrappers for querying, traversal, and event handling across Document, DocumentFragment, and Element.
  • Declarative Element Behavior: Bind JavaScript behavior to DOM elements via CSS selectors and HTML attributes.
  • DOM Factory: Helpers for creating elements, text nodes, fragments, and parsed HTML in single expressions.
  • Semantic Selectors: ARIA and semantic attribute selectors for styling, behavior, and testing.
  • Semantic DOM Snapshot: Strip non-semantic noise from a page and extract a minimal semantic representation.
  • Keyboard Shortcut Listener: Declarative, element-scoped keyboard shortcut binding.
  • Visual DOM Snapshots: Clone live DOM with inlined CSS into a self-contained HTML string.
  • CSS Anchor Positioning: Native browser positioning for tooltips, dropdowns, and popovers that stay in viewport.
  • Button Layout Stability with Dynamic Content: CSS grid stacking for stable button layouts when text changes between states.
  • Clickable Container with Child Controls: Full-area click targets that also contain independently clickable child controls.
  • Inert Controller: Reference-counted inert attribute management for nested overlays.
  • Reference Counting Lock: Shared lock that stays active until every caller releases it.
  • Scroll Lock: Prevent page scrolling behind modals with iOS Safari workarounds.
  • Reactive Page URL: EventTarget wrapper around the Navigation API with reactive URL param composables.
  • Browser Module System: Promise-based registry for sharing code between <script> blocks without a bundler.
  • CDN Icons with SVG Sprites: Fetch an SVG sprite sheet from a CDN and render icons via a <ui-icon> web component.
  • Load Packages from CDN: Load npm packages directly from CDN without npm install.
  • Deploy a Small Stateful Web App: Cloudflare Worker + D1 database deployed via the Cloudflare MCP server — persistent data, optional password gate, no build step. Use when you need a web app with server-side state that an agent can deploy end-to-end.
  • Single-File HTML App: Self-contained HTML with embedded styles, scripts, and CDN dependencies.
  • Transmogrifier: Rapidly explore a complex design space and converge on a final design.
  • Vite Configuration: MPA mode, HTML entry-point discovery, path aliases. Use when starting or configuring a Vite project.
  • Vite HTML Includes Plugin: Build-time HTML composition via <link rel="include"> fragments.
  • Vue Multi-Page Application: Architecture where each page is a standalone Vue app.
  • VitePress Auto Nav: Auto-generate nav and sidebar config from the file system.
  • VitePress Linked Assets: Make relative links to non-markdown files resolve on the docs site.
  • VitePress Copy Buttons: Add copy-link and copy-markdown buttons to every page.
  • VitePress File a Bug Button: Open the GitHub issue form with the current page URL pre-filled.
  • VitePress Homepage Hero: Style a landing page with hero section, action buttons, and feature cards.
  • Vue Input Component: Styled text input with floating label and v-model support.
  • Vue Select Component: Custom-styled select dropdown backed by a native <select> for full accessibility.
  • Vue ValidationErrors Component: Styled error box that renders only when errors are present.
  • Vue useDataLoader Composable: Reactive wrapper for async data fetching with loading, loaded, and error states.
  • Vue useForm Composable: Form state management with validation, submission, and automatic re-validation.
  • Vue useProgress Composable: Reactive progress tracker for batch async operations.
  • Vue useInert Composable: Composable wrapper around InertController for making background content non-interactive.
  • Vue useScrollLock Composable: Composable wrapper around ScrollLock with automatic cleanup on unmount.
  • Vue useShowHide Composable: Reactive toggle for overlay visibility with an optional associated value.
  • Vue Watcher Class: Stateful wrapper around Vue's watch() with explicit start/stop lifecycle control.
  • Vue Autofocus Directive: Custom directive that focuses the first focusable element on mount.

Writing Style ​

  • Clear Writing: Techniques for knowing what matters, building a hierarchy of points, and cutting noise. Use when writing or modifying prose.
  • Dashes and Hyphens: Rules for hyphens, en dashes, and em dashes with keyboard shortcuts. Use when writing or modifying prose.
  • What Before Why or How: Lead every document and section with the main idea before explaining context. Use when writing or modifying prose.
  • Writing Style: Core writing standards — active voice, conciseness, parallel structure, sentence-case headings, and formatting rules. Use when writing or modifying prose.