zelda-hyrule-ui-style

Generate React UI components using Breath of the Wild design tokens and SVG assets.

328|37|Updated May 26, 2026
One-click install
npx skills add https://github.com/chaos-xxl/zelda-hyrule-ui --skill zelda-hyrule-ui-style
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: zelda-hyrule-ui-style
Source: https://github.com/chaos-xxl/zelda-hyrule-ui/tree/main/skill
Command: npx skills add https://github.com/chaos-xxl/zelda-hyrule-ui --skill zelda-hyrule-ui-style

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill solves the challenge of maintaining visual consistency when building interfaces inspired by The Legend of Zelda: Breath of the Wild, ensuring that developers and designers adhere to strict design tokens, component patterns, and material authenticity.

Core Features & Use Cases

  • Authentic Design System: Provides access to the exact color palette, typography (Hylia Serif), and double-border patterns used in the zelda-hyrule-ui library.
  • Component Integration: Offers guidance on using 83 specialized React components, including HUD elements, Sheikah-style panels, and interactive widgets.
  • Use Case: Use this Skill to build a focus timer or habit tracker that perfectly replicates the "Sheikah Slate" aesthetic, ensuring that all icons, fonts, and glow effects are technically accurate and visually faithful to the source material.

Quick Start

Use the zelda-hyrule-ui-style skill to generate a React component for a health bar that follows the official BOTW design specifications.

Frequently Asked Questions about zelda-hyrule-ui-style

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

FAQPage Schema
How do I build a React UI inspired by the Breath of the Wild visual style?

You can build BOTW-inspired React interfaces by applying specific design tokens, double-border structures, and authentic SVG assets to create dark-themed, high-tech components that match the game's visual language.

Can I use specific HUD elements and panels for a BOTW-themed React application?

Yes, you can implement specialized HUD elements, Sheikah-style panels, and interactive widgets using provided component integration patterns designed for the React framework.

What design specifications are needed to create a BOTW-style health bar in React?

Creating a BOTW-style health bar requires applying strict design specifications including specific color palettes, Hylia Serif typography, double-border patterns, and component-specific interaction states.

Does this BOTW UI design system support custom dark-themed interactive widgets?

Yes, the system supports custom dark-themed interactive widgets by providing design tokens and implementation patterns that ensure compliance with strict visual constraints and authentic Sheikah Slate aesthetics.

How do I ensure visual consistency when building a Zelda-themed focus timer interface?

Ensure visual consistency by strictly adhering to the provided design tokens, typography rules, and double-border patterns, which guarantee that all icons, fonts, and glow effects remain technically accurate.

What are the limitations of using a game-inspired design system for React components?

The main limitation is the strict adherence to specific visual constraints, including exact typography, color palettes, and double-border structures, which may restrict flexibility when building components outside the intended BOTW aesthetic.