skills.rest
supersterling
supersterlingCOMMUNITY
Explore all skills by this author →
GitHub

design-engineering

Guides frontend developers to implement polished, accessible UI components with defined constraints and a review checklist.

1|Updated Feb 26, 2026
Search Tags:#design#ui#accessibility#a11y#frontend#patterns#polish
One-click install
npx skills add https://github.com/supersterling/primus --skill design-engineering-supersterling
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: design-engineering
Source: https://github.com/supersterling/primus/tree/main/.agents/skills/design-engineering
Command: npx skills add https://github.com/supersterling/primus --skill design-engineering-supersterling

SYSTEM DOCUMENTATION & REQUIREMENTS

## What problem does it solve? Design engineering principles provide a structured approach to building polished, accessible web interfaces, reducing guesswork and rework across frontend teams.

## Core Features & Use Cases

  • Clear constraints like no layout shift, touch-first design, keyboard navigation, and accessibility-by-default to improve reliability and inclusivity.
  • Decision flows, checklists, and reference topics that guide component design, animation, typography, and performance for consistent outcomes.
  • Real-world scenarios include building accessible forms, responsive layouts, marketing pages, and reusable UI primitives with strong guardrails.

### Quick Start Design a polished, accessible UI component following Emil Kowalski's design-engineering principles.

Frequently Asked Questions about design-engineering

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

FAQPage Schema
How do I build accessible UI components without layout shift?▼

Design engineering principles reduce guesswork by providing clear constraints like no layout shift, keyboard accessibility, and prefers-reduced-motion. This structured approach ensures frontend developers build polished, inclusive web interfaces consistently.

What's the best way to ensure keyboard accessibility in frontend forms?▼

The best way to ensure keyboard accessibility in frontend forms is following a design engineering checklist that covers interactive widgets, component composition, and accessibility-by-default constraints for inclusive user experiences.

How does prefers-reduced-motion affect UI animation patterns?▼

Prefers-reduced-motion requires UI animation patterns to gracefully degrade or disable motion for users who request it. Design engineering principles mandate this constraint to maintain accessibility and performance in interactive widgets.

Can I use design engineering principles for responsive marketing pages?▼

Yes, design engineering principles apply directly to responsive marketing pages. They provide decision flows and reference topics guiding typography, animation, and performance to achieve consistent, polished outcomes across real-world scenarios.

What are the limitations of applying design engineering to reusable UI primitives?▼

Design engineering principles have no explicit limitations for reusable UI primitives, as they provide strong guardrails and comprehensive design review checklists covering component composition, typography, and animations to ensure scalable, accessible outcomes.

Related Skills

Explore More Design & Creative Skills→
Happy-HorizonHappy-Horizon

frontend-design

Creates responsive HTML/CSS/JS interfaces with specified typography, color, motion, and layout guidelines.

Official
Advanced
The-Vibe-CompanyThe-Vibe-Company
2.4k

frontend-design

Generate production-grade frontend interfaces with design tokens for typography, color, and layout.

Official
Advanced
delbytedelbyte

animate

Plan and implement accessible UI animations for buttons, forms, and navigation.

Community
Intermediate
alex-voloshin-devalex-voloshin-dev
2

ui-ux-design

Standardize UI/UX design systems and WCAG 2.2 AA accessibility compliance through structured auditing and documentation workflows.

Community
Advanced