Agent Skills Hub

frontend-design

Build distinctive, production-grade frontend interfaces and web components with high aesthetic quality, avoiding generic AI design patterns.

cloudscape-codegen

Generate production-ready Cloudscape Design System React + TypeScript UI code, components, and scaffolds with accessibility, responsive patterns, and robust state handling.

css-modules

CSS Modules styling strategy for component-level encapsulation using Lightning CSS or PostCSS, featuring TypeScript integration and Vite configuration.

vibe-orchestrator

Master workflow controller for Lovable-style, AI-driven development. Instantly generates premium, multi-page, animated applications by routing to specialized sub-agents. No prompts needed—just build.

state-management

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

tailwind-config

Manage Tailwind CSS configuration, custom design tokens, themes, and design system utilities across the monorepo.

tailwind-design-system

Build scalable, production-ready design systems using Tailwind CSS v4, featuring CSS-first configuration, design tokens, component variants, and responsive patterns.

web-frameworks

Full-stack web development suite featuring Next.js (SSR/RSC/App Router), Turborepo for monorepo management, and RemixIcon for UI assets. Optimized for modern React, high-performance builds, and scalable architecture.

design-system-patterns

Master design system architecture: implement design tokens, multi-brand theming, component libraries, and automated design-to-code pipelines for scalable UI foundations.

react-typescript

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

figma-design-to-code

Convert Figma designs to project-consistent UI code using TemPad Dev MCP for precise markup, styling, and token integration.

ui-design-system

Professional UI design system toolkit for design token generation, component architecture, responsive calculations, and developer handoff documentation to ensure visual consistency.