### MCP Configuration Example

Source: https://tw.icebreaker.top/llms-full.txt

Example JSON configuration for setting up MCP servers for filesystem and GitHub access.

```json
// .claude/mcp_config.json
{
  "mcpServers": {
    "filesystem": {
      "command": "npx",
      "args": ["-y", "@modelcontextprotocol/server-filesystem", "/Users/project"]
    },
    "github": {
      "command": "npx",
      "args": ["-y", "@modelcontextprotocol/server-github"]
    }
  }
}
```

--------------------------------

### Install all dependencies with Bun

Source: https://tw.icebreaker.top/docs/quick-start/native/install-plugin

After initializing the project with weapp-vite, run this command to install all necessary project dependencies using Bun.

```bash
bun install  

```

--------------------------------

### Custom MCP Server Implementation

Source: https://tw.icebreaker.top/llms-full.txt

Example of creating and connecting a custom MCP server using TypeScript. It demonstrates adding resources and starting the server with a Stdio transport.

```typescript
// 自定义 MCP 服务端

const server = new Server({
  name: 'my-custom-server',
  version: '1.0.0'
});

// 添加资源
server.setRequestHandler(ListResourcesRequestSchema, async () => ({
  resources: [
    {
      uri: 'custom://data',
      name: '自定义数据',
      description: '我的自定义数据源'
    }
  ]
}));

// 启动服务端
const transport = new StdioServerTransport();
await server.connect(transport);
```

--------------------------------

### Install all dependencies with npm

Source: https://tw.icebreaker.top/docs/quick-start/native/install-plugin

After initializing the project with weapp-vite, run this command to install all necessary project dependencies using npm.

```bash
npm i  

```

--------------------------------

### Install all dependencies with pnpm

Source: https://tw.icebreaker.top/docs/quick-start/native/install-plugin

After initializing the project with weapp-vite, run this command to install all necessary project dependencies using pnpm.

```bash
pnpm i  

```

--------------------------------

### Installing weapp-tailwindcss and weapp-vite

Source: https://tw.icebreaker.top/llms.txt

Install both weapp-tailwindcss and weapp-vite locally to your project.

```bash
npm install weapp-tailwindcss weapp-vite --save-dev
```

--------------------------------

### Install all dependencies with Yarn

Source: https://tw.icebreaker.top/docs/quick-start/native/install-plugin

After initializing the project with weapp-vite, run this command to install all necessary project dependencies using Yarn.

```bash
yarn install  

```

--------------------------------

### Installing @weapp-tailwindcss/variants

Source: https://tw.icebreaker.top/llms-full.txt

Provides the command to install the `@weapp-tailwindcss/variants` package using pnpm.

```bash
pnpm add @weapp-tailwindcss/variants
```

--------------------------------

### PostgreSQL MCP Server Example

Source: https://tw.icebreaker.top/llms-full.txt

Command to run the PostgreSQL server for MCP.

```bash
# PostgreSQL 服务端
npx -y @modelcontextprotocol/server-postgres "postgresql://..."
```

--------------------------------

### Installing @weapp-tailwindcss/reset

Source: https://tw.icebreaker.top/llms-full.txt

Provides the command to install the `@weapp-tailwindcss/reset` package as a development dependency.

```bash
pnpm add -D @weapp-tailwindcss/reset
```

--------------------------------

### Install E2B Sandbox Tool

Source: https://tw.icebreaker.top/llms-full.txt

Installs the E2B sandbox tool, which is specifically designed for AI code execution. Ensure you have Python and pip installed.

```bash
# 安装 E2B
pip install e2b
```

--------------------------------

### System Prompt Optimization Example

Source: https://tw.icebreaker.top/docs/ai/basics/token

Compares a verbose system prompt with a concise, optimized version.

```text
- verbose: "You are a highly intelligent and capable assistant designed to help users with a wide variety of tasks..."
+ concise: "你是一个智能助手，擅长代码开发和问题解决。"
```

--------------------------------

### Mini-program + Web Environment Setup

Source: https://tw.icebreaker.top/llms-full.txt

Configures `create` for cross-platform use, enabling or disabling escape/unescape based on whether the environment is H5.

