What is the NL Design System skill for Claude?

It is a specialized capability that enables Claude to guide developers in building Dutch government websites using standardized UI components, design tokens, and accessibility best practices.

How does it help with accessibility (WCAG)?

The skill follows NLDS standards which have WCAG 2.1 AA compliance built into every component, providing code snippets that prioritize semantic HTML and ARIA attributes.

Does this skill support specific JavaScript frameworks?

Yes, it provides implementation patterns for framework-agnostic Web Components as well as specific guidance for React, Angular, and Vue implementations.

Can I use it for different municipal themes?

Yes, the skill understands the token architecture for various themes including Rijksoverheid, Amsterdam, Utrecht, Den Haag, and Logius (DigiD).

What are the three layers of tokens it supports?

It supports the standard NLDS architecture: Brand tokens (org-specific), Common tokens (semantic mapping), and Component tokens (specific element styling).

NL Design System

Name: NL Design System
Author: djimit

bydjimit

•

디자인 도구

Builds accessible Dutch government websites using standardized community components, design tokens, and Rijkshuisstijl guidelines.

The NL Design System skill empowers developers to create consistent and accessible digital services for the Dutch government by providing expert guidance on NLDS standards. It assists with implementing the three-layer design token architecture—covering Brand, Common, and Component levels—and ensures that all UI elements comply with WCAG 2.1 AA accessibility requirements. Whether you are working with React, Angular, Vue, or Web Components, this skill helps you leverage community-driven components and official themes for organizations like Rijksoverheid and various Dutch municipalities.

주요 기능

01Three-layer design token implementation (Brand, Common, Component)

02Official government theme application (Rijksoverheid, Amsterdam, Utrecht)

031 GitHub stars

04Storybook documentation and BEM-naming convention support

05WCAG 2.1 AA accessibility compliance guidance

06Framework-agnostic community component integration

사용 사례

01Refactoring legacy CSS into standardized NL Design System custom properties.

02Developing a new municipality website using the Utrecht or Den Haag design tokens.

03Building accessible, BEM-compliant forms for national government portals.

주요 기능

01Three-layer design token implementation (Brand, Common, Component)

02Official government theme application (Rijksoverheid, Amsterdam, Utrecht)

031 GitHub stars

04Storybook documentation and BEM-naming convention support

05WCAG 2.1 AA accessibility compliance guidance

06Framework-agnostic community component integration

사용 사례

01Refactoring legacy CSS into standardized NL Design System custom properties.

02Developing a new municipality website using the Utrecht or Den Haag design tokens.

03Building accessible, BEM-compliant forms for national government portals.