Components

ui-design-system là một Claude skill cho Design Systems, hỗ trợ tạo design tokens, color scales, typography, spacing, responsive rules, tài liệu component và tài sản developer handoff, kèm tài liệu tham chiếu và Python token generator để xuất JSON, CSS, SCSS hoặc bản tóm tắ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.

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

hig-components-search là một kỹ năng Apple HIG dành cho các quyết định thiết kế UI xoay quanh trường tìm kiếm, điều khiển trang và điều khiển đường dẫn. Hãy dùng khi bạn cần hướng dẫn rõ ràng về hành vi tìm kiếm, phạm vi tìm kiếm, phân trang và điều hướng theo phân cấp trong giao diện macOS hoặc iPadOS. Kỹ năng này đặc biệt hữu ích cho UX tìm kiếm, gợi ý tìm kiếm và điều hướng có cấu trúc.

hig-components-menus là một skill hướng dẫn theo Apple HIG về menu và các bề mặt lệnh điều khiển bằng nút bấm. Hãy dùng skill hig-components-menus khi cần quyết định thiết kế UI cho menu, menu ngữ cảnh, thanh công cụ, thanh menu và các điều khiển liên quan, đặc biệt khi bạn cần hướng dẫn cụ thể của Apple về vị trí đặt lệnh, cách nhóm lệnh và hành vi tương tác.

hig-components-layout là skill về điều hướng và bố cục theo Apple HIG, giúp chọn sidebar, split view, tab bar, danh sách, bảng, outline view, cột, panel, cửa sổ, scroll view, box và ornament. Dùng khi bạn cần quyết định thiết kế UI và cấu trúc ứng dụng với hướng dẫn rõ ràng, phù hợp nền tảng, thay vì lời khuyên bố cục responsive chung chung.

hig-components-dialogs là skill về các thành phần trình bày theo Apple HIG, giúp chọn giữa alerts, action sheets, popovers, sheets và digit entry views. Hãy dùng hướng dẫn hig-components-dialogs này khi bạn cần lựa chọn hộp thoại rõ ràng, bám sát Apple cho các luồng xác nhận, hành động có tính phá hủy, nội dung không theo kiểu modal và các quyết định thiết kế giao diện trên iOS, iPadOS, macOS, watchOS và visionOS.

Skill component-refactoring giúp bạn tái cấu trúc các React components có độ phức tạp cao trong frontend Dify bằng hướng dẫn dựa trên analyzer. Dùng khi `pnpm analyze-component --json` cho thấy độ phức tạp trên 50, số dòng trên 300, hoặc khi bạn cần tách code, trích xuất hook, hay một hướng dẫn component-refactoring an toàn hơn thay vì một bản viết lại chung chung.

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

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.

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