Skills
.Work. You
Rest

amvcp-wf-devices

Community

Frame wireframes in realistic device bezels.

Design & Creative#responsive design#css#wireframe#layout fidelity#device frame#mockup presentation#mobile bezel
AuthorEmasoft
Version1.0.0
Installs0

System Documentation

What problem does it solve?

It solves the problem of presenting wireframes without confusing or mismatched device framing by providing consistent, reusable device bezel wrappers that match real hardware geometry.

Core Features & Use Cases

  • Pure-CSS device bezels for iOS, Android, MacBook, and browser window framing with baked-in dimensions, radii, and border budgets.
  • Content-safe mounting via the .wf-frame__content region to keep wireframe screens scrollable at the page level while preventing nested scrollbars.
  • Responsive breakpoint mapping and graceful degradation (including behavior below 460px) so the frame and content remain usable across phone widths.
  • Error-proof invariants and customization including the no-overflow rule for .wf-frame__content and optional geometry overrides using --wf-frame-* tokens.

Quick Start

Use the device frame wrapper by placing your .wf-root wireframe inside a wf-frame such as wf-frame--ios (or wf-frame--android, wf-frame--macbook, wf-frame--browser) and size the page to an appropriate viewport range.

Dependency Matrix

Required Modules

None required

Components

references

💻 Claude Code Installation

Recommended: Let Claude install automatically. Simply copy and paste the text below to Claude Code.

Please help me install this Skill:
Name: amvcp-wf-devices
Download link: https://github.com/Emasoft/ai-maestro-visual-communicator-plugin/archive/main.zip#amvcp-wf-devices

Please download this .zip file, extract it, and install it in the .claude/skills/ directory.
View Source Repository

Agent Skills Search Helper

Install a tiny helper to your Agent, search and equip skill from 471,000+ vetted skills library on demand.