Skill UI

Build production-quality, accessible, responsive user interfaces. Use for creating or modifying components, layouts, state management, and ensuring WCAG compliance. Focuses on design system adherence, avoiding AI-generated aesthetics, and delivering polished, professional UI.

This skill provides robust mechanisms to verify the integrity of AI agent plugins, tools, and dependencies. It generates deterministic SHA-256 manifests (INTEGRITY.json) for all components, allowing users to detect unauthorized modifications, track provenance, and ensure that deployed assets match their published versions. Use this during CI/CD pipelines, code review, and pre-production promotion to secure the entire agent ecosystem.

This skill teaches users to apply the scientific method to software debugging. Instead of random changes, it guides the process through five steps: Observation, Hypothesizing, Prediction, Testing, and Analysis. By systematically forming and testing specific, measurable hypotheses, users can efficiently isolate failing components and confirm the true root cause of technical issues.

This comprehensive guide outlines best practices for writing robust JavaScript and TypeScript unit tests using the Jest framework. It covers essential topics including proper test structure, effective dependency mocking strategies (using jest.mock and jest.spyOn), handling asynchronous code, implementing snapshot testing, and modern techniques for testing React components with React Testing Library. It also provides a detailed reference of common Jest matchers.

This guide details the process of implementing internationalization (i18n) in a Next.js application using the next-intl library. It provides step-by-step instructions on adding new languages, covering translation updates, configuring routing, modifying middleware, and updating UI components to ensure complete multi-language support.

A comprehensive guide to creating production-grade Product Requirements Documents (PRDs). This skill helps bridge the gap between vague business concepts and concrete technical specifications for modern software systems and AI features. It enforces a structured workflow, ensuring all necessary components—from user stories and success KPIs to technical architecture and risk analysis—are defined.

This guide provides the complete, step-by-step migration pattern for outdated React context APIs (such as contextTypes, childContextTypes, and getChildContext) to the modern createContext API. Since context migration is always a cross-file process, this skill emphasizes the required coordination between the provider and all consumer components to prevent runtime failures and correctly update the entire application codebase.

Guides setting up Microsoft Fluent UI Blazor components, ensuring providers/services registrations, handling icon packages, binding lists and autocomplete, plus using dialog and toast services in Blazor apps.

This guide provides proven architectural patterns for building complex, reliable, and scalable workflows using n8n. It covers core patterns like Webhook processing, HTTP API integration, database synchronization, AI agent design, and scheduled tasks. Learn how to select the right pattern and utilize advanced components for robust automation.

A comprehensive reference for diagnosing and fixing silent breaking changes in React 18 class components. This guide covers how React 18 automatically batches state updates in asynchronous contexts (e.g., setTimeout, Promises, async/await), providing patterns for handling state reads after awaiting, and offering guidance on when to correctly use `flushSync` versus refactoring.

This tool generates a complete, structured TypeSpec declarative agent definition tailored for Microsoft 365 Copilot. It systematically creates necessary components including detailed role instructions, conversation starters, and a comprehensive list of required capabilities (e.g., WebSearch, OneDrive, Teams, CodeInterpreter). This ensures the agent is fully functional and ready for deployment within the M365 ecosystem.

This skill generates new UI components that strictly adhere to the StyleSeed design system conventions. It ensures the component is structurally sound, accessible, and uses specified design tokens for colors, spacing, and typography. Use this when creating isolated, reusable UI parts following the defined design system standards.