Skill UI

This workflow automates the design handoff process by creating a continuous pipeline from Figma designs to functional React code. It scans Figma components, generates code batches (supporting TypeScript, Tailwind CSS, etc.), and includes change detection to automatically update the codebase when the design source changes. Ideal for building complex design systems and implementing CI/CD design-to-code workflows.

This advanced workflow allows developers to clone live websites directly into structured React or HTML code using the Anima platform. It goes beyond simple cloning by featuring post-generation customization rules (e.g., updating utility classes or imports) and a dedicated design token mapper. This ensures the generated code is immediately usable and adheres strictly to the project's existing design system tokens, while also organizing the final component structure.

This expert skill converts static or modern frameworks (React, Next.js, HTML) into fully dynamic, pixel-perfect, and SEO-optimized WordPress themes. It functions as a senior architect, ensuring absolute fidelity to the source while integrating core WordPress functionalities like ACF, custom hooks, and technical SEO best practices. Ideal for large-scale website migrations.

This comprehensive guide teaches developers how to build advanced, interactive, and data-driven components within Framer using React. It covers creating components with dynamic property controls (e.g., animated counters), integrating real-time data from external APIs, and implementing sophisticated behavioral code overrides (such as scroll-triggered animations or magnetic interactions). Ideal for extending Framer's capabilities for professional web design.

This skill provides comprehensive diagnosis and optimization for agent skill libraries. By analyzing historical session transcripts from platforms like Claude Code and Codex, alongside static skill file checks, it scores each skill across 8 dimensions. It identifies issues such as low trigger rates, poor post-invocation user reaction, and incomplete workflow execution, generating a prioritized report (P0/P1/P2) to significantly improve the agent's overall performance and reliability.

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.

This catalog provides core abstractions for implementing event-driven architectures (EDA). It includes `DomainEvent`, the base class for all business domain events, and `EventPublisher`, the mechanism used to publish these events to registered handlers. Use these components to effectively decouple services and build robust, reactive systems.

This guide details the implementation of the EventHandler pattern for robust, event-driven architecture. Learn how to create handlers that react to the system's domain events (lifecycle hooks), process payloads, and publish custom domain events. Crucially, it enforces architectural best practices by ensuring handlers act as thin orchestrators, delegating all core business logic to separate, reusable service abstractions.

This comprehensive guide provides core principles and implementation patterns for adopting the Flat Design aesthetic. It details how to build interfaces across web (CSS), mobile (SwiftUI, Flutter), and cross-platform frameworks, emphasizing zero depth, sharp geometries, and high-contrast solid colors while strictly avoiding shadows, gradients, and bevels. Use this when aiming for a modern, minimalist, and clean UI/UX experience.

A comprehensive style guide and implementation reference for the Retro Futurism aesthetic. Perfect for designing interfaces that evoke the 1950s and 1960s space age, atompunk, or mid-century modern vibes. It outlines core principles, color palettes, typography, and provides cross-platform code examples (CSS, SwiftUI, Flutter, React Native) to achieve sleek, aerodynamic, chrome finishes.

A comprehensive style guide for implementing the Synthwave and Outrun aesthetic across web and mobile applications. This guide details the core principles, including dark mode backgrounds, glowing neon accents (magenta, cyan), and the signature perspective grid. It provides technical examples using CSS, SwiftUI, Flutter, and React Native to achieve authentic retro-futuristic visual fidelity.

This guide details how to integrate Expo and React Native into existing native iOS or Android applications (brownfield development). It addresses the core challenge of adopting new technology incrementally, outlining two distinct approaches: Isolated (consuming prebuilt AAR/XCFramework) and Integrated (adding sources directly to existing build systems like Gradle/CocoaPods).