Skill UI

This skill automates the migration of existing frontend code (including React, Vue, Angular, and Next.js components) into a structured Stitch Design. It orchestrates the extraction of a self-contained HTML file, analyzes the source code to build a comprehensive design system document, and finally uploads both assets into your Stitch project for iteration and improvement.

Analyzes any frontend codebase (React, Vue, Svelte, Angular, plain CSS, Tailwind) to document the complete design system. It extracts crucial visual elements—including color palettes, typography, spacing scales, and component patterns—directly from source files, without needing to build, render, or run the application. Ideal for design audits, visual language documentation, or migrating a project's identity into a design tool.

This skill captures a fully self-contained static HTML snapshot from any running web application (e.g., React, Vue, Next.js). Using Puppeteer, it renders the live DOM, automatically inlining all CSS styles and converting images, assets, and backgrounds to base64 data URIs. This ensures the generated HTML file is completely self-sufficient and requires no external network connection, making it perfect for sharing UI states, creating documentation, or preparing assets for offline viewing.

This comprehensive skill serves as an entry point for all web UI design needs, covering components, pages, dashboards, and advanced layouts using React, Vue, or pure HTML/CSS. It addresses not only aesthetics and polish (color, typography, spacing) but also deep structural concerns like responsive design, UX auditing, and visual system implementation. Use it whenever a user asks to improve the look, feel, or function of a digital interface.

This tool automatically converts design screenshots or visual exports into structured, functional Vue 3 Composition API components. It supports popular UI libraries like Vant, Element Plus, and Ant Design Vue. By batch converting screenshots, it streamlines the development process from raw design assets to reusable, production-ready code, significantly boosting frontend development efficiency.

Provides a comprehensive guide for modern Vue.js 3 development. It covers the Composition API, optimal component architecture (props, emits), reactive state management using Pinia, advanced routing (Vue Router), and Nuxt/SSR patterns. Use this skill when building, reviewing, or architecting large-scale, maintainable Vue applications.

A comprehensive guide for integrating Markstream, a high-performance Markdown renderer, into modern frontend frameworks like React, Vue, Svelte, and Next.js. It handles complex streaming scenarios, ensuring minimal peer dependencies, correct CSS ordering, and proper Server-Side Rendering (SSR) boundaries for dynamic content and AI chat interfaces.

A specialized tool designed to detect, suggest, and evaluate Gang of Four (GoF) design patterns within TypeScript and JavaScript codebases. It analyzes code structure, identifies code smells, and provides stack-aware refactoring recommendations, supporting frameworks like React, Angular, NestJS, and Vue.

This skill guides users to create new Power Pages code sites (SPA) from scratch or using templates. It supports React, Angular, Vue, and Astro frameworks. The process covers requirements discovery, component planning, design, implementation, validation, and deployment. It ensures production-quality sites with live preview feedback loops and proper Git checkpoints.

This skill guides the systematic migration of legacy Power Pages sites from Bootstrap 3 to Bootstrap 5. It automates the process using the `pac pages bootstrap-migrate` engine, handles necessary residual CSS/hierarchy fixes, and verifies the Bootstrap 5 runtime flag flip upon upload. It is strictly for traditional (native) content sites and does not support modern code-based frameworks like React or Vue.

Provides a comprehensive setup for Playwright End-to-End (E2E) testing. This skill automatically analyzes your project structure (framework detection, TypeScript/JavaScript) and generates all necessary files: the core playwright.config.ts, standardized folder structure, initial test examples, and full CI/CD workflows (GitHub Actions/GitLab). It ensures your testing environment is production-ready, supporting modern frameworks like Next.js, React, Vue, and Angular.

A comprehensive guide for developing full-featured VS Code extensions from scratch or converting existing web applications (JS/React/Vue). Learn to implement custom commands, complex webviews, hierarchical tree views, custom editors, and integrate advanced features like AI agents using file-bridge IPC. Supports modern build stacks including TypeScript, esbuild, and Vite.