What are the benefits of the Golden Ratio Grid feature?

The Golden Ratio Grid uses the 1.618 (phi) proportion to automatically create aesthetically pleasing and balanced layouts for containers and spacing.

Can I use this skill with other AI agents besides Claude?

While optimized for Claude Code via the ruler tool, the skill provides consistent principles and component patterns compatible with Codex, Cursor, and Copilot.

Does this skill support accessibility standards?

Yes, it enforces WCAG 2.1 AA standards, providing specific rules for contrast ratios, keyboard navigation, and screen reader compatibility.

What is Gay.jl in the context of this skill?

Gay.jl is used for deterministic color generation using the SplitMix64 algorithm, ensuring your AI-generated designs use consistent, reproducible color palettes based on specific seeds.

Frontend Design & Deterministic UI

Name: Frontend Design & Deterministic UI
Author: plurigrid

byplurigrid

•

Design Tools

Generates consistent, mathematically-grounded UI/UX design systems using deterministic colors and geometric layout principles.

The Frontend Design skill empowers AI coding assistants to construct sophisticated, production-grade interfaces by applying deterministic color palettes and mathematical layout patterns. By leveraging Gay.jl for reproducible color generation and implementing Golden Ratio grids and Fibonacci spacing, this skill ensures aesthetic consistency and structural integrity across various AI agents. It integrates accessibility standards (WCAG 2.1 AA) and specialized state-aware components, making it ideal for developers building complex web applications that require both visual harmony and precise functional feedback.

Key Features

012 GitHub stars

02MCP integration for live design token management via Julia

03Mathematical layout systems including Golden Ratio grids and Fibonacci spacing

04Specialized Balanced Ternary State (TAP) visualization components

05Deterministic color generation via Gay.jl SPI for reproducible brand palettes

06Pre-configured WCAG 2.1 AA accessibility guidelines for inclusive design

Use Cases

01Rapidly prototyping design systems with mathematically sound spacing and color theory

02Implementing complex state-driven interfaces for technical and scientific applications

03Maintaining UI/UX consistency across multiple AI coding environments like Claude and Cursor

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