```typescript
// 跨平台框架请自行判断是否为 H5 构建，通常可从环境变量读取。
const isH5 = true
const { tv, cn } = create({
  escape: !isH5,
  unescape: !isH5,
})

const card = tv({
  base: 'rounded-xl border border-[#E2E8F0] bg-white',
})

const className = cn('text-[#0F172A]', 'text-[#1E293B]')()
```

--------------------------------

### Tokenization Example: Hello, world!

Source: https://tw.icebreaker.top/docs/ai/basics/token

Illustrates how a simple English phrase is broken down into tokens.

```text
输入文本: "Hello, world!"

Token序列: ["Hello", ",", "world", "!"]

Token数量: 4
```

--------------------------------

### Install MCP GitHub Server

Source: https://tw.icebreaker.top/llms-full.txt

Command to install the GitHub server for MCP using the Claude Code CLI.

```bash
# 添加 GitHub 服务端
claude-code mcp install @modelcontextprotocol/server-github
```

--------------------------------

### Install @weapp-tailwindcss/cva and @weapp-tailwindcss/variants

Source: https://tw.icebreaker.top/llms-full.txt

Install the necessary packages for cva and tailwind-variants runtime support. The runtime already includes class-variance-authority and tailwind-variants, so no separate installation of upstream dependencies is needed.

```bash
pnpm add @weapp-tailwindcss/cva
pnpm add @weapp-tailwindcss/variants
```

--------------------------------

### MCP Prompt Template Example

Source: https://tw.icebreaker.top/docs/ai/basics/mcp

Example of a predefined prompt template provided by an MCP server, including its name, description, and expected arguments.

```json
{
  "name": "code-review",
  "description": "代码审查提示词",
  "arguments": {
    "file": "要审查的文件路径",
    "focus": "审查重点（安全/性能/风格）"
  }
}
```

--------------------------------

### PostCSS Configuration Example

Source: https://tw.icebreaker.top/llms-full.txt

A typical PostCSS configuration file demonstrating the order of plugins for import, nesting, Tailwind CSS, future syntax, and minification.

```javascript
module.exports = {
  plugins: [
    require('postcss-import'),
    require('postcss-nesting'),
    require('tailwindcss'),
    require('postcss-preset-env')({
      stage: 1,
      features: { 'nesting-rules': false }, // 已用 postcss-nesting
      autoprefixer: { grid: true },
    }),
    require('cssnano')({
      preset: ['default', { discardComments: { removeAll: true } }],
    }),
  ],
}
```

--------------------------------

### Install weapp-tailwindcss and weapp-vite with Bun

Source: https://tw.icebreaker.top/docs/quick-start/native/install-plugin

Use this command to install the weapp-tailwindcss and weapp-vite packages as development dependencies using Bun.

```bash
bun add --dev weapp-tailwindcss weapp-vite  

```

--------------------------------

### Install Weapp-Tailwind CSS Skill

Source: https://tw.icebreaker.top/llms-quickstart.txt

Command to install the 'weapp-tailwindcss' Skill for integrating Tailwind CSS best practices into mini-programs.

```bash
npx skills add sonofmagic/skills --skill weapp-tailwindcss
```

--------------------------------

### Create weapp-vite + weapp-tailwindcss template with Bun

Source: https://tw.icebreaker.top/docs/quick-start/native/install-plugin

Use this command to create a new project with a pre-configured weapp-vite and weapp-tailwindcss setup using Bun.

```bash
bun x weapp-vite create my-app  

```

--------------------------------

### Example Tokens Command

Source: https://tw.icebreaker.top/llms-quickstart.txt

Example usage of the `tokens` command to output Tailwind tokens with specific formatting and grouping. Shows `--format` and `--group-key` options.

```bash
npx weapp-tw tokens --format grouped-json --group-key absolute
```

--------------------------------

### Install MCP Filesystem Server

Source: https://tw.icebreaker.top/llms-full.txt

Command to install the filesystem server for MCP using the Claude Code CLI.

```bash
# 添加文件系统服务端
claude-code mcp install @modelcontextprotocol/server-filesystem
```

--------------------------------

### MCP Resource Example

Source: https://tw.icebreaker.top/docs/ai/basics/mcp

Example of a resource exposed by an MCP server, detailing a file with its URI, name, description, and MIME type.

```json
{
  "uri": "file:///Users/project/README.md",
  "name": "项目 README",
  "description": "项目根目录的 README 文件",
  "mimeType": "text/markdown"
}
```

