Skill UI

A comprehensive guide providing expert patterns for building modern, robust Shopify applications. This skill covers the entire development lifecycle, including React Router app setup, handling complex webhooks, embedding the app within the Shopify Admin using App Bridge, and interacting with the GraphQL Admin API. Ideal for developers building e-commerce integrations.

This skill guides authorized security professionals through testing web applications for clickjacking vulnerabilities. It involves checking frame embedding controls (like X-Frame-Options and CSP) and crafting complex proof-of-concept overlays to see if users can be tricked into performing unintended sensitive actions, such as deleting accounts or transferring funds.

This guide provides a complete, end-to-end workflow for implementing Know Your Customer (KYC) identity verification using the Persona API. It details both backend implementation (creating inquiries, handling completion callbacks, resuming flows) and frontend integration (embedding the verification UI into web applications). Ideal for secure user onboarding and identity validation processes.

This workflow details how to build a complete, browser-based Integrated Development Environment (IDE). Using WebContainers, it integrates key components like a file explorer, Monaco editor, integrated terminal, and live preview. This architecture is crucial for developing interactive coding playgrounds, educational web tools, or embedding robust development sandboxes into existing web applications.

Use the StackBlitz SDK to seamlessly embed live, interactive code playgrounds (WebContainers) directly into documentation, blog posts, or tutorials. This method allows users to view and experiment with code examples (e.g., React, TypeScript) without leaving the current page, making tutorials and documentation highly engaging and functional. Supports embedding from GitHub repositories or creating inline projects.

Guides developers through the pricing tiers of StackBlitz, covering free embedding options and commercial licensing for the WebContainer API. This skill is essential when integrating WebContainers or utilizing the StackBlitz SDK, ensuring correct setup, cost management, and adherence to official usage guidelines.

This guide details how to install and configure the WebContainer API, enabling client-side Node.js execution directly in the browser. It also provides instructions for integrating the StackBlitz SDK, which is used for embedding highly interactive code editors into web applications. The guide covers necessary dependency installations, code examples, and crucial HTTP header configuration (COOP/COEP) required for cross-origin isolation and secure operation.

This comprehensive guide provides production-ready patterns for the WebContainer API, essential for building sophisticated online IDEs and code playgrounds. It covers key functionalities such as singleton WebContainer management, robust file system CRUD operations, process lifecycle management, jsh terminal emulation, and embedding projects using the StackBlitz SDK. Ideal for developers creating collaborative development environments.

This skill provides a comprehensive solution for embedding the powerful, Photoshop-compatible Photopea editor into any web application. Using photopea.js, developers can control the embedded instance via JavaScript, enabling advanced workflows such as opening remote files, loading local assets (fonts, brushes), executing custom scripts to manipulate layers and text, and exporting the final result in various formats (PNG, JPG, PSD, WebP). Ideal for building professional creative tools directly into your product.