Design Engineering Skills

Discover, install, and use curated agent skills for product-to-production frontend workflows — from product intent clarification to component specs and gap state inventories.

Design Engineering Skills are reusable agent instructions that help AI assistants apply product-to-production judgement — not just vibe-coded screens. Each skill activates automatically when a task matches its trigger, pausing the agent at the right workflow moment to clarify intent, plan architecture, or specify components before generating code.

The skill pack is published on skills.sh and open source on GitHub.

Installation

Install the full skill pack with a single command:

npx skills add mattjmdesign/dengskills

Once installed, your AI assistant can automatically load the relevant skill when a task matches one of the design-engineering moments described below. You do not need to install skills individually — the pack includes all fifteen skills.

Skills are shared instructions, not executable code. They guide agent behaviour through structured prompts and process steps. The skills CLI downloads the skill definitions to your local agent configuration — no runtime code is executed.

How skills work

When an AI assistant recognises that a user's request matches a skill description, it loads the corresponding SKILL.md file and follows the structured process defined there. This replaces default behaviour (guessing, filling in blanks, starting with code) with a deliberate workflow:

Recognition — The agent detects a trigger moment (e.g. "I have this rough idea for an app…")
Loading — The agent reads the skill's SKILL.md for the structured process
Execution — The agent follows the process steps, output format, and validation checklist
Handoff — The skill's output becomes the input for the next phase (requirements → sitemap → spec → code)

Design Engineering Skills are built to chain naturally. For example:

Phase	Skill	Output
Clarify	`product-intent-clarifier`	Product intent brief
Plan	`sitemap-planner`	Page and route hierarchy
Spec	`component-spec-writer`	Component specification
Build	Agent generates code	Working components from the spec

Prompting convention

Skills are referenced inline in prompts using the $ prefix. Most AI assistants recognise the reference and load the skill automatically:

Use $product-intent-clarifier to turn this rough app idea into a buildable product intent brief.

Use $gap-state-inventory to identify missing states before we let an agent build this screen.

You can also describe what you need in natural language — agents trained on these skills recognise the workflow moment:

I need to clarify who this app is for and what the first thing to build should be before
we start coding.

Every skill at a glance

Use this table when you know the workflow moment but do not know which skill to call.

Skill	Best use case	Produces
`$product-intent-clarifier`	A product, client, or app idea is still vague.	Product intent brief with users, promise, JTBD, v1 scope, constraints, risks, assumptions, and next artifact.
`$prototype-fidelity-selector`	You need to decide how polished the next prototype should be.	Fidelity recommendation, validation question, exit criteria, and over/under-build risks.
`$requirements-from-brief`	A brief needs to become testable build direction.	Numbered functional requirements, quality constraints, out-of-scope items, dependencies, and open questions.
`$framework-fit-advisor`	You need to choose the frontend path from product constraints.	Framework recommendation with routing, rendering, SEO, auth, data, deployment, and team tradeoffs.
`$project-foundation-planner`	A new repo needs conventions before many files are created.	Repository structure, tooling defaults, env strategy, token locations, tests, and agent context files.
`$git-workflow-planner`	Humans and agents need a safe collaboration model.	Branch model, PR slicing, worktree rules, commit conventions, lock files, feature flags, and merge policy.
`$agent-context-file-planner`	Agents need project-specific instructions.	AGENTS.md / CLAUDE.md / cursor-rule structure with commands, architecture, styling, testing, and guardrails.
`$ui-system-initializer`	A codebase or Figma file needs a UI foundation.	Minimal token system for colour, type, spacing, radius, shadows, focus, and light/dark mode.
`$ui-layout-architect`	A project needs its page skeleton before feature work.	Layout shells, max widths, section rhythm, sidebar/header dimensions, responsive behaviour, and primitive reuse plan.
`$ui-system-governance`	An existing UI system needs documentation or drift control.	DESIGN.md guidance, token/component/layout inventories, drift audit, priority fixes, and future-agent guardrails.
`$sitemap-planner`	You need pages, routes, and navigation before screens.	Sitemap, route hierarchy, auth boundaries, navigation model, URL conventions, and IA risks.
`$user-flow-mapper`	You need to map a task from start to finish.	Happy path plus validation errors, API failures, permission branches, cancellation paths, and UI states.
`$content-hierarchy-planner`	A page needs clearer information priority.	Page purpose, primary decision/action, heading structure, content tiers, responsive priority, and what to remove.
`$component-spec-writer`	A UI component needs definition before code.	Component purpose, type, variants, states, props, slots, accessibility, responsive behaviour, tokens, and acceptance criteria.
`$gap-state-inventory`	A screen or flow may be missing edge states.	Loading, empty, error, retry, offline, permission, expired-session, validation, success, and responsive gap inventory.

Skill catalogue

Product Definition

Skills for turning vague product ideas into buildable direction. Use these before any design or code work begins.

target

Product Intent Clarifier

Use when a product or client idea is still vague. Produces a product intent brief with users, product promise, job-to-be-done, first workflow, v1 scope, constraints, risks, assumptions, open questions, and the next design-engineering artifact.

layers

Prototype Fidelity Selector

Use when deciding how much fidelity to build: sketch, wireframe, clickable Figma prototype, high-fidelity mockup, code prototype, pilot-ready build, or near-production. Matches fidelity to the validation question and defines exit criteria.

check-square

Requirements from Brief

Use when turning a brief, stakeholder notes, or feature idea into testable frontend requirements. Produces FR-XX functional requirements, NFR-XX quality constraints, out-of-scope items, dependencies, and open questions.

When you have a rough idea, a client request, or what feels like a complete brief that is actually just vibes, the Product Intent Clarifier stops it from becoming arbitrary UI. It restates the concept, identifies primary and secondary users, defines the product promise, names the core job-to-be-done, and splits v1 must-haves from later features. The output is a structured product intent brief.

