MengTo/Skills instruction manual

1. What this repository is and how it relates to Claude Code

`MengTo/Skills` is a public MIT-licensed library of portable Agent Skills for design, frontend, game, media, and automation work. The supplied snapshot describes 123 skills in five categories. Each skill is primarily a folder containing a required `SKILL.md`: plain Markdown that tells an AI agent when to use the skill, which procedure to follow, which defaults to apply, and which mistakes to avoid. Optional references, articles, scripts, assets, and demos may support that procedure.

**Claude Code classification:** **context injection**, with **copy/open/reference-based setup** and low setup effort. The evidence says to reference the relevant skill from `CLAUDE.md`, copy it into a Claude skills setup, or open its `SKILL.md` directly as working context. Thus, the repository extends Claude Code by supplying task-specific instructions. The supplied files do not establish a Claude Code plugin, MCP server, hook, subagent, or new executable tool surface.

The same Markdown is intended to be portable. Codex should load the relevant `SKILL.md`; Cursor can point rules or chat context at the skill folder; other agents should read the narrowest matching skill first. Repository-specific behavior belongs in the host project’s own agent instructions rather than in these reusable skills. A skill should remain usable across users and workspaces unless local instructions provide project-specific context.

The collection’s operating ideas are: preserve effective prompts as versioned assets; prefer explicit specifications over vague direction; use screenshots and examples to convey visual details; and treat skills as repeatable operating procedures rather than encyclopedias.

2. Finding, loading, and using a skill

Start by identifying the narrowest skill matching the task. The required file layout is:

agent-skills/<category>/<skill-name>/
  SKILL.md

A folder may additionally contain `REFERENCES.md` for links, `ARTICLE.md` for long explanations, `assets/`, `scripts/`, or a `demo/`. A visual demo can contain a standalone `index.html`, an exact `PROMPT.md`, and local assets. Workflow demos may instead use fictional `input.md` and `expected-output.md` handoffs.

For Claude Code, use one of the three documented approaches: mention the skill’s path from `CLAUDE.md`, copy the folder into an existing Claude skills setup, or open `SKILL.md` as working context. No universal installer or canonical destination is documented, so this manual does not prescribe one. Load linked references only when needed; `SKILL.md` is intended to stay concise.

To enumerate the snapshot’s actual skill files, the README supplies this source-of-truth command:

find agent-skills -name SKILL.md | sort

A normal use cycle is: choose the skill; read its trigger and questions; supply missing environment, platform, visual, performance, and accessibility requirements; follow its workflow; apply its pitfalls and guardrails; and finish with its acceptance checks. Combine skills only when the job genuinely crosses boundaries—for example, pair gameplay testing with release work, or Three.js implementation with performance optimization. Several skills include snippets, but snippets assume their named library is already available unless the example itself includes script tags.

3. Flagship workflows, Codex operations, media, and UI

The flagship web-design sequence has four stages. `video-to-superprompt` analyzes a screen recording into a detailed recreation prompt. `html-to-interaction-prompts` turns an existing HTML page into screenshot-backed prompts for individual sections, controls, states, animations, or WebGL effects. `stitched-full-page-capture` captures lazy, animated, and WebGL pages as full-page references rather than hero-only screenshots. `daily-ui-inspiration-capture` combines browsing, capture, reference study, motion, and prompt generation into recurring prompt packs. `build-daily-inspiration-sites` can then transform five captured references into five original site builds.

Other named Codex workflows are: `article-prompts-to-skills`, which packages articles or prompt packs as focused, validated skills; `audit-reference-originality`, which compares a site with references and flags originality risk; `audit-verify-explain-grade-5`, which audits claims and explains findings simply; `browser-video-recording`, which renders polished browser recordings from scripted scenes; `elevenlabs-tts`, which generates voiceovers from local profiles; `generate-reference-inspired-brand-worlds`, which derives original brand directions from reference grammar; `optimize-web-animations`, which profiles and reduces animation, canvas, and WebGL cost; `performance-profiling`, which covers Apple Instruments, diagnostics, and MetricKit; `web-technique-to-skill`, which packages an already-built effect; `write-like-meng-on-x`, which calibrates concise drafts to an authored corpus; and `x-bookmark-quote-posts`, which creates source-backed quote-post drafts from recent bookmarks. The README labels this category as 19 skills but names only 16 in the supplied list; use the `find` command rather than guessing the unnamed entries.

