📄️ Phần 1 - React Best Practices
Tổng hợp 53 guideline React best practices cho Agent Skills - State, Effects, Rendering, Components, Props, Events, Forms, Hooks, Context, Performance, Testing, Accessibility, TypeScript.
📄️ Phần 2 - React Performance Best Practices
Checklist tối ưu hiệu năng React/Next.js – async waterfall, bundle size, caching, rerender, rendering, JS perf – trích từ react-performance.csv cho Agent Skills.
📄️ Phần 3 - Next.js Best Practices
Tổng hợp guideline Next.js best practices cho Agent Skills – Routing, Rendering, Data Fetching, Images, Fonts, Metadata, API, Middleware, Environment, Performance, Security.
📄️ Phần 4 - HTML + Tailwind Best Practices
Tổng hợp guideline HTML + Tailwind CSS best practices cho Agent Skills – Animation, Layout, Images, Typography, Colors, Spacing, Forms, Responsive, Buttons, Cards, Accessibility, Performance, Plugins, Interactivity, Customization.
📄️ Phần 5 - React Native Best Practices
Tổng hợp guideline React Native best practices cho Agent Skills – Components, Styling, Navigation, State, Lists, Performance, Images, Forms, Touch, Animation, Async, Accessibility, Testing, Native.
📄️ Phần 6 - Web Interface Best Practices
Tổng hợp web interface best practices cho Agent Skills – Accessibility, Focus, Forms, State & URL, Performance, Typography, Anti-patterns.
📄️ Phần 7 - UX Best Practices
Tổng hợp UX guidelines chung cho Agent Skills – Navigation, Animation, Layout, Touch, Interaction, Accessibility, Performance, Forms, Responsive, Typography, Feedback, Content, Onboarding, Search, Data Entry, AI Interaction, Spatial UI, Sustainability.
📄️ Phần 8 - Chart Selection Guide
Hướng dẫn chọn loại chart phù hợp (line, bar, pie, heatmap, map, funnel, gauge, treemap, network...) theo kiểu dữ liệu, kèm màu, accessibility & library gợi ý.
📄️ Phần 9 - Icon System Cheatsheet (Lucide)
Cheatsheet icon Lucide thường dùng (navigation, action, status, commerce, data, security...) + import code + lưu ý accessibility cho Agent Skills.
📄️ Phần 10 - Typography & Font Pairings
Gợi ý font pairing theo loại sản phẩm (SaaS, fintech, editorial, devtools, e-commerce, VN/i18n...) + snippet Google Fonts / Tailwind để Agent chọn nhanh.
📄️ Phần 11 - UI Color Palettes by Product Type
Bảng màu gợi ý cho từng loại sản phẩm (SaaS, E‑commerce, Healthcare, Fintech, Education, Dashboard, Landing page, Entertainment, v.v.) dùng cho Agent Skills.
📄️ Phần 12 - UI Styles & Design Systems
Bản đồ các style UI (Minimalism, Neumorphism, Glassmorphism, Brutalism, Dark Mode, Claymorphism, Aurora, Flat, Accessible & Ethical, Motion-Driven, Hero-Centric, Conversion-Optimized, Data-Dense...) để Agent chọn đúng phong cách cho từng bài toán.
📄️ Phần 13 - UI Reasoning & Patterns
Tổng hợp UI reasoning patterns theo ngữ cảnh sản phẩm (SaaS, E‑commerce, Healthcare, Fintech, Education, Dashboard...) để chọn layout, màu sắc, typography, hiệu ứng và ưu tiên thiết kế phù hợp.
📄️ Phần 14 - Landing Page Patterns
Thư viện pattern landing page (Hero, pricing, waitlist, event, marketplace, newsletter, AI landing...) trích từ landing.csv để Agent chọn cấu trúc section & CTA.
📄️ Phần 15 - Product UX Recipes
Bản đồ từ loại sản phẩm (SaaS, fintech, e-commerce, healthcare, education...) sang combo Style + Landing Pattern + Dashboard + Palette để Agent chọn nhanh.