skills.rest
ArMaTeC
ArMaTeCCOMMUNITY
Explore all skills by this author →
GitHub

pandaos-design-prototype

Create interactive click-through HTML prototypes on the PandaOS Design canvas.

Updated Mar 9, 2026
Search Tags:#html#frontend#design system#interactive#prototype#ui design#click-through
One-click install
npx skills add https://github.com/ArMaTeC/Redball --skill pandaos-design-prototype-armatec
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: pandaos-design-prototype
Source: https://github.com/ArMaTeC/Redball/tree/main/.devin/skills/pandaos-design-prototype
Command: npx skills add https://github.com/ArMaTeC/Redball --skill pandaos-design-prototype-armatec

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Building a testable UI prototype normally requires design tools, hand-written HTML, and manual iteration cycles. This Skill guides an AI through a structured intake and build process that produces a working, clickable client-side prototype directly on the PandaOS Design canvas. ## Core Features & Use Cases - Structured Spec Intake: Gathers platform target, screen list, navigation flows, interactions, states, and placeholder data before any build begins. - Design System Integration: Lists saved design systems via design_system_list and presents them alongside fresh palette proposals in a single palette picker. - Interactive HTML Builds: Generates one self-contained HTML file with real client-side JavaScript, Tailwind CDN support, lucide icons, and data-eid attributes for surgical edits. - Iterative Editing and Handoff: Uses design_edit for targeted changes, design_screenshot for visual self-review, and design_handoff or design_share for delivery. - Use Case: A product manager describes a mobile onboarding flow; the Skill collects the full spec, confirms a palette, builds a clickable multi-screen prototype, and iterates until it passes visual review. ## Quick Start Ask the assistant to design a clickable prototype for your app idea and answer its intake questions about platform, screens, and visual direction.

Frequently Asked Questions about pandaos-design-prototype

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

FAQPage Schema
How do I create a clickable prototype with PandaOS Design?▼

Describe your product, its users, and the main task in chat. The Skill gathers the full spec including platform, screens, flows, and states, confirms a palette via a picker, then builds the prototype with design_create as one self-contained HTML file.

What design tools does the PandaOS prototype workflow use?▼

The workflow uses design_system_list and a palette picker for visual direction, design_create for the initial build, design_edit for surgical data-eid keyed changes, design_screenshot for visual review, and design_handoff or design_share for delivery.

Can PandaOS prototypes use Tailwind and external JavaScript libraries?▼

Yes, the Tailwind CDN is allowed and encouraged, themed inline with real fonts and colors. Other libraries like Motion One, GSAP, Lottie, and three.js load only from cdn.jsdelivr.net, unpkg.com, or cdnjs.cloudflare.com due to sandbox CSP restrictions.

Does the prototype support real network requests or backend data?▼

No, prototypes run in a sandboxed iframe with connect-src none, so fetch and network calls are blocked. All data must be in-memory placeholder content, and there is no real authentication or persistence.

Why should I use design_edit instead of regenerating the whole prototype?▼

design_edit applies surgical operations keyed by data-eid such as setStyle, setText, setBox, and delete, preserving everything else including manual visual-editor edits. It is cheaper than re-emitting the file and keeps element ids stable for handoff.

What are the limitations of the declarative behavior format?▼

The data-do and data-bind attributes handle only simple state setting, text mirroring, and screen switching. For richer interactions like multi-step forms or conditional logic, write ordinary inline JavaScript instead.

Related Skills

Explore More Design & Creative Skills→
AIDotNetAIDotNet
634

product-design-index

Routes product design requests to focused skills for research, ideation, prototyping, and audits.

Official
Advanced
boparaiamritboparaiamrit
5

full-stack-api-integration

Map API specs into a complete frontend integration surface with typed endpoints.

Community
Advanced
coalesce-labscoalesce-labs
20

prototype-feedback

Analyze structured prototype feedback and generate prioritized iteration plans.

Official
Advanced
coco-decoco-de

coui-chip-input

Create dynamic chip input components for Flutter and Web applications.

Official
Basic