Agent Skills về design

ckm:design là skill thiết kế có cấu trúc để định tuyến và triển khai logo, mockup CIP, banner, slide và icon SVG. Bộ này có tài liệu tham chiếu thực dụng, tùy chọn dựa trên CSV và script Python cho quy trình lặp lại ổn định thay vì chỉ dựa vào prompt chung chung.

figma-generate-design giúp chuyển các trang, modal, drawer, sidebar, panel và những giao diện nhiều phần khác đã được code thành Figma bằng cách dùng design system đã công bố. Kỹ năng này tìm component, biến, style và tài nguyên thư viện từ Code Connect cùng các nguồn liên quan, rồi ghép màn hình theo từng phần cho Design Implementation thay vì vẽ lại thủ công toàn bộ. Hãy dùng hướng dẫn figma-generate-design khi bạn cần độ khớp cao với code và token.

design-consultation là một skill design-consultation giúp biến một ý tưởng sản phẩm thô thành một hướng thiết kế hoàn chỉnh. Skill này tạo ra một nguồn sự thật DESIGN.md, bản xem trước và hướng dẫn ở cấp hệ thống cho typography, màu sắc, khoảng cách, bố cục và chuyển động. Phù hợp nhất cho các sản phẩm mới và các bề mặt UI cần một điểm khởi đầu mạch lạc.

Skill design-md phân tích các dự án Stitch và biến các màn hình thành một nguồn chân lý DESIGN.md mang tính ngữ nghĩa, giúp duy trì nhất quán về bố cục, giọng điệu, màu sắc và ngôn ngữ thành phần. Hãy dùng design-md cho Design Systems khi bạn cần hướng dẫn có thể prompt cho các lần tạo Stitch sau này, chứ không chỉ một bản tóm tắt trực quan.

Dùng design-system skill để tạo hoặc rà soát một UI system, trích xuất token từ code hiện có và kiểm tra tính nhất quán của styling trong các repo thực tế.

figma-generate-design giúp chuyển một màn hình, trang hoặc bố cục nhiều phần thực tế vào Figma bằng cách tái sử dụng hệ thống thiết kế đã xuất bản thay vì các hình khối chung chung. Đây là lựa chọn lý tưởng khi cần bám sát giao diện code hoặc trang sản phẩm với độ tương đồng cao, cấu trúc có thể chỉnh sửa và tính nhất quán dựa trên token. Hãy dùng cho việc cập nhật thiết kế UI toàn trang, không phải cho mockup sơ bộ.

frontend-design-review là một GitHub skill dùng để review công việc UI frontend và tạo giao diện khác biệt, đạt chuẩn production từ con số 0. Skill này giúp đánh giá mức độ tuân thủ design system, khả năng tiếp cận, chất lượng hình ảnh và việc một UI trông chung chung hay có chủ đích thiết kế rõ ràng. Hãy dùng cho review PR, review component và frontend-design-review trong thiết kế UI.

Dùng frontend-design để xây dựng các giao diện frontend khác biệt, sẵn sàng cho sản xuất, với định hướng thị giác rõ ràng. Skill frontend-design này phù hợp cho landing page, dashboard, app shell và các component mà thứ bậc nội dung, kiểu chữ, chuyển động và độ chỉn chu quan trọng không kém phần triển khai. Nó cũng bao gồm hướng dẫn cài đặt và sử dụng cho công việc UI theo hướng thiết kế trước.

figma-create-design-system-rules giúp bạn tạo các quy tắc Design System theo từng dự án cho công việc Figma-to-code. Dùng skill này để ghi lại quy ước cho component, naming, token, vị trí file và những thứ không nên hardcode, ताकि các AI coding agent luôn nhất quán trên toàn bộ repo của bạn. Cần kết nối với Figma MCP server.

figma-implement-design chuyển thiết kế Figma thành mã ứng dụng sẵn sàng cho production với độ khớp hình ảnh 1:1. Hãy dùng khi triển khai UI code từ file Figma, khi cần khớp một component hoặc màn hình cụ thể, hoặc khi làm theo hướng dẫn figma-implement-design cho Design Implementation. Không dùng để chỉnh sửa các node trên canvas Figma.

frontend-design là skill thiên về thiết kế, giúp xây dựng giao diện frontend trau chuốt hơn với ngữ cảnh rõ ràng, thứ bậc thị giác tốt, khả năng truy cập cao và hành vi responsive hợp lý. Hãy dùng hướng dẫn này để cài đặt skill, xem các tài liệu cốt lõi và áp dụng chỉ dẫn thực tiễn nhằm cải thiện component, trang và màn hình ứng dụng.

design-system-starter giúp đội ngũ dựng khung design system với tokens, component atomic, theming, hướng dẫn WCAG 2.1 AA, checklist, cùng template tài liệu và mã khởi đầu thân thiện với React.

figma-implement-design biến các màn hình Figma thành code sẵn sàng cho môi trường production ngay trong repo của bạn, với mục tiêu bám sát giao diện về bố cục, trạng thái, token và hành vi responsive. Hãy dùng cho triển khai Figma-to-code, không dùng để chỉnh sửa Figma, ánh xạ code connect hay tạo thiết kế mới. Kỹ năng này bao gồm hướng dẫn cài đặt, lưu ý sử dụng và các quy tắc ranh giới cho quy trình Design Implementation.

ckm:design-system giúp bạn xây dựng token ba lớp, spec component, CSS variables, mapping Tailwind và slide thương hiệu nhất quán dựa trên token architecture rõ ràng.

ipados-design-guidelines dành cho thiết kế và rà soát giao diện gốc trên iPad. Hãy dùng khi làm bố cục thích ứng, Split View, Stage Manager, điều hướng bằng sidebar, hành vi của pointer và trackpad, phím tắt bàn phím, và các phương án dự phòng cho khung hẹp. Skill này giúp thay thế các giả định kiểu iPhone bằng những kiểm tra thiết kế thực tế theo chuẩn iPadOS.

macos-design-guidelines là một cẩm nang thực tiễn để review và triển khai app Mac theo Apple Human Interface Guidelines. Tài liệu bao quát menu bar, phím tắt bàn phím, hành vi cửa sổ, toolbar, khả năng truy cập và tích hợp hệ thống cho các nhóm dùng SwiftUI, AppKit và Mac Catalyst.

Dùng web-design-guidelines để rà soát mã UI theo Web Interface Guidelines mới nhất. Phù hợp nhất cho quy trình web-design-guidelines tập trung trong kiểm tra UX, với kết quả ngắn gọn theo file:line, kiểm tra khả năng tiếp cận và đối chiếu tuân thủ giao diện trước khi phát hành.

ios-design-guidelines giúp rà soát, định hình và viết lại giao diện SwiftUI/UIKit theo Apple Human Interface Guidelines cho iPhone. Kỹ năng này hữu ích cho bố cục, điều hướng, khả năng truy cập, Dynamic Type, Dark Mode và lựa chọn thành phần hệ thống khi bạn cần phản hồi thực tiễn từ ios-design-guidelines cho thiết kế UI.

