Skills
.Work. You
Rest

amsterdam-design-system

Official

Enforce Amsterdam Design System across UI work.

Design & Creative#components#tokens#design-system#ui-consistency#grid-patterns#tailwind-bridge
AuthorAmsterdam
Version1.0.0
Installs0

System Documentation

What problem does it solve?

The Amsterdam Design System provides a single source of truth for UI components, tokens, patterns, and guidelines, helping teams ship consistent experiences and avoid drift into non-ADS libraries or ad-hoc styling.

Core Features & Use Cases

  • Enforce the use of ADS components (@amsterdam/design-system-react) and tokens (--ams-*) across all UI work.
  • Provide clear patterns for grid layouts, typography, motion, and composition, with ready-made references and worked examples.
  • Support integration paths such as the Tailwind v4 bridge, while keeping ADS components as the primary UI primitives.

Quick Start

Install the Amsterdam Design System starter and start applying ADS components, tokens, and patterns to your UI tasks.

Dependency Matrix

Required Modules

None required

Components

Standard package

💻 Claude Code Installation

Recommended: Let Claude install automatically. Simply copy and paste the text below to Claude Code.

Please help me install this Skill:
Name: amsterdam-design-system
Download link: https://github.com/Amsterdam/amsterdam-agent-skills/archive/main.zip#amsterdam-design-system

Please download this .zip file, extract it, and install it in the .claude/skills/ directory.
View Source Repository

Agent Skills Search Helper

Install a tiny helper to your Agent, search and equip skill from 471,000+ vetted skills library on demand.