Frontend Code Review
ProgrammerAnthony/Anything-Extract
指导在项目中对前端代码(Next.js/React/TypeScript/Tailwind 等)进行结构、可维护性、性能与一致性审查,基于既定规则清单。适用于用户请求审查 .tsx/.ts/.js/.jsx 等前端文件或前端目录下的页面与组件。不用于后端代码(如 .py)。
Build terminal user interfaces (TUIs) using Ink (React for CLIs) and @inkjs/ui with a reactive, session-driven wizard pattern.
$ npx skills add novuhq/novu --skill ink-tui-wizard -a claude-codeProject install by default; add -g for ~/.claude/skills/.
$ gh skill install novuhq/novu ink-tui-wizard --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/novuhq/novu.git skills-src && mkdir -p .claude/skills && cp -r skills-src/.cursor/skills/ink-tui .claude/skills/ink-tui-wizard && 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 "ink-tui-wizard" agent skill from https://github.com/novuhq/novu/tree/next/.cursor/skills/ink-tui into .claude/skills/ink-tui-wizard/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "ink-tui-wizard", 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/novuhq/novu/tree/next/.cursor/skills/ink-tuiType 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 novuhq/novu --skill ink-tui-wizard -a codexProject install goes to .agents/skills/; add -g for ~/.codex/skills/.
$ gh skill install novuhq/novu ink-tui-wizard --agent codexProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/novuhq/novu.git skills-src && mkdir -p .agents/skills && cp -r skills-src/.cursor/skills/ink-tui .agents/skills/ink-tui-wizard && rm -rf skills-srcUse ~/.agents/skills/ instead of .agents/skills for a personal install.
Codex skills documentation · loads skills from .agents/skills/
Install the "ink-tui-wizard" agent skill from https://github.com/novuhq/novu/tree/next/.cursor/skills/ink-tui into .agents/skills/ink-tui-wizard/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "ink-tui-wizard", 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 novuhq/novu --skill ink-tui-wizard -a cursorProject install goes to .agents/skills/; add -g for ~/.cursor/skills/.
$ gh skill install novuhq/novu ink-tui-wizard --agent cursorProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/novuhq/novu.git skills-src && mkdir -p .cursor/skills && cp -r skills-src/.cursor/skills/ink-tui .cursor/skills/ink-tui-wizard && 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 "ink-tui-wizard" agent skill from https://github.com/novuhq/novu/tree/next/.cursor/skills/ink-tui into .cursor/skills/ink-tui-wizard/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "ink-tui-wizard", 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/novuhq/novu.git --path .cursor/skills/ink-tui--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 novuhq/novu --skill ink-tui-wizard -a gemini-cliProject install goes to .agents/skills/; add -g for ~/.gemini/skills/.
$ gh skill install novuhq/novu ink-tui-wizard --agent gemini-cliProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/novuhq/novu.git skills-src && mkdir -p .gemini/skills && cp -r skills-src/.cursor/skills/ink-tui .gemini/skills/ink-tui-wizard && 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 "ink-tui-wizard" agent skill from https://github.com/novuhq/novu/tree/next/.cursor/skills/ink-tui into .gemini/skills/ink-tui-wizard/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "ink-tui-wizard", 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 novuhq/novu ink-tui-wizardInstalls 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 novuhq/novu --skill ink-tui-wizard -a github-copilotProject install goes to .agents/skills/; add -g for ~/.copilot/skills/.
$ git clone --depth 1 https://github.com/novuhq/novu.git skills-src && mkdir -p .github/skills && cp -r skills-src/.cursor/skills/ink-tui .github/skills/ink-tui-wizard && 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 "ink-tui-wizard" agent skill from https://github.com/novuhq/novu/tree/next/.cursor/skills/ink-tui into .github/skills/ink-tui-wizard/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "ink-tui-wizard", 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 novuhq/novu --skill ink-tui-wizard -a opencodeOpenCode documents no install command of its own. Project install goes to .agents/skills/; add -g for ~/.config/opencode/skills/.
$ gh skill install novuhq/novu ink-tui-wizard --agent opencodeProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/novuhq/novu.git skills-src && mkdir -p .opencode/skills && cp -r skills-src/.cursor/skills/ink-tui .opencode/skills/ink-tui-wizard && 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 "ink-tui-wizard" agent skill from https://github.com/novuhq/novu/tree/next/.cursor/skills/ink-tui into .opencode/skills/ink-tui-wizard/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "ink-tui-wizard", 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.
ink-tui-wizardBuild terminal user interfaces (TUIs) using Ink (React for CLIs) and @inkjs/ui with a reactive, session-driven wizard pattern.
Ink Tui Wizard is an agent skill from novuhq/novu. Build terminal user interfaces (TUIs) using Ink (React for CLIs) and @inkjs/ui with a reactive, session-driven wizard pattern. Use when creating interactive CLI installation wizards, setup flows, or multi-step terminal applications in Node.js/TypeScript. Covers reactive screen resolution, declarative flow pipelines, overlay interrupts, session state management, Ink components, Flexbox terminal layout, and graceful degradation across terminal environments.
Its SKILL.md is about 1.9k tokens, which your agent loads only when the skill is triggered. The skill folder holds 7 other files, including reference files (for example `references/ARCHITECTURE.md`, `references/INK-API.md` and `references/INKJS-UI.md`). Compatibility notes: Requires Node.js 18+. Designed for Claude Code or similar coding agents.
It sits in Frontend & Design, covering Session handoff, Error handling and CSS and styling. It works with React, Node.js and TypeScript. The repository describes itself as: The open-source communication infrastructure for agents and products. The licence is MIT.
4 steps, taken from the first numbered list in SKILL.md.
Read from SKILL.md and the folder at commit c4d3eda. It shows what the files ask for, not the result of running them.
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.
Shell commands in SKILL.md call:
pnpmFrom the folder's file list and the shell code blocks in SKILL.md.
No URLs in SKILL.md. Its commands use pnpm, which can reach the network depending on how they are called.
From URLs in SKILL.md, links to its own repository left out.
Names no API keys, tokens, secrets or passwords.
From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.
Requires Node.js 18+. Designed for Claude Code or similar coding agents.
From compatibility in the SKILL.md frontmatter.
Ink Tui Wizard loads about 1.9k tokens when it runs, and up to ~11k if it reads all its reference files. Until then it costs about 119 tokens; SKILL.md has 606 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.
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.
The full file from novuhq/novu at commit c4d3eda, republished under its MIT licence (© novuhq). 606 words, ~1,926 tokens.
.claude/skills/ink-tui-wizard/SKILL.md (or your agent's skills folder). This skill also uses 6 other files; get the full folder from GitHub.Build beautiful, interactive terminal wizard interfaces using Ink (React for CLIs).
Ink is the dominant Node.js TUI framework — used by Claude Code (Anthropic), Gemini CLI (Google), GitHub Copilot CLI, Cloudflare Wrangler, Shopify CLI, Prisma, and many others.
This skill follows a reactive session-driven pattern: the rendered screen is a pure function of session state. Business logic sets state through store setters. The router derives which screen should be active. Nobody imperatively pushes screens around.
See references/ARCHITECTURE.md for the full reactive architecture: session, router, store, screen resolution, overlays, and data flow.
src/lib/wizard-session.ts) — single source of truth for all wizard decisionssrc/ui/tui/router.ts) — declarative flow pipelines with isComplete predicates per screensrc/ui/tui/store.ts) — nanostores-backed reactive store with explicit setters that trigger React re-renders via useSyncExternalStoresrc/ui/wizard-ui.ts) — interface bridging business logic to store; implemented by InkUI (TUI) and LoggingUI (CI)src/ui/tui/screen-registry.tsx) — factory function mapping screen names to components (App.tsx never changes)src/ui/tui/services/) — injected into screens via props (no dynamic imports in React components)src/ui/tui/screens/Screen enum in router.tsFlowEntry to the flow array with an isComplete predicatescreen-registry.tsxNo other files change.
Two patterns depending on the data:
WizardSession, add setter to WizardStore that calls emitChange(), add method to WizardUI interface + both implementationsWizardStore, add getter + setter, add method to WizardUI interface + both implementationsRead store.ts for examples of both patterns.
The project has reusable layout primitives in src/ui/tui/primitives/.
Always use these instead of building from scratch.
All primitives are barrel-exported from src/ui/tui/primitives/index.ts.
See references/PRIMITIVES.md for the catalog.
Read each primitive's source file for its current props interface.
Shared style constants (Colors, Icons, HAlign, VAlign) live in
src/ui/tui/styles.ts.
Playground: Run pnpm try --playground to see all primitives in action.
All state comparisons use TypeScript enums — no string literals. See the source files for current values:
Screen, Overlay, Flow — in router.tsRunPhase, OutroKind — in wizard-session.tsTaskStatus — in wizard-ui.tsink # Core: React renderer for terminals (uses Yoga for Flexbox)
react # Peer dependency
@inkjs/ui # Official component library: Select, TextInput, Spinner,
# ProgressBar, ConfirmInput, MultiSelect, Badge,
# StatusMessage, Alert, OrderedList, UnorderedList
figures # Unicode/ASCII symbol fallbacks (cross-platform)Do NOT use the older standalone packages (ink-text-input, ink-select-input,
ink-spinner). The @inkjs/ui package supersedes them.
src/ui/tui/
├── App.tsx # Thin shell — calls screen registry factory
├── store.ts # WizardStore: nanostores + session setters
├── router.ts # WizardRouter: flow pipelines + overlay stack
├── ink-ui.ts # InkUI: bridges getUI() calls to store setters
├── start-tui.ts # TUI startup: dark mode, store, renderer
├── screen-registry.tsx # Maps screen names to components + services
├── styles.ts # Colors, Icons, alignment enums
├── screens/ # One file per screen — read for current set
├── primitives/ # Reusable layout components — read index.ts for exports
├── services/ # Injectable service interfaces
└── components/
└── TitleBar.tsx # Top bar with version + feedback emailInk is react-dom but for terminals. It uses Yoga (Facebook's Flexbox engine) for layout.
Every <Box> is a flex container. All visible text MUST be inside <Text>.
| Browser | Ink |
|---|---|
<div> | <Box> |
<span> | <Text> |
| CSS / className | Props directly on <Box> and <Text> |
onClick | useInput() hook |
window.innerWidth | useStdout().stdout.columns |
| scroll | <Box overflow="hidden"> + manual offset |
display: block | <Box flexDirection="column"> |
display: flex | Default — every <Box> is already flex |
useStdout().stdout.columns and .rows!process.stdin.isTTY and fall back to LoggingUI--ci flag uses LoggingUI (no TUI, no prompts)start-tui.ts forces black background via ANSI escape codescolor="#000000" not color="black" (terminals render ANSI black as grey)useApp().exit()© novuhq, MIT. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file
SKILL.md and 6 other files (references) in .cursor/skills/ink-tui of novuhq/novu.
Open the folder on GitHubat commit c4d3eda
Ink Tui Wizard 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 |
|---|---|---|---|---|---|---|
| Ink Tui Wizard this skillnovuhq/novu | 40k | — | ~1.9k | Automated safety check: Pass | MIT | |
| Frontend Code ReviewProgrammerAnthony/Anything-Extract | 139 | — | ~957 | Automated safety check: Pass | MIT | |
| Frontend Code ReviewProgrammerAnthony/Expert-Coding-Harness | 235 | — | ~614 | Automated safety check: Pass | MIT | |
| Dokan Frontend Devgetdokan/dokan | 288 | — | ~1.9k | Automated safety check: Pass | None | |
| React Screenshot Recreatorbuildfastwithai/gen-ai-experiments | 785 | — | ~2.9k | Automated safety check: Pass | MIT | |
| Oma Frontendfirst-fluke/oh-my-agent | 1.3k | — | ~2.5k | Automated safety check: Pass | MIT |
ProgrammerAnthony/Anything-Extract
指导在项目中对前端代码(Next.js/React/TypeScript/Tailwind 等)进行结构、可维护性、性能与一致性审查,基于既定规则清单。适用于用户请求审查 .tsx/.ts/.js/.jsx 等前端文件或前端目录下的页面与组件。不用于后端代码(如 .py)。
ProgrammerAnthony/Expert-Coding-Harness
A skill your agent uses when 用户需要审查前端代码(React/Vue/Next.js/TypeScript/Tailwind等)、检查代码质量、性能问题、可维护性、安全漏洞、最佳实践落地时。触发场景:前端代码评审、前端代码优化、React/Vue代码检查、TypeScript代码审查、前端性能优化、前端安全审计、前端代码规范检查。
getdokan/dokan
Add or modify Dokan frontend code (React, TypeScript, Vue, Tailwind).
buildfastwithai/gen-ai-experiments
Recreate a UI screenshot, mockup, or design image as production-quality React + TypeScript + Tailwind code with near-pixel-perfect visual fidelity.
first-fluke/oh-my-agent
Frontend specialist for React, Next.js, TypeScript with FSD-lite architecture, shadcn/ui, and design system alignment.
instructa/agent-skills
Build, critique, and iterate high-converting marketing or product landing pages using React + Vite + TypeScript + Tailwind and shadcn/ui components, with all icons sourced from Iconify.
novuhq/novu
Design notification workflows the Novu way — choose channels, set severity, decide when a workflow is critical, configure digests, and route based on subscriber state.
novuhq/novu
Integrate Novu's in-app notification inbox into web applications.
novuhq/novu
Configure notification preferences in Novu at the workflow and subscriber level.
novuhq/novu
Create, update, search, and delete subscribers in Novu. An agent skill from novuhq/novu.
novuhq/novu
Trigger Novu notification workflows to send messages across email, SMS, push, chat, and in-app channels.
novuhq/novu
Use TesterArmy CLI to create, organize, and run dashboard-managed QA tests.
Works with
Categories
Build terminal user interfaces (TUIs) using Ink (React for CLIs) and @inkjs/ui with a reactive, session-driven wizard pattern. Ink Tui Wizard is an agent skill from novuhq/novu. Build terminal user interfaces (TUIs) using Ink (React for CLIs) and @inkjs/ui with a reactive, session-driven wizard pattern.
Ink Tui Wizard fits situations like: creating interactive CLI installation wizards; multi-step terminal applications in Node.js/TypeScript.
Run `npx skills add novuhq/novu --skill ink-tui-wizard -a claude-code`. Or copy the skill folder (.cursor/skills/ink-tui in novuhq/novu) into .claude/skills/ink-tui-wizard in your project. Claude Code loads it when a task matches its description.
Run `npx skills add novuhq/novu --skill ink-tui-wizard -a codex`. Or copy the skill folder (.cursor/skills/ink-tui in novuhq/novu) into .agents/skills/ink-tui-wizard in your project. Codex loads it when a task matches its description.
Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add novuhq/novu --skill ink-tui-wizard -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/ink-tui-wizard, .gemini/skills/ink-tui-wizard, .github/skills/ink-tui-wizard and .opencode/skills/ink-tui-wizard in your project.
Going by SKILL.md and its folder, Ink Tui Wizard needs the command-line tools its instructions call (pnpm). Our summary lists: Node.js. Compatibility (from SKILL.md): Requires Node.js 18+. Designed for Claude Code or similar coding agents..
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.
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.
Ink Tui Wizard is published under the MIT licence (declared in SKILL.md). It allows redistribution, so the full SKILL.md is shown on this page.
About 1.9k tokens (SKILL.md is roughly 7.7k 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 9.3k tokens, read only when the agent opens those files.
Skills that share tags, products or a category with Ink Tui Wizard: Frontend Code Review (ProgrammerAnthony/Anything-Extract, 139 stars), Frontend Code Review (ProgrammerAnthony/Expert-Coding-Harness, 235 stars), Dokan Frontend Dev (getdokan/dokan, 288 stars) and React Screenshot Recreator (buildfastwithai/gen-ai-experiments, 785 stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.
novuhq (a GitHub organization) maintains it in novuhq/novu, which has 40,132 GitHub stars. The repository holds 28 skills in this directory. The repository was last updated on October 10, 2026.
Source: novuhq/novu on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.