Loading...
Loading...
Found 8 Skills
Beginner-friendly end-to-end video creator for HyperFrames. Use when the user says "make a video", "create a video", "new video", "build a video", "video from scratch", "I want to make a video", "help me create a video", or when someone who's never used HyperFrames before arrives with a concept, script, or rough idea and wants a finished MP4. Interviews the user in one pass, then builds the full video with mandatory preview and visual-verification gates.
Verify and release Three.js browser games. Combines playtest QA, automated bot playtests, mobile/responsive checks, production builds, preview verification, static-hosting base paths, debug gating, bundle review, screenshots, visual test harness decisions, packaged canvas-pixel inspection with measured metrics, console checks, and release risk reports.
Use when creating or editing documents (DOCX, PDF, XLSX, PPTX) that need professional output. Adds visual verification, typography hygiene, and formula patterns to the document-skills plugin.
Build web interfaces with genuine design quality, not AI slop. Use for any frontend work - landing pages, web apps, dashboards, admin panels, components, interactive experiences. Activates for both greenfield builds and modifications to existing applications. Detects existing design systems and respects them. Covers composition, typography, color, motion, and copy. Verifies results via screenshots before declaring done.
This skill is strict implementation instruction, not advisory reference text. The skill treats the HTML as discovery-only input, forces interactive Playwright route/state capture, then moves through scored gates for source acceptance, implementation planning, authored UI reproduction, implementation integrity, visual verification, and adversarial proof before signoff.
Generates code from Sketch designs with 1:1 visual fidelity using Sketch MCP (`get_document_info`, `get_layer_tree_summary`, `get_screenshot`, `get_symbol_overrides`, `get_design_assets`, targeted `run_code`). Inspects existing project code and conventions first, maps symbols and overrides to reusable components, exports assets, and validates implementations against Sketch screenshots (web: running app vs `get_screenshot`). Use when implementing or updating UI in React, Tailwind, SwiftUI, Kotlin, or other technologies from an Sketch document, page, frame, or layer.
Style spec cho mermaid diagram — "zone-tinted flowchart" (flowchart + subgraph tô nền per vùng + classDef palette + shape có nghĩa). Load TRƯỚC khi viết/sửa bất kỳ block ```mermaid``` trong tài liệu, đặc biệt C1 System Context, C2 Modules, user flow. Hình tự mang đủ màu để đọc được ở cả light mode và dark mode. Cấm C4Context/C4Container. Kèm `verify.py` — lint + render 2 nền (sáng/tối) để soát bằng mắt trước khi dán. Read-only, không sửa nội dung file.
Use for "/build-figma", a figma.com/design URL with node-id, or "implement this Figma" into a web, desktop, or shared UI. Orchestrates Figma MCP intake, maps nodes to the repo's own design system, then a verify-this visual judge. Do not paste Figma Tailwind.