Skill UI

Transforms shorthand, quasi-code, or fuzzy natural-language notes into production-ready implementations, bridging collaborators with different expertise and ensuring robust, expert-quality output.

This skill generates a detailed, multi-phase plan for complex, multi-file refactoring projects. It ensures safety by first analyzing the codebase, identifying dependencies, and structuring changes in a safe sequence (e.g., Types first, then implementations, followed by tests and cleanup). It forces the AI to output a comprehensive plan, including rollback steps and verification points, and waits for user confirmation before making any actual code changes.

A comprehensive tool for validating, generating, and auditing hreflang tags for multilingual and multi-regional websites. It checks critical SEO requirements, including self-referencing tags, bidirectional return links, proper x-default implementation, and adherence to ISO language/region codes. Use this when optimizing content for global audiences or ensuring Google correctly indexes all language versions.

This tool performs a comprehensive audit of website images to ensure optimal SEO and web performance. It checks for proper alt text descriptions, recommends modern formats (WebP, AVIF), validates file sizes, and verifies responsive image implementation using `srcset` and `sizes`. Furthermore, it guides best practices for lazy loading, prioritizing LCP images, and preventing Cumulative Layout Shift (CLS) by checking for dimensions.

Comprehensive audit covering all aspects of web technical SEO, including crawlability (robots.txt, sitemaps), indexability, security headers, and URL structure. It deeply analyzes Core Web Vitals (LCP, INP, CLS) and assesses complex rendering scenarios like JavaScript SEO and structured data implementation for optimal search engine visibility.

Automates the creation of copy-paste ready implementation documentation by parsing a PR plan, extracting numbered steps, and emitting precise, executable markdown files with file paths, code blocks, and verification checklists for every action.

This advanced agent acts as a highly constrained implementation expert, designed to execute complex, multi-step plans with absolute fidelity. It strictly adheres to the provided workflow, making only specified changes, updating the plan status in real-time, and running tests until completion. Ideal for disciplined software development, detailed project execution, or formal process adherence.

A comprehensive tool that analyzes complex codebases to generate detailed, structured architectural blueprints. It automatically detects and documents the entire technology stack, including primary languages (.NET, Java, Python, etc.), dependencies, versions, licensing, and implementation patterns. The output provides actionable documentation covering coding conventions, usage examples (API, data access), and visual architecture maps, ensuring consistency across guided software development projects.

This skill systematically reviews test code to identify and correct common anti-patterns. It detects issues such as flaky tests, overly mocked dependencies (over-mocking), brittle assertions, excessive test size (The Giant), and structural dependencies. It explains the flaw, provides best practices, and suggests refactored, reliable implementations, helping maintain high test quality and stability.

A comprehensive guide for writing and reviewing robust, behavior-first unit tests for Vue 3, TypeScript, and Pinia stores. This skill covers advanced patterns for testing components, composables, and state management using Vitest and Vue Test Utils, emphasizing black-box assertions and minimizing implementation coupling.

Automatically update implementation plan files to reflect new requirements, ensuring structured, machine-readable phases with explicit tasks and validation criteria for AI agents to execute deterministically.

This skill guides the implementation of essential user feedback states—Loading (Skeleton), Empty (Zero Data), Error, and Success—for data-dependent components or entire pages. It ensures a robust and polished user experience by providing structured, best-practice patterns for handling various data scenarios, preventing visual gaps or dead ends in the UI flow.