--------------------------------

### Create weapp-vite + weapp-tailwindcss template with npm

Source: https://tw.icebreaker.top/docs/quick-start/native/install-plugin

Use this command to create a new project with a pre-configured weapp-vite and weapp-tailwindcss setup using npm.

```bash
npx weapp-vite create my-app  

```

--------------------------------

### Start MCP Server with STDIO

Source: https://tw.icebreaker.top/docs/ai/basics/mcp

Command to start an MCP server using the Standard Input/Output (STDIO) transport, suitable for local process communication.

```bash
# 通过 STDIO 启动 MCP 服务端  
claude-code mcp install my-server  
my-server --stdio  
```

--------------------------------

### Unified Transformer and Aggregator Setup

Source: https://tw.icebreaker.top/blog

This snippet shows the setup for transformers and aggregators, unifying entry points like twMerge and twJoin into a single transformer system. It highlights the separation of escape and unescape functions.

```javascript
const transformers = resolveTransformers(options)

  

  const aggregators = {
  
  escape: transformers.escape,
  
  unescape: transformers.unescape,
  
}

```

--------------------------------

### Create weapp-vite + weapp-tailwindcss template with pnpm

Source: https://tw.icebreaker.top/docs/quick-start/native/install-plugin

Use this command to create a new project with a pre-configured weapp-vite and weapp-tailwindcss setup using pnpm.

```bash
pnpm dlx weapp-vite create my-app  

```

--------------------------------

### Specify Project Directory with Doctor Command (Example)

Source: https://tw.icebreaker.top/llms-full.txt

An example demonstrating how to use the `--cwd` flag to specify a project directory when the `doctor` command is not run from the root, specifically for a uni-app vue3 vite project.

```bash
pnpm exec weapp-tailwindcss doctor --cwd ./demo/uni-app-vue3-vite
```

--------------------------------

### Install Tailwind CSS and weapp-tailwindcss with npm

Source: https://tw.icebreaker.top/docs/quick-start/v4/weapp-vite

Install the necessary Tailwind CSS and weapp-tailwindcss packages using npm. This is the first step in setting up the environment.

```bash
npm install -D tailwindcss @tailwindcss/postcss postcss weapp-tailwindcss  
```

--------------------------------

### GPT Tokenization Example

Source: https://tw.icebreaker.top/docs/ai/basics/token

Demonstrates tokenization for 'Artificial Intelligence is amazing' using GPT's method.

```python
# GPT 分词示例

text = "Artificial Intelligence is amazing"

tokens = ["Art", "ificial", " Int", "elligence", " is", " am", "azing"]

# 7 tokens
```

--------------------------------

### Install weapp-tailwindcss and weapp-vite with pnpm

Source: https://tw.icebreaker.top/docs/quick-start/native/install-plugin

Use this command to install the weapp-tailwindcss and weapp-vite packages as development dependencies using pnpm.

```bash
pnpm add -D weapp-tailwindcss weapp-vite  

```

--------------------------------

### Install weapp-tailwindcss and weapp-vite with npm

Source: https://tw.icebreaker.top/docs/quick-start/native/install-plugin

Use this command to install the weapp-tailwindcss and weapp-vite packages as development dependencies using npm.

```bash
npm i -D weapp-tailwindcss weapp-vite  

```

--------------------------------

### Create weapp-vite + weapp-tailwindcss template with Yarn

Source: https://tw.icebreaker.top/docs/quick-start/native/install-plugin

Use this command to create a new project with a pre-configured weapp-vite and weapp-tailwindcss setup using Yarn.

```bash
yarn dlx weapp-vite create my-app  

```

--------------------------------

### Example Extract Command

Source: https://tw.icebreaker.top/llms-quickstart.txt

Example usage of the `extract` command to collect Tailwind class names from a CSS entry point. Demonstrates the use of `--css` and `--format` arguments.

```bash
npx weapp-tw extract --css src/app.css --format lines
```

--------------------------------

### Install Claude Code CLI and Initialize MCP Config

Source: https://tw.icebreaker.top/llms-full.txt

Commands to install the Claude Code CLI and initialize its MCP configuration.

```bash
# 安装 Claude Code CLI
npm install -g @anthropic-ai/claude-code

# 初始化 MCP 配置
claude-code mcp init
```

