New: 98,000+ skills indexed from GitHub repos with 100+ stars · every skill safety-checkedBrowse top skillsTop skills
Esc to closeBrowse all skills
Submit a skillBrowse skills
Submit a skillBrowse skills

Agent skill

Panel App React Vite Creator

by Peiiii in Peiiii/nextclaw

Create or update an engineering-style NextClaw Panel component with pnpm, Vite, React, TypeScript, and Tailwind CSS, then build it into a static .panel directory inside a schema v2 package or an…

MITAuto-check passedFrontend & Design

Install Panel App React Vite Creator

skills CLI
$ npx skills add Peiiii/nextclaw --skill panel-app-react-vite-creator -a claude-code

Project install by default; add -g for ~/.claude/skills/.

GitHub CLI
$ gh skill install Peiiii/nextclaw panel-app-react-vite-creator --agent claude-code

Project scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).

Manual copy
$ git clone --depth 1 https://github.com/Peiiii/nextclaw.git skills-src && mkdir -p .claude/skills && cp -r skills-src/packages/nextclaw-core/src/features/agent/shared/skills/panel-app-react-vite-creator .claude/skills/panel-app-react-vite-creator && rm -rf skills-src

Use ~/.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/

Facts

Skill name
panel-app-react-vite-creator
GitHub stars
260
Token cost
~1.1k tokens
SKILL.md length
241 words
Files
1
Skills in repo
70
Repo updated
First seen
Licence
MIT

At a glance

Create or update an engineering-style NextClaw Panel component with pnpm, Vite, React, TypeScript, and Tailwind CSS, then build it into a static .panel directory inside a schema v2 package or an…

  • Works in 8 steps: 先确定 app-id，必须 kebab-case，例如 data-reviewer。 → 创建 Vite React TS 工程 → 配置 vite.config.ts → …
  • Typed Panel interfaces
  • SKILL.md covers 核心原则, 推荐目录, 创建流程 and App Client 类型接入, plus 1 more section
  • Calls pnpm

What it does

Panel App React Vite Creator is an agent skill from Peiiii/nextclaw. Create or update an engineering-style NextClaw Panel component with pnpm, Vite, React, TypeScript, and Tailwind CSS, then build it into a static .panel directory inside a schema v2 package or an explicitly loose workspace Panel. Use for modern, reusable, complex, Agent-powered, typed Panel interfaces.

Its SKILL.md is about 1.1k tokens, which your agent loads only when the skill is triggered. It is a single SKILL.md file with no bundled scripts.

It sits in Frontend & Design. It works with Vite, React, Tailwind CSS and pnpm. The repository describes itself as: A human-centered long-term AI partner—not a task-centered assistant. The licence is MIT.

When your agent uses it

  • Typed Panel interfaces

Example prompts

  • “/panel-app-react-vite-creator”

Workflow steps

8 steps, taken from the first numbered list in SKILL.md.

  1. 先确定 app-id，必须 kebab-case，例如 data-reviewer。
  2. 创建 Vite React TS 工程
  3. 配置 vite.config.ts
  4. 在 src/index.css 引入 Tailwind
  5. 开发 UI 时遵守 Panel App 侧栏约束：默认按 320px-480px 窄面板设计，不能横向溢出。
  6. 如果要调用 NextClaw 能力，先读取 panel-app-creator，按其推荐路径写代码。
  7. 构建
  8. 把 dist/ 内容同步到已确定的 .panel 目录，并写入 panel-app.json

What it can do on your machine

Read from SKILL.md and the folder at commit 973722e. 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

    Shell commands in SKILL.md call:

    • pnpm

    From the folder's file list and the shell code blocks in SKILL.md.

  • Network

    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.

  • 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

Panel App React Vite Creator loads about 1.1k tokens when it runs. Until then it costs about 83 tokens; SKILL.md has 241 words of instructions outside code blocks.

Always · name and description, kept in context so the agent knows when to use it
~83
When it runs · the whole SKILL.md, loaded when a task matches
~1.1k

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

The full file from Peiiii/nextclaw at commit 973722e, republished under its MIT licence (© Peiiii). 241 words, ~1,065 tokens.

