| name | screen-structure-checker |
| description | Skill kiểm tra cấu trúc thư mục screens theo kiến trúc quản lý tập trung. Sử dụng khi cần (1) audit cấu trúc screen mới tạo, (2) kiểm tra toàn bộ screens trong dự án, (3) tìm các vi phạm naming convention, (4) phát hiện file cần refactor do quá lớn. |
Screen Structure Checker
Skill này kiểm tra cấu trúc thư mục của các screen components để đảm bảo tuân thủ kiến trúc quản lý tập trung.
Mục Đích
- Audit cấu trúc: Quét và đánh giá cấu trúc thư mục screens
- Phát hiện vi phạm: Tìm các screen không tuân theo kiến trúc chuẩn
- Đề xuất cải thiện: Gợi ý cách sửa cho từng vi phạm
- Báo cáo chi tiết: Xuất kết quả dạng dễ đọc
Khi Nào Sử Dụng
Skill này nên được trigger khi:
- Người dùng hỏi về "kiểm tra cấu trúc screen"
- Người dùng yêu cầu "audit screens" hoặc "validate structure"
- Cần review code quality của screens
- Tạo screen mới và muốn kiểm tra đúng convention
Cách Sử Dụng
1. Kiểm Tra Một Screen Cụ Thể
Chạy script với đường dẫn đến thư mục screen:
python3 scripts/check_structure.py /path/to/screens/ScreenName
Output mẫu:
📊 Screen Structure Report: home-screen
========================================
✅ PASSED (4/6 rules)
├─ ✅ Has index.tsx or main component
├─ ✅ Has components/ directory
├─ ✅ Has hooks/ directory
├─ ⚠️ Missing types/ directory
├─ ✅ Correct naming convention
└─ ⚠️ 2 files exceed 200 lines
🔧 Recommendations:
1. Create types/ directory for TypeScript interfaces
2. Refactor index.tsx (476 lines) - consider splitting
2. Kiểm Tra Toàn Bộ Screens
python3 scripts/check_structure.py /path/to/screens --all
3. Xuất Báo Cáo JSON
python3 scripts/check_structure.py /path/to/screens/ScreenName --json
Các Rules Kiểm Tra
| Rule | Mô tả | Severity |
|---|
has_main_component | Có index.tsx hoặc {ScreenName}.tsx | ❌ Error |
has_components_dir | Có thư mục components/ | ⚠️ Warning |
has_hooks_dir | Có thư mục hooks/ | ⚠️ Warning |
has_types_dir | Có thư mục types/ | 💡 Info |
naming_convention | File/folder đúng convention | ❌ Error |
file_size_limit | Không có file > 200 lines | ⚠️ Warning |
barrel_exports | Có index.ts trong sub-dirs | 💡 Info |
Kiến Trúc Chuẩn
Tham khảo chi tiết tại references/architecture-rules.md.
{ScreenName}/
├── index.tsx # Component chính (BẮT BUỘC)
├── components/ # Sub-components
│ ├── cards/
│ ├── sections/
│ └── index.ts # Barrel export
├── hooks/ # Custom hooks
│ ├── useScreenData.ts
│ └── index.ts
├── types/ # TypeScript types
├── utils/ # Helper functions
├── constants/ # Constants
└── README.md # Documentation
Tích Hợp Với Workflow
Skill này hoạt động tốt với:
/implement-workflow: Verify screen mới tạo đúng cấu trúc/ultra-think: Phân tích chi tiết các vi phạm/ui-ux-pro-max: Đảm bảo components được tổ chức đúng
