skills.rest
rmanzoku
rmanzokuCOMMUNITY
Explore all skills by this author →
Website𝕏@rmanzokuGitHub

dads-design

Applies Digital Agency Design System tokens, principles, and components to projects with accessibility and brand compliance.

1|1|Updated Jul 24, 2014
Search Tags:#accessibility#design system#ui components#brand consistency#dads
One-click install
npx skills add https://github.com/rmanzoku/dotfiles --skill dads-design
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: dads-design
Source: https://github.com/rmanzoku/dotfiles/tree/main/skills/dads-design
Command: npx skills add https://github.com/rmanzoku/dotfiles --skill dads-design

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires @digital-go-jp/design-tokens, and includes scripts (resource) and references (resource) and assets (resource) components.

What problem does it solve?

The Skill solves the challenge of applying the Digital Agency Design System (DADS) tokens, principles, and components consistently across projects, ensuring accessibility and brand consistency.

Core Features & Use Cases

  • DADS Token Application: Applies DADS color tokens, typography, spacing, elevation, and components to your designs.
  • Accessibility Assurance: Ensures your designs meet accessibility standards (JIS X 8341-3:2016 AA/Contrast 4.5:1).
  • Brand Customization: Allows customization of the key color without deviating from the DADS structure and principles.
  • Use Case: When creating web pages, reports, slides, and documents that require DADS compliance, such as government or administrative websites.

Quick Start

Use the dads-design skill to apply DADS design tokens to your project.

Frequently Asked Questions about dads-design

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

FAQPage Schema
How do I apply Digital Agency Design System tokens to a government website project?▼

To apply Digital Agency Design System (DADS) tokens, use this Skill to integrate color, typography, and spacing tokens into your project, ensuring brand consistency and accessibility compliance for public-facing websites.

Can I customize the key color while maintaining DADS brand consistency?▼

Yes, you can customize the key color in your design without deviating from the DADS structure, allowing brand flexibility while still applying the core design system principles and component guidelines.

Does applying DADS design tokens ensure accessibility standards compliance?▼

Applying DADS design tokens ensures accessibility compliance by adhering to JIS X 8341-3:2016 AA standards, enforcing a minimum contrast ratio of 4.5:1 across UI components and visual elements.

What do I need to start using DADS components and design tokens?▼

You need the @digital-go-jp/design-tokens package installed as a dependency to provide the foundational design variables, enabling the Skill to correctly apply DADS principles to your web pages and documents.

Can I use the Digital Agency Design System for slides and document generation?▼

Yes, the DADS tokens and principles can be applied to web pages, reports, slides, and documents, ensuring consistent administrative branding and accessibility across various public-facing output formats.

What is the best way to ensure UI components meet Japanese administrative accessibility guidelines?▼

The best way to meet Japanese administrative accessibility guidelines is by applying DADS tokens and components, which automatically enforce JIS X 8341-3:2016 AA contrast ratios and structural compliance.

Related Skills

Explore More Design & Creative Skills→
AI-Foundry-CoreAI-Foundry-Core
4

visual-design-foundations

Codify visual systems with typography, color, spacing, and iconography tokens.

Official
Advanced
Seva-EatsSeva-Eats

theme-factory

Apply preset or custom visual themes to slides, documents, and web artifacts.

Official
Intermediate
jholhewresjholhewres
3

color-contrast

Calculate WCAG contrast ratios between foreground and background colors.

Community
Basic
fumtas1kfumtas1k

dads-design-system

Apply Digital Agency Design System guidelines to front-end UI development.

Community
Advanced