create-screen-design

Creates responsive screen-design contracts synchronized to Notion with durable versioned promotion.

4|1|Updated Jul 31, 2025
One-click install
npx skills add https://github.com/alvis/.agents --skill create-screen-design-alvis
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: create-screen-design
Source: https://github.com/alvis/.agents/tree/main/plugins/client/skills/create-screen-design
Command: npx skills add https://github.com/alvis/.agents --skill create-screen-design-alvis

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Creating new screen designs often scatters work across temporary notes, ad-hoc Notion pages, and unversioned documents, making it impossible to trace which design is current or approved. This Skill establishes a governed workflow that keeps exploration temporary, synchronizes approved content through an explicit transport, and promotes durable design docs with full provenance. ## Core Features & Use Cases - Responsive design contracts: Captures layout, responsive behavior, interaction states, accessibility, and handoff notes per screen across web and mobile platforms. - Governed Notion synchronization: Pushes approved bodies through an explicitly selected body-author capability and transport profile, then verification-pulls the canonical ref before advancing local metadata. - Durable promotion with provenance: Promotes stable designs to versioned docs with Notion ids, source revisions, decision links, and supersession metadata. - Use Case: A product team needs a new checkout flow designed for web and mobile. The Skill materializes the spec context, drafts the screen contract with alternatives, obtains approval, creates the Notion page via the caller-selected body author, and promotes the durable design doc linked to its decisions. ## Quick Start Ask the agent to create a screen design for your product's checkout and settings screens, providing the work id, Notion template and parent refs, transport profile, and body-author selector.

Frequently Asked Questions about create-screen-design

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

FAQPage Schema
How do I create a new screen design contract with Notion sync?

Provide the product, screen descriptions, an active work id, and the explicit Notion template, parent, and collection refs plus a body-author selector and transport profile. The Skill drafts the responsive design contract, obtains approval, creates the remote page, and promotes the durable doc.

What inputs are required for a Notion-backed screen design creation?

A Notion-backed creation requires explicit template, parent, and collection refs, one canonical body-author in plugin:skill format, and an absolute transport profile. The marketplace supplies no defaults, and the Skill never invents transport paths or filenames.

Can I use this to update an existing screen design?

No, existing screens route to the update-screen-design skill instead. This Skill searches for collisions before creation and stops on uncertain creation to avoid duplicate remote pages.

Where does temporary design exploration live during the workflow?

Temporary exploration lives in the active work item under .state/works/<work-id>/design/<slug>.md, with design.md as the main-agent-owned overview. Only approved, stable content is promoted to durable versioned docs under docs/design/.

Why does the Skill require an explicit body-author selector?

The plugin ships no body grammar or body-authoring capability, so Notion bodies are opaque to it. Requiring an explicit body-author ensures semantic body content is created only by the caller-selected external capability, passed unchanged through the transport.