design-review là kỹ năng QA thiết kế theo hướng UX để audit giao diện đang chạy, phát hiện vấn đề về khoảng cách, thứ bậc thị giác, tính nhất quán hình ảnh và tương tác, rồi chỉnh sửa lặp lại kèm bước xác minh. Kỹ năng này hỗ trợ review ở chế độ lập kế hoạch trước khi triển khai và rất hữu ích khi bạn cần một hướng dẫn design-review cho các thay đổi nguồn cụ thể thay vì lời khuyên chung chung.

design-system-patterns giúp các nhóm xây dựng nền tảng UI có khả năng mở rộng với cấu trúc token, kiến trúc theming và các mẫu API component tái sử dụng cho design system và thư viện component.

frontend-design là skill ưu tiên ngữ cảnh để tạo mã UI frontend khác biệt và tinh tế. Hãy dùng skill này để chuyển hóa đối tượng người dùng, tình huống sử dụng và giọng điệu thương hiệu thành bố cục, kiểu chữ, màu sắc, chuyển động, trạng thái tương tác và UX writing tốt hơn cho trang, component và luồng trải nghiệm.

visual-design-foundations giúp các nhóm xây dựng hệ thống UI thực tiễn với thang kiểu chữ, token màu, quy tắc khoảng cách và hướng dẫn iconography. Hãy dùng skill này để thiết lập nền tảng thiết kế vững chắc, tạo style guide, rà soát phân cấp thị giác và tạo CSS variables sẵn sàng triển khai từ các ràng buộc thiết kế rõ ràng.

android-design-guidelines là một hướng dẫn thực hành về Material Design 3, Jetpack Compose và bố cục XML. Dùng để rà soát các quyết định UI Android liên quan đến theming, điều hướng, khả năng truy cập, layout thích ứng, dynamic color và mức độ tuân thủ Material You. Phù hợp khi cần một guide android-design-guidelines hoặc dùng android-design-guidelines cho các tác vụ UI Design.

Skill figma-create-design-system-rules tạo ra các quy tắc hệ thống thiết kế theo từng dự án cho quy trình Figma-to-code. Dùng nó để mã hóa quy ước của repo cho component, token, primitive bố cục, cấu trúc file và ranh giới hardcode, giúp các tác nhân lập trình giữ được sự nhất quán giữa các màn hình. Phù hợp nhất khi có Figma MCP server đã kết nối và một codebase sẵn có.

react-native-design là skill chuyên biệt cho các mẫu UI React Native, bao gồm styling với StyleSheet, React Navigation có kiểu dữ liệu đầy đủ và cách dùng Reanimated 3 để xây dựng màn hình đa nền tảng.

tvos-design-guidelines là một bộ quy tắc thiết kế Apple TV thực tiễn để rà soát giao diện tvOS, điều hướng dựa trên focus, hành vi của Siri Remote, khả năng đọc ở khoảng cách 10-foot và phát lại media. Hãy dùng hướng dẫn tvos-design-guidelines này khi bạn cần ràng buộc rõ ràng, nhận xét theo từng màn hình và kiểm tra triển khai cho thiết kế UI phòng khách.

Skill visionos-design-guidelines giúp bạn áp dụng các quy tắc của Apple Vision Pro cho giao diện không gian, đầu vào bằng mắt và tay, không gian nhập vai, cửa sổ, khối 3D và khả năng truy cập. Hãy dùng khi rà soát hoặc thiết kế giao diện visionOS cần sự thoải mái, đặt đúng vị trí và hướng dẫn chuẩn theo nền tảng.

Kỹ năng web-component-design giúp các nhóm thiết kế UI component có thể tái sử dụng cho React, Vue và Svelte, với các mẫu API chắc chắn, hướng dẫn về khả năng truy cập và tài liệu tham khảo về các đánh đổi khi styling trong design system.

liquid-glass-design giúp bạn triển khai hệ thống Liquid Glass của Apple trên iOS 26 cho SwiftUI, UIKit và WidgetKit. Dùng khi cần tạo button, card, thanh công cụ, container và widget có hiệu ứng kính, kèm hướng dẫn về hình dạng, màu tint, tính tương tác và khi nào hiệu ứng này thật sự phù hợp với giao diện thực tế.

Skill mobile-ios-design giúp agent tạo hướng dẫn UI đậm chất iOS theo nguyên tắc Apple HIG, mẫu SwiftUI, tư vấn điều hướng, khả năng truy cập và bố cục thích ứng cho iPhone và iPad.

web-design-guidelines là một hướng dẫn trung lập với framework để xây dựng, rà soát và sửa lỗi giao diện web có thể truy cập và đáp ứng tốt. Hãy dùng nó cho HTML ngữ nghĩa, kiểm tra WCAG 2.2, biểu mẫu, trạng thái focus, độ tương phản, chế độ tối, hiệu năng và các quyết định bố cục trên HTML, CSS và JS.

makepad-2.0-design-judgment là skill Makepad 2.0 đầu tiên nên tải khi cần đánh giá thiết kế, kiến trúc, ranh giới thành phần, luồng dữ liệu và chiến lược render. Hãy dùng skill makepad-2.0-design-judgment để điều hướng yêu cầu đến đúng skill tuân thủ Makepad và đưa ra lựa chọn thiết kế tốt hơn trước khi triển khai.

canvas-design hỗ trợ tạo tác phẩm hình ảnh tĩnh nguyên bản theo quy trình hai bước: viết triết lý thiết kế bằng Markdown, rồi xuất thành `.png` hoặc `.pdf`. Phù hợp nhất cho poster, ảnh bìa, hình ảnh ý tưởng và đồ họa chiến dịch gần với UI, ít chữ.

Skill interaction-design giúp các nhóm thiết kế và triển khai chuyển động UI có chủ đích, microinteraction, transition, trạng thái tải và mẫu phản hồi, kèm tài liệu tham khảo thực tế theo định hướng React và hướng dẫn áp dụng.

frontend-design giúp biến ý tưởng UI mơ hồ thành giao diện khác biệt, sẵn sàng production, với frontend code thực tế, định hướng thẩm mỹ rõ ràng và ít kiểu AI chung chung.

Dùng skill tailwind-design-system để xây dựng design system với Tailwind CSS v4, bao gồm tokens, theming, variants, accessibility và hướng dẫn chuyển từ v3 sang v4.

watchos-design-guidelines là một skill chuyên sâu về thiết kế UI Apple Watch cho ứng dụng watchOS, complication, bài tập luyện, thông báo và tương tác trên cổ tay. Hãy dùng hướng dẫn watchos-design-guidelines này để kiểm tra tính dễ nhìn lướt qua, hành vi của Digital Crown, trạng thái Always On, khả năng truy cập và liệu một màn hình có dùng tốt trên cổ tay hay không.

Skill design-an-interface giúp bạn khám phá những dạng API và giao diện module khác biệt rõ rệt trước khi chốt phương án. Skill này được xây dựng cho phát triển frontend và các công việc thiết kế module khác, nơi bạn cần làm rõ yêu cầu trước, rồi mới so sánh nhiều lựa chọn, cân nhắc đánh đổi và xây dựng một hợp đồng đầu ra rõ ràng hơn cho bên gọi.

