@aziontech/webkit (英语)

Azion为Vue 3——100+可访问,由符号驱动的组件设计系统,外加 工具,使每个项目都使用它们:一个ESLint插件(每个规则) error),一个Stylelint配置,一个指导AI编码工具的MCP服务器,以及一个CLI 统统用一个命令.

• 播放场 : 每个元件都会在故事书中播放互动故事,每个道具都有控制.
• 样式指南 : docs/STYLEGUIDE.md 每一个代码标准都是完全的,每个门都挡住.
• 准则: docs/GUIDELINES.md ——一页文摘(建设并使用平面版).

开始

快速从AI开始

使用 Claude 代码, Cursor, 还是另一个 AI 编码工具? 把这个粘入您的代理 :

安装 @aziontech/webkit, (中文(简体) ), @aziontech/theme,以及 @aziontech/icons 在这个项目中, 然后运行 npx @aziontech/webkit init 给线条、MCP服务器和代理文件.

它的 MCP 服务器给您的 AI 完整组件目录(list_components, (中文(简体) ), get_component, (中文(简体) ), list_tokens, (中文(简体) ), suggest_component, (中文(简体) ), get_best_practices, (中文(简体) ), validate_usage)——所以在第一次尝试时写出正确的导入,道具和符号.

1) 安装

npm install @aziontech/webkit @aziontech/theme @aziontech/icons

然后将项目(lint预设,MCP,预承诺,代理文件)线入一个命令:

npx @aziontech/webkit init

init 首先读取您的工程, 并且绝不刻录已有文件 --dry-run 预览计划。 见 docs/toolkit/cli.md。 。 。 .

2-增加主题CSS

在您的应用程序条目( 如 . src/main.js:

import '@aziontech/theme/globals.css' // design tokens (light/dark aware)
import '@aziontech/icons' // the icon font

用尾风? 主题还包括一个预设—— @aziontech/theme/tailwind-preset 这样啊 语义公用事业text-body-sm, (中文(简体) ), bg-[var(--primary)]在你的建筑中决心.

3 添加您的第一个组件

每个部件都是平坦的、可树动的进口 @aziontech/webkit/<name>数字 :

<script setup>
import Button from '@aziontech/webkit/button'
import FieldText from '@aziontech/webkit/field-text'
</script>

<template>
  <FieldText name="email" label="Email" />
  <Button kind="primary" @click="submit">Create account</Button>
</template>

组分成分暴露出化合物API(Table.Row, (中文(简体) ), Table.Cell)和a 数据 树能震动的根(@aziontech/webkit/table-root当你只需要根.

4- 在操场试一试

故事书是现场游乐场:每个组成部分都传出它的故事 默认 故事是交互式的,每个道具都有控件——加上复制版已准备好的"显示代码" 被贴入你的应用软件时,片段是按原样运行的.

# in this repo
pnpm storybook:dev

出版的《童话》 https://webkit.azion.app/ 页面存档备份,存于互联网档案馆. 当地为撰稿人(事先要求、运行和建立《故事书》)的设置 仓库读取器。 。 。 .

5) 保持原样(记起时的花纹)

init 启用 Webkit ESLint 预设, 在哪里 每个规则都是 error - 错了 导入、深路/内部路由、样式覆盖组件、硬码颜色以及 被折旧的组件会失败您的 lint 而不是运输 :

// eslint.config.js
import webkit from '@aziontech/webkit/eslint-plugin'
export default [...webkit.configs.recommended]

完整的图案目录——如何用手构建一个组件,如何使用我们的组件——已经进入 docs/GUIDELINES.md。 。 。 .

6- 从终点站探索

npx @aziontech/webkit doctor   # verify the wiring is healthy (lint, MCP, theme)
npx webkit-mcp                 # the MCP server your AI tools connect to

软件包

所需资源

• Vue 3.5+(使用组件) defineModel 财务报告和审定财务报表 useId(中文(简体) )
• VeeValidate 4.x (仅格式字段)

许可证

麻省理工学院