Một triết lý CSS tối giản và bộ kỹ năng được thiết kế để tạo ra các kiểu dáng hiệu quả, linh hoạt bằng cách tận dụng các khả năng gốc của trình duyệt và các thuộc tính logic hiện đại.
Cài đặt & Tải xuống
1. ClawHub CLI
Cách nhanh nhất để cài đặt kỹ năng trực tiếp từ thư viện.
npx clawhub@latest install tiny-css
2. Cài đặt Thủ công
Sao chép thư mục kỹ năng vào một trong những vị trí sau
~/.openclaw/skills/ <project>/skills/ Ưu tiên: Không gian làm việc > Cục bộ > Gói sẵn
3. Cài đặt Prompt
Sao chép prompt này vào OpenClaw để tự động cài đặt.
Giúp tôi cài đặt tiny-css bằng Clawhub. Nếu Clawhub chưa
Bạn muốn tải xuống?
Nhận các tệp kỹ năng gốc dưới dạng lưu trữ ZIP.
tiny-css là gì?
tiny-css là một phương pháp chuyên biệt trong Openclaw Skills được thiết kế cho các nhà phát triển coi trọng tốc độ, hiệu suất và sự đơn giản. Nó loại bỏ các bản CSS reset nặng nề và các hệ thống thiết kế phức tạp, thay vào đó ủng hộ tâm thế 'tin tưởng trình duyệt'. Kỹ năng này được tối ưu hóa cho các trang web cá nhân, bản thử nghiệm và trang đích nơi việc duy trì mã nguồn tinh gọn là ưu tiên hàng đầu.
Bằng cách sử dụng các tính năng hiện đại như color-scheme, các thuộc tính logic và hành vi ngắt dòng văn bản gốc, tiny-css đảm bảo các dự án của bạn có thể truy cập được, phản hồi tốt và đa ngôn ngữ với lượng mã tối thiểu tuyệt đối. Nó là sự đối lập hoàn hảo với các framework cồng kềnh, tập trung vào khả năng phục hồi và sở thích của người dùng.
Trường hợp sử dụng tiny-css
- Xây dựng danh mục đầu tư cá nhân và blog nhẹ.
- Tạo bản mẫu nhanh các thành phần UI mà không tốn chi phí cho một hệ thống thiết kế đầy đủ.
- Tạo các trang đích hiệu suất cao cho các chiến dịch marketing.
- Hiện đại hóa các dự án quy mô nhỏ cũ với các thuộc tính logic và phông chữ hệ thống.
- Phát triển nội dung web có khả năng truy cập tôn trọng cài đặt hệ thống do người dùng xác định.
Cách thức hoạt động của tiny-css
- Phân tích phạm vi dự án để đảm bảo nó phù hợp với các tiêu chí tối giản của kỹ năng.
- Áp dụng các cấu hình cấp gốc cho color-scheme và kiểu chữ hệ thống để tận dụng các mặc định của trình duyệt.
- Triển khai logic ngắt dòng văn bản bằng cách sử dụng các giá trị balance và pretty để tối ưu hóa khả năng đọc.
- Thay thế các thuộc tính vật lý (margin-left, top) bằng các thuộc tính logic (margin-inline, block) để đảm bảo hỗ trợ đa ngôn ngữ.
- Tích hợp media queries cho khả năng truy cập, bao gồm hỗ trợ độ tương phản cao và giảm chuyển động.
- Tạo một tệp CSS duy nhất, được tối ưu hóa cao, không yêu cầu JavaScript cho các chức năng bố cục cốt lõi.
Cài đặt tiny-css
Để triển khai tiny-css bằng Openclaw Skills, bạn có thể khởi tạo biểu định kiểu của mình bằng mẫu cốt lõi sau:
# Navigate to your project directory
touch style.css
Thêm cơ sở tối giản vào dự án của bạn:
:root {
color-scheme: light dark;
accent-color: #0066cc;
font-family: system-ui;
}
:where(img, svg, video, iframe) {
max-inline-size: 100%;
block-size: auto;
}
Lược đồ dữ liệu & Hệ thống phân loại của tiny-css
Kỹ năng tiny-css tuân theo cấu trúc dữ liệu tinh gọn để duy trì hiệu suất cao và bảo trì thấp. Nó tổ chức dữ liệu định dạng như sau:
| Component | Implementation Strategy |
|---|---|
| Biến Toàn cục | Được định nghĩa trong :root bằng các biến CSS gốc cho màu nhấn. |
| Bố cục | Được điều khiển bởi các thuộc tính logic (inline-size, padding-block) để có tính linh hoạt. |
| Kiểu chữ | Phông chữ hệ thống và các thuộc tính text-wrap gốc giúp không tốn chi phí tải. |
| Tài nguyên | SVGs sử dụng currentColor để kế thừa ngữ cảnh mà không cần thêm class. |
| Khả năng truy cập | Các tùy chọn do media query điều khiển cho chuyển động và màu sắc bắt buộc. |
Tính năng Nâng cao của tiny-css
- Cuộn mượt có điều kiện dựa trên tùy chọn chuyển động của người dùng.
- Tích hợp chế độ tối cấp hệ thống tự động bằng thuộc tính color-scheme.
- Hỗ trợ chế độ Forced-colors cho khả năng hiển thị độ tương phản cao trên Windows.
- Bố cục sẵn sàng cho quốc tế hóa bằng cách sử dụng CSS Logical Properties.
- Phương pháp zero-reset để giảm thời gian tính toán lại của trình duyệt.
SKILL.md
Đang tải
Các kỹ năng Openclaw liên quan
FreeGuard VPN CLI Manager
Tự động hóa quy trình làm việc VPN của bạn với FreeGuard CLI để quản lý mạng dựa trên terminal an toàn.
Analyzer Agent
Một kỹ năng phân tích kỹ thuật chuyên gia giúp khám phá và lập bản đồ cấu trúc, mẫu và quy ước dự án hiện có để cung cấp ngữ cảnh cho các tác nhân hạ nguồn.
Phân tích lưu lượng mạng Wireshark
Một kỹ năng phân tích mạng toàn diện để thu thập, lọc và kiểm tra các gói tin nhằm giải quyết các vấn đề kết nối và điều tra các sự cố bảo mật.
Elite Frontend Design
Một kỹ năng kỹ thuật UI cao cấp tạo ra mã frontend tinh vi, thẩm mỹ trong khi tránh rõ rệt các mẫu thiết kế kiểu AI phổ thông.
Aptos TypeScript SDK Orchestrator
Một bộ điều phối toàn diện để tích hợp Aptos TypeScript SDK chính thức vào các ứng dụng phi tập trung fullstack.
Habit Tracker Companion
Một trợ lý xây dựng thói quen tự động được thiết kế để giúp người dùng duy trì sự nhất quán thông qua điểm danh, thống kê và các cột mốc động lực.
Chuyên gia Sao chép & Đồng bộ hóa Kho lưu trữ GitHub
Một hướng dẫn hiệu suất cao để làm chủ quản lý kho lưu trữ Git, từ xác thực đến các chiến lược đồng bộ hóa nâng cao.
Đặc sắc*