Media skills source stock-style imagery from Aura Assets (`aura-asset-images`) or select Unsplash images by use case, crop, and ratio (`unsplash-asset-images`). `design-first-ui-prompting` structures prompts as goal → format → layout → typography → color → constraints, favors deliberate variants over rerolls, adds negative guardrails, and uses a two-pass workflow: generate layout, then typeset in Figma.

4. Game-development skills and their boundaries

Choose game skills by system ownership. `build-isometric-arpg` assembles a coherent playable action-RPG vertical slice. `author-game-levels` creates readable flat-world routes while separating collision, navigation, and visuals and using motivated lighting. `build-game-camera-controls` handles isometric/follow framing, lock-on, occlusion, shake, and touch gestures. `build-mobile-threejs-games` treats mobile controls, safe areas, responsive HUDs, orientation, quality, and performance as primary concerns.

For opposition and combat, `build-threejs-enemy-systems` defines portable enemy content, model/rig/collider/socket conventions, movesets, runtime hooks, fallbacks, and fixtures. `build-game-monster-system` validates each monster’s rig, sockets, colliders, states, moveset, LOD, and deterministic review contract. `tune-enemy-ai` controls perception, intent, navigation, spacing, and attack decisions. `design-action-combat` specifies startup, active, and recovery timing, contact authority, defense, interruption, feedback, and deterministic proof. `design-game-encounters` composes arenas, roles, waves, hazards, objectives, boss phases, recovery, and rewards.

Player and feedback systems include `build-game-inventory` for atomic inventory, loot, equipment, drag/drop, migrations, and no-loss persistence; `create-game-vfx` for readable, pooled, bounded, reduced-motion-aware effects; and `build-game-audio-feedback` for prioritized, accessible, browser-safe cues tied to player intent and combat state.

Asset and delivery skills are `build-hybrid-game-assets` for choosing imported, procedural, generated, or 2D representations while preserving provenance and runtime contracts; `build-vesperfall-review-assets` for pairing transparent catalog PNGs with truthful live-model previews; `optimize-threejs-games` for measured frame-time, draw-call, memory, and quality improvements; `test-playable-web-games` for deterministic browser journeys across desktop, touch, saves, retries, and accessibility; and `ship-web-games` for packaging and verifying an exact deployed commit. Testing proves player experience; shipping owns release and production read-back. The supplied game guide names 17 skills although the main README’s category count says 20.

5. Web design: implementation, motion, 3D, and CSS treatments

The conversion and implementation group covers `build-awwwards-quality-sites` (high-polish sites), `landing-page` and `pricing-page` (page-specific structure), `tailwindcss` (utility-first UI), `animation-systems` (coherent motion rules), and `webgl-landing-steering` (WebGL-led landing interactions).

Motion skills separate common effects and larger narratives: `animation-on-scroll`, `cinematic-gsap-lenis-motion-system`, `cinematic-scroll-storytelling`, `gsap`, `gsap-scrolltrigger-storytelling`, `marquee-loop`, `masked-reveal`, and `staggered-word-reveal`. Pick the specific effect rather than loading the whole motion family.

WebGL, canvas, and 3D choices include `add-shader-cursor-trail`, `background-grid-webgl`, `cobejs` for a focused lightweight globe, `globe-gl` for layered globe data visualization, `globe-particles`, `matterjs` for 2D physics, `threejs` for full 3D control, `threejs-landscape`, `threejs-towers`, `threejs-weather`, `unicorn-studio`, `vantajs` for packaged animated backgrounds, `webgl-3d-object`, and `webgl-laser`. Use Three.js when asset pipelines and scene-level control are justified; use Vanta when a decorative background is enough; use cobe for a small marker globe; use Globe.GL when points, arcs, polygons, labels, or custom data layers are central.

