Agent Skills Hub

design-excellence

A design system and anti-pattern guide to make AI-generated UI look human-crafted. Ensures professional aesthetics by managing color, typography, spacing, and animations for the Toh Framework.

draw-io

Specialized skill for creating, editing, and maintaining .drawio diagrams. Supports XML manipulation, layout optimization, AWS icon usage, and automated PNG conversion for documentation.

route-handlers

A specialized skill for building and managing Next.js App Router API routes, handling HTTP methods, request bodies, streaming, and response configuration.

state-management

Guidance on frontend state management, including global stores like Zustand/Pinia, server state via TanStack Query, and URL state handling.

web-search-patterns

Advanced Gemini-powered web search plugin with smart caching, subagent context isolation, and automated query optimization.

ui-design

A specialized tool for generating single-file HTML user interfaces with integrated Tailwind CSS, perfect for rapid prototyping, UI exploration, and design inspiration.

serena-mcp

Semantic code analysis guide for Serena MCP. Automatically prioritizes Serena tools for symbols, references, and code memory to optimize context and efficiency.

react-typescript

Production-grade React 19 and TypeScript patterns featuring hooks, state management, TanStack Query, form validation with Zod, and performance optimization workflows.

my-openlayer-helper

Initialize OpenLayers maps, manage layers, and render features including points, lines, polygons, and animated markers using the my-openlayer library.

i18n-expert

Automate i18n setup, string extraction, and locale parity audits for React/TS codebases. Features framework-aware config, automated audit scripts, and safe string replacement to ensure seamless localization.

reactive-ui-patterns

Reactive UI patterns for remote data fetching, enabling smooth in-place updates, persistent scroll position, and efficient loading state management using the .current property.

browser-debugger

Comprehensive UI testing, visual fidelity analysis, and browser debugging using Chrome DevTools MCP and AI-driven vision models.