api-testing
Write and run API tests with Vitest for endpoints, middleware, and integrations. Use when testing API functionality, request/response validation, or error handling.
changelog
Understand auto-generated changelogs via semantic-release. Use when viewing release history, understanding changelog format, or debugging missing changelog entries.
chart-implementation
Create interactive charts for car registration and COE data visualization using Recharts. Use when adding new chart types, fixing chart bugs, or implementing data visualizations.
code-review
Perform automated code reviews checking for security vulnerabilities, performance issues, and code quality. Use before creating PRs, when reviewing complex changes, checking for security issues, or identifying performance problems.
component-docs
Generate or update component documentation with usage examples, props tables, and Storybook stories. Use when documenting new components, creating usage examples, or setting up Storybook stories.
component-naming
Enforce consistent React component naming conventions using domain + role patterns. Use when creating, reviewing, or refactoring components.
conventional-commits
Format commit messages following project conventions with commitlint validation. Use when committing changes, writing PR descriptions, or preparing releases.
data-seeding
Create or update database seed scripts for development and testing environments. Use when setting up test data, initializing development databases, creating demo environments, resetting to known state, or generating realistic sample data.
dependency-upgrade
Upgrade dependencies safely using pnpm catalog, checking for breaking changes, and testing upgrades. Use when updating packages, applying security patches, upgrading major versions, resolving dependency conflicts, or modernizing tech stack.
deployment-rollback
Rollback failed deployments, restore previous versions, and handle deployment emergencies. Use when deployments fail, critical bugs are discovered in production, performance degrades after deployment, or emergency recovery is needed.
design-language-system
Apply the professional Navy Blue colour scheme and design tokens. Use when styling components, charts, or ensuring colour consistency across the application.
domain-management
Configure domain routing and DNS for sgcarstrends.com. Use when adding new services, updating domain patterns, or debugging DNS issues.
gemini-blog
Configure or debug LLM blog post generation using Vercel AI SDK and Google Gemini. Use when updating blog generation prompts, fixing AI integration issues, modifying content generation logic, or working with structured output schemas.
logo-management
Manage car logo fetching, scraping, and Vercel Blob storage in the logos package. Use when adding new car brand logos, updating logo sources, debugging brand name normalization, managing Vercel Blob storage, or optimizing logo caching.
monitoring
Monitor Vercel deployments, debug production issues, check logs, and understand logging patterns. Use when investigating errors, checking deployment logs, debugging failures, or improving observability.
performance
Optimize application performance - bundle size, API response times, database queries, React rendering, and serverless function performance. Use when investigating slow pages, profiling, load testing, or before production deployments.
readme-updates
Maintain README files with setup instructions, features, tech stack, and usage examples. Use when updating project documentation, adding new features, improving onboarding, or creating READMEs for new packages.
rebrand
Temporary skill to guide the rebrand from SG Cars Trends / @sgcarstrends to MotorMetrics / @motormetrics. Delete after rebranding is complete.
release-management
Manage releases with semantic-release, version bumps, and changelog generation. Use when preparing releases, debugging release failures, or understanding version history.
security
Security auditing for code vulnerabilities (OWASP Top 10, XSS, SQL injection) and dependency scanning (pnpm audit, Snyk). Use when handling user input, adding authentication, before deployments, or resolving CVEs.
shadcn-components
Add or customize shadcn/ui components in the shared UI package. Use when adding new components from shadcn registry, updating existing component variants, customizing styling with Tailwind, or debugging shadcn/ui component issues.
tailwind-config
Update Tailwind CSS configuration, custom themes, and design tokens across packages. Use when adding new colors, spacing scales, or customizing the design system.
workflow-management
Create, debug, or modify Vercel WDK workflows for data updates and social media posting in the web application. Use when adding new automated jobs, fixing workflow errors, or updating scheduling logic.
cache-components
Ensure 'use cache' is used strategically to minimize CPU usage and ISR writes. Use when creating/modifying queries to verify caching decisions align with data update patterns and cost optimization.
component-tester
Run Vitest tests for a specific component with coverage. Use when making changes to React components to ensure tests pass and coverage is maintained.
typography-spacing-enforcer
Enforce Typography system and modern spacing conventions. Use when implementing new UI components to ensure design consistency with project standards.
ui-design-system
Enforce modern dashboard UI patterns with pill-shaped design, professional colour scheme, and typography standards. Use when building or reviewing UI components for the web application.