Skill UI

A comprehensive guide to utilizing a core, token-driven component library and design system patterns. It details best practices for managing UI styles—including spacing, color, and typography—by using semantic design tokens instead of hard-coded values. Ideal for building consistent, scalable, and maintainable user interfaces across different platforms.

This skill provides robust patterns for handling API rate limits and throttling, specifically demonstrated using the Lokalise API. It teaches how to implement request queuing (p-queue) with required spacing, automatic exponential backoff with jitter upon receiving 429 errors, and how to proactively monitor and utilize rate limit headers (X-RateLimit-*). Ideal for optimizing high-throughput, reliable API interactions and bulk operations.

This skill provides advanced guidelines for designing robust and effective tools specifically for autonomous AI agents. It shifts the focus from traditional developer APIs to contracts optimized for Language Models (LLMs). Key topics covered include treating tool descriptions as prompt engineering, implementing namespacing, applying the Consolidation Principle, and utilizing Architectural Reduction patterns (like file system access) to maximize agent reliability and workflow complexity.

A comprehensive toolkit for senior UI designers to build robust and scalable design systems. It guides the generation of design tokens (colors, spacing, typography), structuring component libraries (Atoms to Organisms), implementing responsive layouts, and preparing detailed developer handoff documentation. Essential for maintaining visual consistency and bridging the gap between design and development.

This skill enforces a rigorous, opinionated baseline for UI development, ensuring consistency across spacing, hierarchy, typography, and layout. It helps maintain high code quality by fixing structural and stylistic inconsistencies, particularly useful for polishing AI-generated or quickly developed interfaces to meet professional standards and accessibility requirements.

This skill acts as an expert resource for the Makepad layout system. It helps users generate correct layout code and explain advanced UI concepts like flow direction, alignment, padding, and spacing. Use it when positioning, aligning, or structuring widgets in a Makepad application, ensuring responsive and complex UI compositions.

This comprehensive guide outlines world-class product design principles, mimicking Apple's standard. It covers building robust design systems, defining essential design tokens (color, typography, spacing, motion), structuring UI components (atoms to organisms), optimizing UX flows, and designing engaging onboarding experiences. Ideal for product designers and PMs needing to establish a cohesive, scalable visual language and improve overall user experience.

A comprehensive, systematic framework for auditing and improving web UI designs and frontend code. It teaches core principles like grayscale-first design, constrained scaling (for spacing, type, and color), and establishing clear visual hierarchy. Use this guide when needing to refine an existing UI that 'looks off,' or requires professional structural and aesthetic improvements.

This skill acts as a Visual Psychologist and Environmental Researcher, guiding the systematic mapping of visual elements—including color, typography, spacing, and imagery—to desired emotional states and conversion goals. It ensures that design decisions are strategic, supporting persuasion and brand narrative rather than merely being decorative. Use it when you need visuals to evoke a specific feeling (e.g., trust, urgency, calm) for a defined target audience, while respecting cultural and accessibility constraints.

Create, update, and connect nodes/edges inside Obsidian .canvas files, enabling structured mind maps, flowcharts, and visual canvases by validating IDs, spacing, and JSON integrity.

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.

This skill provides a comprehensive review of UI components and codebases to ensure strict adherence to established design systems, accessibility guidelines (WCAG), and modern front-end best practices. It checks for design token compliance (e.g., semantic colors, scaled spacing), component conventions, WCAG accessibility standards (a11y), mobile responsiveness, and visual coherence across the entire application.