swift-library-design giúp bạn thiết kế thư viện và framework Swift với API công khai vững hơn, an toàn hơn ở thời gian biên dịch, và các giá trị mặc định chú trọng hiệu năng. Hãy dùng nó cho kiến trúc hướng giao thức, associated types, result builders, DSL, kiểu noncopyable, và progressive disclosure khi xây dựng các Swift package tái sử dụng hoặc các module kiểu SDK.

mobile-android-design giúp agent đưa ra hướng dẫn UI thuần Android với Material Design 3, Jetpack Compose, theming, navigation và các mẫu bố cục thích ứng cho điện thoại, máy tính bảng và thiết bị gập.

api-design là skill hỗ trợ thiết kế REST API, dùng để lập kế hoạch và rà soát endpoint, cách đặt tên resource, mã trạng thái, phân trang, lọc, versioning và phản hồi lỗi.

api-design-principles giúp bạn thiết kế và rà soát API REST và GraphQL bằng checklist, tài liệu tham chiếu và mẫu FastAPI. Dùng công cụ này để cải thiện cách đặt tên resource, ngữ nghĩa HTTP, phân trang, xử lý lỗi, versioning và cấu trúc schema trước khi bắt tay vào triển khai.

Dùng skill responsive-design để lập kế hoạch và triển khai bố cục UI thích ứng với container queries, kiểu chữ linh hoạt, CSS Grid, Flexbox và các breakpoint mobile-first từ kho wshobson/agents.

Skill api-and-interface-design giúp bạn thiết kế các giao diện công khai ổn định, khó dùng sai cho REST, GraphQL, SDK, props component và ranh giới module. Hãy dùng nó khi phát triển API cần các hợp đồng rõ ràng, mặc định an toàn hơn và một lộ trình đáng tin cậy để tiến hóa mà không làm hỏng người dùng hiện có.

web-design-guidelines rà soát mã UI theo Vercel Web Interface Guidelines, lấy quy tắc mới nhất và trả về kết quả ngắn gọn dạng file:line để audit UX và khả năng truy cập tập trung.

database-driver-design là hướng dẫn để thiết kế các thư viện client cơ sở dữ liệu Swift đạt chất lượng production. Nội dung bao gồm wire protocols, quản lý kết nối, API lệnh an toàn kiểu, pooling, backpressure và cách đồng bộ với Swift Concurrency cho các team Backend Development.

python-design-patterns là skill hỗ trợ refactor và review thiết kế cho Python, tập trung vào KISS, SRP, separation of concerns, composition over inheritance và Rule of Three để tạo code gọn gàng hơn, dễ kiểm thử hơn.

deployment-pipeline-design giúp bạn thiết kế pipeline CI/CD nhiều giai đoạn với các cổng phê duyệt, bước kiểm tra bảo mật, chiến lược rollout, luồng promote môi trường và logic rollback cho Kubernetes, ECS, VM, serverless cùng nhiều đích triển khai khác.

design-an-interface giúp bạn thiết kế module và bề mặt API bằng cách thu thập yêu cầu, tạo 3+ phương án khác biệt rõ rệt và so sánh các đánh đổi trước khi triển khai.

Skill kpi-dashboard-design giúp các nhóm lập kế hoạch dashboard KPI tập trung vào quyết định, bao gồm chọn metric, xây dựng thứ bậc dashboard, áp dụng mẫu biểu đồ và hướng dẫn quản trị cho các góc nhìn điều hành, chiến thuật và vận hành.

event-store-design hỗ trợ các nhóm Backend Development thiết kế event store cho hệ thống event-sourced, bao quát streams, ordering, concurrency, snapshots, metadata, subscriptions và các đánh đổi khi vận hành. Dùng kỹ năng này để định hình một thiết kế event store thực tế trước khi bắt tay vào triển khai.

ckm:banner-design hỗ trợ tạo banner, cover, header, quảng cáo hiển thị và hero graphics cho website bằng brief có cấu trúc, quy trình theo kích thước và nhiều hướng art direction. Phù hợp cho thiết kế UI, creative marketing và ý tưởng banner theo từng nền tảng với SKILL.md cùng tài liệu tham chiếu về kích thước và phong cách banner.

Skill redesign-existing-projects nâng cấp các website và ứng dụng hiện có lên chất lượng cao cấp. Skill này kiểm tra thiết kế hiện tại, phát hiện các mẫu AI chung chung, và áp dụng triển khai thiết kế cao cấp mà không làm hỏng chức năng. Hoạt động với mọi CSS framework hoặc vanilla CSS.

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.

figma-designer phân tích file Figma hoặc ảnh chụp màn hình qua Figma MCP để trích xuất thông số giao diện, design token, component và PRD sẵn sàng bàn giao cho triển khai dành cho các nhóm thiết kế UI.

database-schema-designer hỗ trợ lập trình viên và kỹ sư cơ sở dữ liệu thiết kế schema SQL hoặc NoSQL sẵn sàng cho production, bao gồm chuẩn hóa, indexing, constraints và lập kế hoạch migration. Đi kèm các cụm từ kích hoạt, checklist thiết kế schema và mẫu migration để tạo và rà soát schema hiệu quả hơn.

api-designer hỗ trợ thiết kế và rà soát API REST và GraphQL với các tài liệu tham khảo thực tiễn, đồng thời cung cấp `generate_api.py` và `validate_api.py` để tạo bản nháp đặc tả và kiểm tra cơ bản.

stitch-design-taste là một skill hệ thiết kế của Google Stitch dành cho Design Implementation. Skill này tạo ra hướng dẫn DESIGN.md thân thiện với agent cho UI cao cấp, không đại trà, với typography rõ ràng, màu sắc được cân chỉnh, bố cục bất đối xứng, quy tắc chuyển động và các pattern bị cấm. Hãy dùng nó khi bạn muốn một guide stitch-design-taste có thể lặp lại, thay vì chỉ một prompt dùng một lần.

high-end-visual-design là một skill định hướng UI cao cấp để tạo ra các giao diện mang tính editorial, điện ảnh và được trau chuốt kỹ lưỡng. Skill này giúp AI tránh các bố cục chung chung bằng cách định hướng font chữ, khoảng cách, bóng đổ, chuyển động và bố cục cho landing page, site marketing, dashboard và các bề mặt ứng dụng được hoàn thiện tinh xảo.

Skill pict-test-designer biến yêu cầu, đặc tả tính năng hoặc hành vi mã nguồn thành thiết kế test dựa trên PICT, gồm tham số, ràng buộc, ma trận kiểm thử pairwise và kết quả mong đợi. Đây là lựa chọn hữu ích cho QA, lập trình viên và đội sản phẩm cần một hướng dẫn pict-test-designer thực tế cho đầu vào phức tạp và phạm vi kịch bản hợp lệ.

postgresql-table-design giúp tác nhân thiết kế hoặc rà soát schema PostgreSQL với các nguyên tắc thực tế về khóa, chuẩn hóa, kiểu dữ liệu, ràng buộc, chỉ mục cho khóa ngoại và những điểm dễ vấp riêng của PostgreSQL.

Skill accessibility-compliance giúp các nhóm rà soát và cải thiện UI web hoặc mobile theo WCAG 2.2 với hướng dẫn thực tiễn về ARIA, truy cập bằng bàn phím, screen reader và khả năng truy cập trên thiết bị di động. Phù hợp nhất cho audit UX, sửa lỗi component và các khuyến nghị sẵn sàng để triển khai.

