skills.rest
DagimAlemayehuu
DagimAlemayehuuCOMMUNITY
Explore all skills by this author →
GitHub

agentic-engineering-design

Manage design authority, route-to-screen mappings, and reviewed UI synchronization for frontend projects.

Updated Jul 19, 2026
Search Tags:#accessibility#frontend#design system#visual review#route mapping#design authority#ui synchronization
One-click install
npx skills add https://github.com/DagimAlemayehuu/AgenticEngineering --skill agentic-engineering-design-dagimalemayehuu
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: agentic-engineering-design
Source: https://github.com/DagimAlemayehuu/AgenticEngineering/tree/main/agentic-engineering/skills/agentic-engineering-design
Command: npx skills add https://github.com/DagimAlemayehuu/AgenticEngineering --skill agentic-engineering-design-dagimalemayehuu

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Frontend projects often drift away from their design source of truth, leaving route-to-screen mappings unclear and UI changes unreviewed. This Skill keeps a single design authority in place and ensures visual changes are mapped, reviewed, and synchronized before any production code is touched. ## Core Features & Use Cases - Single Design Authority: Declares one design authority per project, records its transport and page authority, and falls back to local artifacts when no external adapter is configured. - Route-to-Screen Mapping: Produces reviewed flows, route/state mappings, responsive and accessible states, and design-system decisions. - Reviewed Visual Synchronization: Generates visual evidence for UI changes and stops before production implementation, never blindly overwriting production code with generated HTML. - Use Case: When importing an existing UI into a project or resolving design drift, invoke this Skill to map every route to its screen, review the visual evidence, and approve changes before engineering begins. ## Quick Start Use $agentic-engineering-design to prepare a verified visual change for this project's frontend.

Frequently Asked Questions about agentic-engineering-design

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

FAQPage Schema
How do I synchronize a frontend UI with its design source?▼

Invoke the design phase to declare one design authority, map routes to screens, and produce reviewed visual evidence. The Skill records the transport and page authority and stops before production implementation so changes are reviewed first.

How do I import an existing UI into a project?▼

Use the design phase to establish a single design authority and generate route/state mappings, responsive and accessible states, and design-system decisions. Visual evidence is produced for review before any code changes occur.

What happens when no design adapter is configured?▼

The Skill falls back to local artifacts rather than representing the sync as a completed external operation. This keeps the design record honest and recoverable when no external design tool is connected.

Does this Skill write production frontend code?▼

No. It never blindly overwrites production code with generated HTML and explicitly stops before production implementation. Its outputs are reviewed flows, mappings, design-system decisions, and visual evidence.

When should I use the design phase instead of the main agentic-engineering skill?▼

Use the design phase shortcut when the task boundary is clearly visual: frontend visual changes, UI imports, or design drift resolution. For broader repository adoption or auditing, start with the main agentic-engineering skill.

Related Skills

Explore More Design & Creative Skills→
ArthTech-AIArthTech-AI

using-git-worktrees

Create isolated git worktrees for branch-specific development.

Official
Advanced
KevinKE93KevinKE93
42

frontend-ui-engineering

Implement frontend UI against design contracts with state, responsive, and accessibility coverage.

Community
Advanced
marcusrbrownmarcusrbrown
23

brainstorming

Guide discovery, exploration, and design capture before planning.

Community
Basic
vobasevobase
59

extract

Extract reusable UI components, design tokens, and patterns from frontend codebases.

Official
Intermediate