用途：面向 Gemeente Amsterdam（阿姆斯特丹市政府）数字产品的前端 UI 开发。该技能明确要求所有 UI 组件、页面、布局和视觉元素必须使用 Amsterdam Design System 的组件与令牌，禁止使用 Material UI、shadcn/ui、Chakra UI、Ant Design 或纯 HTML 元素搭建 UI；新建项目时应先安装并配置 @amsterdam/design-system-* 包。
主要能力：覆盖设计系统五个 npm 包——assets（字体）、css（BEM 组件样式）、tokens（--ams-* CSS 变量，Spacious 与 Compact 两种模式）、react（66 个组件，均支持 forwardRef）、react-icons（图标）。支持页面结构、网格布局、排版、按钮、表单控件与表单结构、导航、数据展示、反馈与工具类组件；网格为 4/8/12 列三断点响应式系统。文档见 https://designsystem.amsterdam/ ，仓库见 https://github.com/Amsterdam/design-system ，组件预览见 Storybook。本技能还包含布局模板、Tailwind CSS v4 桥接、美学规范等参考文档。
使用方式：安装命令 npm install @amsterdam/design-system-assets @amsterdam/design-system-css @amsterdam/design-system-react @amsterdam/design-system-react-icons @amsterdam/design-system-tokens。CSS 导入顺序有强制要求：先字体、再组件样式、最后令牌；内部工具可在令牌后追加 compact.css。根元素需加 ams-body 类。附带 Vite + React 起始模板，可用 cp -r {skill_dir}/assets/starter-vite-react ./<project-name>，随后 bun install 与 bun run dev。
适用场景与限制：适用于新建或扩展市政 React/JSX/TSX 项目、公共网站、仪表盘、表单等。需求模糊时应先澄清页面类型、模式、内容结构、路由、是否使用 Tailwind 等。启动模板基于 Vite，不适用于已有项目或 Next.js App Router 项目；非 React 场景使用 BEM CSS 类。版本更新时间及后续细节暂未提供。