dills122

vue-router-best-practices

Vue Router 4 patterns, navigation guards, route params, and route-component lifecycle interactions.

Design robust, scalable database schemas for SQL and NoSQL databases. Provides normalization guidelines, indexing strategies, migration patterns, constraint design, and performance optimization. Ensures data integrity, query performance, and maintainable data models.

design-system-starter

Create and evolve design systems with design tokens, component architecture, accessibility guidelines, and documentation templates. Ensures consistent, scalable, and accessible UI across products.

qa-test-planner

Generate comprehensive test plans, manual test cases, regression test suites, and bug reports for QA engineers. Includes Figma MCP integration for design validation.

react-dev

This skill should be used when building React components with TypeScript, typing hooks, handling events, or when React TypeScript, React 19, Server Components are mentioned. Covers type-safe patterns for React 18-19 including generic components, proper event typing, and routing integration (TanStack Router, React Router).

nuxt

Nuxt full-stack Vue framework with SSR, auto-imports, and file-based routing. Use when working with Nuxt apps, server routes, useFetch, middleware, or hybrid rendering.

pinia

Pinia official Vue state management library, type-safe and extensible. Use when defining stores, working with state/getters/actions, or implementing store patterns in Vue apps.

pnpm

Node.js package manager with strict dependency resolution. Use when running pnpm specific commands, configuring workspaces, or managing dependencies with catalogs, patches, or overrides.

turborepo

Turborepo monorepo build system guidance. Triggers on: turbo.json, task pipelines, dependsOn, caching, remote cache, the "turbo" CLI, --filter, --affected, CI optimization, environment variables, internal packages, monorepo structure/best practices, and boundaries. Use when user: configures tasks/workflows/pipelines, creates packages, sets up monorepo, shares code between apps, runs changed/affected packages, debugs cache, or has apps/packages directories.

unocss

UnoCSS instant atomic CSS engine, superset of Tailwind CSS. Use when configuring UnoCSS, writing utility rules, shortcuts, or working with presets like Wind, Icons, Attributify.

vite

Vite build tool configuration, plugin API, SSR, and Vite 8 Rolldown migration. Use when working with Vite projects, vite.config.ts, Vite plugins, or building libraries/SSR apps with Vite.

vitepress

VitePress static site generator powered by Vite and Vue. Use when building documentation sites, configuring themes, or writing Markdown with Vue components.

vitest

Vitest fast unit testing framework powered by Vite with Jest-compatible API. Use when writing tests, mocking, configuring coverage, or working with test filtering and fixtures.

vue-best-practices

MUST be used for Vue.js tasks. Strongly recommends Composition API with `<script setup>` and TypeScript as the standard approach. Covers Vue 3, SSR, Volar, vue-tsc. Load for any Vue, .vue files, Vue Router, Pinia, or Vite with Vue work. ALWAYS use Composition API unless the project explicitly requires Options API.

frontend-design-review

Reviews and improves frontend interfaces for visual craft, UX clarity, accessibility, responsive behavior, interaction states, content hierarchy, and implementation quality. Use when building, redesigning, auditing, or polishing user-facing UI.

hallmark-design

Design, audit, redesign, or study distinctive user-facing pages without generic AI aesthetics. Use for intentional landing pages, portfolios, product marketing pages, visual redesigns, or design-DNA analysis of a screenshot or public URL.

api-and-interface-design

Guides stable API and interface design. Use when designing APIs, module boundaries, or any public interface. Use when creating REST or GraphQL endpoints, defining type contracts between modules, or establishing boundaries between frontend and backend.

browser-testing-with-devtools

Tests in real browsers via Chrome DevTools MCP. Use when building or debugging anything that runs in a browser. Use when you need to inspect the DOM, capture console errors, analyze network requests, profile performance, or verify visual output with real runtime data. Requires the chrome-devtools MCP server to be configured.

DevOps & Infrastructure Listed

ci-cd-and-automation

Automates CI/CD pipeline setup. Use when setting up or modifying build and deployment pipelines. Use when you need to automate quality gates, configure test runners in CI, or establish deployment strategies.

code-review-and-quality

Conducts multi-axis code review. Use before merging any change. Use when reviewing code written by yourself, another agent, or a human. Use when you need to assess code quality across multiple dimensions before it enters the main branch.

code-simplification

Simplifies code for clarity. Use when refactoring code for clarity without changing behavior. Use when code works but is harder to read, maintain, or extend than it should be. Use when reviewing code that has accumulated unnecessary complexity.

context-engineering

Optimizes agent context setup. Use when starting a new session, when agent output quality degrades, when switching between tasks, or when you need to configure rules files and context for a project.

debugging-and-error-recovery

Guides systematic root-cause debugging. Use when tests fail, builds break, behavior doesn't match expectations, or you encounter any unexpected error. Use when you need a systematic approach to finding and fixing the root cause rather than guessing.

deprecation-and-migration

Manages deprecation and migration. Use when removing old systems, APIs, or features. Use when migrating users from one implementation to another. Use when deciding whether to maintain or sunset existing code.