--------------------------------

### Example Patch Command Log

Source: https://tw.icebreaker.top/llms-quickstart.txt

An example log output when patching a Tailwind CSS instance within a pnpm monorepo. It shows the binding process, target recording, and completion status.

```bash
pnpm --filter demo/native-ts weapp-tw patch
weapp-tw patch 绑定 Tailwind CSS -> ./node_modules/tailwindcss (v3.4.18)
记录 weapp-tw patch 目标 -> ./node_modules/.cache/weapp-tailwindcss/<hash>/tailwindcss-target.json
Tailwind CSS 运行时补丁已完成。
```

--------------------------------

### llms.txt Example: Mini-Program E-commerce

Source: https://tw.icebreaker.top/llms-full.txt

A complete example of an llms.txt file for a mini-program e-commerce project, including structure, commands, and coding standards.

```markdown
# 小程序商城

## 项目概述
微信小程序商城，支持商品浏览、购物车、微信支付

## 技术栈
- 原生小程序框架
- weapp-tailwindcss (TailwindCSS)
- gulp 构建工具

## 项目结构
```
pages/
├── home/          # 首页
├── category/      # 分类
├── product/       # 商品详情
├── cart/          # 购物车
└── order/         # 订单
components/
├── product-card/  # 商品卡片
├── address-picker/# 地址选择
utils/
├── request.js     # API 封装
└── auth.js        # 登录认证
```

## 快速开始
```bash
pnpm install
pnpm dev:wechat
```

## 编码规范
- 组件命名: kebab-case
- 样式: TailwindCSS 原子类
- 不使用 id 选择器
- 图片路径使用绝对路径
```

--------------------------------

### Add Scripts to package.json

Source: https://tw.icebreaker.top/llms-index.json

Add these scripts to your package.json's scripts field for installation and setup.

```json
{
  "scripts": {
    "weapp-tailwindcss-init": "weapp-tailwindcss-init"
  }
}
```

--------------------------------

### Configure Tailwind CSS Content Scanning

Source: https://tw.icebreaker.top/docs/quick-start/install

Configure the content array in tailwind.config.js to specify which files Tailwind CSS should scan for class names. This example is a common setup for uni-app/Taro projects, excluding the uni_modules directory.

```javascript
/** @type {import('tailwindcss').Config} */
module.exports = {
  // Here is a common example for uni-app /taro, which should be configured according to your project's directory structure
  // Classes you write in files not included in content will not generate corresponding css utility classes
  content: [
    './public/index.html',
    './src/**/*.{html,js,ts,jsx,tsx,vue}',
    '!./src/uni_modules/**/*',
  ],
  // Other configuration items
  // ...
  corePlugins: {
    // preflight is not needed for mini programs, as this is mainly for h5. If you want to develop both mini programs and h5 ends, you should use environment variables to control it
    preflight: false
  }
}
```

--------------------------------

### Initialize package.json with Bun

Source: https://tw.icebreaker.top/docs/uni-app-x/install

Initializes a new package.json file in the project root using Bun.

```bash
bun init -y
```

--------------------------------

### Install Tailwind CSS Dependencies

Source: https://tw.icebreaker.top/docs/quick-start/install

Install tailwindcss, postcss, and autoprefixer using npm or yarn. This command installs version 3 of tailwindcss.

```bash
# Install tailwindcss@3 dependencies
npm i -D tailwindcss@3 postcss autoprefixer
```

--------------------------------

### MCP Tool Example

Source: https://tw.icebreaker.top/docs/ai/basics/mcp

Example of an MCP tool, which is an executable function exposed by the server. This example defines a tool to execute commands in the terminal.

```json
{
  "name": "execute_command",
  "description": "在终端执行命令",
  "inputSchema": {
    "type": "object",
    "properties": {
      "command": {
        "type": "string",
        "description": "要执行的命令"
      }
    }
  }
}
```

--------------------------------

### Install Tailwind CSS and weapp-tailwindcss with Yarn

Source: https://tw.icebreaker.top/docs/quick-start/v4/weapp-vite

Install the necessary Tailwind CSS and weapp-tailwindcss packages using Yarn. This command is an alternative to the npm installation.

```bash
yarn add --dev tailwindcss @tailwindcss/postcss postcss weapp-tailwindcss  
```