figma-generate-library giúp biến một codebase thành thư viện design system trên Figma với tokens, variables, components, theming và tài liệu. Hãy dùng skill figma-generate-library khi bạn cần một quy trình theo giai đoạn cho công việc Design Systems, bao gồm cài đặt, thiết lập, khám phá, tạo mới, kiểm tra và đối chiếu với code.

figma-use là skill cần cài trước mỗi lần gọi `use_figma` để JavaScript chạy an toàn trong ngữ cảnh file Figma. Skill này hỗ trợ các công việc triển khai thiết kế như tạo và chỉnh sửa node, gắn biến và style, xây dựng component và variant, cũng như kiểm tra cấu trúc file bằng lập trình. Repo đi kèm hướng dẫn sử dụng, các điểm dễ vấp, và những mẫu thực hành giúp giảm lỗi tự động hóa Figma thường gặp.

Dùng kỹ năng wpds để xây dựng hoặc rà soát WordPress UI với WordPress Design System (WPDS). Kỹ năng này giúp bạn kiểm tra components, tokens, patterns và mức độ phù hợp của package thông qua WPDS MCP server, để hướng dẫn wpds của bạn bám vào tài liệu chuẩn thay vì suy đoán. Rất phù hợp cho công việc wpds trong Design Systems trên Gutenberg, WooCommerce, WordPress.com, Jetpack và các giao diện liên quan.

figma-generate-library giúp bạn xây dựng hoặc cập nhật một hệ thống thiết kế Figma từ một codebase, theo quy trình có thứ tự cho tokens, thư viện component, tài liệu và theming sáng/tối. Hãy dùng skill figma-generate-library khi bạn cần một hướng dẫn thực chiến cho Design Systems, không phải một mockup làm một lần. Skill này bổ trợ cho figma-use khi cần gọi Plugin API.

figma-create-new-file tạo một file Figma Design trống mới hoặc một bảng FigJam mới trong drafts. Dùng khi bạn cần một điểm khởi đầu mới trước các thao tác Figma sâu hơn, bao gồm cả use_figma. Skill này hỗ trợ design hoặc figjam, đặt tên file tùy chọn, và có thể giải quyết quyền truy cập gói bằng 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.

Skill normalize dùng để rà soát một tính năng UI và đưa nó về đúng với design system của bạn. Tìm hiểu bối cảnh cài đặt normalize, phần chuẩn bị bắt buộc với /frontend-design và cách dùng thực tế cho page, route và component.

Skill normalize giúp rà soát một tính năng UI và đưa nó về đúng với design system của bạn. Tìm hiểu các lựa chọn cài đặt normalize, phần chuẩn bị frontend-design cần có và cách dùng thực tế cho page, route và component.

impeccable giúp bạn tạo UI frontend khác biệt, đạt chất lượng production thay vì những giao diện AI trông na ná nhau. Skill này hỗ trợ các quy trình craft, teach và extract cho trang, web component, bề mặt ứng dụng, poster và các frontend thiên về thiết kế, nhờ đó đặc biệt hữu ích cho thiết kế UI, thiết lập ngữ cảnh thiết kế và trích xuất pattern có thể tái sử dụng.

Skill extract giúp các nhóm tìm ra những mẫu UI, token và component lặp lại, rồi hợp nhất chúng vào design system hiện có với kế hoạch migration an toàn hơn.

shape là kỹ năng UX/UI ưu tiên khâu hoạch định, thực hiện phỏng vấn khám phá và chuyển câu trả lời thành bản design brief trước khi viết code. Hãy dùng cùng /impeccable để làm rõ mục tiêu người dùng, ràng buộc, các trạng thái và hướng triển khai cho UI Design.

polish là kỹ năng rà soát UI ở bước cuối để bắt lỗi căn chỉnh, khoảng cách, tính nhất quán, việc dùng token và các chi tiết nhỏ trước khi phát hành. Kỹ năng này phù hợp nhất với những màn hình, luồng hoặc component đã dùng được nhưng vẫn còn cảm giác gần đúng chứ chưa thật sự hoàn thiện. Hãy dùng nó để nâng mức sẵn sàng ra mắt, bám sát design system hơn và cải thiện chất lượng tổng thể mà không cần thiết kế lại quá mức.

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ố.

extract giúp các nhóm tìm ra các mẫu UI, token và component lặp lại, rồi lên kế hoạch hoặc thực hiện việc hợp nhất vào design system hiện có với lộ trình chuyển đổi an toàn 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.

Skill shadcn-ui giúp bạn lập kế hoạch, cài đặt và điều chỉnh các component shadcn/ui trong một ứng dụng thực tế. Hãy dùng hướng dẫn shadcn-ui này cho Design Implementation, khám phá component, tùy biến, và cách sử dụng shadcn-ui trong các luồng form, bảng, xác thực và bố cục.

Hướng dẫn content-modeling-best-practices cho kiến trúc nội dung có cấu trúc, schema tái sử dụng, quyết định giữa reference và embedding, thiết kế taxonomy, và lập kế hoạch Design Systems trong Sanity cùng các headless CMS khác.

critique giúp bạn xem xét giao diện, tính năng, trang hoặc thành phần dưới góc nhìn UX với chấm điểm có cấu trúc, kiểm thử theo persona, kiểm tra heuristic và phản hồi có thể hành động. Hãy dùng skill critique khi bạn cần một quy trình critique lặp lại được cho UI/UX Design, thay vì những nhận xét mơ hồ. Skill này phù hợp nhất cho các phiên critique tập trung vào một khu vực cụ thể với bối cảnh rõ ràng.

Skill harden giúp biến thiết kế UI và đặc tả giao diện sẵn sàng cho production bằng cách kiểm tra các tình huống biên, trạng thái trống, xử lý lỗi, văn bản dài, bản địa hóa, quyền truy cập và các chế độ lỗi thực tế khác. Hãy dùng skill này cho harden for UI Design khi bạn muốn giảm tối đa bất ngờ về bố cục và có bộ quy tắc hành vi đầy đủ hơn.

makepad-2.0-theme là một skill theme cho Makepad 2.0, dùng để áp dụng các biến `theme.*`, chuyển đổi giữa giao diện tối và sáng, và giữ cho styling theo design token luôn nhất quán. Hãy dùng hướng dẫn này để hiểu cách cài đặt và sử dụng makepad-2.0-theme cho UI production và hệ thiết kế.

Skill quieter giúp giảm cường độ thị giác trong UI Design, làm giao diện bớt chói, gắt hoặc gây quá tải cảm giác mà vẫn giữ được thứ bậc, độ rõ ràng và cá tính thương hiệu. Phù hợp nhất khi dùng sau quy trình /frontend-design bắt buộc trong repository pbakaus/impeccable.

impeccable là một kỹ năng về thiết kế UI và frontend để xây dựng giao diện khác biệt, đạt chất lượng production. Dùng craft, teach hoặc extract để định hình thiết kế, nạp tài liệu tham chiếu có trọng tâm, và triển khai component, page cùng các pattern của design system với hướng dẫn cài đặt và sử dụng rõ ràng hơn.

