skills.rest
fumtas1k
fumtas1kCOMMUNITY
Explore all skills by this author →
GitHub

dads-design-system

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

Updated Apr 11, 2026
Search Tags:#design system#ui design#ui components#html css#dads
One-click install
npx skills add https://github.com/fumtas1k/devtools --skill dads-design-system
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: dads-design-system
Source: https://github.com/fumtas1k/devtools/tree/main/.agents/skills/dads-design-system
Command: npx skills add https://github.com/fumtas1k/devtools --skill dads-design-system

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) and references (resource) components.

What problem does it solve?

This Skill provides design guidelines and implementation patterns based on the Digital Agency Design System (DADS) for front-end UI development in the devtools project, saving time and ensuring consistency.

Core Features & Use Cases

  • DADS Design Conventions: Access to DADS color systems, typography, spacing, corner shapes, layout, and accessibility guidelines.
  • UI Implementation Patterns: Patterns for implementing components like buttons, cards, inputs, and tables with DADS design specifications.
  • Use Case: When creating or modifying the UI of a tool in the devtools project, use this Skill to refer to DADS-based design conventions for consistent and accessible UI elements.

Quick Start

Run the 'dads-design-system' skill to access the design conventions for UI development.

Frequently Asked Questions about dads-design-system

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

FAQPage Schema
What UI design conventions does the Digital Agency Design System include for front-end development?▼

The Digital Agency Design System provides UI design conventions including color systems, typography, spacing, corner shapes, layout, and accessibility guidelines for consistent front-end development.

How do I implement UI components like buttons and inputs using DADS design specifications?▼

To implement UI components using DADS design specifications, apply the provided HTML and CSS patterns for buttons, cards, inputs, and tables to ensure consistent and accessible UI elements.

Do I need CSS and HTML knowledge to apply DADS design patterns?▼

Yes, you need knowledge of CSS and HTML to apply the DADS design patterns effectively, as the Skill provides implementation guidelines requiring front-end coding proficiency.

When should I use DADS-based design conventions in my UI development workflow?▼

Use DADS-based design conventions when creating or modifying the UI of tools in the devtools project to save time, ensure accessibility, and maintain visual consistency across components.

What's the best way to ensure accessibility when building UI components with DADS?▼

The best way to ensure accessibility is to follow the DADS accessibility guidelines provided within the design system, applying them directly to your HTML and CSS component implementations.

Related Skills

Explore More Software Engineering Skills→
atovkatovk

component-builder

Generate UI component code for React, Vue, and Svelte frameworks.

Community
Basic
Chachamaru127Chachamaru127
3.0k

ui

Generate accessible Tailwind and shadcn/ui components and feedback forms.

Community
Basic
NotWrenchNotWrench
1

web-design-guidelines

Compare UI files against Web Interface Guidelines and output violations in file:line format.

Community
Intermediate
martingaam-huemartingaam-hue

frontend-design

Design and implement production-grade frontend interfaces with HTML, CSS, JS, React, or Vue.

Community
Advanced