Frontend Development Bundle

A collection of skills for building, managing, and troubleshooting modern user interfaces.

Browse all skill bundles

Included Skills (66)

  1. Developer Device Platform Basics — Provides guidance and instructions on managing remote devices on Developer Device Platform (DDP). Use when reserving remote Android devices, establishing connection tunnels, checking session status, or extending/cancelling leases. Don't use for iOS or local device/hardware inquiries.
  2. Tao Train Pointpillars — PointPillars for 3D object detection from LiDAR point clouds. Encodes point clouds into a pseudo-image via a
  3. MVVM Toolkit Assistant — This tool assists developers in implementing MVVM patterns by providing source generators, base classes, and command structures for .NET application development.
  4. Valtio — Valtio is a proxy-based state library for React: wrap an object in proxy(), mutate it like plain JavaScript, and components that read it through useSnapshot re-render only for the properties they used. Use when someone asks for "simple React state management", "Valtio", "proxy state", "mutable state in React", "alternative to Zustand/Redux", or "state management without boilerplate". Covers Valtio 2: proxy state, snapshots, subscriptions, computed getters, async values with React's use hook, proxyMap/proxySet, and devtools.
  5. Zustand — Zustand provides a lightweight, hook‑based state‑management solution for React, allowing components to subscribe to specific slices of a store without a context provider. It enables developers to share state across components, persist data to localStorage, and integrate middleware such as devtools, immer, or subscribeWithSelector, while supporting typed stores, shallow comparison, and per‑request instances for frameworks like Next.js. React teams seeking a simple, efficient alternative to Redux for state sharing and persistence benefit from this approach.
  6. Formik Validation Patterns — This skill provides standardized Formik implementation patterns and validation schemas to help developers build robust, type-safe forms with efficient submission handling.
  7. Performing Thick Client Application Penetration Test — Conduct a thick client application penetration test to identify insecure
  8. Evolution — This skill enables makepad-skills to self-improve continuously during development.
  9. Analyzing Golang Malware With Ghidra — Reverse engineer Go-compiled malware in Ghidra by parsing Go buildinfo
  10. Azure Messaging Webpubsubservice Py — Azure Web PubSub Service SDK for Python. Use for real-time messaging, WebSocket connections, and pub/sub patterns.
  11. Lovable Scaffolding Remover — This tool automates the removal of Lovable branding and boilerplate from Vite projects, helping developers quickly sanitize their codebase for production deployment.
  12. Material Design Guide — This guide assists developers in implementing Google's Material Design aesthetic, focusing on elevation, motion, and consistent component structures for web applications.
  13. Motion — Motion (formerly Framer Motion) is an animation library for React that animates components through declarative props. Use when adding fade-ins, hover and tap effects, exit animations with AnimatePresence, layout and shared-element transitions, scroll-linked or scroll-triggered effects, staggered lists, or when migrating from framer-motion to the motion package.
  14. Molykit — CRITICAL: Use for MolyKit AI chat toolkit. Triggers on: BotClient, OpenAI, SSE streaming, AI chat, molykit, PlatformSend, spawn(), ThreadToken, cross-platform async, Chat widget, Messages, PromptInput, Avatar, LLM
  15. Robius Widget Patterns — CRITICAL: Use for Robius widget patterns. Triggers on: apply_over, TextOrImage, modal, 可复用, 模态, collapsible, drag drop, reusable widget, widget design, pageflip, 组件设计, 组件模式
  16. Raycast — Expert guidance for building Raycast extensions — custom commands, views, and integrations for the Raycast launcher on macOS. Helps developers create productivity extensions using React, TypeScript, and Raycast's API for lists, forms, actions, and preferences.
  17. Phoenix Framework Assistant — Assists developers using the Phoenix web framework by providing code snippets, project structure guidance, and installation instructions.
  18. Alpine — Alpine.js is a lightweight JavaScript framework for adding interactivity to HTML markup. It provides reactive data, event handling, and DOM manipulation through HTML attributes — like a modern jQuery replacement with declarative syntax.
  19. Recharts — Recharts is a composable charting library for React that renders responsive SVG charts. Use when a user asks to create line charts, bar charts, area charts, pie charts, or composed dashboard visualizations using the Recharts component library.
  20. Cross-Platform Development Orchestrator — This skill coordinates parallel feature development across web, mobile, and desktop platforms to ensure consistent functionality through robust API-first architecture and shared data contracts.
  21. Sparse4D Trainer — Trains, evaluates, and runs inference on TAO Sparse4D 3D detection and tracking models for multi-camera perception.
  22. Turbopack — Turbopack is a Rust-based incremental bundler integrated into Next.js, serving as the default for next dev and next build from Next.js 16 onward. It enables developers to configure Turbopack, migrate webpack configurations and loaders, resolve build errors, or revert to webpack with the --webpack flag. This skill benefits front‑end engineers seeking efficient, modern bundling solutions within the Next.js ecosystem.
  23. Next-Intl Translator — Internationalize Next.js applications using next-intl for multi-language support, locale routing, and UI content translation.
  24. Gin — High-Performance Go Web Framework — Gin is a Go web framework with a Martini-like API and a zero-allocation router. Use it to build HTTP APIs that need routing, middleware, request binding/validation, JSON responses, and graceful shutdown with low per-request overhead. Use when a user asks to scaffold a Go HTTP API, add route groups or middleware, validate request bodies, or shut a Go server down cleanly.
  25. Reverse Engineer — Expert reverse engineer specializing in binary analysis, disassembly, decompilation, and software analysis. Masters IDA Pro, Ghidra, radare2, x64dbg, and modern RE toolchains.
  26. React Three Fiber — The skill builds interactive 3D scenes in React using React Three Fiber, rendering meshes, lights, and cameras as JSX components. It enables developers to embed product configurators, load GLTF models, animate with useFrame, and add click or hover interactions to 3D objects. The service also optimizes performance for slow R3F scenes, benefiting web developers who need seamless, high‑quality 3D integration in React or Next.js applications.
  27. Makepad Platform — CRITICAL: Use for Makepad cross-platform support. Triggers on: makepad platform, makepad os, makepad macos, makepad windows, makepad linux, makepad android, makepad ios, makepad web, makepad wasm, makepad metal, makepad d3d11, makepad opengl, makepad webgl, OsType, CxOs, makepad 跨平台, makepad 平台支持
  28. CVA Variant Generator — Generates type-safe component variants using Class Variance Authority (CVA) for Tailwind CSS projects, aiding developers in creating flexible components.
  29. Marko — Marko is an HTML-based UI language and framework from eBay with streaming server rendering, fine-grained reactivity and automatic partial hydration. Use when a user asks to build or migrate a Marko app, write .marko components with <let>, <const>, <for> and <try>/<await>, stream pages with async data, set up Marko Run or Vite, or upgrade from Marko 5 to Marko 6.
  30. UX Feedback Generator — This tool helps developers implement consistent loading, success, error, and empty states within UI components to improve overall user experience and interface clarity.
  31. Makepad Layout — CRITICAL: Use for Makepad layout system. Triggers on: makepad layout, makepad width, makepad height, makepad flex, makepad padding, makepad margin, makepad flow, makepad align, Fit, Fill, Size, Walk, "how to center in makepad", makepad 布局, makepad 宽度, makepad 对齐, makepad 居中
  32. Dropthehassle Publish — Publish a finished static site to a free HTTPS link with DropTheHassle: build it if needed, deploy, hand over the claim link, verify it is live, never spend money.
  33. Snipcart Ecommerce Integration — Snipcart enables developers to add a full-featured shopping cart to any website using simple HTML attributes, ideal for static and JAMstack sites.
  34. Thick Client Auditor — This tool assists security professionals in performing authorized vulnerability assessments of desktop applications by analyzing local storage, IPC mechanisms, and client-side trust boundaries.
  35. Rayden UI Generator — This tool generates production-quality React and Tailwind CSS code using the Rayden UI library to help developers build consistent, design-system-compliant interfaces quickly.
  36. Apollo Client Expert — Assists developers using Apollo Client to manage GraphQL data fetching, caching, and state management in React applications.
  37. Pinia State Management — This skill helps Vue.js developers manage application state with Pinia's type-safe stores and Composition API support.
  38. Chi Router Expert — Assists developers in building composable HTTP services using the Chi lightweight Go router and its middleware stack.
  39. Boost Asio Pro — Boost Asio Pro guides developers in writing and reviewing asynchronous C++ networking code, covering Boost.Asio and standalone Asio. It addresses TCP/UDP servers and clients, SSL/TLS, timers, strands, io_context, co_spawn, awaitable, async_read/async_write, asio::spawn, yield_context, and pre‑C++20 completion‑handler callbacks. The skill benefits developers building high‑performance, reliable network applications.
  40. Frontend Security Specialist — This expert assistant helps frontend developers implement robust security measures, including XSS prevention and secure DOM manipulation, to protect applications from client-side vulnerabilities.
  41. UX Audit Assistant — This tool helps designers and developers evaluate screen usability by applying Nielsen's heuristics and modern mobile interface best practices for improved experiences.
  42. Frontend Developer — Build React components, implement responsive layouts, and handle client-side state management. Masters React 19, Next.js 15, and modern frontend architecture.
  43. Animation Choreographer — Advanced JavaScript animation skill for creating complex, high-performance web animations.
  44. Markstream Vue — Integrate markstream-vue into plain Vue 3 with renderer modes, code and DOM choices, streaming state, virtualization, optional peers, and scoped components.
  45. Rocket Web Assistant — This skill helps developers build type-safe HTTP APIs using the Rocket web framework with Rust's compile-time safety guarantees.
  46. Markstream Vue2 CLI — Integrate markstream-vue2 into Vue CLI or Webpack 4 with export-map-safe CSS, CDN worker fallbacks, and conservative code-block defaults.
  47. Interactive Concept Visualizer — This tool creates engaging, self-contained HTML pages that simplify complex topics through interactive diagrams and analogies for smart non-expert audiences.
  48. Nextjs On Cloudflare — The skill guides developers through building, migrating, and deploying Next.js applications on Cloudflare Workers with vinext, providing clear, step‑by‑step instructions for new projects and existing app transitions. It helps teams choose between vinext and OpenNext while ensuring all dependencies are correctly configured. The result is a seamless transition and efficient deployment for modern web applications.
  49. Voice AI Architect — This skill assists developers in building low-latency, production-ready voice applications using advanced real-time streaming technologies and industry-leading audio synthesis and transcription providers.
  50. Fluentd Log Aggregator — This skill configures Fluent Bit and Fluentd to collect, route, and enrich logs for security operations teams managing centralized observability infrastructure.
  51. Javascript Pro — Master modern JavaScript with ES6+, async patterns, and Node.js APIs. Handles promises, event loops, and browser/Node compatibility.
  52. StyleSeed Component Generator — This tool generates standardized UI components for developers, ensuring strict adherence to StyleSeed design conventions, token usage, and React best practices.
  53. Apple Design Advisor — This tool provides developers and designers with platform-specific guidance for Apple Human Interface Guidelines to ensure consistent, high-quality user experiences across devices.
  54. Elixir Expert — Helps developers write idiomatic Elixir code with OTP patterns, Phoenix, and concurrent systems.
  55. Avalonia Zafiro Architect — This skill provides essential architectural standards and reactive programming conventions to help developers build robust, cross-platform applications using Avalonia and Zafiro.
  56. Avalonia Zafiro Architect — This skill provides architectural patterns and best practices for building robust Avalonia applications using the Zafiro toolkit and ReactiveUI framework.
  57. Conductor Track Manager — This skill assists developers in organizing and managing software development lifecycles by streamlining the creation, planning, and tracking of feature, bug, and refactor units.
  58. React Modernization Specialist — This skill assists developers in upgrading React applications, migrating class components to hooks, and implementing modern concurrent features through automated refactoring.
  59. Community Feedback Orchestrator — This skill streamlines the routing of community insights to internal teams and ensures transparent, timely communication of outcomes back to members.
  60. Makepad UI Developer — Helps developers build Rust apps with Makepad UI through setup, patterns, shaders, and troubleshooting.
  61. Bun Runtime Assistant — This skill assists developers in building, migrating, and optimizing JavaScript and TypeScript projects using the high-performance Bun runtime environment.
  62. Conversational Voice Engine — Develops real-time, interrupt-capable voice AI systems for developers building streaming conversational assistants, customer service agents, and interactive voice-enabled application pipelines.
  63. Business Report Automator — This tool aggregates multi-source business data to generate comprehensive, executive-ready weekly KPI reports that provide actionable strategic insights for management teams.
  64. Angular UI Patterns — This skill provides modern Angular UI patterns for loading states, error handling, and data display to assist developers building robust, reactive component architectures.
  65. React Error Handler — This tool helps React and Next.js developers implement robust error boundaries, fallback UIs, and error reporting to improve application resilience.
  66. Next Intl Localizer — Automates the integration of new languages into Next.js applications using next-intl by updating routing, middleware, and translation files for developers.

Opening your workspace…