Prototypes

ui-demo giúp bạn quay video demo ứng dụng web chỉn chu bằng Playwright, với chuyển động con trỏ hiển thị rõ và nhịp thao tác tự nhiên. Hãy dùng ui-demo cho các video hướng dẫn, clip onboarding, tour tính năng và bản ghi kiểu tutorial. Làm theo quy trình khám phá, luyện tập rồi ghi hình để có kết quả ổn định, đặc biệt khi làm việc với prototype và giao diện thay đổi nhanh.

frontend-slides giúp bạn tạo HTML presentation giàu hiệu ứng chuyển động từ đầu hoặc bằng cách chuyển đổi file PowerPoint. Hãy dùng frontend-slides cho các buổi talk, pitch deck, workshop, demo nội bộ và frontend-slides cho UI Design khi bạn cần khám phá trực quan, đầu ra chạy trên trình duyệt không phụ thuộc thư viện, và bộ slide vừa khít một khung nhìn.

algorithmic-art hỗ trợ tạo tác phẩm generative art gốc bằng p5.js theo quy trình 2 bước: viết triết lý thuật toán, rồi dựng file .html và .js có thể chạy với seeded randomness, tham số điều khiển và trình xem tương tác.

ux-designer là skill thiết kế UX có cấu trúc, phục vụ research, accessibility, information architecture, interaction flow, hướng dẫn wireframe và UX copy. Skill này giúp đội ngũ biến các ý tưởng sản phẩm còn thô thành quyết định thiết kế rõ ràng hơn, dựa trên tiêu chí cụ thể, thông qua `AGENTS.md` và các file rules tập trung.

prototype skill giúp bạn xây dựng mã dùng tạm để trả lời một câu hỏi cụ thể trước khi đầu tư vào một triển khai thật. Hãy dùng nó để kiểm tra logic, chuyển trạng thái, cấu trúc dữ liệu hoặc hướng UI bằng một prototype có thể chạy và bám theo quy ước của repo chủ. Đây là lựa chọn lý tưởng khi bạn cần một hướng dẫn prototype nhanh, không phải một tính năng hoàn chỉnh.

Dùng figma để lấy ngữ cảnh thiết kế, ảnh chụp màn hình, biến và tài nguyên từ Figma MCP server, rồi chuyển các node Figma thành quyết định UI sẵn sàng cho triển khai. Kỹ năng figma này rất phù hợp khi bạn có Figma URL hoặc node ID và cần cách dùng figma chính xác cho công việc thiết kế sang code, thiết lập hoặc khắc phục sự cố.

brandkit là một skill tạo hình ảnh bộ nhận diện thương hiệu cao cấp dành cho công việc branding, bao gồm hệ logo, bộ deck nhận diện, bảng hướng dẫn hình ảnh và các bài thuyết trình thương hiệu được art direction kỹ. Skill này được thiết kế để cho ra kết quả nhất quán, mang phong cách studio trên nhiều bối cảnh như startup, công cụ dành cho developer, an ninh, game, ứng dụng tiêu dùng và các concept xa xỉ. Hãy dùng brandkit khi bạn muốn một thế giới thương hiệu chỉn chu, thay vì một moodboard AI chung chung.

shader-dev là một skill GLSL thực dụng dành cho hiệu ứng thời gian thực kiểu ShaderToy. Dùng shader-dev skill để xây dựng hoặc gỡ lỗi ray marching, SDF scenes, lighting, particles, fluid motion, post-processing và shader-dev cho UI Design với ít phải đoán mò hơn so với một prompt chung chung.

Dùng kỹ năng remotion để biến các màn hình dự án Stitch thành video hướng dẫn chỉn chu với chuyển cảnh, hiệu ứng zoom và lớp phủ văn bản. Kỹ năng này bao gồm các bước cài đặt, tệp ví dụ và một hướng dẫn remotion có thể lặp lại cho biên tập video và các bố cục sẵn sàng để render.

pol-probe-advisor giúp quản lý sản phẩm chọn đúng probe Proof of Life (PoL) cho từng giả thuyết, mức rủi ro và mức nguồn lực. Dùng skill pol-probe-advisor để tránh làm quá tay và chọn phương pháp kiểm chứng rẻ nhất nhưng vẫn hữu ích, phù hợp với mục tiêu học tập thực sự. Rất phù hợp cho quản lý sản phẩm, với hướng dẫn pol-probe-advisor thực tế và chỉ dẫn sử dụng rõ ràng.

Skill storyboard biến một ý tưởng sản phẩm thành câu chuyện 6 khung, đi từ vấn đề đến giải pháp. Hãy dùng nó cho việc thống nhất với các bên liên quan, review ý tưởng, demo và storyboard cho Prototypes khi bạn cần một cách nhanh, lấy con người làm trung tâm để kiểm tra xem ý tưởng có tạo được sự đồng cảm hay không.

pol-probe giúp bạn xác định một Proof of Life probe để kiểm tra sớm một giả thuyết rủi ro với chi phí thấp trước khi xây dựng sản phẩm thật. Dùng kỹ năng pol-probe để giảm “prototype theater”, đặt tiêu chí thành công nghiêm ngặt, chọn đúng kiểu probe và lập kế hoạch loại bỏ sau khi đã học được điều cần biết.

hyperframes-registry giúp bạn cài đặt và kết nối các mục registry tái sử dụng của HyperFrames với ít phải đoán mò hơn. Dùng nó để chạy hyperframes add, phân biệt blocks với components, ghép các đoạn snippet, nối blocks vào index.html, và làm theo các ánh xạ đường dẫn trong hyperframes.json cho việc triển khai thiết kế và khám phá registry.

