frontend-ui-dark-ts – skill Thiết kế & UI cho agent AI
Hệ thống giao diện React theo chủ đề tối hiện đại, dùng Tailwind CSS và Framer Motion. Thiết kế cho dashboard, trang quản trị và ứng dụng nhiều dữ liệu, với hiệu ứng glassmorphism và animation tinh tế.
Cài skill frontend-ui-dark-ts bằng một lệnh
Chọn công cụ bạn đang dùng, copy lệnh và dán vào terminal. Skill sẽ nằm trong thư mục skills của công cụ đó và sẵn sàng dùng ở phiên làm việc tiếp theo.
Claude Code
mkdir -p ~/.claude/skills && curl -fsSL https://skill.dn1nguoi.com/z/frontend-ui-dark-ts-0fbae.tgz | tar xz -C ~/.claude/skills
Gọi trong Claude Code: /frontend-ui-dark-ts – rồi mô tả công việc bạn muốn làm.
Codex
mkdir -p ~/.codex/skills && curl -fsSL https://skill.dn1nguoi.com/z/frontend-ui-dark-ts-0fbae.tgz | tar xz -C ~/.codex/skills
Gọi trong Codex: $frontend-ui-dark-ts – rồi mô tả công việc bạn muốn làm.
Hermes Agent
mkdir -p ~/.hermes/skills && curl -fsSL https://skill.dn1nguoi.com/z/frontend-ui-dark-ts-0fbae.tgz | tar xz -C ~/.hermes/skills
Gọi trong Hermes Agent: /frontend-ui-dark-ts – rồi mô tả công việc bạn muốn làm.
DeepSeek
mkdir -p ~/.deepcode/skills && curl -fsSL https://skill.dn1nguoi.com/z/frontend-ui-dark-ts-0fbae.tgz | tar xz -C ~/.deepcode/skills
Gọi trong DeepSeek: /frontend-ui-dark-ts – rồi mô tả công việc bạn muốn làm.
Nội dung SKILL.md
Nội dung SKILL.md gốc bằng tiếng Anh.
Frontend UI Dark Theme (TypeScript)
A modern dark-themed React UI system using Tailwind CSS and Framer Motion. Designed for dashboards, admin panels, and data-rich applications with glassmorphism effects and tasteful animations.
Detailed Guide
Read [the detailed guide](references/detailed-guide.md) before executing this skill. It retains the complete procedure and reference material. Treat its safety, prerequisites, and validation requirements as mandatory. For focused work, load the relevant sections; for end-to-end work, read the guide completely.
Color Usage
| Use Case | Color | Class |
|----------|-------|-------|
| Primary action | Brand purple | bg-brand text-white |
| Primary hover | Brand hover | hover:bg-brand-hover |
| Page background | Neutral bg1 | bg-neutral-bg1 |
| Card background | Neutral bg2 | bg-neutral-bg2 |
| Elevated surface | Neutral bg3 | bg-neutral-bg3 |
| Input background | Neutral bg2 | bg-neutral-bg2 |
| Input focus | Neutral bg3 | focus:bg-neutral-bg3 |
| Border default | Border default | border-border |
| Border subtle | Border subtle | border-border-subtle |
| Success | Status success | text-status-success |
| Warning | Status warning | text-status-warning |
| Error | Status error | text-status-error |
When to Use
This skill is applicable to execute the workflow or actions described in the overview.
Limitations
- Use this skill only when the task clearly matches the scope described above.
- Do not treat the output as a substitute for environment-specific validation, testing, or expert review.
- Stop and ask for clarification if required inputs, permissions, safety boundaries, or success criteria are missing.
Skill liên quan
- frontend-ui-engineering – Xây dựng giao diện đạt chất lượng production. Dùng khi tạo hoặc chỉnh sửa giao diện…
- frutiger-aero – Hướng dẫn triển khai web và app theo phong cách Frutiger Aero. Kích hoạt khi người dùng…
- game-art – Nguyên tắc nghệ thuật game. Lựa chọn phong cách hình ảnh, quy trình tài nguyên, quy…
- game-audio – Nguyên tắc âm thanh game. Thiết kế âm thanh, tích hợp nhạc nền, hệ thống âm thanh thích…
- senior-computer-vision – Skill kỹ thuật thị giác máy tính cho phát hiện đối tượng, phân đoạn ảnh và hệ thống thị…
- game-design – Nguyên tắc thiết kế game. Cấu trúc GDD, cân bằng game, tâm lý người chơi, hệ thống tiến…
- game-development – Bộ điều phối phát triển game. Định tuyến theo nền tảng, chiều không gian và mức phù hợp…
- generate-nanobanana – Tạo và chỉnh sửa hình ảnh/video bằng model media của Gemini (Nano Banana 2/Pro, Gemini…