CSS and detail skills are `beautiful-shadows`, `company-logos`, `container-lines`, `corner-diagonals`, `corner-lasers`, `css-alpha-masking`, `css-border-gradient`, `gooey-blob-system`, `number-details`, `progressive-blur`, and `solar-duotone-bold`. These focus on bounded visual treatments rather than complete page architecture. Preserve readability, mobile performance, and reduced-motion behavior when combining effects.

6. Web design: layouts, visual systems, product narratives, and interactions

Layout-system skills encode reusable composition grammar: `agency-grid-layout-minimal`, `book-serif-index`, `editorial-tech`, `framed-grid-layout`, `image-first-grid-layout`, `nested-container-frames`, `split-layout-technical`, and `technical-wireframe-info-layout`. Choose according to information hierarchy and content type, not merely visual novelty.

Visual-style skills establish page-wide mood and treatment: `atmosphere-background`; `blue-cloudy-clean-modern`; `blue-laser-clean-glass-layout`; `bright-green-tech-system-webgl`; `clean-minimal-beige-light-mode`; `dark-blue-contrasting-clean`; `dark-glass-clean-layout`; `dither-background`; `dither-laser-dark-mode`; `framed-tech-dark-border-gradient`; `funky-purple-container-tech`; `glass-dark-mode-clock`; `glass-dark-ui`; `high-contrast-skeuomorphic-clean`; `light-mode-paper-technical`; `mesh-gradient-dark-blue-clean`; `nested-container-clean-agency`; `orange-clean-paper-saas`; `skeuomorphic-ui`; and `tech-green-dark-mode-modern`. The supplied evidence gives their category and names but not detailed contracts, so treat the corresponding `SKILL.md` as authoritative before implementation.

Additional focused systems are `ambient-section-particles`, `beam-glow-states`, `documentary-brutalist-agency`, `editorial-portfolio-chapters`, `editorial-service-booking`, `falling-leaves`, `liquid-metal-border`, `operational-enterprise-ai`, `pointer-trail-emitter`, `product-proof-saas`, `reveal-hover-effect`, `scroll-progress-timeline`, `scroll-scrubbed-visual-sequence`, `scroll-scrubbed-word-reveal`, `scroll-world-storytelling`, `shaders-cursor-ripples`, and `thinking-orbs`. These span decorative particles, hover/pointer response, scroll-linked sequencing, editorial narratives, booking and SaaS proof structures, and conceptual state visualizations. The repository also links `DEMOS.md` as the index for runnable demos and recreation prompts.

7. Source-supported web implementation recipes

GSAP provides tweens (`gsap.to`, `from`, `fromTo`), timelines, labels, overlaps, eases, staggers, and ScrollTrigger. Prefer transforms and opacity over layout properties, initialize after fonts/images stabilize, refresh ScrollTrigger after images load, and clean up contexts/triggers in SPAs. A documented entrance is:

gsap.from(".hero [data-anim]", {
  y: 24, autoAlpha: 0, duration: 0.8,
  ease: "power2.out", stagger: 0.06,
});

Three.js owns the scene, camera, renderer, meshes, lighting, loaders, controls, render loop, resize handling, and explicit disposal. Clamp pixel ratio, compress large assets, limit lights/shadows, remove listeners, cancel animation frames, and dispose geometry, materials, textures, and renderer. For reduced motion, render a still frame or slow updates.

Vanta creates an effect canvas inside a sized container. It supports initialization, `setOptions`, `resize`, and `destroy`; keep effects to roughly one or two per page and provide mobile fallbacks. Its supplied standalone example is:

<div id="hero" style="height: 70vh;"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r134/three.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vanta/dist/vanta.waves.min.js"></script>
<script>
  const effect = VANTA.WAVES({ el: "#hero", color: 0x0b1220,
    shininess: 40, waveHeight: 16, zoom: 0.9 });
</script>

