cocos-playable-design

Generates Cocos Creator 3.8.x playable wireframes, asset lists, and interaction contracts from specs.

Updated Apr 3, 2026
One-click install
npx skills add https://github.com/dyCuong03/cocos-agent-team --skill cocos-playable-design
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: cocos-playable-design
Source: https://github.com/dyCuong03/cocos-agent-team/tree/main/skills/design
Command: npx skills add https://github.com/dyCuong03/cocos-agent-team --skill cocos-playable-design

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

Building Cocos Creator 3.8.x playables often suffers from disjointed pre-build design workflows: unclear specs, missing wireframes, unorganized asset lists, and poor cross-team communication lead to rework, delays, and inconsistent playable quality that fails platform review standards.

Core Features & Use Cases

  • Standardized Wireframe Generation: Breaks down playable specs into discrete, numbered screen wireframes with node hierarchies, layout sketches, and safe-area constraints for portrait and landscape orientations.
  • Asset Specification & Handoffs: Produces prioritized asset request lists keyed to filenames, plus interaction contracts mapping input to feedback, so engineering and TypeScript teams can implement without clarification.
  • Platform-Compliant UX Design: Enforces proven playable ad UX patterns, CTA placement rules, and anti-pattern avoidance for Google Web Ads, Meta, AppLovin, and other ad platforms to maximize conversion and pass review.
  • Use Case: If you have a casual puzzle playable spec, this skill will generate wireframes for the hook, onboarding, core loop, and end card screens, a full list of required art/audio assets, and an interaction map for the build team.

Quick Start

Provide your playable spec file and ask the cocos-playable-design skill to generate complete wireframes, asset requests, and interaction handoffs for your Cocos Creator build team.

Frequently Asked Questions about cocos-playable-design

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

FAQPage Schema
How do I design wireframes and asset specifications for Cocos Creator playable ads?

Generating UI/UX deliverables for Cocos Creator playables requires translating storyboard specs into discrete wireframes, prioritized asset lists, and input-to-feedback interaction maps. This approach enforces platform-compliant UX patterns to pass ad network reviews and ensure clear cross-role handoffs.

Can I generate interaction contracts and asset lists for a Cocos Creator 3.8.x playable spec?

Yes, processing a playable spec generates prioritized art and audio asset request lists keyed to filenames, alongside interaction contracts mapping user input to feedback. This ensures engineering teams can implement the Cocos Creator 3.8.x build without clarification.

What is the best way to ensure playable ad UI design complies with Meta and AppLovin review standards?

The best way to ensure playable ad UI complies with Meta and AppLovin standards is to enforce proven playable ad UX patterns, CTA placement rules, and anti-pattern avoidance during wireframe generation. This maximizes conversion and prevents platform review failures.

Does this playable design workflow handle safe-area constraints for both portrait and landscape orientations?

Yes, this playable design workflow handles safe-area constraints for both portrait and landscape orientations. It integrates these constraints directly into the numbered screen wireframes and node hierarchies to ensure platform-compliant UI/UX across different device layouts.

How do I hand off Cocos playable wireframes to engineering and QA teams without confusion?

To hand off Cocos playable wireframes without confusion, generate engineer-readable design deliverables including screen layouts, safe-area constraints, and interaction contracts. This standardizes cross-role communication and eliminates rework caused by unclear specs or unorganized asset lists.