Design Engineering Skills

The field guide, encoded for your agents. dengskills packages the practical judgment in this handbook into focused skills for Codex, Claude Code, and other Agent Skills-compatible tools. Install the pack, then invoke the capability relevant to the work — don't load the entire pack into every task. Skills carry explicit boundaries so agents can distinguish adjacent tasks.

Start here: four outcome skills

Your situation	Start here	What the agent should produce
“I need a prototype for a client.”	`$prototype`	A runnable, reviewed artifact with clear real/mock boundaries.
“This interface needs to be better.”	`$craft`	A stronger composition and interaction, checked against the rendered result.
“This feature must actually work.”	`$slice`	One real workflow with persistence, access checks, and recovery.
“Can people start using this?”	`$readiness`	An evidence-based assessment of the intended use.

If the goal itself is unclear, use $intent. The other skills answer focused questions that arise while making and revising the product.

The fourteen precision skills

Product

Skill	Use it to
`$intent`	Clarify a product idea or reassess a running feature against its intended user, outcome, and scope. Use when a rough idea, client request, or vibe-coding prompt needs a decision-ready brief before design or code.
`$requirements`	Turn a brief or existing feature into testable behavior, quality constraints, and explicit data and permission contracts. Use when stakeholder notes, a brief, or a vibe-coded concept needs FR/NFR requirements before design or implementation.

Experience

Skill	Use it to
`$hierarchy`	Rank a screen\u2019s information and actions; improve headings, decision support, and narrow-screen priority. Use when planning what belongs on a page before layout, visual design, or implementation.
`$flow`	Map or review a task from entry to outcome, including mutations, interruptions, and recovery. Use when mapping onboarding, checkout, creation, editing, approval, or account flows including failure and recovery branches.
`$sitemap`	Plan or revise product navigation, route hierarchy, URL state, and access boundaries. Use when creating IA for an app, site, dashboard, or prototype before visual design or implementation.

Interface

Skill	Use it to
`$layout`	Design or revisit page shells, reading order, responsive structure, and scroll ownership using real content. Use when planning landing, dashboard, auth, or docs shells, or when responsive behavior and scroll ownership diverge.
`$tokens`	Create or extend a small token system with semantic roles, theme pairs, and concrete component usage. Use when starting a UI foundation, when colors or spacing multiply, or before building components or shells.
`$component`	Specify or revise a UI component\u2019s API, states, semantics, data ownership, and acceptance behavior. Use when defining props, variants, slots, keyboard behavior, or acceptance criteria before building a component.
`$states`	Find and resolve missing states in an existing screen, flow, component, or specification. Use when checking loading, empty, error, permission, offline, or mutation recovery before a review or pilot.
`$system`	Audit or maintain existing tokens, components, and shared layouts; resolve drift with evidence and a migration path. Use when auditing drift, deduplicating components, fixing theme or focus gaps, or updating DESIGN.md before new UI.

Engineering

Skill	Use it to
`$stack`	Choose or revisit a product stack using rendering, data, deployment, and maintenance constraints. Use when comparing frameworks, when SEO, auth, or deploy targets constrain the choice, or when revisiting an existing stack.
`$setup`	Plan or improve a repository foundation: ownership, commands, configuration, tokens, and a runnable first slice. Use when starting a repository, when fresh checkout install or env setup fails, or when feature ownership is unclear.

Agents and team

Skill	Use it to
`$context`	Create or revise repository instructions using verified commands, paths, architecture constraints, and review expectations. Use when creating AGENTS.md or CLAUDE.md, when agents invent commands or paths, or when instructions drift stale.
`$git`	Plan or refine Git collaboration, reviewable changes, worktrees, and dependency-update ownership. Use when planning branches, slicing reviewable PRs, coordinating parallel agents, or assigning lockfile ownership.

Install and use

Install the published pack

npx skills add mattjmdesign/dengskills

For a local checkout, use npx skills add /path/to/dengskills. For one skill, name it: npx skills add mattjmdesign/dengskills --skill craft. Choose your agent and installation scope in the installer. Plugin installs:

Install as a plugin

claude plugin marketplace add mattjmdesign/dengskills
claude plugin install dengskills@dengskills
codex plugin marketplace add mattjmdesign/dengskills
codex plugin add dengskills

$skill is the convention used in this guide. Exact invocation depends on the agent; you can also ask it to use the skill by name. The portable plugin.json (Agent Plugins 1.0) also loads directly in ChatGPT, Cursor, GitHub Copilot, Kiro, and VS Code. The repository documents versions and quality methodology.

Version and quality

Pack version 2.1.0. Routing suites are banked for all 18 skills; execution benchmarks have not been run yet.

Make the next review meaningful

Give the agent intent, relevant paths, constraints, and a way to judge the result. Expect an artifact for an authorized build, evidence for a review, and a clear account of what remains unknown. Skills can guide permission, persistence, and recovery decisions; they do not grant authority to launch or communicate with a client.

Continue with working with agents or client delivery.

On this page