[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"project-82188":3},{"id":4,"name":5,"fullName":6,"owner":7,"repo":5,"description":8,"homepage":9,"htmlUrl":9,"language":10,"languages":9,"totalLinesOfCode":9,"stars":11,"forks":12,"watchers":13,"openIssues":14,"contributorsCount":15,"subscribersCount":15,"size":15,"stars1d":16,"stars7d":17,"stars30d":18,"stars90d":15,"forks30d":15,"starsTrendScore":19,"compositeScore":20,"rankGlobal":9,"rankLanguage":9,"license":21,"archived":22,"fork":22,"defaultBranch":23,"hasWiki":24,"hasPages":24,"topics":25,"createdAt":9,"pushedAt":9,"updatedAt":26,"readmeContent":27,"aiSummary":28,"trendingCount":15,"starSnapshotCount":15,"syncStatus":29,"lastSyncTime":30,"discoverSource":31},82188,"zelda-hyrule-ui","chaos-xxl\u002Fzelda-hyrule-ui","chaos-xxl","🗡️ Zelda BOTW style React UI component library — 84 components with Sheikah glow effects, dark theme, and AI-consumable design specs (Cursor\u002Fv0 ready)",null,"TypeScript",219,29,24,1,0,3,75,195,20,80.43,"Other",false,"main",true,[],"2026-06-12 04:01:37","\u003Cdiv align=\"center\">\n\n# 🗡️ zelda-hyrule-ui\n\n[![npm version](https:\u002F\u002Fimg.shields.io\u002Fnpm\u002Fv\u002Fzelda-hyrule-ui?color=cb3837&labelColor=222)](https:\u002F\u002Fwww.npmjs.com\u002Fpackage\u002Fzelda-hyrule-ui)\n[![npm downloads](https:\u002F\u002Fimg.shields.io\u002Fnpm\u002Fdm\u002Fzelda-hyrule-ui?color=5fa04e&labelColor=222)](https:\u002F\u002Fwww.npmjs.com\u002Fpackage\u002Fzelda-hyrule-ui)\n[![GitHub stars](https:\u002F\u002Fimg.shields.io\u002Fgithub\u002Fstars\u002Fchaos-xxl\u002Fzelda-hyrule-ui?color=ffd700&labelColor=222)](https:\u002F\u002Fgithub.com\u002Fchaos-xxl\u002Fzelda-hyrule-ui\u002Fstargazers)\n[![License](https:\u002F\u002Fimg.shields.io\u002Fbadge\u002Flicense-MIT-3CD3FC?labelColor=222)](LICENSE)\n\n[![Components](https:\u002F\u002Fimg.shields.io\u002Fbadge\u002FComponents-84-3CD3FC?labelColor=222)](https:\u002F\u002Fchaos-xxl.github.io\u002Fzelda-hyrule-ui\u002F#\u002Fdocs)\n[![React](https:\u002F\u002Fimg.shields.io\u002Fbadge\u002FReact-18+-61DAFB?logo=react&labelColor=222)](https:\u002F\u002Freact.dev)\n[![TypeScript](https:\u002F\u002Fimg.shields.io\u002Fbadge\u002FTypeScript-5+-3178C6?logo=typescript&logoColor=fff&labelColor=222)](https:\u002F\u002Ftypescriptlang.org)\n[![Vite](https:\u002F\u002Fimg.shields.io\u002Fbadge\u002FVite-6-646CFF?logo=vite&logoColor=fff&labelColor=222)](https:\u002F\u002Fvitejs.dev)\n[![Cursor Ready](https:\u002F\u002Fimg.shields.io\u002Fbadge\u002FCursor-Ready-A0A0A0?labelColor=222)](skill\u002FSKILL.md)\n[![BOTW Style](https:\u002F\u002Fimg.shields.io\u002Fbadge\u002FStyle-BOTW-E2D146?labelColor=222)](#)\n[![Bilingual](https:\u002F\u002Fimg.shields.io\u002Fbadge\u002Fdocs-EN%20%2F%20%E4%B8%AD%E6%96%87-FF9E64?labelColor=222)](#)\n\n\u003C\u002Fdiv>\n\nA React UI component library inspired by *The Legend of Zelda: Breath of the Wild*.\n84 components with dark theme, Sheikah glow effects, and AI-consumable design specs.\n\n一套受《塞尔达传说：旷野之息》启发的 React UI 组件库。\n84 个组件，暗色主题 + 希卡之石辉光效果，附带 AI 可消费的设计规范。\n\n![Demo Home](docs\u002Fimg\u002Fdemo-home.png)\n\n![Demo Components](docs\u002Fimg\u002Fdemo-component.png)\n\n### 🔗 Preview\n\n- **Online Preview (PC):** [zelda-hyrule-ui](https:\u002F\u002Fchaos-xxl.github.io\u002Fzelda-hyrule-ui\u002F)\n- **Online Preview (Mobile):** [zelda-hyrule-ui-mobile](https:\u002F\u002Fchaos-xxl.github.io\u002Fzelda-hyrule-ui\u002F#\u002Fmobile)\n- **Component Docs:** [All 84 components](https:\u002F\u002Fchaos-xxl.github.io\u002Fzelda-hyrule-ui\u002F#\u002Fdocs) — live previews, code examples, and props tables\n\n### 🔗 预览\n\n- **在线预览（PC）：** [zelda-hyrule-ui](https:\u002F\u002Fchaos-xxl.github.io\u002Fzelda-hyrule-ui\u002F)\n- **在线预览（Mobile）：** [zelda-hyrule-ui-mobile](https:\u002F\u002Fchaos-xxl.github.io\u002Fzelda-hyrule-ui\u002F#\u002Fmobile)\n- **组件文档：** [全部 84 个组件](https:\u002F\u002Fchaos-xxl.github.io\u002Fzelda-hyrule-ui\u002F#\u002Fdocs)——实时预览、代码示例和 Props 表格\n\n---\n\n## Installation \u002F 安装\n\n```bash\nnpm install zelda-hyrule-ui\n```\n\n---\n\n## Quick Start \u002F 快速开始\n\n```tsx\nimport { HealthBar, StaminaWheel, Button, Card } from 'zelda-hyrule-ui'\nimport 'zelda-hyrule-ui\u002Fstyle'\n\nexport default function App() {\n  return (\n    \u003Cdiv style={{ background: '#66645D', padding: 40, minHeight: '100vh' }}>\n      {\u002F* HUD elements *\u002F}\n      \u003CHealthBar current={10} max={13} bonus={3} \u002F>\n      \u003CStaminaWheel value={0.75} size={70} \u002F>\n\n      {\u002F* Cards *\u002F}\n      \u003CCard variant=\"sheikah\" title=\"Sheikah Slate\">\n        Distilling rune...\n      \u003C\u002FCard>\n\n      {\u002F* Buttons *\u002F}\n      \u003CButton variant=\"sheikah\">Activate\u003C\u002FButton>\n      \u003CButton variant=\"primary\">Confirm\u003C\u002FButton>\n    \u003C\u002Fdiv>\n  )\n}\n```\n\nMore examples \u002F 更多示例:\n\n```tsx\n\u002F\u002F Dialog\nimport { Dialog, DialogChoice } from 'zelda-hyrule-ui'\n\n\u003CDialog type=\"speech\" speaker=\"Old Man\">\n  It is cold here. You should find warm clothes.\n\u003C\u002FDialog>\n\n\u003CDialogChoice\n  options={[{ label: 'Yes', value: 'yes' }, { label: 'No', value: 'no' }]}\n  selectedIndex={0}\n\u002F>\n```\n\n```tsx\n\u002F\u002F Quest tracking\nimport { QuestListItem } from 'zelda-hyrule-ui'\n\n\u003CQuestListItem\n  title=\"Destroy Ganon\"\n  location=\"Hyrule Castle\"\n  questType=\"main\"\n  state=\"marked\"\n\u002F>\n```\n\n```tsx\n\u002F\u002F Divine Beasts & Abilities\nimport { DivineBeast, SheikahAbility } from 'zelda-hyrule-ui'\n\n\u003CDivineBeast beast=\"ruta\" charges={1} \u002F>\n\u003CSheikahAbility ability=\"magnesis\" \u002F>\n\u003CSheikahAbility ability=\"stasis\" plus \u002F>\n```\n\n```tsx\n\u002F\u002F Sheikah Slate themed layout\nimport { SheikahBackground, SheikahScanlines, SheikahTextTitle } from 'zelda-hyrule-ui'\n\n\u003CSheikahBackground color=\"darkBlue\">\n  \u003CSheikahScanlines animated opacity={0.08} \u002F>\n  \u003CSheikahTextTitle title=\"Compendium\" description=\"Creatures of Hyrule\" \u002F>\n\u003C\u002FSheikahBackground>\n```\n\n---\n\n## For AI Users \u002F AI 用户指南\n\nThe simplest way to use this library with AI:\n\n最简单的 AI 使用方式：\n\n1. **Give your AI the GitHub link** and say \"use this style to build me a landing page\"\n\n   把 GitHub 链接丢给 AI，说\"用这个风格给我做一个落地页\"\n\n2. **Or** drop `skill\u002FSKILL.md` into Cursor rules, then say \"Build in Zelda style\"\n\n   或者把 `skill\u002FSKILL.md` 放进 Cursor rules，然后说\"用塞尔达风格做\"\n\n3. **Or** install the package and reference `AI_USAGE.md` for the full API\n\n   或者安装包后参考 `AI_USAGE.md` 获取完整 API\n\n### AI Documentation Files \u002F AI 文档\n\n| File | For | Purpose |\n|------|-----|---------|\n| [`skill\u002FSKILL.md`](skill\u002FSKILL.md) | Cursor \u002F Copilot | 1500+ line pixel-level CSS spec — AI can self-implement without installing the package |\n| [`AI_USAGE.md`](AI_USAGE.md) | AI assistants | Complete API reference — all props, types, defaults |\n| [`DESIGN_PROMPT.md`](DESIGN_PROMPT.md) | v0 \u002F Figma AI \u002F MJ | One-click design generation prompts |\n\n| 文件 | 面向 | 用途 |\n|------|-----|---------|\n| [`skill\u002FSKILL.md`](skill\u002FSKILL.md) | Cursor \u002F Copilot | 1500+ 行像素级 CSS 规范——AI 无需安装包即可自行实现 |\n| [`AI_USAGE.md`](AI_USAGE.md) | AI 编程助手 | 完整 API 手册——所有 props、类型、默认值 |\n| [`DESIGN_PROMPT.md`](DESIGN_PROMPT.md) | v0 \u002F Figma AI \u002F MJ | 一键设计生成提示词 |\n\n---\n\n## Components (84) \u002F 组件\n\n| Category | Count | Components |\n|----------|-------|------------|\n| **HUD** | 16 | HealthBar, StaminaWheel, WeatherIcon, RupeeCounter, DivineBeast, SheikahAbility, RupeeType, Temperature, SoundMeter, Sensor, EffectDuration, BonusEffectIcon, LoadingIcon, HorseSpur, QuickSelector, LoadingHeart |\n| **Menu** | 8 | MenuSections, ItemBG, Pagination, ModalButton, Scrollbar, ModalTimer, StatsStack, ModalTutorial |\n| **Titles** | 5 | TitleLocation, TitleQuest, TitleShrine, TitleLocationLarge, TitlePointOfInterest |\n| **Dialog** | 3 | Dialog, DialogChoice, DialogFloating |\n| **Sheikah** | 8 | SheikahSymbol, SheikahBackground, SheikahScanlines, SheikahRune, SheikahCompendiumEntry, SheikahTextTitle, SheikahCompendiumFilters, SheikahAlbumButton |\n| **Map** | 7 | MapIcon, MapBeacon, MapQuestMarker, MapLocationName, MapCursor, MapHeroLocation, MapGrid |\n| **Quest** | 4 | QuestListItem, QuestDescription, QuestTypeIcon, QuestNotification |\n| **Battle** | 4 | ItemEnchantment, StatusHealing, AimingReticle, AttackDefenseValues |\n| **Controls** | 2 | ControllerButton, ActionSet |\n| **Shop** | 3 | ShopListItem, ShopPriceQuantity, NumberInput |\n| **Settings** | 1 | SettingsToggle |\n| **Decorations** | 6 | TitleOrnament, DirectionalArrow, Starburst, TextOrnamentCorner, TimerOrnament, Logo, Illustration |\n| **Common** | 7 | Button, Card, Modal, Divider, Loading, Toast |\n| **Screens** | 9 | MenuScreen, QuestScreen, LoadingScreen, TitleScreen, GameOverScreen, SystemScreen, ShopScreen, MapScreen, QuickSelectorScreen |\n\n> 📖 Full interactive docs with code examples and props tables: **[Online Documentation](https:\u002F\u002Fchaos-xxl.github.io\u002Fzelda-hyrule-ui\u002F#\u002Fdocs)**\n>\n> 完整交互式文档（含代码示例和 Props 表格）：**[在线文档](https:\u002F\u002Fchaos-xxl.github.io\u002Fzelda-hyrule-ui\u002F#\u002Fdocs)**\n\n---\n\n## Design Tokens \u002F 设计变量\n\n| Token | Value | Usage |\n|-------|-------|-------|\n| Sheikah Blue | `#3CD3FC` | Core accent, glows, focus states |\n| Sheikah Yellow | `#FFE460` | Highlights, active states |\n| Effect Orange | `#FCC413` | Confirm buttons, golden glow |\n| Main Tan | `#E2DED3` | Borders, titles |\n| Text Main | `#E9E1D1` | Body text (warm white) |\n| Dark BG | `#66645D` | Page background |\n| Deep Dark | `#1A1A2E` | Sheikah Slate panels |\n\n| 变量 | 值 | 用途 |\n|------|-----|------|\n| 希卡蓝 | `#3CD3FC` | 核心主色、辉光、焦点态 |\n| 希卡黄 | `#FFE460` | 高亮、激活态 |\n| 效果橙 | `#FCC413` | 确认按钮、金色辉光 |\n| 米色 | `#E2DED3` | 边框、标题 |\n| 主文字 | `#E9E1D1` | 正文（暖白） |\n| 深色背景 | `#66645D` | 页面背景 |\n| 深暗色 | `#1A1A2E` | 希卡之石面板 |\n\n---\n\n## Tech Stack \u002F 技术栈\n\n| | |\n|---|---|\n| Framework | React 18 + TypeScript |\n| Build | Vite (library mode, ESM + CJS dual output) |\n| Styling | Less Modules (`zelda-[local]-[hash:5]` scoped names) |\n| Assets | SVGs exported from Figma, externalized via `@laynezh\u002Fvite-plugin-lib-assets` |\n| Fonts | Hylia Serif + Cinzel + Roboto |\n| Bundle | ~115KB ESM, tree-shakeable |\n\n---\n\n## Local Development \u002F 本地开发\n\n```bash\ngit clone https:\u002F\u002Fgithub.com\u002Fchaos-xxl\u002Fzelda-hyrule-ui.git\ncd zelda-hyrule-ui\nnpm install\nnpm run dev       # Start demo dev server\nnpm run build     # Build component library\nnpm run deploy    # Deploy demo to gh-pages\n```\n\n---\n\n## Contributing \u002F 贡献\n\nSee [CONTRIBUTING.md](CONTRIBUTING.md) for guidelines.\n\n贡献指南请参阅 [CONTRIBUTING.md](CONTRIBUTING.md)。\n\n---\n\n## Credits \u002F 致谢\n\nThis project is built on top of the [**Zelda BOTW UI Kit**](https:\u002F\u002Fwww.figma.com\u002Fcommunity\u002Ffile\u002F965825767811358609) by [**Hunter Paramore**](https:\u002F\u002Fhunterparamore.com), shared on the Figma Community. All UI elements, icons, and visual structure originate from this kit. The Figma file is the foundation of every component in this library — all SVGs were exported node-by-node from the original work.\n\n本项目基于 [**Hunter Paramore**](https:\u002F\u002Fhunterparamore.com) 在 Figma 社区分享的 [**Zelda BOTW UI Kit**](https:\u002F\u002Fwww.figma.com\u002Fcommunity\u002Ffile\u002F965825767811358609) 构建。所有 UI 元素、图标和视觉结构都源自该素材包。本组件库的全部 SVG 都是从原始 Figma 文件中逐节点精确导出的。\n\nIf you use this library or the original UI kit, please credit Hunter Paramore.\n\n如果你使用本库或原始素材，请同时致谢 Hunter Paramore。\n\n| Resource | Link |\n|----------|------|\n| Original Figma file | https:\u002F\u002Fwww.figma.com\u002Fcommunity\u002Ffile\u002F965825767811358609 |\n| Author profile | https:\u002F\u002Fhunterparamore.com |\n| Author's Figma | [Hunter Paramore on Figma](https:\u002F\u002Fwww.figma.com\u002F@hunterparamore) |\n\n---\n\n## License \u002F 许可证\n\nMIT — For learning and personal use only. This is a fan-creation project. All Zelda-related trademarks belong to Nintendo.\n\nMIT — 仅供学习和个人使用。本项目为粉丝创作，所有塞尔达相关商标归任天堂所有。\n","zelda-hyrule-ui 是一个受《塞尔达传说：旷野之息》启发的 React UI 组件库，提供了 84 个具有暗色主题和希卡之石辉光效果的组件。该库使用 TypeScript 编写，并支持 Vite 构建工具，确保了良好的类型安全性和开发体验。每个组件都附带详细的设计规范，便于 AI 工具解析和使用。适用于需要独特视觉风格且希望快速集成高质量 UI 组件的 Web 应用场景，尤其适合游戏相关网站或追求独特用户体验的项目。",2,"2026-06-11 04:08:00","CREATED_QUERY"]