typeset cải thiện typography cho UI bằng cách chỉnh lựa chọn font, hệ thống phân cấp, cỡ chữ, độ đậm và khả năng đọc để văn bản trông có chủ ý hơn. Hãy dùng typeset skill cho UI Design khi chữ trông chung chung, thiếu nhất quán hoặc khó lướt đọc, và bạn muốn một hệ thống kiểu chữ rõ ràng hơn, ít phải đoán mò hơn.

frontend-ui-dark-ts giúp bạn xây dựng UI React giao diện tối với TypeScript, Tailwind CSS, Framer Motion và các design token có thể tái sử dụng. Skill này phù hợp cho dashboard, admin panel, chế độ xem phân tích và các giao diện nhiều dữ liệu cần một phong cách tối chỉn chu cùng các mẫu component nhất quán.

shape là một skill UI/UX ưu tiên lập kế hoạch, thực hiện một buổi phỏng vấn khám phá có cấu trúc và tạo một design brief trước khi viết code. Dùng nó để làm rõ vấn đề người dùng, các ràng buộc và hướng đi, rồi chuyển brief cho bước triển khai.

website-to-hyperframes là một skill quy trình để biến một website hiện có thành video HyperFrames. Hãy dùng nó khi bạn có URL và muốn tạo một product tour, video quảng bá, quảng cáo mạng xã hội hoặc video giải thích dựa trên thiết kế, nội dung và tài nguyên thực tế của trang. Repo hỗ trợ các bước capture, design, script, storyboard, VO, build và validation cho công việc Design Implementation.

Kỹ năng arrange giúp cải thiện bố cục UI, khoảng cách, cách nhóm thành phần và thứ bậc thị giác. Tìm hiểu khi nào nên dùng, cách arrange install từ repo GitHub hoạt động, và cách áp dụng arrange với ngữ cảnh /frontend-design để đưa ra quyết định UI Design tốt hơn.

gstack là một skill AI điều khiển trình duyệt dành cho kiểm thử QA, dogfooding, kiểm tra trước khi phát hành và bắt lỗi. Skill này mở các trang thật, click qua giao diện, xác minh trạng thái, so sánh trước/sau, kiểm thử bố cục responsive và thu thập bằng chứng có ảnh chụp màn hình. Đây là lựa chọn đặc biệt hữu ích cho rà soát UI Design và xác thực triển khai khi bạn cần kết quả trình duyệt đáng tin cậy từ gstack skill.

ui-mobile là một cẩm nang thực dụng về thiết kế UI mobile trong React Native và các codebase iOS/Android lân cận. Nội dung tập trung vào vùng chạm dễ tiếp cận, độ tương phản và các quy tắc tương tác, giúp bạn xây dựng màn hình an toàn hơn, rà soát component và cải thiện khả năng dùng trên di động với ít phỏng đoán hơn.

baseline-ui giúp xem xét hoặc tạo UI dựa trên Tailwind theo một chuẩn nền có quan điểm rõ ràng về spacing, typography, accessibility và motion. Hãy dùng kỹ năng baseline-ui khi bạn cần đầu ra component an toàn hơn, quyết định UI Design rõ ràng hơn, và ít lệch khỏi các primitive sẵn có. Kỹ năng này phù hợp nhất với workflow React/Tailwind và các bước kiểm tra baseline-ui thực tế.

Kỹ năng minimax-pdf giúp bạn tạo, điền hoặc định dạng lại các PDF chỉn chu khi chất lượng hình ảnh và nhận diện tài liệu là yếu tố quan trọng. Hãy dùng cho các quy trình CREATE, FILL hoặc REFORMAT với hệ thống thiết kế dựa trên token, biến đầu vào thô thành đầu ra sẵn sàng in. Hướng dẫn này bao gồm cài đặt minimax-pdf, cách dùng minimax-pdf và cách chọn luồng xử lý để đạt kết quả tốt hơn.

Skill typeset giúp rà soát và cải thiện typography cho UI bằng cách chỉnh lựa chọn font, phân cấp, kích thước, độ đậm và khả năng đọc. Phù hợp nhất cho UI sản phẩm, dashboard và landing page. Cần có ngữ cảnh /frontend-design trước; nếu chưa có ngữ cảnh thiết kế thì dùng /teach-impeccable.

adapt giúp các nhóm UI/UX thiết kế lại giao diện hiện có cho những ngữ cảnh mới như mobile, tablet, bản in hoặc tương tác cảm ứng. Hãy dùng adapt để đánh giá các giả định của giao diện nguồn, các ràng buộc của đích đến và những thay đổi về tương tác trước khi bắt tay vào triển khai. Bạn có thể cài từ pbakaus/impeccable và kết hợp với /frontend-design để đạt hiệu quả tốt hơn.

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.

makepad-2.0-vector là một kỹ năng đồ họa vector của Makepad 2.0 dành cho công việc thiết kế UI kiểu SVG. Dùng để tạo icon sắc nét, huy hiệu, minh họa, gradient, filter, transform và các phần tử vector có animation với Vector{} hoặc Svg{}. Hướng dẫn này giúp bạn cài đặt makepad-2.0-vector và nhận đầu ra sẵn sàng triển khai với ít phải đoán mò hơn.

Dùng skill animate để rà soát một tính năng UI và lên kế hoạch cho animation, micro-interaction và transition có chủ đích. Skill này giúp bạn xác định những chuyển động thực sự cải thiện phản hồi, độ rõ ràng, thứ bậc thông tin và cảm giác thích thú, đồng thời yêu cầu ngữ cảnh thiết kế cần thiết từ /frontend-design và chú trọng hiệu năng cũng như khả năng truy cập.

typeset cải thiện typography cho UI bằng cách rà soát lựa chọn font, phân cấp, kích thước, độ đậm và khả năng đọc. Phù hợp nhất khi dùng sau /frontend-design, kết hợp với /teach-impeccable nếu thiếu ngữ cảnh, để biến phần chữ chung chung thành một hệ thống chữ rõ ràng và có chủ đích hơn.

Kỹ năng enhance-prompt biến những ý tưởng UI mơ hồ thành các prompt rõ ràng hơn, sẵn sàng cho Stitch, với cấu trúc chặt chẽ hơn, vốn từ UI/UX tốt hơn và ngữ cảnh hệ thống thiết kế. Hãy dùng hướng dẫn enhance-prompt này để tăng độ cụ thể của prompt, giảm phỏng đoán và tạo ra kết quả nhất quán hơn khi viết prompt và sinh UI.

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ế.

figma-code-connect-components giúp ánh xạ các component thiết kế trong Figma sang component code tương ứng bằng Figma Code Connect. Hãy dùng khi cần đồng bộ thiết kế với triển khai, khớp variant và prop, và tìm đúng component cục bộ trước khi tạo mapping. Phù hợp nhất cho các luồng connect, map hoặc link-to-code, không phù hợp cho viết nội dung trên canvas hay tạo toàn bộ trang.

ui-web giúp bạn thiết kế và tạo kiểu cho các thành phần UI web với các kiểm tra WCAG 2.1 AA, độ tương phản mạnh, điều khiển hiển thị rõ ràng và các mẫu Tailwind thân thiện với dark mode. Hãy dùng skill ui-web này cho giao diện front-end kiểu React khi bạn cần hướng dẫn thực tế về UI Design để cải thiện khả năng tiếp cận và giảm việc phải đoán mò.

