skills.rest
Amsterdam
AmsterdamOFFICIAL
Explore all skills by this author →
WebsiteGitHub

amsterdam-design-system

Enforce Amsterdam Design System tokens, components, and grid patterns in frontend projects.

24|2|Updated Mar 20, 2026
Search Tags:#components#tokens#design-system#ui-consistency#grid-patterns#tailwind-bridge
One-click install
npx skills add https://github.com/Amsterdam/amsterdam-agent-skills --skill amsterdam-design-system
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: amsterdam-design-system
Source: https://github.com/Amsterdam/amsterdam-agent-skills/tree/main/skills/amsterdam-design-system
Command: npx skills add https://github.com/Amsterdam/amsterdam-agent-skills --skill amsterdam-design-system

SYSTEM DOCUMENTATION & REQUIREMENTS

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.

Frequently Asked Questions about amsterdam-design-system

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I enforce Amsterdam Design System components and tokens in my frontend project?▼

To enforce Amsterdam Design System components and tokens, apply the provided Skill rules to mandate @amsterdam/design-system-react components and --ams-* CSS variables across all UI work, preventing drift into ad-hoc styling or non-ADS libraries.

Can I use Amsterdam Design System UI components with Tailwind CSS?▼

Yes, you can use Amsterdam Design System UI components with Tailwind CSS through an optional Tailwind v4 bridge integration, while keeping the designated ADS components as the primary UI primitives for layout and composition.

What design tokens and grid patterns are available for Amsterdam UI consistency?▼

Available Amsterdam UI consistency design tokens include --ams-* CSS variables, alongside specified grid layouts, typography rules, and motion patterns that provide a single source of truth for building consistent dashboards, forms, and marketing pages.

How do I stop my UI from drifting into ad-hoc styling when using a shared design system?▼

Stop UI drift into ad-hoc styling by enforcing a single source of truth for UI components, tokens, and guidelines, applying safety checks and best practices to ensure teams ship consistent experiences without non-ADS libraries.

Does the Amsterdam Design System provide patterns for forms and marketing content?▼

Yes, the Amsterdam Design System provides clear patterns for grid layouts, typography, motion, and composition with ready-made references and worked examples specifically designed for pages, dashboards, forms, and marketing content.

Related Skills

Explore More Design & Creative Skills→
clovernguyen1010-ship-itclovernguyen1010-ship-it

ba-frontend-code-gen

Generate React/TypeScript/Tailwind frontend scaffolds from brand guidelines and design systems.

Community
Advanced
Hey-ViswaHey-Viswa

tesla-design-skill

Apply Tesla design-system patterns to React/Next.js UI components.

Community
Intermediate
tenequmtenequm
32

styling-with-tailwind

Apply Tailwind CSS utility classes and shadcn/ui patterns to style React interfaces.

Community
Intermediate
WellApp-aiWellApp-ai
341

design-context

Align UI decisions with design system tokens, Storybook stories, and codebase patterns.

Official
Basic