--------------------------------

### Install Tailwind CSS and weapp-tailwindcss with pnpm

Source: https://tw.icebreaker.top/docs/quick-start/v4/weapp-vite

Install the necessary Tailwind CSS and weapp-tailwindcss packages using pnpm. This command is an alternative to npm and Yarn installations.

```bash
pnpm add -D tailwindcss @tailwindcss/postcss postcss weapp-tailwindcss  
```

--------------------------------

### Install Tailwind CSS and weapp-tailwindcss with Bun

Source: https://tw.icebreaker.top/docs/quick-start/v4/weapp-vite

Install the necessary Tailwind CSS and weapp-tailwindcss packages using Bun. This command is an alternative to npm, Yarn, and pnpm installations.

```bash
bun add --dev tailwindcss @tailwindcss/postcss postcss weapp-tailwindcss  
```

--------------------------------

### Initialize package.json with npm

Source: https://tw.icebreaker.top/docs/uni-app-x/install

Initializes a new package.json file in the project root using npm.

```bash
npm init -y
```

--------------------------------

### SubmitForm Function Example

Source: https://tw.icebreaker.top/llms-index.json

A JavaScript function example for submitting a form.

```javascript
function SubmitForm() {
```

--------------------------------

### Initialize weapp-vite

Source: https://tw.icebreaker.top/llms-quickstart.txt

Initializes a weapp-vite project, setting up necessary configuration files and scripts.

```bash
npx weapp-vite init
```

--------------------------------

### Creating New Documentation Files

Source: https://tw.icebreaker.top/llms-full.txt

Explains how to create new markdown or mdx files in the 'website/docs/ai' directory to contribute documentation, with automatic route mapping.

```text
然后，你可以在 `website/docs/ai` 目录下，新建 `md` / `mdx` 文件，进行写作，路由会自动映射到:

`http://localhost:4000/docs/ai/{your_doc_name}` 路径中去

> 比如你创建一个 `v0.md`，你的路由就是 `http://localhost:4000/docs/ai/v0`
>
> 假如你创建一个 `index.md`，比如这个页面就是一个 `index.md` 这个页面访问路径为 http://localhost:4000/docs/ai
```

--------------------------------

### Initialize package.json with pnpm

Source: https://tw.icebreaker.top/docs/uni-app-x/install

Initializes a new package.json file in the project root using pnpm.

```bash
pnpm init -y
```

--------------------------------

### Install weapp-tailwindcss-webpack-plugin

Source: https://tw.icebreaker.top/docs/issues/native-toutiao

Install the necessary plugin as a development dependency using npm.

```sh
npm i -D weapp-tailwindcss-webpack-plugin
```

--------------------------------

### Install @weapp-tailwindcss/typography

Source: https://tw.icebreaker.top/llms-full.txt

Install the typography package as a development dependency using npm or yarn.

```sh
npm i -D @weapp-tailwindcss/typography
```

--------------------------------

### Initialize package.json with Yarn

Source: https://tw.icebreaker.top/docs/uni-app-x/install

Initializes a new package.json file in the project root using Yarn.

```bash
yarn init -y
```

--------------------------------

### Install weapp-tailwindcss with Bun

Source: https://tw.icebreaker.top/docs/uni-app-x/install

Installs the weapp-tailwindcss package as a development dependency using Bun.

```bash
bun add --dev weapp-tailwindcss
```

--------------------------------

### Initialize weapp-vite project

Source: https://tw.icebreaker.top/docs/quick-start/native/install-plugin

Run this command to initialize your existing native mini-program project with weapp-vite. This command creates a vite.config.ts file, modifies package.json scripts, updates project.config.json, and adds tsconfig.json.

```bash
npx weapp-vite init  

```

--------------------------------

### Install weapp-tailwindcss with pnpm

Source: https://tw.icebreaker.top/docs/uni-app-x/install

Installs the weapp-tailwindcss package as a development dependency using pnpm.

```bash
pnpm add -D weapp-tailwindcss
```

--------------------------------

### Install weapp-tailwindcss with Yarn

Source: https://tw.icebreaker.top/docs/uni-app-x/install

Installs the weapp-tailwindcss package as a development dependency using Yarn.

```bash
yarn add --dev weapp-tailwindcss
```

--------------------------------

### Context Management: Relevant Files and Summarization

Source: https://tw.icebreaker.top/docs/ai/basics/token

Demonstrates including only relevant files and using summaries to reduce token count.

```python
# 只包含相关文件
relevant_files = [
    "src/utils/auth.ts",    # 包含
    "src/utils/helpers.ts", # 包含
    # "src/utils/deprecated.ts", # 排除
]