Not everything needs polished code. The Prototype Fidelity Selector helps you choose the right fidelity level based on what you need to learn — validation, stakeholder demo, usability test, or production. It prevents both overbuilding (polishing things that will change) and underbuilding (showing something too rough to get useful feedback).

A brief is not a spec. Requirements from Brief transforms product notes into numbered functional requirements (FR-XX) and non-functional constraints (NFR-XX) with acceptance criteria. Requirements become testable, reviewable, and traceable back to product intent. Includes explicit out-of-scope items so scope creep has a boundary.

Project Setup

Skills for choosing the technical path and collaboration model for a product-grade repository.

code

Framework Fit Advisor

Use when choosing a frontend framework: Next.js vs Nuxt vs React + Vite. Bases recommendations on product type, routing, rendering, SEO, auth, data ownership, interactivity, deployment, and team familiarity — not popularity.

folder

Project Foundation Planner

Use when setting up a new product-grade repository before coding. Plans folder structure, package/tooling, TypeScript strictness, linting, environment variables, design token locations, component architecture, testing baseline, documentation, and agent context files.

git-branch

Git Workflow Planner

Use when planning Git collaboration for designers, developers, and AI agents in one repository. Defines branch model, dev/main flow, agent branch rules, commit conventions, PR slicing, worktrees, lock files, feature flags, and merge policy.

file-text

Agent Context File Planner

Use when creating or improving AGENTS.md, CLAUDE.md, .cursorrules, or similar files. Captures project purpose, commands, stack, architecture rules, server/client boundaries, styling and token rules, accessibility requirements, testing, git workflow, and agent guardrails.

UI Composition

Skills for setting up the visual system and page skeleton before agents build features.

palette

UI System Initializer

Use when a new codebase or Figma file needs a clean UI foundation before components or pages are built. Produces a minimal design system setup covering semantic colour tokens, typography, spacing, radius, shadows, focus states, and light/dark mode.

panel-left

UI Layout Architect

Use when a project needs its UI skeleton planned before feature work begins. Audits existing component libraries, chooses whether to reuse shadcn/ui, Radix, Base UI, or custom primitives, and defines layout shells, max widths, section rhythm, sidebar/header dimensions, and responsive behaviour.

clipboard-check

UI System Governance

Use when an existing project needs DESIGN.md, token/component/layout inventories, drift audits, or guardrails before more UI is added. Catches token drift, duplicate components, missing states, layout inconsistencies, and undocumented system changes.

IA & Flows

Skills for mapping the product architecture before visual design or implementation.

map

Sitemap Planner

Use when creating information architecture for a product or prototype. Maps pages/screens, route hierarchy, public vs authenticated vs admin areas, navigation model, URL conventions, route groups, and IA risks before visual design.

route

User Flow Mapper

Use when mapping how a user completes a task: onboarding, checkout, creation, editing, approval, or account. Produces happy path plus validation errors, API failures, permission branches, cancellation paths, success destinations, and required UI states.

list

Content Hierarchy Planner

Use when planning what belongs on a page or screen before visual design. Defines page purpose, primary user decision/action, heading structure, primary/secondary/tertiary content, actions, responsive priority, and what to defer or remove.

Build Readiness

Skills for preparing implementation so the agent does not guess the product shape during code generation.

package

Component Spec Writer

Use when defining a UI component before code. Produces a specification: purpose, component type, variants, states, props, slots, accessibility, responsive behaviour, design token requirements, and acceptance criteria.

alert-triangle

Gap State Inventory

Use when checking a screen, flow, or component for missing states: loading, empty, partial data, errors, retry, offline, permission denied, expired session, validation, disabled, success, destructive confirmation, slow network, and responsive edge cases.

These skills guide agent behaviour — they do not replace human judgement. Always review skill output before proceeding to the next phase. The skills are designed to surface the right questions and structure, but product decisions require human understanding of context, constraints, and relationships.

Chaining skills into a workflow

The skills are designed to compose into a full product-to-prototype workflow. Here is a common progression:

Step 1 — Clarify intent:
Use $product-intent-clarifier to turn this client onboarding request into a product intent brief.

Step 2 — Choose fidelity:
Use $prototype-fidelity-selector to decide what fidelity we need for the stakeholder review.

Step 3 — Map architecture:
Use $sitemap-planner and $user-flow-mapper to plan pages and flows.

Step 4 — Establish the UI foundation:
Use $ui-system-initializer and $ui-layout-architect to define tokens, primitives, shells, dimensions, and page skeletons before feature work.

Step 5 — Write requirements:
Use $requirements-from-brief to turn agreed direction into testable requirements.

Step 6 — Plan the repo:
Use $project-foundation-planner and $git-workflow-planner to set up the repository and collaboration rules.

Step 7 — Specify components:
Use $component-spec-writer for each new UI component, then $gap-state-inventory to check for missing states.

Step 8 — Build:
Generate code from the component specs with explicit prop interfaces, variant definitions,
and accessibility requirements.

Step 9 — Govern the system:
Use $ui-system-governance before larger PRs or after new UI additions to update DESIGN.md and catch drift.

Security

Vercel performs routine security audits of skills listed on skills.sh. However, as with any open-source dependency, review skill contents before installing and use your own judgement. The Design Engineering Skills repository is fully open source — each skill's SKILL.md file is readable without installation.

Project Context Files — Deep dive on AGENTS.md, .cursorrules, and agent instructions
Agent Collaboration — Patterns for working with AI coding agents
Collaborative Repository Workflow — Git workflow for human + agent teams
AI-Ready Design Systems — Design system patterns for AI-driven workflows