bolder là skill dành cho thiết kế UI, giúp các giao diện quá nhạt, quá an toàn hoặc thiếu điểm nhấn trở nên rõ tương phản hơn, có thứ bậc tốt hơn và giàu cá tính hơn. Hãy dùng sau bước thu thập ngữ cảnh bằng /frontend-design, hoặc dùng sau /teach-impeccable khi chưa có ngữ cảnh thiết kế, để nhận được các đề xuất cải thiện sắc nét và khả thi hơn mà vẫn giữ được tính dễ dùng.

gsap-timeline giúp bạn xây dựng chuỗi timeline GSAP với các bước theo thứ tự, chồng lấp, nhãn và phát lồng nhau. Hãy dùng skill gsap-timeline khi mục tiêu là phối hợp nhiều animation, đặc biệt cho UI Design, luồng onboarding hoặc các hệ thống motion có thể lặp lại. Nội dung này bao gồm hướng dẫn cài đặt và sử dụng gsap-timeline để sắp xếp trình tự rõ ràng.

asc-screenshot-resize giúp chuẩn bị ảnh chụp màn hình App Store Connect bằng cách kiểm tra các kích thước hiện được chấp nhận với asc CLI, rồi thay đổi kích thước hoặc xác thực ảnh bằng macOS sips. Hãy dùng hướng dẫn asc-screenshot-resize này cho quy trình Design Implementation, các bản sửa gấp trước phát hành, và bộ ảnh chụp màn hình sẵn sàng nộp.

image-to-code là một skill image-to-code cho Codex, biến tham chiếu hình ảnh thành các trang web thực sự. Quy trình bắt đầu bằng việc tạo ảnh thiết kế, sau đó phân tích kỹ, rồi triển khai để khớp bố cục, khoảng cách, kiểu chữ và cách sắp đặt hero. Hãy dùng cho landing page, trang sản phẩm, bố cục editorial, portfolio và các bản redesign cần độ trung thực thị giác cao.

arrange giúp chẩn đoán và cải thiện bố cục UI, khoảng cách và hệ thống phân cấp thị giác. Hãy dùng kỹ năng arrange này để xử lý màn hình quá chật, lưới lặp lại nhàm chán và bố cục tổng thể yếu, với thiết lập bắt buộc qua $frontend-design và ngữ cảnh $teach-impeccable là tùy chọn.

Skill polish hướng dẫn quy trình rà soát UI ở bước hoàn thiện cuối cùng để chỉnh khoảng cách, căn chỉnh, câu chữ, trạng thái và chuyển động trước khi phát hành. Phù hợp nhất khi tính năng đã hoàn thiện về mặt chức năng, có đủ ngữ cảnh thiết kế, tiêu chuẩn chất lượng rõ ràng và mục tiêu cụ thể như một màn hình, luồng hoặc component.

Skill layout giúp rà soát và cải thiện bố cục UI, khoảng cách, thứ bậc, căn chỉnh và nhịp điệu thị giác. Phù hợp nhất cho các màn hình chật chội hoặc có cấu trúc yếu, và cần dựa vào /impeccable để thu thập ngữ cảnh trước khi dùng.

Skill infographic biến nội dung có cấu trúc thành các bố cục infographic chỉn chu bằng DSL `infographic`. Dùng cho KPI cards, timeline, roadmap, luồng từng bước, so sánh A vs B, SWOT, funnel, cây tổ chức và các biểu đồ đơn giản. Đây là lựa chọn rất phù hợp cho infographic cho UI Design và các bản tóm tắt kiểu thuyết trình với 4–8 mục. Không lý tưởng cho phân tích dữ liệu phức tạp hoặc sơ đồ kỹ thuật.

Skill layout giúp cải thiện khoảng cách, phân cấp thị giác và bố cục khi giao diện UI trông phẳng, chật chội hoặc sắp xếp máy móc. Hãy dùng khi gặp vấn đề về bố cục, căn chỉnh và nhịp điệu thị giác, với hướng dẫn thực hành dành riêng cho UI Design thay vì các mẹo styling chung chung. Phù hợp nhất khi bạn cần chỉnh sửa ở tầng cấu trúc, nhóm nội dung rõ ràng hơn và thứ tự đọc tốt hơn.

Skill delight giúp các team UI thêm micro-interaction tinh tế, câu chữ và những khoảnh khắc phản hồi khiến giao diện trở nên ấm áp và dễ nhớ hơn. Phù hợp nhất để trau chuốt các màn hình hoặc luồng cụ thể, không dành cho việc làm lại toàn bộ thiết kế. Hãy dùng delight cùng ngữ cảnh /frontend-design có sẵn, và chạy /teach-impeccable trước nếu cần.

Kỹ năng ui-testing cung cấp một quy trình kiểm tra UI theo checklist, giúp phát hiện nút bấm vô hình, độ tương phản yếu, trạng thái focus bị thiếu và các vấn đề về vùng chạm trước khi phát hành. Kỹ năng này phù hợp nhất cho review UI Design, kiểm tra component và các bước rà soát khả dụng nhanh, với ít phải đoán mò hơn so với một prompt kiểm thử chung chung.

distill là skill giúp tinh gọn thiết kế UI bằng cách lược bỏ màn hình về đúng tác vụ cốt lõi. Dùng skill này để dọn bớt chi tiết thừa, giảm nhiễu và làm rõ thứ bậc thị giác. Hiệu quả nhất khi chạy sau /frontend-design, với một màn hình cụ thể, một mục tiêu người dùng chính và các ràng buộc bắt buộc phải giữ rõ ràng.

Skill onboard giúp cải thiện luồng onboarding, empty state và trải nghiệm first-run để đẩy nhanh kích hoạt người dùng. Skill này yêu cầu /frontend-design trước, đôi khi cần /teach-impeccable, và phát huy hiệu quả nhất khi bạn có mục tiêu rõ ràng, "aha moment" và bối cảnh trải nghiệm người dùng cụ thể.

clarify giúp viết lại nội dung UI gây khó hiểu, thông báo lỗi, nhãn và hướng dẫn để cải thiện UX. Phù hợp nhất khi dùng trong quy trình pbakaus/impeccable sau /frontend-design, đồng thời cung cấp mức độ hiểu biết của người dùng và trạng thái tâm lý của họ để cho kết quả tốt hơn.

Dùng skill delight để thêm độ trau chuốt cho UI, micro-interactions và cá tính cho các trạng thái thành công, đang tải, trống và onboarding mà không làm giảm khả năng sử dụng hay mất tập trung.

distill là một skill thiết kế UI dùng để tinh gọn màn hình, component và luồng về đúng mục tiêu cốt lõi. Hãy dùng khi cần giảm rối mắt, nhiễu thị giác và tình trạng phình to tính năng, nhưng lưu ý distill phụ thuộc vào /frontend-design và đôi khi cần /teach-impeccable trước khi sử dụng.