# 使用摘要代替全文
file_summary = summarize_large_file("large_file.ts")  # 100 tokens
# vs 完整文件: # 5000 tokens
```

--------------------------------

### Install weapp-tailwindcss with npm

Source: https://tw.icebreaker.top/docs/uni-app-x/install

Installs the weapp-tailwindcss package as a development dependency using npm.

```bash
npm i -D weapp-tailwindcss
```

--------------------------------

### Initialize Tailwind CSS configuration with Bun x

Source: https://tw.icebreaker.top/docs/uni-app-x/install

Initializes the Tailwind CSS configuration file using Bun x.

```bash
# 初始化 Tailwind 配置文件  

bun x tailwindcss init
```

--------------------------------

### Install Tailwind CSS v3

Source: https://tw.icebreaker.top/llms-quickstart.txt

Installs tailwindcss, postcss, and autoprefixer version 3 as development dependencies.

```bash
npm i -D tailwindcss@3 postcss autoprefixer
```

--------------------------------

### Vibe Coding: Rapid Prototyping Steps

Source: https://tw.icebreaker.top/llms-quickstart.txt

Outlines the four key steps for rapid prototyping using the Vibe Coding approach.

```text
第一步: 5分钟实现核心功能
第二步: 运行看看效果
第三步: 凭直觉调整
第四步: 继续添加
第五步: 随时重构
```

--------------------------------

### Standard vs. Custom Naming Conventions for AI Context Files

Source: https://tw.icebreaker.top/llms-full.txt

Lists common file names used for providing AI with project context, differentiating between standard and custom options.

```text
llms.txt (标准)
├── 通用格式
├── 所有 LLM 都能理解
└── 社区标准

自定义命名
├── .cursorrules (Cursor 专属)
├── .clinerules (Cline 专属)
└── project_context.md (自定义)
```

--------------------------------

### Install weapp-tailwindcss and weapp-vite with Yarn

Source: https://tw.icebreaker.top/docs/quick-start/native/install-plugin

Use this command to install the weapp-tailwindcss and weapp-vite packages as development dependencies using Yarn.

```bash
yarn add --dev weapp-tailwindcss weapp-vite  

```

--------------------------------

### Build Weapp-Tailwind Website Locally

Source: https://tw.icebreaker.top/llms-quickstart.txt

Steps to build and run the weapp-tailwindcss website locally for development and contribution.

```bash
pnpm i
pnpm build:pkg
cd website && pnpm dev
```

--------------------------------

### Install Tailwind CSS Dependencies for Mpx

Source: https://tw.icebreaker.top/llms-full.txt

Install the necessary Tailwind CSS and weapp-tailwindcss packages as development dependencies for your Mpx project.

```bash
npm install -D tailwindcss @tailwindcss/postcss postcss weapp-tailwindcss
```

--------------------------------

### Install Tailwind CSS dependencies with Bun

Source: https://tw.icebreaker.top/docs/uni-app-x/install

Installs Tailwind CSS v3, PostCSS, and Autoprefixer as development dependencies using Bun.

```bash
# 安装 tailwindcss@3 所需依赖  

bun add --dev tailwindcss@3 postcss autoprefixer
```

--------------------------------

### Install Tailwind CSS dependencies with pnpm

Source: https://tw.icebreaker.top/docs/uni-app-x/install

Installs Tailwind CSS v3, PostCSS, and Autoprefixer as development dependencies using pnpm.

```bash
# 安装 tailwindcss@3 所需依赖  

pnpm add -D tailwindcss@3 postcss autoprefixer
```

--------------------------------

### Install Tailwind CSS dependencies with Yarn

Source: https://tw.icebreaker.top/docs/uni-app-x/install

Installs Tailwind CSS v3, PostCSS, and Autoprefixer as development dependencies using Yarn.

```bash
# 安装 tailwindcss@3 所需依赖  

yarn add --dev tailwindcss@3 postcss autoprefixer
```