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.

Provides authentication, authorization, encryption, secrets, and hardening patterns for designing secure auth flows, managing tokens, configuring CORS, and implementing best practices around API keys, JWT, OAuth, and rate limiting.

This skill guides the creation of production-ready design systems using Tailwind CSS. It covers advanced topics such as implementing design tokens, managing component variants, establishing responsive patterns, and ensuring high accessibility standards. Use this when building component libraries, applying theming, or standardizing UI patterns across a large codebase.

A comprehensive guide to modern utility-first CSS using Tailwind CSS v4 principles. Covers the shift to CSS-first configuration, utilizing CSS variables for design tokens, implementing advanced container queries, and mastering responsive, dark mode, and complex layout patterns (Grid/Flex). Essential for building modern, component-driven UIs efficiently.

A comprehensive operational CISO tool designed for total governance of enterprise credentials and secrets. It discovers, classifies, and protects all types of sensitive data—including API keys, tokens, service accounts, and passwords—across all providers (AWS, Google Cloud, OpenAI, etc.). It monitors code, Git history, CI/CD pipelines, containers, logs, and backups to prevent exposure and enforce least privilege principles.

This skill performs a comprehensive security audit of Model Context Protocol (MCP) server configurations found in .mcp.json files. It is designed to identify critical vulnerabilities, including hardcoded secrets (API keys, tokens), dangerous shell injection patterns, unpinned dependencies, and compliance issues regarding approved server lists. Use this skill during security reviews, project onboarding, or pre-commit checks to ensure secure deployment.

This skill generates reusable UI components that strictly adhere to established design system conventions (e.g., StyleSeed/Toss). It enforces the use of semantic tokens, maintains accessibility standards (such as minimum touch targets and focus visibility), and ensures predictable structure, preventing ad-hoc, inconsistent markup and guaranteeing high fidelity across the entire frontend application.

This skill rigorously audits UI code against established design system conventions, focusing on adherence to design tokens, component ergonomics, accessibility standards, and mobile UX best practices. It ensures that the implementation is consistent with the defined style guide, providing a structured verdict and concrete, actionable fixes.

This skill is designed to manage design tokens within a design system, ensuring that the source-of-truth files—including JSON manifests, CSS variables, and dark-mode values—remain perfectly synchronized. It allows users to list, safely add, or update tokens (like colors, shadows, or spacing) while automatically propagating changes across all implemented files, maintaining system integrity.

Generate production-quality React components and UIs using the specialized Rayden UI component library and Tailwind CSS. This skill ensures that all generated code strictly adheres to a defined design system, including correct component usage, design tokens, prop validation, and established layout patterns. Ideal for scaffolding complex pages like dashboards, login forms, and data tables while maintaining premium aesthetics and consistency.

This guide provides comprehensive troubleshooting for common issues encountered when converting Figma designs to code using the Anima SDK. It covers authentication failures (Figma/Anima tokens), specific node/file lookup errors, code rate limits, and output quality problems, helping developers ensure accurate and robust code generation.

Automate the critical workflows of design systems by integrating Figma directly into your CI/CD pipelines. This tool allows you to automatically sync design tokens on a schedule, export assets upon pull requests, and validate design system consistency, ensuring design-code parity and preventing manual errors during deployment.