cuyamaca-frontend

Apply Cuyamaca frontend design tokens and glass styles to UI components.

Updated Mar 31, 2026
One-click install
npx skills add https://github.com/yuyanghu06/cuyamaca --skill cuyamaca-frontend
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: cuyamaca-frontend
Source: https://github.com/yuyanghu06/cuyamaca/tree/main/.claude/skills/cuyamaca-frontend
Command: npx skills add https://github.com/yuyanghu06/cuyamaca --skill cuyamaca-frontend

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

Design and implement frontend interfaces for the Cuyamaca project that adhere to the warm-white liquid glass aesthetic and exact design tokens, ensuring visual consistency across editor, runtime window, panels, and controls.

Core Features & Use Cases

  • Enforce the Cuyamaca frontend design language across UI components such as the project editor, runtime window, parts panel, code view, serial monitor, and settings.
  • Provide reference materials including color palette, glass treatments, and component patterns to guide styling.
  • Ensure consistency and reusability by applying tokens and patterns when creating new UI surfaces or updating existing ones.

Quick Start

Describe the UI you want to build and apply the Cuyamaca frontend design rules.

Frequently Asked Questions about cuyamaca-frontend

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I maintain consistent frontend design tokens across UI components?

To maintain consistent frontend design tokens, apply a centralized design language that specifies exact color, typography, glass hierarchy, and layout rules across all UI components like panels and editors. This ensures visual consistency and reusability.

What is a warm-white liquid glass aesthetic in frontend UI design?

A warm-white liquid glass aesthetic in frontend UI design uses specific color palette treatments and glass hierarchy rules to create a translucent, layered visual style. It enforces consistent styling across runtime windows, panels, and controls.

How do I implement a glass hierarchy for UI panels and controls?

To implement a glass hierarchy for UI panels and controls, follow predefined design tokens and asset guidelines that dictate layering, transparency, and color treatments. This ensures distinct visual separation between components like the project editor and settings.

Can I use these frontend design patterns for project editors and runtime windows?

Yes, you can use these frontend design patterns for project editors and runtime windows. The design language explicitly applies to these surfaces, providing reference materials and component patterns to guide accurate styling and layout decisions.

Do I need reference materials to apply UI design tokens correctly?

Yes, you need reference materials to apply UI design tokens correctly. The design system requires consulting provided references for color palettes, glass treatments, and component patterns to ensure accurate implementation and visual consistency.

What's the best way to style new UI surfaces without breaking design consistency?

The best way to style new UI surfaces without breaking design consistency is to apply established design tokens and UI patterns. Consulting the provided asset guidelines ensures that new components match the existing color, typography, and layout rules.