gsap là tài liệu tham chiếu thực tiễn về animation cho các composition HyperFrames. Nó giúp bạn chọn giữa gsap.to(), from(), fromTo() và gsap.timeline(), rồi áp dụng đúng vars, easing, stagger, transforms và các mẫu tối ưu hiệu năng. Hãy dùng hướng dẫn gsap này khi bạn cần motion sẵn sàng để triển khai cho hiệu ứng xuất hiện, chuyển cảnh và các hiệu ứng thiết kế có thể tái sử dụng.

excalidraw-diagram tạo các sơ đồ Excalidraw dạng JSON để trình bày lập luận bằng hình ảnh, chứ không chỉ vẽ ô và mũi tên. Hãy dùng nó cho quy trình làm việc, kiến trúc, luồng tuần tự, đường đi quyết định và sơ đồ khái niệm khi cấu trúc, độ dễ đọc và các mối quan hệ thực sự là yếu tố quan trọng. Kỹ năng này có hướng dẫn cài đặt, kiểm tra theo khả năng hiển thị và một quy trình thực hành để tạo sơ đồ tốt hơn.

infocard giúp bạn tạo các thẻ thông tin theo phong cách biên tập ngay trong Markdown bằng cách nhúng trực tiếp HTML và CSS vào trang. Công cụ này hữu ích cho tóm tắt, snapshot chủ đề, khung highlight, thẻ sự kiện, khối so sánh và các nội dung thân thiện với UI Design cần trông như được thiết kế có chủ đích. Công cụ này không dành cho sơ đồ hay trực quan hóa dữ liệu; nếu cần, hãy dùng skill chuyên cho diagram hoặc chart.

canvas tạo sơ đồ JSON Canvas với bố cục tự do và tọa độ x/y rõ ràng. Hãy dùng nó cho mind map, knowledge graph, concept map, bảng kế hoạch và các quy trình sơ đồ hóa khác khi bố cục không gian quan trọng hơn thứ tự. Đây không phải lựa chọn phù hợp cho luồng quy trình hay biểu đồ dữ liệu. Hãy dùng kỹ năng canvas khi bạn cần các node có thể chỉnh sửa, liên kết và bố cục có cấu trúc.

imagegen-frontend-mobile là một skill tạo hình ảnh dành cho các màn hình ứng dụng di động cao cấp và các luồng nhiều màn hình. Skill này giúp tạo visual mang đậm chất app cho iOS, Android và các concept đa nền tảng với bố cục rõ ràng, chữ dễ đọc, màu sắc được kiểm soát và mockup điện thoại tinh tế. Hãy dùng cho tạo ảnh, không dùng cho code, website hay UI desktop.

gpt-taste là một skill thiên về thiết kế, dùng để tạo các trang UI chỉn chu với định hướng nghệ thuật kiểu biên tập, kỷ luật về khoảng trắng và chuyển động GSAP. Hãy dùng skill gpt-taste cho các trang marketing, landing page và site trưng bày khi bạn muốn bố cục đa dạng hơn, kiểm soát typography tốt hơn và tránh các pattern frontend quá chung chung. Hướng dẫn này có kèm ghi chú cài đặt và cách dùng để triển khai thực tế.

Skill hand-drawn-diagrams biến các prompt bằng ngôn ngữ tự nhiên thành sơ đồ, flow, bản giải thích, wireframe và mockup trang theo phong cách vẽ tay bằng Excalidraw. Skill này kiểm tra đầu ra và có thể trả về một URL chỉnh sửa cùng ảnh có thể xuất. Phù hợp nhất khi bạn cần dựng diagram nhanh với cảm giác phác thảo, không phải đồ họa vector trau chuốt.

world-builder là một skill thiên về thiết kế, dùng để tạo và quản lý các khu vực game sinh nội dung trong overworld kiểu Pokemon của Dorothy. Hãy dùng skill world-builder để biến một chủ đề, tiền đề hoặc ý tưởng địa điểm thành một bản đồ có thể chơi được, với mood, bố cục, địa hình, cách đặt NPC và logic không gian cho Design Implementation.

gif-sticker-maker biến ảnh thành 4 sticker GIF động theo phong cách Funko Pop / Pop Mart bằng MiniMax Image Generation, MiniMax Video Generation và ffmpeg. Skill gif-sticker-maker này bao gồm các yêu cầu cài đặt, mẫu prompt, chú thích và toàn bộ quy trình từ ảnh sang GIF.

figma-create-new-file tạo một file Figma hoặc FigJam mới, trống trong drafts, với mặc định cho loại editor và tên file. Skill figma-create-new-file này hỗ trợ triển khai thiết kế, tạo mẫu nhanh, và bắt đầu một canvas mới trước khi dùng use_figma. Skill cũng xử lý việc xác định planKey thông qua whoami khi cần.

figma-use là kỹ năng bắt buộc để gọi `use_figma` an toàn trong các quy trình làm việc với Figma Plugin API. Hãy dùng kỹ năng figma-use để cài đặt và nạp nó trước khi viết, cập nhật, kiểm tra hoặc cấu trúc các tệp Figma bằng JavaScript. Kỹ năng này đặc biệt hữu ích cho triển khai thiết kế, làm việc với component, variables, auto layout và đọc tệp theo cách lập trình.