React Router Development
remix-run/react-router
Guides work on React Router apps by first identifying whether the app uses Framework, Data or Declarative mode, then loading the matching reference and the installed package docs.
Investigates architecture and change complexity from repository runtime paths to bounded modules, React components, and shared contracts.
Install Hai Architecture
$ npx skills add hylarucoder/hai-stack --skill hai-architecture -a claude-codeProject install by default; add -g for ~/.claude/skills/.
$ gh skill install hylarucoder/hai-stack hai-architecture --agent claude-codeProject scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).
$ git clone --depth 1 https://github.com/hylarucoder/hai-stack.git skills-src && mkdir -p .claude/skills && cp -r skills-src/skills/hai-architecture .claude/skills/hai-architecture && rm -rf skills-srcUse ~/.claude/skills/ instead of .claude/skills for a personal install. The folder must contain SKILL.md.
Claude Code skills documentation · loads skills from .claude/skills/
Install the "hai-architecture" agent skill from https://github.com/hylarucoder/hai-stack/tree/main/skills/hai-architecture into .claude/skills/hai-architecture/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "hai-architecture", then confirm the skill loads.Claude Code copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$skill-installer install https://github.com/hylarucoder/hai-stack/tree/main/skills/hai-architectureType this inside Codex. $skill-installer <name> installs a curated skill from openai/skills. The installer writes to $CODEX_HOME/skills (default ~/.codex/skills). Restart Codex if the skill does not show up.
$ npx skills add hylarucoder/hai-stack --skill hai-architecture -a codexProject install goes to .agents/skills/; add -g for ~/.codex/skills/.
$ gh skill install hylarucoder/hai-stack hai-architecture --agent codexProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/hylarucoder/hai-stack.git skills-src && mkdir -p .agents/skills && cp -r skills-src/skills/hai-architecture .agents/skills/hai-architecture && rm -rf skills-srcUse ~/.agents/skills/ instead of .agents/skills for a personal install.
Codex skills documentation · loads skills from .agents/skills/
Install the "hai-architecture" agent skill from https://github.com/hylarucoder/hai-stack/tree/main/skills/hai-architecture into .agents/skills/hai-architecture/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "hai-architecture", then confirm the skill loads.Codex copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ npx skills add hylarucoder/hai-stack --skill hai-architecture -a cursorProject install goes to .agents/skills/; add -g for ~/.cursor/skills/.
$ gh skill install hylarucoder/hai-stack hai-architecture --agent cursorProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/hylarucoder/hai-stack.git skills-src && mkdir -p .cursor/skills && cp -r skills-src/skills/hai-architecture .cursor/skills/hai-architecture && rm -rf skills-srcUse ~/.cursor/skills/ instead of .cursor/skills for a personal install.
Cursor skills documentation · loads skills from .cursor/skills/, .agents/skills/, .claude/skills/, .codex/skills/
Install the "hai-architecture" agent skill from https://github.com/hylarucoder/hai-stack/tree/main/skills/hai-architecture into .cursor/skills/hai-architecture/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "hai-architecture", then confirm the skill loads.Cursor copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ gemini skills install https://github.com/hylarucoder/hai-stack.git --path skills/hai-architecture--scope user (default) or --scope workspace; --path is the subfolder of the repo that holds the skill; --consent skips the security confirmation prompt.
$ npx skills add hylarucoder/hai-stack --skill hai-architecture -a gemini-cliProject install goes to .agents/skills/; add -g for ~/.gemini/skills/.
$ gh skill install hylarucoder/hai-stack hai-architecture --agent gemini-cliProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/hylarucoder/hai-stack.git skills-src && mkdir -p .gemini/skills && cp -r skills-src/skills/hai-architecture .gemini/skills/hai-architecture && rm -rf skills-srcUse ~/.gemini/skills/ instead of .gemini/skills for a personal install, then run /skills reload.
Gemini CLI skills documentation · loads skills from .gemini/skills/, .agents/skills/
Install the "hai-architecture" agent skill from https://github.com/hylarucoder/hai-stack/tree/main/skills/hai-architecture into .gemini/skills/hai-architecture/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "hai-architecture", then confirm the skill loads.Gemini CLI copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ gh skill install hylarucoder/hai-stack hai-architectureInstalls for Copilot at project scope by default; add --scope user for a personal install. Preview a skill first with gh skill preview. Needs GitHub CLI 2.90.0 or later (public preview).
$ npx skills add hylarucoder/hai-stack --skill hai-architecture -a github-copilotProject install goes to .agents/skills/; add -g for ~/.copilot/skills/.
$ git clone --depth 1 https://github.com/hylarucoder/hai-stack.git skills-src && mkdir -p .github/skills && cp -r skills-src/skills/hai-architecture .github/skills/hai-architecture && rm -rf skills-srcUse ~/.copilot/skills/ instead of .github/skills for a personal install. Commit .github/skills so cloud agent and code review can use it.
GitHub Copilot skills documentation · loads skills from .github/skills/, .claude/skills/, .agents/skills/
Install the "hai-architecture" agent skill from https://github.com/hylarucoder/hai-stack/tree/main/skills/hai-architecture into .github/skills/hai-architecture/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "hai-architecture", then confirm the skill loads.GitHub Copilot copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ npx skills add hylarucoder/hai-stack --skill hai-architecture -a opencodeOpenCode documents no install command of its own. Project install goes to .agents/skills/; add -g for ~/.config/opencode/skills/.
$ gh skill install hylarucoder/hai-stack hai-architecture --agent opencodeProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/hylarucoder/hai-stack.git skills-src && mkdir -p .opencode/skills && cp -r skills-src/skills/hai-architecture .opencode/skills/hai-architecture && rm -rf skills-srcUse ~/.config/opencode/skills/ instead of .opencode/skills for a personal install.
OpenCode skills documentation · loads skills from .opencode/skills/, .claude/skills/, .agents/skills/
Install the "hai-architecture" agent skill from https://github.com/hylarucoder/hai-stack/tree/main/skills/hai-architecture into .opencode/skills/hai-architecture/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "hai-architecture", then confirm the skill loads.OpenCode copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
Facts
- Skill name
hai-architecture- GitHub stars
- 382
- Token cost
- ~2.1k tokens
- SKILL.md length
- 1,045 words
- Files
- 18 (incl. references)
- Skills in repo
- 18
- Repo updated
- First seen
- Licence
- Custom licence
At a glance
Investigates architecture and change complexity from repository runtime paths to bounded modules, React components, and shared contracts.
- Works in 6 steps: Read every cited file in this session… → Trace callers and implementations before… → Read ADRs, dependency rules,… → …
- 系统太绕、架构审查、模块边界、组件诊断、props API、effect/re-render
- SKILL.md covers Purpose, Select the work mode, Evidence gate and Core judgments, plus 5 more sections
- Instructions only: no scripts, shell commands, URLs or credentials in SKILL.md
What it does
Hai Architecture is an agent skill from hylarucoder/hai-stack. Investigates architecture and change complexity from repository runtime paths to bounded modules, React components, and shared contracts. Use for 系统太绕、架构审查、模块边界、组件诊断、props API、effect/re-render, or SSOT/双源/漂移、重复规则、多处默认值、同名异形. Select global or bounded mode; return traced evidence, the complexity center, alternatives, and a first proof. React and SSOT lenses retain scored diagnosis or adjudicated treatment reports. Use hai-debug for unexplained faults and code-review-and-quality for diff/local-smell reviews.
Its SKILL.md is about 2.1k tokens, which your agent loads only when the skill is triggered. The skill folder holds 19 other files, including reference files (for example `SKILL.zh_CN.md`, `agents/openai.yaml` and `references/global-audit.md`).
It sits in Frontend & Design, covering React components. It works with React.
When your agent uses it
- 系统太绕、架构审查、模块边界、组件诊断、props API、effect/re-render
- SSOT/双源/漂移、重复规则、多处默认值、同名异形
Example prompts
- “Use the hai-architecture skill to investigate architecture and change complexity from repository runtime paths to bounded modules, React components…”
- “/hai-architecture”
Workflow steps
6 steps, taken from the first numbered list in SKILL.md.
- Read every cited file in this session and cite real file:line locations.
- Trace callers and implementations before asserting a call chain or blast radius; name the search.
- Read ADRs, dependency rules, architecture tests, and public contracts that declare intended
- Compare a module's public surface with the complexity it actually hides before calling it deep
- Count each root cause once; cross-reference related symptoms instead of multiplying findings.
- Label inference as unverified instead of presenting it as evidence.
What it can do on your machine
Read from SKILL.md and the folder at commit a6c7ed2. It shows what the files ask for, not the result of running them.
Tool permissions
Pre-approves nothing: there is no allowed-tools line, so your agent's usual permission prompts apply.
From allowed-tools in the SKILL.md frontmatter.
Runs code
No scripts in the folder and no shell commands in SKILL.md.
From the folder's file list and the shell code blocks in SKILL.md.
Network
No URLs in SKILL.md.
From URLs in SKILL.md, links to its own repository left out.
Credentials
Names no API keys, tokens, secrets or passwords.
From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.
Context cost
Hai Architecture loads about 2.1k tokens when it runs, and up to ~18k if it reads all its reference files. Until then it costs about 132 tokens; SKILL.md has 1,045 words of instructions outside code blocks.
Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.
Safety
Auto-check passed
The automated check found no risky patterns in SKILL.md.
Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); files beside SKILL.md are not scanned.
SKILL.md
Its licence (Custom licence) doesn't allow us to republish the file, so here is its outline and opening line. It has 1,045 words (~2,063 tokens).
“For Chinese readers, see SKILL.zh_CN.md. The English SKILL.md is the execution source of truth.”
- name
- hai-architecture
Files
SKILL.md and 17 other files (references) in skills/hai-architecture of hylarucoder/hai-stack.
- SKILL.md
- SKILL.zh_CN.md
- agents/openai.yaml
- references/global-audit.md
- references/global-lenses.md
- references/global-output-template.md
- references/go-patterns.md
- references/html-report.md
- references/output-template.md
- references/principles.md
- references/react-output-template.md
- references/react-patterns.md
- references/red-flags.md
- references/ssot-detection-cookbook.md
- references/ssot-output-template.md
- references/ssot-patterns.md
- references/typescript-patterns.md
- references/worked-example.md
Open the folder on GitHubat commit a6c7ed2
Compare with similar skills
Hai Architecture next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.
| Skill | Stars | Used in | Tokens | Auto-check | Licence | Repo updated |
|---|---|---|---|---|---|---|
| Hai Architecture this skillhylarucoder/hai-stack | 382 | — | ~2.1k | Automated safety check: Pass | Custom licence | |
| React Router Developmentremix-run/react-router | 57k | 1 repos | ~1.5k | Automated safety check: Pass | MIT | |
| React UI State PatternsChrisWiles/claude-code-showcase | 6.1k | 8 repos | ~1.6k | Automated safety check: Pass | None | |
| Vercel React Best Practicessanity-io/sanity | 6.4k | 130 repos | ~1.6k | Automated safety check: Pass | MIT | |
| Dify Component Writing Guidelanggenius/dify | 158k | — | ~626 | Automated safety check: Pass | Custom licence | |
| React Frontend Development Guidelinesdiet103/claude-code-infrastructure-showcase | 10k | 2 repos | ~2.9k | Automated safety check: Pass | MIT |
Similar skills
React UI State Patterns
ChrisWiles/claude-code-showcase
Sets patterns for React interfaces: when to show loading spinners or skeletons, how to surface errors, how to disable buttons during async work and how to handle empty lists.
- Official
Vercel React Best Practices
sanity-io/sanity
React and Next.js performance optimization guidelines from Vercel Engineering.
Dify Component Writing Guide
langgenius/dify
Use when implementing or refactoring React/TypeScript components and the task requires decisions about component ownership, feature boundaries, state, data…
React Frontend Development Guidelines
diet103/claude-code-infrastructure-showcase
Guidelines for React 18 and TypeScript apps covering Suspense data fetching, lazy loading, feature folders, MUI v7 styling, TanStack Router and performance.
React Best Practices
mastra-ai/mastra
React performance optimization guidelines from Mastra Engineering.
More from hylarucoder/hai-stack
All 18 skills in this repoWrite Technical Acceptance Report
hylarucoder/hai-stack
Verify a defined software change against requirements and produce a proportional, evidence-backed acceptance report with specification precedence, scope boundaries, requirement-to-evidence…
Hai Ast Grep
hylarucoder/hai-stack
Produces a ready-to-run ast-grep command or reusable YAML lint/codemod rule, validated against positive and negative fixtures.
Readme Beautifier
hylarucoder/hai-stack
Reformats and restructures a README or similar Markdown project document without changing its factual content, voice, or scope, then summarizes formatting-only edits.
Hai Visual Explainer
hylarucoder/hai-stack
Turns supplied content into self-contained HTML and PNG in two modes: card for one shareable frame（知识卡、信息卡、金句卡、封面、把要点做成一张图）, report for multi-section documents（可视化报告、HTML 汇报页、PRD/计划/评审做成网页）.
Code Review And Quality
hylarucoder/hai-stack
Reviews a code change for correctness, security, maintainability, architecture, performance, and verification gaps, or performs a local code-smell review.
Entity Model Auditor
hylarucoder/hai-stack
Audits an entity model field by field: what should exist, what exists now, where each value belongs (column, config, computed runtime value, or removal), and what must migrate.
Related
Works with
Categories
Questions about Hai Architecture
What does Hai Architecture do?
Investigates architecture and change complexity from repository runtime paths to bounded modules, React components, and shared contracts. Hai Architecture is an agent skill from hylarucoder/hai-stack. Investigates architecture and change complexity from repository runtime paths to bounded modules, React components, and shared contracts.
When should I use Hai Architecture?
Hai Architecture fits situations like: 系统太绕、架构审查、模块边界、组件诊断、props API、effect/re-render; SSOT/双源/漂移、重复规则、多处默认值、同名异形.
How do I install Hai Architecture in Claude Code?
Run `npx skills add hylarucoder/hai-stack --skill hai-architecture -a claude-code`. Or copy the skill folder (skills/hai-architecture in hylarucoder/hai-stack) into .claude/skills/hai-architecture in your project. Claude Code loads it when a task matches its description.
How do I install Hai Architecture in Codex?
Run `npx skills add hylarucoder/hai-stack --skill hai-architecture -a codex`. Or copy the skill folder (skills/hai-architecture in hylarucoder/hai-stack) into .agents/skills/hai-architecture in your project. Codex loads it when a task matches its description.
Can I use Hai Architecture in Cursor, Gemini CLI or GitHub Copilot?
Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add hylarucoder/hai-stack --skill hai-architecture -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/hai-architecture, .gemini/skills/hai-architecture, .github/skills/hai-architecture and .opencode/skills/hai-architecture in your project.
What does Hai Architecture need to run?
SKILL.md names no scripts, command-line tools or credentials: Hai Architecture is instructions for the agent only.
Does Hai Architecture access the network?
SKILL.md contains no URLs. Any network use would come from the scripts or tools the agent runs. This is read from the text; nothing was executed.
Is Hai Architecture safe to install?
Our automated static check of SKILL.md found no risky patterns, such as piping downloads into a shell, reading credential files or hidden Unicode. It is not a guarantee. Review the folder before installing.
What licence does Hai Architecture use?
Hai Architecture has a licence file (the repository's licence) that doesn't match a standard licence. Read it on GitHub before reusing the skill.
How many tokens does Hai Architecture use?
About 2.1k tokens (SKILL.md is roughly 8.3k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full. Its references folder adds about 16k tokens, read only when the agent opens those files.
What are the alternatives to Hai Architecture?
Skills that share tags, products or a category with Hai Architecture: React Router Development (remix-run/react-router, 57k stars), React UI State Patterns (ChrisWiles/claude-code-showcase, 6.1k stars), Vercel React Best Practices (sanity-io/sanity, 6.4k stars) and Dify Component Writing Guide (langgenius/dify, 158k stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.
Who maintains Hai Architecture?
hylarucoder (a GitHub user) maintains it in hylarucoder/hai-stack, which has 382 GitHub stars. The repository holds 18 skills in this directory. The repository was last updated on October 5, 2026.
Source: hylarucoder/hai-stack on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.