documentation-and-adrs

Records decisions and documentation. Use when making architectural decisions, changing public APIs, shipping features, or when you need to record context that future engineers and agents will need to understand the codebase.

doubt-driven-development

Subjects every non-trivial decision to a fresh-context adversarial review before it stands. Use when correctness matters more than speed, when working in unfamiliar code, when stakes are high (production, security-sensitive logic, irreversible operations), or any time a confident output would be cheaper to verify now than to debug later.

frontend-ui-engineering

Builds production-quality UIs. Use when building or modifying user-facing interfaces. Use when creating components, implementing layouts, managing state, or when the output needs to look and feel production-quality rather than AI-generated.

git-workflow-and-versioning

Structures git workflow practices. Use when making any code change. Use when committing, branching, resolving conflicts, or when you need to organize work across multiple parallel streams.

idea-refine

Refines raw ideas into sharp, actionable concepts through structured divergent and convergent thinking. Use when an idea is still vague, when you need to stress-test assumptions before committing to a plan, or when you want to expand options before converging on one. Triggers on "ideate", "refine this idea", or "stress-test my plan".

incremental-implementation

Delivers changes incrementally. Use when implementing any feature or change that touches more than one file. Use when you're about to write a large amount of code at once, or when a task feels too big to land in one step.

interview-me

Extracts what the user actually wants instead of what they think they should want. Achieves this through one-question-at-a-time interview until ~95% confidence about the underlying intent. Use when an ask is underspecified ("build me X" without "for whom" or "why now"), when the user explicitly invokes ("interview me", "grill me", "are we sure?", "stress-test my thinking"), or when you catch yourself silently filling in ambiguous requirements before any plan, spec, or code exists.

planning-and-task-breakdown

Breaks work into ordered tasks. Use when you have a spec or clear requirements and need to break work into implementable tasks. Use when a task feels too large to start, when you need to estimate scope, or when parallel work is possible.

security-and-hardening

Hardens code against vulnerabilities. Use when handling user input, authentication, data storage, or external integrations. Use when building any feature that accepts untrusted data, manages user sessions, or interacts with third-party services.

shipping-and-launch

Prepares production launches. Use when preparing to deploy to production. Use when you need a pre-launch checklist, when setting up monitoring, when planning a staged rollout, or when you need a rollback strategy.

source-driven-development

Grounds every implementation decision in official documentation. Use when you want authoritative, source-cited code free from outdated patterns. Use when building with any framework or library where correctness matters.

spec-driven-development

Creates specs before coding. Use when starting a new project, feature, or significant change and no specification exists yet. Use when requirements are unclear, ambiguous, or only exist as a vague idea.

test-driven-development

Drives development with tests. Use when implementing any logic, fixing any bug, or changing any behavior. Use when you need to prove that code works, when a bug report arrives, or when you're about to modify existing functionality.

using-agent-skills

Discovers and invokes agent skills. Use when starting a session or when you need to discover which skill applies to the current task. This is the meta-skill that governs how all other skills are discovered and invoked.

backend-to-frontend-handoff-docs

Create API handoff documentation for frontend developers. Use when backend work is complete and needs to be documented for frontend integration, or user says 'create handoff', 'document API', 'frontend handoff', or 'API documentation'.

c4-architecture

Generate architecture documentation using C4 model Mermaid diagrams. Use when asked to create architecture diagrams, document system architecture, visualize software structure, create C4 diagrams, or generate context/container/component/deployment diagrams. Triggers include "architecture diagram", "C4 diagram", "system context", "container diagram", "component diagram", "deployment diagram", "document architecture", "visualize architecture".

crafting-effective-readmes

Use when writing or improving README files. Not all READMEs are the same — provides templates and guidance matched to your audience and project type.

frontend-to-backend-requirements

Document frontend data needs for backend developers. Use when frontend needs to communicate API requirements to backend, or user says 'backend requirements', 'what data do I need', 'API requirements', or is describing data needs for a UI.

mermaid-diagrams

Comprehensive guide for creating software diagrams using Mermaid syntax. Use when users need to create, visualize, or document software through diagrams including class diagrams (domain modeling, object-oriented design), sequence diagrams (application flows, API interactions, code execution), flowcharts (processes, algorithms, user journeys), entity relationship diagrams (database schemas), C4 architecture diagrams (system context, containers, components), state diagrams, git graphs, pie charts, gantt charts, or any other diagram type. Triggers include requests to "diagram", "visualize", "model", "map out", "show the flow", or when explaining system architecture, database design, code structure, or user/application flows.

openapi-to-typescript

Converts OpenAPI 3.0 JSON/YAML to TypeScript interfaces and type guards. This skill should be used when the user asks to generate types from OpenAPI, convert schema to TS, create API interfaces, or generate TypeScript types from an API specification.

react-useeffect

React useEffect best practices from official docs. Use when writing/reviewing useEffect, useState for derived values, data fetching, or state synchronization. Teaches when NOT to use Effect and better alternatives.

requirements-clarity