Download SKILL.mdSave it as .claude/skills/panel-app-react-vite-creator/SKILL.md (or your agent's skills folder).
name
panel-app-react-vite-creator
description
Create or update an engineering-style NextClaw Panel component with pnpm, Vite, React, TypeScript, and Tailwind CSS, then build it into a static .panel directory inside a schema v2 package or an explicitly loose workspace Panel. Use for modern, reusable, complex, Agent-powered, typed Panel interfaces.
description_zh
使用 pnpm、Vite、React、TypeScript、Tailwind CSS 创建或修改工程化 NextClaw Panel 组件，再构建为 schema v2 包内或明确 loose workspace 中的静态 .panel 目录。适用于现代、可维护、复杂、Agent 驱动或需要类型的 Panel 界面。

React/Vite/TypeScript/Tailwind/pnpm Panel App Creator

本 skill 只负责工程化前端源码和静态产物交付。Panel App 的 manifest、Client SDK、Service Actions、Agent bridge 和授权规则仍以 panel-app-creator 为准；需要这些能力时必须同时读取 panel-app-creator。

核心原则

  • 工程化 Panel App 推荐栈是 React + Vite + TypeScript + Tailwind CSS + pnpm 一整套，缺一不可；除非用户明确指定其它技术栈或有清楚环境约束，不要只选其中一部分。
  • 使用 pnpm，不要使用 Bun、npm 或 yarn，除非用户明确指定。
  • 本 skill 是复杂或可维护 Panel App 的工程化默认路径；极小、一次性、无明显构建收益的静态面板仍交给 panel-app-creator 轻量目录式实现。
  • 开发期可以使用 Vite dev server；需要给用户看运行中的开发页面时，用 show_url(url) 打开本地 dev server。交付给 NextClaw 的必须是 build 后的静态 .panel 目录。
  • 不要让 NextClaw 宿主运行 vite dev、Node server 或 Bun server。
  • 源码工程可以放在用户指定位置；最终产物沿用 nextclaw-app-creator 已冻结的边界：完整 schema v2 App 构建到 <app-dir>/panels/<panel-id>.panel/，明确 loose 本地 Panel 才构建到 <workspace>/panels/<panel-id>.panel/。
  • 运行期目录里可以包含构建产物和 panel-app.json，不要依赖运行期 node_modules。
  • Vite 必须配置 base: "./"，避免资源路径指向 NextClaw host 根路径。
  • 构建出来的应用运行在 sandbox iframe 中，不具备普通同源网页能力；不要使用 localStorage、sessionStorage、cookie、IndexedDB 或默认启用浏览器持久化的状态库插件。需要持久化时按 panel-app-creator 选择 Service App、App Client 或导出/导入 JSON。

推荐目录

源码工程示例：

text
my-panel-src/
  package.json
  vite.config.ts
  src/
  public/

完整包内的交付产物示例：

text
my-app/panels/my-panel.panel/
  panel-app.json
  index.html
  assets/

如果用户没有指定源码位置，优先在包根的独立前端源码目录或用户当前工作目录下创建工程，不要把完整 npm 工程直接当作最终 .panel 组件目录。最终 .panel 只保留静态产物；根 manifest.json.components 引用该目录。

创建流程

  1. 先确定 app-id，必须 kebab-case，例如 data-reviewer。
  2. 创建 Vite React TS 工程：
bash
pnpm create vite <app-id>-src --template react-ts
cd <app-id>-src
pnpm install
pnpm add -D tailwindcss @tailwindcss/vite
  1. 配置 vite.config.ts：
ts
import react from "@vitejs/plugin-react";
import tailwindcss from "@tailwindcss/vite";
import { defineConfig } from "vite";

export default defineConfig({
  base: "./",
  plugins: [react(), tailwindcss()],
});
  1. 在 src/index.css 引入 Tailwind：
css
@import "tailwindcss";
  1. 开发 UI 时遵守 Panel App 侧栏约束：默认按 320px-480px 窄面板设计，不能横向溢出。
  2. 如果要调用 NextClaw 能力，先读取 panel-app-creator，按其推荐路径写代码。
  3. 构建：
bash
pnpm build
  1. 把 dist/ 内容同步到已确定的 .panel 目录，并写入 panel-app.json：
json
{
  "id": "data-reviewer",
  "title": "Data Reviewer",
  "description": "Review and analyze local data in a focused panel.",
  "icon": "📊",
  "entry": "index.html"
}

只有实际使用 window.nextclaw.client 时才加 "client": true。调用 Service Actions 时仍按 panel-app-creator 的当前规则声明 actions 并使用推荐 bridge。

App Client 类型接入

使用 window.nextclaw.client 时，开发期优先安装 @nextclaw/client-sdk 作为类型来源：

bash
pnpm add -D @nextclaw/client-sdk

在源码工程新增 src/nextclaw-env.d.ts：

ts
import type { NextClawAppClient } from "@nextclaw/client-sdk";

declare global {
  interface Window {
    nextclaw?: {
      client?: NextClawAppClient;
    } & Record<string, unknown>;
  }
}

export {};

只允许 import type 使用 SDK 类型。Panel App 运行时不要 import、new 或 create @nextclaw/client-sdk，真实 client 必须来自宿主同步注入的 window.nextclaw.client：

ts
const client = window.nextclaw?.client;
if (!client) {
  throw new Error("NextClaw App Client 未授权或不可用。");
}

需要 API 形状时读取已安装包里的 @nextclaw/client-sdk 声明和 README，优先查看 NextClawAppClient，让 TypeScript 检查参数和返回值。不要凭记忆写 panelApps.*、serviceApps.*、旧事件名或不存在的 namespace。

验收

loose Panel 必须运行：

bash
nextclaw app check ~/.nextclaw/workspace/panels/<app-id>.panel

schema v2 包内 Panel 必须从包根运行：

bash
nextclaw app check <app-dir> --json

如果包内包含 Portable Service，前端 build 和 App check 都不能替代 nextclaw app build/test；这些 Service 验证归 service-app-creator。

如果修改了源码工程，还应运行：

bash
pnpm build

loose Panel 交付时告诉用户刷新 Panel Apps 列表；完整包通过 app dev/install 或 Apps 页面打开。不要要求重启 NextClaw，除非有明确证据表明宿主进程异常。

© Peiiii, MIT. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file

Files

Just SKILL.md in packages/nextclaw-core/src/features/agent/shared/skills/panel-app-react-vite-creator of Peiiii/nextclaw.

Open the folder on GitHubat commit 973722e

Compare with similar skills

Panel App React Vite Creator 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.

Panel App React Vite Creator compared with similar skills
SkillStarsUsed inTokensAuto-checkLicenceRepo updated
Panel App React Vite Creator this skillPeiiii/nextclaw260—~1.1kAutomated safety check: PassMIT
Web Artifacts Builderanthropics/skills180k41 repos~769Automated safety check: PassApache-2.0
Design To CodeMigoXLab/coderio1142 repos~1.2kAutomated safety check: PassApache-2.0
Shadmin Devahaodev/shadmin174—~2.7kAutomated safety check: PassMIT
Redesign My Landingpageinstructa/agent-skills139—~1.8kAutomated safety check: PassNone
Vite Shadcn Tailwind4IgorWarzocha/Opencode-Workflows122—~1.3kAutomated safety check: PassNone

Similar skills

  • Web Artifacts Builder

    anthropics/skills

    Official

    Builds multi-component claude.ai HTML artifacts as a small React, TypeScript and Tailwind project, then bundles it into one shareable HTML file.

    180k GitHub starsUsed in 41 repos~769 tokens
    Frontend & DesignAuto-check passed

  • Design To Code

    MigoXLab/coderio

    Pixel-perfect Figma to React conversion using coderio. An agent skill from MigoXLab/coderio.

    114 GitHub starsUsed in 2 repos~1.2k tokens
    Frontend & DesignAuto-check passed

  • Shadmin Dev

    ahaodev/shadmin

    Apply Shadmin feature-development standards (backend Go/Gin/Ent + frontend React/TS).

    174 GitHub stars~2.7k tokensUpdated 6 days ago
    Frontend & DesignAuto-check passed

  • Redesign My Landingpage

    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.

    139 GitHub stars~1.8k tokensUpdated 10 days ago
    Frontend & DesignAuto-check passed

  • Vite Shadcn Tailwind4

    IgorWarzocha/Opencode-Workflows

    Initialize shadcn/ui + Tailwind CSS v4 in Vite projects (Vite-specific, not Next.js/Remix).

    122 GitHub stars~1.3k tokensUpdated 8 mo ago
    Frontend & DesignAuto-check passed

  • React Email

    viclafouch/meme-studio

    A skill your agent uses when creating HTML email templates with React components - welcome emails, password resets, notifications, order confirmations, newsletters, or transactional emails.

    110 GitHub starsUsed in 2 repos~3.6k tokens
    Backend & APIsAuto-check passed

More from Peiiii/nextclaw

All 70 skills in this repo

  • Nextclaw Skin Studio

    Peiiii/nextclaw

    A skill your agent uses when a user wants to browse, apply, inspect, create, refine, switch, or remove a NextClaw skin; wants a personal skin with arbitrary CSS, JavaScript, images, SVG, DOM…

    260 GitHub stars~1.8k tokensUpdated yesterday
    Auto-check passed

  • Development Task Telemetry

    Peiiii/nextclaw

    A skill your agent uses when a development task needs visible phase tracing, task-level or phase-level Token measurement, model/effort comparison, or a deterministic usage report or local dashboard…

    260 GitHub stars~802 tokensUpdated yesterday
    Auto-check passed

  • Nextclaw Product Visual Assets

    Peiiii/nextclaw

    当 NextClaw 产品更新后需要生成、替换、挑毛病或检查官网、GitHub README、用户文档或社交传播中的真实截图、AI 宣传视觉、整页 HTML 宣传预览、社区二维码等对外视觉资产时使用；也用于“更新截图”“重新截一批图”“做宣传页”“生成 campaign 页面”“视觉审稿”“五星挑刺法”或发布前检查视觉资产。普通站点布局开发或只写文章不触发。

    260 GitHub stars~801 tokensUpdated yesterday
    Auto-check passed

  • UI UX Pro Max

    Peiiii/nextclaw

    A skill your agent uses when the user wants professional UI/UX design guidance, design-system generation, UX review, or stack-specific frontend guidance through a bundled local UI/UX Pro Max dataset…

    260 GitHub stars~2k tokensUpdated yesterday
    Auto-check passed

  • Impeccable

    Peiiii/nextclaw

    A skill your agent uses when the user wants distinctive, production-grade frontend design, anti-generic AI aesthetics, UX critique, technical UI audits, or final polish through bundled Impeccable…

    260 GitHub stars~2.5k tokensUpdated yesterday
    Auto-check passed

  • Nextclaw Skill Resource Hub

    Peiiii/nextclaw

    Curate NextClaw skill resources, including OpenClaw and community sources.

    260 GitHub stars~479 tokensUpdated yesterday
    Auto-check passed

Works with

Categories

Questions about Panel App React Vite Creator

What does Panel App React Vite Creator do?

Create or update an engineering-style NextClaw Panel component with pnpm, Vite, React, TypeScript, and Tailwind CSS, then build it into a static .panel directory inside a schema v2 package or an…. Panel App React Vite Creator is an agent skill from Peiiii/nextclaw.panel directory inside a schema v2 package or an explicitly loose workspace Panel.

When should I use Panel App React Vite Creator?

Panel App React Vite Creator fits situations like: typed Panel interfaces.

How do I install Panel App React Vite Creator in Claude Code?

Run `npx skills add Peiiii/nextclaw --skill panel-app-react-vite-creator -a claude-code`. Or copy the skill folder (packages/nextclaw-core/src/features/agent/shared/skills/panel-app-react-vite-creator in Peiiii/nextclaw) into .claude/skills/panel-app-react-vite-creator in your project. Claude Code loads it when a task matches its description.

How do I install Panel App React Vite Creator in Codex?

Run `npx skills add Peiiii/nextclaw --skill panel-app-react-vite-creator -a codex`. Or copy the skill folder (packages/nextclaw-core/src/features/agent/shared/skills/panel-app-react-vite-creator in Peiiii/nextclaw) into .agents/skills/panel-app-react-vite-creator in your project. Codex loads it when a task matches its description.

Can I use Panel App React Vite Creator 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 Peiiii/nextclaw --skill panel-app-react-vite-creator -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/panel-app-react-vite-creator, .gemini/skills/panel-app-react-vite-creator, .github/skills/panel-app-react-vite-creator and .opencode/skills/panel-app-react-vite-creator in your project.

What does Panel App React Vite Creator need to run?

Going by SKILL.md and its folder, Panel App React Vite Creator needs the command-line tools its instructions call (pnpm).

Does Panel App React Vite Creator 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 Panel App React Vite Creator 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 Panel App React Vite Creator use?

Panel App React Vite Creator is published under the MIT licence (the repository's licence). It allows redistribution, so the full SKILL.md is shown on this page.

How many tokens does Panel App React Vite Creator use?

About 1.1k tokens (SKILL.md is roughly 4.3k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full.

What are the alternatives to Panel App React Vite Creator?

Skills that share tags, products or a category with Panel App React Vite Creator: Web Artifacts Builder (anthropics/skills, 180k stars), Design To Code (MigoXLab/coderio, 114 stars), Shadmin Dev (ahaodev/shadmin, 174 stars) and Redesign My Landingpage (instructa/agent-skills, 139 stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains Panel App React Vite Creator?

Peiiii (a GitHub user) maintains it in Peiiii/nextclaw, which has 260 GitHub stars. The repository holds 70 skills in this directory. The repository was last updated on October 7, 2026.

Source: Peiiii/nextclaw on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.