What is the benefit of deterministic colors in this skill?

It ensures that your AI assistant generates the exact same brand colors every time based on a specific seed value, maintaining visual consistency across different sessions and components.

How does the MCP integration work for design tokens?

It allows Claude to interface with a Julia-based server to fetch live, mathematically-calculated design tokens and color values in the OKLCH color space.

Can I use these patterns with frameworks other than React?

While examples are provided in TSX, the underlying CSS tokens, Fibonacci spacing, and Golden Ratio principles are framework-agnostic and work with any frontend library.

Does this skill support modern accessibility standards?

Yes, it includes built-in guidelines and contrast requirements to ensure generated components meet WCAG 2.1 AA standards for contrast and keyboard navigation.

Frontend Design Patterns

Name: Frontend Design Patterns
Author: plurigrid

byplurigrid

•

Design Tools

Generates mathematically-grounded UI/UX design systems using deterministic color palettes and geometric layout principles.

The Frontend Design skill empowers AI coding assistants to build consistent, accessible, and aesthetically pleasing interfaces by applying deterministic design principles. It leverages Gay.jl SPI for reproducible color palettes via the Model Context Protocol (MCP) and implements layout patterns based on the Golden Ratio and Fibonacci sequence. Whether you are building complex state indicators with Balanced Ternary logic or ensuring WCAG 2.1 AA accessibility compliance, this skill provides the standardized component patterns and CSS tokens necessary to create professional-grade frontends with minimal manual intervention.

Key Features

01Balanced Ternary state components for complex, multi-modal UI logic

02Automated WCAG 2.1 AA accessibility compliance and contrast ratio guidelines

037 GitHub stars

04Layout systems based on the Golden Ratio (φ) and Fibonacci spacing constants

05Cross-platform support for Claude, Codex, Cursor, and GitHub Copilot

06Deterministic color palette generation via Gay.jl SPI and MCP integration

Use Cases

01Generating cohesive brand color palettes from a single seed value for design consistency

02Implementing accessible, state-aware components for complex data-driven applications

03Building responsive grid layouts using mathematical constants for visual harmony

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add plurigrid/asi frontend-design

For use in Claude.ai and ChatGPT

Download Skill