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 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 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.

This utility allows developers to view, add, and modify design tokens (such as colors, spacing, typography, and shadows) within the StyleSeed design system. It ensures visual consistency by managing the synchronization of changes across JSON source files and corresponding CSS custom properties, supporting both light and dark mode variations.

A comprehensive guide covering Chinese technical documentation formatting rules. It addresses common issues like mixing full/half-width punctuation, spacing conventions (e.g., space between English/Chinese text, numbers/units), and best practices for handling technical terminology translation and structure.

This workflow is designed for developers building design-to-code pipelines. It connects to Figma via API to extract core design tokens, including colors, typography styles, and spacing values. It converts these raw design assets into structured code formats, such as CSS custom properties, JSON tokens, and Tailwind configurations, ensuring design consistency across development environments.

This skill generates expert, implementation-ready design system guidelines based on the Brutalism aesthetic. It covers foundational elements like color, typography, and spacing, while enforcing rigorous rules for accessibility (WCAG 2.2 AA) and component consistency, providing actionable standards for engineers and designers.

Provides comprehensive, expert-level guidelines for building a cozy, cafe-inspired UI design system. It covers style foundations (color, typography, spacing), component anatomy, accessibility (WCAG 2.2 AA), and content tone. Ideal for engineers and designers collaborating on a cohesive, user-centric product experience.

A comprehensive technical and aesthetic guide for building a modern, high-contrast user interface. This system defines foundational constraints, including color tokens, typography scales, and spacing grids, while rigorously ensuring WCAG 2.2 AA accessibility standards. It provides structured rules for component states, interactions, and development workflow to ensure consistency and superior user experience.