android-native-dev là một skill chuyên về phát triển Android native với Kotlin, Jetpack Compose, Material Design 3, thiết lập dự án, khả năng truy cập và xử lý lỗi build. Skill này giúp đội ngũ đánh giá trạng thái repo, khởi tạo hoặc sửa chữa dự án Android, và xây dựng UI có thể build được với ít phỏng đoán hơn.

overdrive là một skill trên GitHub dành cho thiết kế UI tham vọng, giúp đội ngũ chọn và xây dựng các tương tác có tác động mạnh, phù hợp ngữ cảnh. Hãy dùng nó để lên kế hoạch cho motion nổi bật, UI nặng về hiệu năng và các luồng nâng cao được trau chuốt, kèm phần chuẩn bị thiết kế bắt buộc trước khi triển khai.

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.

Skill colorize giúp các nhóm bổ sung màu sắc có chủ đích cho những thiết kế UI xám hoặc phẳng, thiếu điểm nhấn. Skill này hướng dẫn nên dùng màu ở đâu, vì sao điều đó quan trọng, và cách áp dụng trong bối cảnh thương hiệu, phân cấp, trạng thái ngữ nghĩa và sắc thái sẵn có. Nên dùng sau /frontend-design để đưa ra quyết định màu sắc đáng tin cậy hơn.

architecting-solutions là một skill cho Claude Code dùng cho thiết kế kỹ thuật, lập kế hoạch migration và Requirements Planning. Skill này giúp làm rõ yêu cầu, phân tích các ràng buộc của codebase, so sánh các trade-off và viết bản thiết kế theo kiểu PRD vào thư mục `docs/` của dự án.

frontend-ui-engineering giúp bạn xây dựng hoặc tinh chỉnh giao diện sẵn sàng cho production với khả năng truy cập, bố cục responsive, kỷ luật design system, và cấu trúc component thực tiễn cho Frontend Development. Hãy dùng frontend-ui-engineering khi bạn cần hướng dẫn thiên về triển khai cho trang, component, trạng thái, và các chỉnh sửa UI sao cho chỉn chu, nhất quán, và đủ để bàn giao.

clarify giúp cải thiện UX copy chưa rõ ràng, thông báo lỗi, nhãn và hướng dẫn cho các nhóm UI/UX. Tìm hiểu khi nào nên dùng, cần cung cấp ngữ cảnh gì và cách áp dụng vào từng màn hình, luồng và nội dung giao diện cụ thể.

stitch-loop là một skill tự động hóa workflow để xây dựng trang bằng Stitch theo vòng lặp bàn giao tuần tự. Nó giúp agent đọc `.stitch/next-prompt.md`, tạo trang tiếp theo, tích hợp vào site, rồi chuẩn bị bàn giao kế tiếp với ít phải đoán hơn.

logo-generator giúp bạn tạo logo SVG chuyên nghiệp và hình ảnh showcase chỉn chu cho sản phẩm, thương hiệu và ý tưởng. Skill này kết hợp hướng dẫn theo mẫu thiết kế, hơn 6 biến thể logo, xuất SVG sang PNG và tạo ảnh nền showcase. Hãy dùng logo-generator khi bạn cần một hướng dẫn logo-generator nhanh, có cấu trúc cho Branding, với đầu ra có thể chỉnh sửa và bản xem trước sẵn sàng để trình bày.

imagegen-frontend-web là skill tạo ảnh dẫn hướng frontend theo từng section, dành cho các bản thiết kế web cao cấp, landing page và website marketing. Skill này biến một brief sơ bộ thành các ảnh theo section nhất quán, có chú trọng chuyển đổi, với một ảnh ngang cho mỗi section, giúp lập trình viên hoặc mô hình code tái tạo bố cục ít phải đoán hơn. Rất phù hợp cho workflow thiết kế UI, lập kế hoạch theo từng trang và dùng imagegen-frontend-web rõ ràng hơn.

ui-ux-pro-max là kỹ năng toàn diện hỗ trợ AI cho thiết kế UI/UX. Cung cấp hướng dẫn cấu trúc về bố cục, phong cách, hệ màu, kiểu chữ và quy tắc UX cho dự án web và di động. Phù hợp cho lập trình viên và nhóm cần quyết định thiết kế thực tế trên React, Next.js, Vue, Svelte, Tailwind, shadcn/ui, SwiftUI, React Native, Flutter và HTML/CSS. Dùng để lên kế hoạch, đánh giá và cải thiện UI với trí tuệ thiết kế chọn lọc.

Skill onboard giúp các nhóm sản phẩm cải thiện luồng onboarding, empty state và trải nghiệm lần chạy đầu. Nội dung hướng dẫn cách cài đặt và sử dụng theo quy trình thực tế, nêu rõ phụ thuộc bắt buộc `/frontend-design`, đồng thời gợi ý xác định aha moment, cấp độ người dùng và các bước kích hoạt quan trọng.

Skill adapt giúp thiết kế lại một UI hiện có cho thiết bị hoặc bối cảnh sử dụng mới. Tìm hiểu quy trình adapt, phần phụ thuộc frontend-design bắt buộc, đường dẫn cài đặt và cách áp dụng thực tế cho các thay đổi UI/UX trên mobile, tablet, bản in và đa nền tảng.

Kỹ năng industrial-brutalist-ui cho thiết kế UI tạo ra các giao diện cơ học, mật độ cao với lưới kiểu Swiss, tương phản chữ cực mạnh, bảng màu thực dụng và chất liệu analog. Hãy dùng hướng dẫn industrial-brutalist-ui này cho dashboard, hệ thống biên tập và trang portfolio cần cảm giác như một bảng điều khiển có kỷ luật.

bolder giúp biến những thiết kế UI an toàn nhưng nhạt nhòa trở nên nổi bật hơn mà vẫn giữ được tính dễ dùng. Tìm hiểu khi nào nên dùng skill bolder, bước tiền đề bắt buộc $frontend-design, cùng hướng dẫn thực tế để viết prompt tốt hơn, chẩn đoán vấn đề chính xác hơn và tăng độ táo bạo về thị giác một cách có kiểm soát.

openclaw-persona-forge là một skill theo quy trình, dùng để xây dựng trọn bộ persona OpenClaw từ đầu. Skill này tạo ra xung đột bản sắc, khung trình bày kiểu SOUL.md, quy tắc ranh giới, các phương án đặt tên và gợi ý prompt avatar tùy chọn. Phù hợp nhất cho thiết kế nhân vật OpenClaw, agent nhập vai và công việc persona gần với UI Design; không phù hợp cho việc chỉnh sửa nhỏ trên một persona đã có sẵn.

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.

baoyu-infographic là một khung prompt để tạo infographic có cấu trúc, với 21 bố cục và 20 phong cách. Skill này giúp phân tích nội dung nguồn, chọn bố cục và phong cách phù hợp, rồi tạo ra các bản tóm tắt trực quan rõ ràng cho thiết kế UI, nội dung so sánh, quy trình làm việc và nhiều dạng giải thích nhiều thông tin khác.

makepad-2.0-dsl là một kỹ năng thực tiễn để viết, đọc và sửa mã UI `script_mod!` của Makepad 2.0 DSL. Kỹ năng này giúp lập trình viên frontend và tác giả UI Rust dùng đúng cú pháp dấu hai chấm, instance có tên, cơ chế merge và bindings Rust, với hướng dẫn makepad-2.0-dsl rõ ràng cho cài đặt và sử dụng.

