ZGI 市场
登录注册账号
技能版本 1.0.0

modern-web-app

Tools for building modern React webapps with TypeScript, Tailwind CSS and shadcn/ui. Best suited for applications with complex UI components and state management.

价格

免费

  • 安装：免费

在组织开通时一次性收取；再次读取清单或下载不重复收费。

以上为公开标价。你的组织可能有协议价，以控制台显示的价格为准。

如何使用

  1. 为组织安装

    开通即安装：组织固定使用开通时的版本（当前为 1.0.0）。升级到新版本需要取消后重新开通。

  2. 创建凭证

    客户端使用组织凭证读取；绑定到数字人后，数字人使用绑定凭证按需加载。请求中携带：

    Authorization: Bearer $ZGI_MARKET_KEY

  3. 读取清单与安装包

    清单列出版本、文件和校验值；安装包是一个 zip 文件。

    读取清单
    curl "https://market-api.zgi.im/v1/market/skills/modern-web-app/manifest" \
  -H "Authorization: Bearer $ZGI_MARKET_KEY"
    下载安装包
    curl "https://market-api.zgi.im/v1/market/skills/modern-web-app/package" \
  -H "Authorization: Bearer $ZGI_MARKET_KEY" \
  -o modern-web-app.zip

    读取清单和下载安装包不计入用量。下载后请用响应头中的 SHA-256 校验文件。

技能说明

名称
modern-web-app
说明
Tools for building modern React webapps with TypeScript, Tailwind CSS and shadcn/ui. Best suited for applications with complex UI components and state management.
会运行代码Node.jsTypeScriptShell

技能包内含脚本文件，加载技能的运行时可能会执行它们，安装前请先阅读。

SKILL.md 节选

# modern-web-app

Stack: React + TypeScript + Vite + Tailwind CSS + shadcn/ui

## Workflow

1. `scripts/init-webapp.sh <website-title> [output-dir]` - Initialize project
2. Edit source code in `src/`
3. Build the React app
4. Deploy the build output in `dist/`

## Quick Start

### 1. Initialize

```bash
# Init project in ./app (default) with website title
bash scripts/init-webapp.sh "My Website"

# Or specify custom output directory
bash scripts/init-webapp.sh "My Website" ./my-project

cd ./app  # or your custom directory
```

**AI Agent Notes**:
- Default project path is `./app` (relative to current working directory)
- Second argument allows custom output directory
- Non-interactive execution with auto-confirm

This creates a fully configured project with:

- React + TypeScript (via Vite)
- Tailwind CSS 3.4.19 with shadcn/ui theming system
- Path aliases (`@/`) configured
- 40+ shadcn/ui components pre-installed
- All Radix UI dependencies included
- Production build optimization with Vite
- Node 20+ compatibility (auto-detects and pins Vite version)

### 2. Develop

Edit generated files in `src/`:
- Page sections: `src/sections/`
- Custom React hooks: `src/hooks/`
- TypeScript definitions: `src/types/`

### 3. Build

```bash
cd ./app && npm run build 2>&1
```

**Output** (`dist/`):
- `index.html` - Entry point
- `assets/index-[hash].js` - Bundled JS
- `assets/index-[hash].css` - Bundled CSS
- Optimized images, fonts, other assets

**Optimizations**: Tree-shaking, code splitting, asset compression, minification, cache-busting hashes.

### 4. Deploy

Deploy the build output in `<project-dir>/dist/`

## Debugging

1. Fix source files
2. `npm run build`
3. Test `dist/`
4. Redeploy

## Reference

