design-engineering

Standardize UI design with typography, motion, composition, and accessibility principles.

1|1|Updated Jun 2, 2025
One-click install
npx skills add https://github.com/BumpyClock/dotfiles --skill design-engineering
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: design-engineering
Source: https://github.com/BumpyClock/dotfiles/tree/main/.ai_agents/skills/design-engineering
Command: npx skills add https://github.com/BumpyClock/dotfiles --skill design-engineering

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Design engineering principles provide a structured framework to consistently build polished, accessible, and high-performance web interfaces across products and teams.

Core Features & Use Cases

  • Clear design direction: typography, spacing, color, motion, and accessibility baked into the workflow.
  • Reusable patterns: component design, composition, and tokens to reduce drift across apps.
  • Practical guidance: apply to forms, navigation, and marketing pages to improve usability and conversion.

Quick Start

Audit current UI components against the principles, then implement token-based styles, accessible patterns, and measured motion in new work.

Frequently Asked Questions about design-engineering

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

FAQPage Schema
How do I standardize UI design for accessible and polished web interfaces?

Standardize UI design by applying structured design engineering principles, using decision flows and concrete best practices for typography, motion, composition, and accessibility to build polished interfaces consistently.

What are the best practices for frontend component design and composition?

Best practices for frontend component design involve using reusable patterns and token-based styles to reduce drift across apps, ensuring composition aligns with core principles for accessible and high-performance web interfaces.

How do I audit current UI components against design engineering principles?

Audit current UI components by checking them against established design principles for typography, spacing, color, motion, and accessibility, then implement token-based styles and measured motion in new work.

Does this approach work for building cross-platform web interfaces and marketing pages?

Yes, this approach works for cross-platform web interfaces, forms, and marketing pages, applying design engineering principles to improve usability, accessibility, and conversion across products and teams.

How do I reduce UI drift across multiple frontend apps?

Reduce UI drift across multiple frontend apps by implementing reusable patterns, token-based styles, and clear design direction for typography and motion, ensuring consistency across different teams and products.

Why should I use design tokens for frontend web interfaces?

Use design tokens to standardize typography, spacing, color, and motion variables, providing a structured framework that ensures accessible, polished, and high-performance web interfaces consistently across products.