Skill UI

Applies Anthropic’s official color palette, typographic hierarchy, and accent system to any artifact that needs the company’s visual identity, ensuring consistent styling across materials with smart fallbacks for system fonts.

Guides React Server Components workflows, streaming SSR, code splitting, bundle/image/font optimizations, and Core Web Vitals monitoring to keep Next.js frontends fast and responsive.

Optimizes Astro projects with critical CSS inlining, asset compression, font-loading tweaks, third-party deferment, and LCP/image preload strategies aimed at sustaining 95+ Lighthouse scores.

Helps developers systematically optimize web performance by measuring key metrics, reducing bundle size, deferring scripts, optimizing images and fonts, and tuning caching and CSS for faster Time to Interactive and better Lighthouse scores.

This guide provides comprehensive best practices for creating high-quality videos using Remotion within a React environment. It covers advanced techniques for dynamic content generation, including integrating 3D models (Three.js), managing diverse assets like audio, video, and fonts, implementing complex animations, data visualization, and generating precise captions. Use this skill when developing professional, robust video generation workflows in React.

Theme Factory delivers 10 curated color and font themes plus a workflow to apply or generate palettes for slides, docs, reports or landing pages, ensuring consistent visual identity across artifacts.

Utility to browse Google Fonts, capture trending faces, suggest pairings, and output import snippets plus Tailwind config so frontend teams can finalize typography systems quickly.

This skill provides comprehensive customization for the Windsurf IDE's visual environment. Users can configure color schemes, optimize fonts for readability, adjust UI scaling, and enable advanced accessibility features to ensure compliance with standards like WCAG 2.1. It is essential for creating personalized, highly accessible, and efficient working environments.

A comprehensive skill for advanced text and typography handling within the Makepad framework. It provides robust mechanisms for font configuration, text layout management (Layouter), and high-quality GPU-based text rendering using Signed Distance Fields (SDF). Use this skill when needing to implement rich text displays, manage complex font styles, or ensure crisp, scalable typography across different resolutions.

This skill crafts agency-level digital experiences with haptic depth and cinematic spatial rhythm. It enforces premium aesthetics like Apple-esque design, avoiding standard fonts and generic layouts. Features include asymmetrical bento grids, nested component architecture, and fluid physics-based animations using custom cubic-beziers for a polished, high-end user interface.

This skill generates ultra-minimalist, editorial-style web interfaces using a warm monochrome palette and flat bento grids. It enforces strict design constraints, avoiding generic fonts, heavy shadows, and clichéd copy. Ideal for creating premium, document-like workspace platforms with bespoke typography, muted pastel accents, and meticulous structural whitespace.

This skill guides developers through advanced techniques to optimize Shopify store performance and improve Core Web Vitals (LCP, CLS, INP). It covers fixing lazy-loaded hero images, migrating to the modern `image_url` filter for responsive images, profiling slow Liquid renders, and optimizing font delivery, ensuring a fast and professional e-commerce experience.