react-hook-builder
Creates custom React hooks for common patterns including data fetching, forms, authentication, local storage, debounce, and more. Use when users request "create custom hook", "React hook for", "useX hook", or "reusable hook".
react-server-components
Implements React Server Components (RSC) patterns with Next.js App Router including data fetching, streaming, selective hydration, and server/client composition. Use when users request "server components", "RSC", "Next.js app router", "server-side rendering", or "streaming".
responsive-design-system
Implements responsive design systems with mobile-first breakpoints, container queries, fluid typography, and adaptive layouts using Tailwind CSS. Use when users request "responsive design", "mobile-first", "breakpoints", "fluid typography", or "adaptive layout".
state-ux-flow-builder
Standardizes UX states for data fetching flows (loading, error, empty, success) and complex multi-view UI patterns. Provides state machine approach recommendations, loading skeletons, error boundaries, and empty state components. Use when implementing "loading states", "error handling", "empty states", or "state machines".
table-builder
Creates data table patterns with filtering, sorting, pagination, row actions, column configuration, server/client rendering modes, and empty/loading states. Use when building "data tables", "list views", "admin tables", or "data grids".
tailwind-gradient-builder
Creates modern CSS gradients using Tailwind CSS including linear, radial, conic, mesh gradients, animated gradients, glassmorphism, and gradient text effects. Use when users request "gradient background", "tailwind gradient", "modern gradient", "mesh gradient", or "animated gradient".
tanstack-query-setup
Implements TanStack Query (React Query) for server state management with caching, mutations, optimistic updates, and infinite queries. Use when users request "react query", "tanstack query", "data fetching", "cache management", or "server state".
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.
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.
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.
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.
curating-memories
Use when creating new memories to check for duplicates first, when discovering outdated information that should be marked obsolete, when new decisions supersede old ones, or when building connections between related knowledge in Forgetful MCP (mcp__forgetful__* tools).
serena-code-architecture
Architectural analysis workflow using Serena symbols and Forgetful memory. Use when analyzing project structure, documenting architecture, creating component entities, or building knowledge graphs from code.
exploring-knowledge-graph
Use when user asks "what do you know about X", when planning complex work that spans multiple topics, when investigating how concepts connect across projects, or when simple memory queries don't provide enough context. Deep traversal of Forgetful MCP knowledge graph (mcp__forgetful__* tools).
using-forgetful-memory
PROACTIVELY query Forgetful MCP (mcp__forgetful__* tools) when starting work on any project, when user references past decisions or patterns, when implementing features that may have been solved before, or when needing context about preferences. Save important decisions, patterns, and architectural insights to memory.
using-serena-symbols
Guidance for using Serena's LSP-powered symbol analysis. Use when exploring codebases, finding symbol definitions, tracing references, or when grep/text search would be imprecise.
skillshare
|
react-best-practices
React performance optimization guidelines for client-side SPAs using Vite. This skill should be used when writing, reviewing, or refactoring React code to ensure optimal performance patterns. Triggers on tasks involving React components, data fetching, bundle optimization, or performance improvements.
skill-creator
Guide for creating effective skills. This skill should be used when users want to create a new skill (or update an existing skill) that extends Claude's capabilities with specialized knowledge, workflows, or tool integrations.
agent-browser
Automates browser interactions for web testing, form filling, screenshots, and data extraction. Use when the user needs to navigate websites, interact with web pages, fill forms, take screenshots, test web applications, or extract information from web pages.
implementing-a-plan
Loads plan, reviews critically, executes each batch, and reports for review between batches. Use when implementing a plan from a plan file.
ig-navigate
Log into Intelligems and execute browser tasks. Use when navigating the Intelligems app, testing UI flows, or automating browser interactions on localhost:3000. Supports both Playwright MCP and agent-browser workflows.
interview-prd
Interview to create a PRD. Use when the user wants to build a product requirements document, plan a feature, or says "interview" or "prd". Conducts a structured interview then outputs plans/prd.yaml.
creating-a-plan
Creates a comprehensive easy to follow plan for building out a design. Use when creating an implementation plan from a design.
commit
Suggest a conventional commit message for the current staged/unstaged changes. Use when the user asks to commit, wants a commit message, says "commit", or wants to stage and commit code changes.
ralph
Ralph Wiggum AI — autonomous PRD-driven development agent. Use when the user says "ralph", wants to work through a PRD, or wants autonomous feature implementation from a plans/prd.yaml file.
tech-manga-explainer
生成技术科普漫画，用对话形式解释复杂的技术概念。当用户请求「用漫画解释技术」「生成技术科普漫画」「把这个技术概念画成漫画」「漫画教程」「用漫画讲解 XXX」或类似需求时使用。适合 n8n、Kubernetes、AI、编程、架构等技术话题。通过 nanobanana + Gemini API 生成图片。
Page 964 of 1694 · 84689 results
