Skill UI

A comprehensive discipline for managing the write path in React or React Native applications using a query/cache layer. It codifies the full optimistic update lifecycle, ensuring that UI updates feel instantaneous, rollbacks are verbatim upon failure, and the global cache remains perfectly coherent across all components and list views. This pattern is essential for complex, highly interactive user experiences.

This skill generates comprehensive unit and integration tests using Jest for JavaScript and TypeScript. It supports advanced testing patterns, including deep mocking, asynchronous handling, snapshot testing, and testing React components with Testing Library. Use it when the user needs to thoroughly validate application logic and behavior.

A fast, grep-based linter that checks for common design system violations in CSS and component code, such as hardcoded colors, raw pixel values, and deprecated syntax. It provides immediate automated feedback to ensure code adheres to established design tokens and best practices.

A comprehensive guide and tool for applying sophisticated motion effects to UI components. Use it to select from five personality seeds (Spring, Silk, Snap, Float, Pulse) or specific descriptive keywords (like toggle-flip or shimmer). Ideal for defining the 'vibe' and functional transitions of any element in a modern user interface.

This skill analyzes your project's current StyleSeed setup, detects outdated engine files, and safely updates the core components, skills, and rules. It follows a structured, non-destructive process, ensuring that user-defined code, such as theme.css and custom components, remains untouched while applying necessary upgrades.

Utilizes Expo DOM components to render web code verbatim inside a webview on native platforms, while maintaining native rendering on the web. This enables developers to integrate web-only libraries (such as charting tools, syntax highlighters, or complex CSS layouts) and incrementally migrate existing web components into a React Native application without substantial rewriting.

This skill generates comprehensive unit and component tests using Vitest, a fast testing framework built for Vite. It supports JavaScript and TypeScript, offering a Jest-compatible API with advanced features like ESM support, HMR, advanced mocking (vi.mock), snapshot testing, and React component rendering. Use it when dealing with unit testing, TDD, or configuring vitest.config.ts.

This template provides a highly flexible, fixed-size 1920x1080 canvas for creating professional presentations. Unlike traditional templates, it allows users to arrange content freely, treating each slide like a composable React component. It enforces strict design constraints (typography, color palette, visual hierarchy) to ensure every page maintains a polished, professional, and unique aesthetic, ideal for portfolios and artistic talks.

A comprehensive UI component designed to mimic the Spotify Now-Playing interface. It renders current music, podcast, or media content with album art, progress bar, and playback controls. Ideal for video overlays, streaming intros, or personal website hero sections, providing a highly branded and polished look.

This skill guides the design, implementation, and auditing of inclusive digital products based on WCAG 2.2 standards. It covers the POUR principles and provides technical guidance for generating semantic ARIA (Web) and native accessibility traits (iOS/Android). Use it when defining UI components, auditing compliance gaps, or ensuring robust keyboard navigation and focus management.

Generates a precise, evidence-based installation plan for a project's component catalog (ECC). Instead of loading a full, noisy bundle, this skill analyzes the repository's actual code structure, dependencies, and CI/CD evidence to classify skills, rules, and commands into 'DAILY' (essential) and 'LIBRARY' (referenceable) buckets. It ensures only necessary components are active, optimizing the development environment.

This comprehensive guide covers best practices for building modern Angular applications. It provides detailed instructions on component architecture, state management using Signals, advanced routing, dependency injection, handling forms (prioritizing Signal Forms), and implementing accessibility (ARIA). It also details setup procedures for new projects and modern rendering strategies like SSR.