fp-react – skill Lập trình cho agent AI
Mẫu thực tế dùng fp-ts với React - hooks, state, form, lấy dữ liệu. Có ví dụ React theo từng phiên bản; cần kiểm tra ranh giới framework/client.
Cài skill fp-react 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/fp-react-19f04.tgz | tar xz -C ~/.claude/skills
Gọi trong Claude Code: /fp-react – 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/fp-react-19f04.tgz | tar xz -C ~/.codex/skills
Gọi trong Codex: $fp-react – 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/fp-react-19f04.tgz | tar xz -C ~/.hermes/skills
Gọi trong Hermes Agent: /fp-react – 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/fp-react-19f04.tgz | tar xz -C ~/.deepcode/skills
Gọi trong DeepSeek: /fp-react – 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.
Functional Programming in React
Practical patterns for React apps. Untested integration sketches; decode external data and verify lifecycle behavior.
---
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.
When to Use What
| Situation | Use |
|-----------|-----|
| Value might not exist | Option<T> |
| Operation might fail (sync) | Either<E, A> |
| Async operation might fail | TaskEither<E, A> |
| Need loading/error/success UI | RemoteData<E, A> |
| Form with multiple validations | Either with validation applicative |
| Dependency injection | Context + ReaderTaskEither |
| Prevent re-renders with fp-ts | useMemo or fp-ts-react-stable-hooks |
---
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
- fp-refactor – Hướng dẫn toàn diện refactor code TypeScript theo kiểu mệnh lệnh sang mẫu fp-ts
- fp-taskeither-ref – Tài liệu tham khảo nhanh về TaskEither. Dùng khi cần xử lý lỗi bất đồng bộ, gọi API hoặc…
- fp-ts-errors – Xử lý lỗi như giá trị bằng fp-ts Either và TaskEither để code TypeScript gọn gàng và dễ…
- fp-ts-pragmatic – Hướng dẫn thực tế, không biệt ngữ về lập trình hàm với fp-ts - cách tiếp cận 80/20 mang…
- fp-ts-react – Mẫu thực tế dùng fp-ts với React - hooks, state, form, lấy dữ liệu. Dùng khi xây dựng…
- framework-migration-code-migrate – Bạn là chuyên gia di chuyển code, chuyên chuyển đổi codebase giữa các framework, ngôn…
- framework-migration-deps-upgrade – Bạn là chuyên gia quản lý dependency, chuyên nâng cấp an toàn và từng bước các…
- self-eval – Đánh giá trung thực chất lượng công việc của AI bằng hệ thống chấm điểm hai trục. Dùng…