@ clay- design- system/ react
反应19节+原子组件为周一.com营销页面,外加资产登记册和
静态导出所使用的服务器- 递增 / 递增层 。 Styling 是 CSS 模块在
@layer clay.components消费 @clay-design-system/tokens 只有这个.
入境点
| 导入 | 什麽 |
|---|---|
@clay-design-system/react | 每节+原子(精确道具: skills/web-design-brain/reference/COMPONENT_PROPS.md, (中文(简体) ), FOOTER_DEFAULTS资产常数G2_BADGES(中文(简体) ). 每个模块输出的薄管: 捆绑机只保留所导入的 |
@clay-design-system/react/sections/<Name> • 妇女 …/components/<Name> | 单方一个区块/组件(两个地图都到 dist/web/<Name>),例如. …/sections/FeaturesSection, (中文(简体) ), …/components/Button |
@clay-design-system/react/styles.css | 构成部分CSS+ clay-reveal 编号 : clay-stagger 滚动工具( 每个组件一个样式表) |
@clay-design-system/react/assets | 资产解析器: iconUrl, (中文(简体) ), logoUrl, (中文(简体) ), agentUrl, (中文(简体) ), badgeUrl, (中文(简体) ), imageUrl, (中文(简体) ), configureAssets (CDN URL;见 CDN 资产(中文(简体) ) |
@clay-design-system/react/logos | logoUrl, (中文(简体) ), logoKeys, (中文(简体) ), customerSvgMap, (中文(简体) ), integrationSvgMap, (中文(简体) ), productSvgByProduct (+ 数) @clay-design-system/react/logos/manifest.json,键 ~ CDN URL) |
@clay-design-system/react/icons | iconSvgMap, (中文(简体) ), iconMetadata, (中文(简体) ), ICON_NAMES (所有~600图标) |
@clay-design-system/react/icon-svg • 妇女 …/icons/data/<name> | IconSvg (将 SVG 标记给您通过) 和一个图标的标记作为字符串: 精益的替代 <Icon name>,可以装入每个图标 |
@clay-design-system/react/badges | badgeUrl, (中文(简体) ), badgeKeys |
@clay-design-system/react/render | 服务器渲染一个页面规格( 由 apps/pages/scripts/build-static.js(中文(简体) ) |
@clay-design-system/react/page-spec | PageSpec 类型 + 区域计划 |
@clay-design-system/react/brief-conformance | evaluateBriefConformance - 对照其简报检查网页计划 |
@clay-design-system/react/enhance | 无框架 enhance.js (塔布、滑轮、手风琴等)用静态页面发运 |
@clay-design-system/react/bundles/* | 节捆绑( C)dist/bundles/: 一个犬科部分的静态 HTML, CSS块, 符号,字体和 init(root) 带有表单(每个文件的sha256)的脚本,可以插入现有的HTML页面而无需回放. 索引 : @clay-design-system/react/bundles/index.json; 飞行员 : FaqSection |
@clay-design-system/react/catalog.json | 区/变量目录(Zod schemas的变量) |
@clay-design-system/react/page-spec.schema.json • 妇女 …/page-spec.example.json | PageSpec 以 JSON Schema 为名( 2020- 12 草案, 由 zod schema 生成) renderPageSpec parases)和一个通过它的光谱:用任何JSON Schema验证器验证光谱,不需要MCP. 未知道具,布局-内容相接和"硬通则"C6/A11不在计划; 3; clay_validate_page 检查他们 |
每艘次路径船舶.js)和CJS(.cjs与匹配 .d.ts 编号 : .d.cts。图像从不出现在软件包中:图标、标志和
代理艺术和信任/遵从徽章来自Clay CDN通过 src/assets (品牌文件夹是一个设置). 子路径 a
区域中不属于此区域本身的文件夹( x)…/sections/<Name>/assets未导出.
节点 : ^20.19.0 || >=22.12.0。 。 。 . require() 软件包需求 require(esm) (Swiper是只使用无害环境管理),节点从20.19起未加标记
和22.12;见 移民.md 第1节.
来源布局( E)src/(中文(简体) )
assets/ (CDN资产解析器)- web/ 每个组件一个文件夹( o)<Name>.tsx, (中文(简体) ), .module.css, (中文(简体) ), .stories.tsx, (中文(简体) ), .test.tsx, (中文(简体) ),
index.ts· logos/ • 妇女 icons/ • 妇女 visuals/agents/ (单位:千美元)<AgentVisual>· badges/ • 妇女 ssr/ + 键
enhance/ · (静态出口) page-spec/ • 妇女 brief-conformance/ • 妇女 handbook/ + 键 wiki/ (产生)
- 公司特工 src/figma/connections.json (图框登记)- docs/ · (故事手册)
index.ts (炮声).
脚本
pnpm --filter @clay-design-system/react build # per-module library (ESM+CJS+types) + enhance bundle + catalog.json
pnpm --filter @clay-design-system/react test # Vitest + Testing Library + axe
pnpm --filter @clay-design-system/react assets:index # regenerate src/assets/generated from cdn-manifest.json
pnpm --filter @clay-design-system/react lint # stylelint — clay-ds/no-foundation-tokens only
pnpm --filter @clay-design-system/react typecheck
添加组件 : pnpm generate <Name> 和根中的核对表 CLAUDE.md
("增加一新组成部分"). 用法文件 : skills/web-design-brain/reference/SECTIONS.md。 。 。 .