AGENT SKILL

design-handover

WHEN explicitly asked to use design-handover; NOT for general visual polish or implementation; packages accepted behavior and matching visual evidence.

适用职业设计师
使用场景视觉设计
License 许可
MIT
所属仓库
mintuz/skills
最近更新
2026-11-13
Stars
★ 35
Forks
7

01 前言 Front Matter

name
design-handover
description
WHEN explicitly asked to use design-handover; NOT for general visual polish or implementation; packages accepted behavior and matching visual evidence.
disable-model-invocation
true

02 资源文件 1

03 SKILL.md 正文

Design handover

Use only when explicitly invoked. Transfer existing accepted decisions into one linked document and its durable assets. A request for general polish or one screenshot correction stays with the appropriate visual workflow, such as visual-feedback.

  1. Resolve scope and authority. Read the named designs, accepted behavior and recorded human rulings. Track supersession and explicit departures; neither a tool's design nor the newest ambiguous comment automatically wins. Ask only for unresolved product decisions or required facts that existing evidence cannot supply. Implementation, publication, unrelated launch repair and new behavior decisions are separate work.

  2. Pair every in-scope state. Assign a stable example ID and write Given/When/Then from the accepted behavior. Beside it, record:

    • a source link/locator and its authority or supersession status;
    • the matching visual link, labelled running-app capture, design export or exploratory mockup;
    • revision/build, fixture/state and capture conditions when relevant;
    • differences from the source design and the ruling authorizing each departure;
    • explicit missing evidence or unresolved decisions when an honest pairing is unavailable.
    Example Behavior Source Visual Gap or departure
    EX-1 Given a saved draft, when the form reopens, then the title is restored Spec §3, accepted Running-app capture, build 1842, fixture draft-saved Matches the source
    EX-2 Given an empty title, when the user submits, then the error is shown Design export v4, departed by ruling R-12 Exploratory mockup Error copy follows R-12; no runtime capture yet
  3. Save for the next session. Use the project's existing destination and asset conventions, normally Markdown. Keep assets durable and linked, not ephemeral references to this chat. Reuse available capture/export tools without requiring a particular design service, renderer or framework. An unavailable current app leaves a capture gap; an outdated screenshot remains labelled historical and a mockup cannot become runtime proof.

  4. Check the transfer. Account for every accepted state, verify each visual matches its example and provenance, check links, and retain unresolved decisions as gaps. Report the saved document and assets, accepted departures and remaining evidence gaps. Do not imply that packaging the handover implemented, approved or runtime-verified the behavior.

04 同仓库更多 Skills

mintuz
mintuz/skills

xstate

WHEN React state changes in response to an external answer — async submit, in-flight or loading flags, retries, cancellation, polling, optimistic updates, stale responses — or to an interaction with an interruptible middle, such as a drag or a gesture; or WHEN building, reviewing, testing, or visualising XState 5 actors and @xstate/react integrations; NOT for a value one event sets completely, such as a text draft, a focus flag, or a plain open and closed toggle; models typed lifecycles and renders legal Mermaid stateDiagram-v2 charts.

测试与质量前端开发
★ 35
mintuz
mintuz/skills

web-design

WHEN refining UI layout, typography, color, or polish; NOT code implementation; provides concise principles for intentional, legible design.

设计师视觉设计
★ 35
mintuz
mintuz/skills

tailwind

USE WHEN writing, fixing or reviewing styling in a project that uses Tailwind CSS, even a one-class change or a request that does not name Tailwind: colours, focus rings, spacing, class names chosen by a prop, map or CVA variants, theme tokens and dark mode in the Tailwind stylesheet or tailwind.config, setup or upgrades (if unsure whether the project uses Tailwind, check package.json or the main stylesheet first); NOT WHEN writing plain CSS or Sass in a project without Tailwind; produces class names Tailwind can find, syntax for the installed major version, visible focus indicators, and no unrequested dependency or invented brand value.

视觉设计
★ 35
mintuz
mintuz/skills

refactoring

WHEN you need a plan to refactor, restructure, or clean up working code and the test result is known, either green or a recorded failing set; NOT for new feature delivery or any behavior change; reversible-baseline safety with prioritized improvements.

代码审查
★ 35
mintuz
mintuz/skills

react

USE WHEN changing the logic, data, props, state, Effects or rendered text of a React component, hook or page, even a one-line change; NOT WHEN the request is styling only (class names, Tailwind, CSS, dark mode, spacing, shadows) or tests only, or when it models submit, in-flight, loading, retry or failure states, even for a named React form (xstate covers that, including its React wiring); applies React 19 composition, state, Effect, structure, API and performance rules with only the project's installed libraries.

测试与质量前端开发
★ 35
mintuz
mintuz/skills

react-testing

USE WHEN writing, fixing or reviewing a React Testing Library test for a component, hook or context provider, even one small test, or when asked for an end-to-end journey inside a Vitest or React Testing Library suite; NOT WHEN changing the component itself (react), testing XState actors or @xstate/react (xstate), or writing a Playwright or Cypress test; covers renderHook, providers, async results, forms and false-pass anti-patterns, and declines end-to-end journeys with the testable slices.

测试与质量前端开发
★ 35