Skill critique giúp các nhóm thực hiện review UX có cấu trúc cho trang, tính năng và component. Skill này đánh giá hệ thống phân cấp, tải nhận thức, heuristic và rủi ro theo persona, rồi chuyển các phát hiện thành hướng khắc phục có thể triển khai. Phù hợp nhất khi dùng sau /frontend-design, với ảnh chụp màn hình rõ ràng, mục tiêu cụ thể và bối cảnh người dùng đầy đủ.

teach-impeccable là kỹ năng thiết lập một lần, quét repo của bạn, chỉ hỏi những điểm còn thiếu về UX và thương hiệu, rồi lưu hướng dẫn thiết kế dùng lâu dài cho các phiên AI sau này.

ckm:ui-styling giúp bạn tạo giao diện người dùng chuẩn truy cập, sẵn sàng sản xuất với shadcn/ui, Tailwind CSS và thiết kế trực quan trên canvas. Phù hợp cho dự án React cần layout linh hoạt, component truy cập tốt, dark mode và hệ thống thiết kế nhất quán. Sử dụng ckm:ui-styling để thiết kế UI, tạo theme và prototype nhanh với hướng dẫn thực tế theo từng stack.

Tìm hiểu cách skill colorize bổ sung màu sắc có chủ đích cho các thiết kế UI xám, nhạt hoặc thiếu điểm nhấn. Hướng dẫn này trình bày phần chuẩn bị bắt buộc với frontend-design, bối cảnh cài đặt từ repository và cách áp dụng thực tế để cải thiện phân cấp, ngữ nghĩa và độ phù hợp với thương hiệu.

Skill gsap-core là hướng dẫn chính thức của GSAP về cách dùng API animation lõi, bao gồm `gsap.to()`, `from()`, `fromTo()`, easing, stagger, defaults và motion đáp ứng. Hãy dùng khi cần sử dụng gsap-core trong vanilla JS, React, Vue, Svelte, DOM, SVG và quy trình UI Design, đặc biệt khi bạn cần một hướng dẫn gsap-core đáng tin cậy.

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.

Skill critique hỗ trợ rà soát trang, luồng và component bằng quy trình audit UX có cấu trúc. Công cụ này kiểm tra các dấu hiệu AI-slop, hệ thống phân cấp, kiến trúc thông tin, tải nhận thức, heuristic và điểm ma sát theo persona, rồi chuyển phát hiện thành phản hồi có thể hành động. Phù hợp nhất khi dùng cùng ngữ cảnh frontend-design và teach-impeccable.

bolder là skill thiết kế UI giúp tăng sức nặng cho những giao diện nhạt nhòa hoặc quá an toàn bằng hệ thống phân cấp rõ hơn, độ tương phản mạnh hơn và cá tính hơn, nhưng vẫn giữ được tính dễ dùng. Phù hợp nhất khi dùng sau /frontend-design, và thêm /teach-impeccable nếu còn thiếu ngữ cảnh, trên một mục tiêu cụ thể như trang, section hoặc component.

arrange giúp cải thiện bố cục UI, khoảng cách và thứ bậc thị giác. Hãy dùng skill này để chẩn đoán màn hình quá chật, lưới lặp lại đơn điệu, nhóm nội dung yếu và bố cục thiếu điểm nhấn, rồi áp dụng cấu trúc rõ ràng hơn cùng nhịp khoảng cách hợp lý. Phù hợp nhất khi dùng trong pbakaus/impeccable sau /frontend-design, và đôi khi sau /teach-impeccable, để khai thác arrange hiệu quả hơn.

Dùng skill shadcn để kiểm tra ngữ cảnh dự án, chạy đúng lệnh CLI, cài component và ghép UI theo các mẫu đã được tài liệu hóa cho base vs radix, forms, theming và registries.

Skill accessibility hỗ trợ bạn thiết kế, triển khai và đánh giá UI có khả năng tiếp cận theo hướng dẫn WCAG 2.2 Level AA cho Web, iOS và Android. Bạn có thể dùng skill này để xác định vai trò thành phần, nhãn, trạng thái, hành vi focus và các accessibility traits, kèm hướng dẫn thực tế cho công việc UX Audit và rà soát triển khai.

asc-shots-pipeline là một skill tự động hóa ảnh chụp màn hình iOS cho UI Design, dùng xcodebuild, simctl, AXe, Koubou framing và asc upload. Skill này giúp đội ngũ xây dựng, điều hướng, đóng khung và xuất bản ảnh chụp màn hình từ một kế hoạch JSON có cấu trúc, giảm nhiều thao tác thủ công so với việc chụp trong simulator theo kiểu ad hoc.

fireworks-tech-graph là một skill tạo sơ đồ, giúp chuyển mô tả hệ thống thành các sơ đồ SVG và PNG sẵn sàng cho sản xuất. Skill này bao gồm hướng dẫn cài đặt, script hỗ trợ, bước kiểm tra, mẫu và tài liệu tham chiếu phong cách cho sơ đồ kỹ thuật, flowchart kiến trúc, sơ đồ trình tự và các quy trình trực quan liên quan.

Dùng wp-block-themes cho công việc với WordPress block theme: theme.json, templates, template parts, patterns, style variations và gỡ lỗi Site Editor. Kỹ năng này được xây dựng cho triển khai thiết kế, quy trình cài đặt và sử dụng, cũng như xử lý các vấn đề về thứ bậc style, ghi đè, cache và tùy biến của người dùng với ít phỏng đoán hơn.

Kỹ năng react:components chuyển các thiết kế Stitch thành các React components mô-đun cho Frontend Development với Vite. Kỹ năng này dùng retrieval, kiểm tra file cục bộ và xác thực dựa trên AST để đầu ra bám sát design tokens, các file hiện có và ràng buộc của dự án. Hãy dùng hướng dẫn react:components này khi bạn cần mã component có cấu trúc, chứ không chỉ một khối JSX dựng sẵn.

Skill threejs-postprocessing cho Phát triển Frontend: thêm các pipeline EffectComposer, bloom, depth of field, blur, color grading và các pass tùy chỉnh theo không gian màn hình. Dùng hướng dẫn này để thiết lập chuỗi render, tinh chỉnh hiệu ứng và tích hợp composer rendering vào một scene Three.js sẵn có.

polish skill giúp các nhóm thực hiện lượt rà soát chất lượng UI cuối cùng trước khi phát hành. Hãy dùng kỹ năng này để phát hiện các vấn đề về khoảng cách, căn chỉnh, trạng thái tương tác, nội dung chữ và các trường hợp biên sau khi giao diện đã hoàn thiện về chức năng và bối cảnh thiết kế đã được xác lập rõ ràng.

frontend-dev là một skill frontend-dev để xây dựng các trang web chỉn chu, sẵn sàng cho production, với UI cao cấp, chuyển động điện ảnh, media do AI tạo ra, nội dung thuyết phục và nghệ thuật tạo sinh. Hãy dùng nó cho landing page, website marketing, trang sản phẩm, dashboard và các công việc frontend khác khi thiết kế, nội dung và chi tiết triển khai cần luôn đồng bộ.