- [shadcn/ui Components](https://ui.shadcn.com/docs/components)

技能包内容

共 74 个文件，合计 488.2 KiB

  • SKILL.md1.9 KiB
  • scripts/.prepare-template.sh240 B
  • scripts/init-webapp.sh4.7 KiB
  • scripts/template/README.md2.5 KiB
  • scripts/template/components.json461 B
  • scripts/template/eslint.config.js616 B
  • scripts/template/index.html291 B
  • scripts/template/package-lock.json294.3 KiB
  • scripts/template/package.json2.5 KiB
  • scripts/template/postcss.config.js80 B
  • scripts/template/src/App.css606 B
  • scripts/template/src/App.tsx428 B
  • scripts/template/src/components/ui/accordion.tsx2.0 KiB
  • scripts/template/src/components/ui/alert-dialog.tsx3.8 KiB
  • scripts/template/src/components/ui/alert.tsx1.6 KiB
  • scripts/template/src/components/ui/aspect-ratio.tsx280 B
  • scripts/template/src/components/ui/avatar.tsx1.1 KiB
  • scripts/template/src/components/ui/badge.tsx1.6 KiB
  • scripts/template/src/components/ui/breadcrumb.tsx2.3 KiB
  • scripts/template/src/components/ui/button-group.tsx2.2 KiB
  • scripts/template/src/components/ui/button.tsx2.2 KiB
  • scripts/template/src/components/ui/calendar.tsx7.6 KiB
  • scripts/template/src/components/ui/card.tsx1.9 KiB
  • scripts/template/src/components/ui/carousel.tsx5.4 KiB
  • scripts/template/src/components/ui/chart.tsx9.8 KiB
  • scripts/template/src/components/ui/checkbox.tsx1.2 KiB
  • scripts/template/src/components/ui/collapsible.tsx786 B
  • scripts/template/src/components/ui/command.tsx4.7 KiB
  • scripts/template/src/components/ui/context-menu.tsx8.1 KiB
  • scripts/template/src/components/ui/dialog.tsx3.9 KiB
  • scripts/template/src/components/ui/drawer.tsx4.2 KiB
  • scripts/template/src/components/ui/dropdown-menu.tsx8.2 KiB
  • scripts/template/src/components/ui/empty.tsx2.3 KiB
  • scripts/template/src/components/ui/field.tsx6.0 KiB
  • scripts/template/src/components/ui/form.tsx3.7 KiB
  • scripts/template/src/components/ui/hover-card.tsx1.5 KiB
  • scripts/template/src/components/ui/input-group.tsx4.9 KiB
  • scripts/template/src/components/ui/input-otp.tsx2.2 KiB
  • scripts/template/src/components/ui/input.tsx962 B
  • scripts/template/src/components/ui/item.tsx4.4 KiB
  • scripts/template/src/components/ui/kbd.tsx862 B
  • scripts/template/src/components/ui/label.tsx611 B
  • scripts/template/src/components/ui/menubar.tsx8.2 KiB
  • scripts/template/src/components/ui/navigation-menu.tsx6.5 KiB
  • scripts/template/src/components/ui/pagination.tsx2.7 KiB
  • scripts/template/src/components/ui/popover.tsx1.6 KiB
  • scripts/template/src/components/ui/progress.tsx726 B
  • scripts/template/src/components/ui/radio-group.tsx1.4 KiB
  • scripts/template/src/components/ui/resizable.tsx1.9 KiB
  • scripts/template/src/components/ui/scroll-area.tsx1.6 KiB
  • scripts/template/src/components/ui/select.tsx6.2 KiB
  • scripts/template/src/components/ui/separator.tsx699 B
  • scripts/template/src/components/ui/sheet.tsx4.0 KiB
  • scripts/template/src/components/ui/sidebar.tsx21.1 KiB
  • scripts/template/src/components/ui/skeleton.tsx276 B
  • scripts/template/src/components/ui/slider.tsx1.9 KiB
  • scripts/template/src/components/ui/sonner.tsx1020 B
  • scripts/template/src/components/ui/spinner.tsx331 B
  • scripts/template/src/components/ui/switch.tsx1.1 KiB
  • scripts/template/src/components/ui/table.tsx2.4 KiB
  • scripts/template/src/components/ui/tabs.tsx1.9 KiB
  • scripts/template/src/components/ui/textarea.tsx759 B
  • scripts/template/src/components/ui/toggle-group.tsx2.2 KiB
  • scripts/template/src/components/ui/toggle.tsx1.5 KiB
  • scripts/template/src/components/ui/tooltip.tsx1.8 KiB
  • scripts/template/src/hooks/use-mobile.ts565 B
  • scripts/template/src/index.css2.1 KiB
  • scripts/template/src/lib/utils.ts166 B
  • scripts/template/src/main.tsx230 B
  • scripts/template/tailwind.config.js2.7 KiB
  • scripts/template/tsconfig.app.json815 B
  • scripts/template/tsconfig.json232 B
  • scripts/template/tsconfig.node.json653 B
  • scripts/template/vite.config.ts283 B

来源与审核

审核状态
尚未审核，内容来自上游来源
来源文档
https://cnb.cool/codebuddy/cbteamsmarketplace
许可证
未说明

审核状态是平台对上架信息的记录，不构成对上游服务质量或可用性的担保。

相关商品