Skill UI

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.

Unship is a dedicated local workflow for front-end developers to compare multiple AI-generated UI alternatives (such as layouts, copy, or flows) directly within a running application environment. Instead of committing to one generated version, it adds temporary source-level variants, allowing for visual comparison. After the user selects the final version, the skill automatically cleans up all unused temporary code and attributes, ensuring a clean, production-ready codebase. Note: This tool is for local iteration only, not for production A/B testing or analytics.

This skill acts as a sophisticated router for frontend design, providing access to 48 deeply opinionated UI styles (e.g., Material, Brutalism, Glassmorphism). It ensures professional aesthetic coherence by enforcing specific style guidelines, utilizing curated universal color palettes, and guiding the implementation process for both web and mobile applications.

This skill provides expert guidance on design engineering, focusing on UI polish, micro-interactions, and high-craft component decisions. It is ideal for reviewing frontend code (React, CSS, Tailwind) to elevate perceived quality, addressing details like easing, duration, and physical feedback. Use it when subtle detail and refined taste are critical differentiators.

A portable CI gate designed to enforce Core Web Vitals (LCP, CLS, INP) budgets and category score floors on production frontend builds. It integrates into CI pipelines to automatically block pull requests if the performance metrics fall below defined Google standards, ensuring consistently fast and reliable user experiences.

This comprehensive skill provides an index of official blueprints and implementation guides for building full-stack, AI-powered applications using Weaviate. It covers advanced patterns such as Retrieval-Augmented Generation (RAG), agentic workflows, data exploration, and multimodal document search, guiding users through best practices for setup, clients, and frontends.

This skill provides comprehensive visual philosophy and art-direction guidelines for frontend design. It is ideal for creating high-concept campaigns, unique brand manifestos, or when a distinct, sophisticated, and art-like aesthetic is required. Users define a 'movement' and articulate its core principles across various sensory dimensions, ensuring the final output feels meticulously crafted and conceptually deep.

A comprehensive skill guide for defining the core intent, tone, and strategic direction of any frontend design. It applies rigorous cross-domain principles drawn from architecture, cinema, marketing, and automotive design. Use this before coding to establish purpose, visual hierarchy, and intentional structure, ensuring every design element is deliberate and highly crafted.

This skill defines a framework-agnostic, scalable architecture pattern for React and React Native applications. It mandates feature modules, strict state separation (server vs. UI), and disciplined import rules to create predictable, maintainable, and highly scalable codebases, regardless of the chosen framework (Next.js, Remix, etc.).

This discipline establishes a portable, framework-agnostic layer for ensuring type safety at the network edge of any React or React Native application. It mandates a single, typed API client to wrap all network fetching, guaranteeing that raw wire JSON is immediately parsed into trusted, domain-specific types or standardized error objects before entering the application state. This pattern drastically reduces runtime errors and enhances code robustness.

A portable, framework-agnostic system designed for robust field-side observability in React or React Native apps. It establishes a strongly typed event taxonomy, ensures best-effort, non-blocking data fan-out across multiple analytics providers, and enforces consent gates for all telemetry data. This system complements synthetic testing by capturing real user vitals (LCP, INP, CLS) and behavioral events in production.

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.