SuperAPI AI 工具集

ckm-ui-styling

前端与建站

查看项目

更新于 10-15 16:45

技能介绍

用途:构建基于 React 框架(Next.js、Vite、Remix、Astro)的界面,实现无障碍组件、实用优先样式、响应式移动优先布局、暗色模式与主题定制、设计系统与可视化设计。

主要能力:组件层采用 shadcn/ui(基于 Radix UI,复制粘贴式分发、TypeScript 类型安全);样式层采用 Tailwind CSS(构建期处理、零运行时开销、自动清除死代码);视觉设计层基于 Canvas,强调以视觉沟通为主、系统化构图与精致美学。涵盖表单、布局导航、浮层对话框、反馈状态、数据展示等组件,并提供主题定制、无障碍模式、响应式断点与配置扩展等参考文档。

使用方式:先用 npx shadcn@latest init 初始化,再用 npx shadcn@latest add button card dialog form 添加组件;Tailwind 纯配置方式为 npm install -D tailwindcss @tailwindcss/vite,并在 vite.config.ts 中引入插件、在 CSS 中 @import "tailwindcss"。另有脚本 python scripts/shadcn_add.py button card dialog 安装组件,python scripts/tailwind_config_gen.py --colors brand:blue --fonts display:Inter 生成配置。

限制与说明:未提供收费、价格、平台支持范围与效果保证等信息,需以实际环境与官方文档为准。