Skill UI

This skill automatically gathers and structures comprehensive context for Apple product development. It analyzes existing project files (like README, Info.plist, and code) and prompts the user for details across product overview, target platforms, technology stack, design system, and accessibility requirements. The output is a structured context document used by other specialized skills to ensure consistent, informed design and development decisions.

Guides frontend developers through keyboard navigation testing, offering best-practice advice, code snippets, and automated validation for accessibility, frameworks, and performance.

This skill generates Mermaid diagrams to create visual organizational tools specifically designed for neurodivergent individuals, particularly those with ADHD. It helps externalize executive functions, reducing cognitive overwhelm by breaking down complex tasks into compassionate, manageable micro-steps. The tool auto-detects signs of distress and supports multiple accessibility modes (e.g., colorblind-safe, monochrome), making it useful for project planning, decision mapping, and personal productivity tracking.

Automates guidance for Performance Lighthouse Runner tasks in frontend projects, offering best practices, production-ready snippets, and validations whenever performance or accessibility topics arise.

Automates Pinia store setup with best practices, config generation, and validation for frontend projects spanning React, Vue, CSS, accessibility, and performance needs.

Automated assistance for building React components, offering best practices, production-ready code generation, and validation guidance for frontend patterns like accessibility and performance optimization.

A senior specialist for building modern, production-grade React applications using React 19, Server Components, and Next.js App Router. Expertise includes implementing complex state management (Redux, Zustand), optimizing performance with memoization, handling data fetching with TanStack Query, and ensuring strict TypeScript typing and accessibility standards. Ideal for architecting large-scale frontend systems.

Provides automated guidance for setting up responsive breakpoint analysis, follows frontend best practices, validates configurations, and supports React/Vue/CSS accessibility and performance scenarios.

This comprehensive tool validates web applications against WCAG 2.1/2.2 accessibility standards. It combines automated scanning using industry-leading tools (like axe-core, Lighthouse) with crucial manual checks for keyboard navigation, ARIA implementation, and color contrast. It is essential for QA teams and developers who must ensure high usability and accessibility for all users, including those relying on screen readers.

Conducts detailed accessibility audits for web apps via the accessibility-test-scanner plugin, verifying WCAG 2.1/2.2 compliance, ARIA usage, keyboard navigation, and screen reader compatibility while providing remediation guidance when accessibility or compliance checks are requested.

This skill provides a practical guide for comprehensive accessibility validation of web applications. It helps users test compatibility with various screen readers, validate ARIA implementations, and debug issues related to assistive technologies. Ideal for ensuring that web forms, dynamic content, and navigation are fully usable by people with disabilities.

Automates Tailwind class optimization for frontend developers, guiding users through best practices, validating CSS patterns, and generating React/Vue-friendly code with accessibility and performance assurances.