Clarify ambiguous requirements through focused dialogue before implementation. Use when requirements are unclear, features are complex (>2 days), or involve cross-team coordination. Ask two core questions - Why? (YAGNI check) and Simpler? (KISS check) - to ensure clarity before coding.

slidev

Create and present web-based slidedecks for developers using Slidev with Markdown, Vue components, code highlighting, animations, and interactive features. Use when building technical presentations, conference talks, code walkthroughs, teaching materials, or developer decks.

kotlin-jvm-engineering

Implement, refactor, review, or debug Kotlin/JVM services, libraries, CLI tools, and applications built with Gradle. Use for Kotlin source, Gradle Kotlin DSL, JVM toolchain compatibility, dependency and module changes, coroutine behavior, public APIs, Java interoperability, generated code, tests, or CI.

github-keychain-auth

Use the macOS Keychain-backed GitHub credential safely outside the sandbox for GitHub CLI, Git, and API operations. Use when GitHub authentication fails, an inherited GH_TOKEN or GITHUB_TOKEN may be stale, a task needs the routinely configured Keychain credential, or an agent must verify GitHub access without exposing credential bytes.

independent-review

Prepare and conduct a fresh-context engineering review of completed or substantially complete work, covering both the code changes and the implementation plan. Use when an implementation chat must explain its approach for a senior-maintainer review, when that explanation and repository scope will be handed to a brand-new chat for independent assessment, or when reviewing whether completed work is correct, well-designed, idiomatic, sufficiently tested, and faithful to its plan. Do not use as a substitute for ordinary in-session self-checks or for a review that intentionally shares the author's full conversation history.

inspect-node-package-api

Resolve and inspect the public API of an installed Node.js package without executing it. Use when Codex needs to understand a dependency in node_modules, verify an import or subpath, find exported functions, classes, types, or signatures, trace TypeScript declaration re-exports, compare ESM/CommonJS/type entry points, or determine the installed package version and interface before writing integration code.

humanizer

Audit and revise existing prose so it reads naturally, specifically, and consistently with the author's voice while preserving every supported fact, number, citation, code block, link target, and intentional technical term. Use for a final editorial pass on blog posts, documentation, essays, announcements, or other prose that feels generic, repetitive, inflated, or recognizably machine-shaped; do not use as the primary research or drafting workflow or to evade disclosure requirements.

orchestrated-delivery

Plan, dispatch, monitor, reconcile, and close multi-agent or multi-chat repository work. Use when a brain or lead chat owns a larger outcome, when work must be split across subagents or separate Codex tasks, when a task graph has parallel lanes, or when child handoffs must be integrated into one verified repository result. Do not use for a small self-contained change that one agent can finish directly.

project-story-miner

Reconstruct a software project's journey from repository history, source code, issues, pull requests, ADRs, benchmarks, incident notes, and author recollections, then produce a story-ready evidence brief. Use before writing an engineering retrospective, architecture journey, performance story, migration post, launch narrative, or multi-post series when the important turning points and proof boundaries are scattered across project artifacts.

spec-traceability

Maintain end-to-end traceability from repository requirements and decisions through implementation tasks, tests, evidence, and completion status. Use when writing or updating specs and plans, splitting work across sessions or agents, validating a feature against acceptance criteria, reconciling plan drift, or deciding whether work is actually complete.

technical-blog-writer

Draft, rewrite, review, or structure technical blog posts, engineering retrospectives, architecture explainers, benchmark analyses, project stories, tutorials, how-to guides, and related series from a brief, evidence packet, notes, or source files. Use when prose must remain technically accurate, preserve facts and proof boundaries, explain why engineering details matter, and sound conversational and recognizably authored rather than generic or promotional.

dotnet-architecture

Assess, design, implement, or review architectural boundaries in a .NET application using Clean Architecture, ports and adapters, onion architecture, modular monolith, or vertical slices. Use when a task changes project dependencies, domain/application/infrastructure ownership, use-case flow, repositories or query models, domain events, composition roots, or architecture tests. Do not use for a local C# edit whose boundary ownership is already clear.

session-handoff

Create, validate, consume, or refresh a durable repository handoff for continuing work in another Codex chat or after context reset. Use when pausing substantial work, moving an outcome to a separate task, resuming from a handoff, or preserving state that would otherwise exist only in conversation history. Do not create handoffs for trivial completed work.

planning-files-lite

Uses persistent markdown files to keep complex multi-step work organized across long sessions. Use when work requires research, many tool calls, multiple phases, or context recovery.

repository-doc-drift

Audit canonical repository documentation against current code, configuration, tests, generated contracts, and recent Git history, then make minimal evidence-backed corrections. Use after feature merges or releases, when plans and status may be stale, when README or architecture claims are questioned, or when multiple docs disagree about the current source of truth.

DevOps & Infrastructure Listed

research-to-decision

Run bounded technical or product research and turn it into a decision-ready repository artifact. Use when a spec, architecture choice, dependency, standard, feasibility gate, or implementation plan depends on external evidence or a controlled experiment, especially when research is delegated to another agent or chat.