Tailwind composes utility classes, responsive/state variants, dark mode, and sparing arbitrary values. Ensure content paths cover templates, avoid dynamically concatenated class names unless safelisted, prefer components before `@apply`, and use a fixed map such as `{ success: "bg-emerald-600", danger: "bg-rose-600", info: "bg-sky-600" }[tone]`.

8. Globe, physics, and ElevenLabs operations

cobe uses `createGlobe(canvas, options)` with dimensions, DPR, rotation, colors, markers, and an `onRender` callback. Size both CSS and canvas backing dimensions, clamp DPR to 1–2, recalculate on resize, call `toggle()` to pause, and `destroy()` to remove the instance. Ask for placement, marker coordinates/colors, and drag-versus-ambient interaction.

Globe.GL fills a CSS-sized parent and supports points, arcs, polygons, paths, heatmaps, hex bins, labels/HTML, 3D objects, and custom layers. Confirm plain HTML versus React and add only requested layers. The documented script-tag start is:

<script src="//cdn.jsdelivr.net/npm/globe.gl"></script>
<script>
  const myGlobe = new Globe(document.getElementById('globe'))
    .globeImageUrl(myImageUrl)
    .pointsData(myData);
</script>

Matter.js creates an `Engine`, world, optional `Render`, and `Runner`; bodies enter the world through `Composite.add`. It can use Matter’s renderer for debug/solid output or a custom loop and renderer. Optional mouse dragging uses `Mouse` and `MouseConstraint`. On teardown, stop the runner, remove the canvas, and clear the engine/world if needed.

The ElevenLabs skill reads `ELEVENLABS_API_KEY` from the environment or nearest `.env` and keeps account details in local, preferably gitignored JSON. Config priority is `--config`, then `ELEVENLABS_TTS_CONFIG`, then `local/elevenlabs/profiles.json`. Profiles can define a voice name or ID, model, format, settings, and output directory. The supplied generation command is:

python3 <skill-root>/scripts/generate_voice.py --text-file script.txt --profile default --output output.mp3

The helper also supports inline text, stdin, one-off voice/model/format/settings overrides, `--dry-run`, and `--list-voices`. It searches `GET /v2/voices` when needed and generates through `POST /v1/text-to-speech/:voice_id?output_format=...`, sending the key as `xi-api-key`. Never print secrets or mutate saved voice settings unless explicitly requested.

9. Authoring, demos, validation, maintenance, and limitations

To add a skill, create `agent-skills/<category>/<skill-name>/SKILL.md`. Frontmatter must contain `name` and `description`; the body should state when to use it, its workflow, pitfalls, recipes, and questions to ask. Keep procedures concrete and skimmable, with explicit triggers, defaults, guardrails, and acceptance checks. Put long explanation in `ARTICLE.md` and links in `REFERENCES.md`.

When visual proof is useful, add `demo/index.html` with standalone HTML, CSS, and JavaScript, `demo/PROMPT.md` with minimal/recreation/remix prompts, and local files under `demo/assets/`. Validate a clear trigger, concrete workflow, reusable snippets or documented commands, pitfalls, acceptance criteria, and absence of secrets or private client information. Use small commits with messages such as `Add <skill-name> skill` or `Update <skill-name> skill`. Keep category READMEs current and imported skills portable.

Asset provenance matters. One supplied scroll-storytelling demo documents an original, silent eight-second H.264 asset at 1920×1080 and 30 fps, generated from a local SVG, with no third-party footage, logos, fonts, or audio. Its MP4 may be replaced by an approved generated or filmed master under the same filename for testing. Apply the same truthfulness principle to other assets.

Limits: this manual can fully describe only supplied files. Many catalog entries have names and group descriptions but no supplied `SKILL.md`; do not infer hidden APIs or commands from their titles. The web-design README calls its contents drafts, while the main README presents a current library, so inspect the selected skill before relying on it. Category totals and individually named entries disagree for Codex and game development. External libraries, CDNs, APIs, account access, and versions can change independently. The repository is MIT-licensed; consult `LICENSE` for the governing terms.