fp-ts-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. Dùng khi xây dựng ứng dụng React theo mẫu lập trình hàm. Có mẫu React theo từng phiên bản cần kiểm tra lại với dự án.
Cài skill fp-ts-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-ts-react-def21.tgz | tar xz -C ~/.claude/skills
Gọi trong Claude Code: /fp-ts-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-ts-react-def21.tgz | tar xz -C ~/.codex/skills
Gọi trong Codex: $fp-ts-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-ts-react-def21.tgz | tar xz -C ~/.hermes/skills
Gọi trong Hermes Agent: /fp-ts-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-ts-react-def21.tgz | tar xz -C ~/.deepcode/skills
Gọi trong DeepSeek: /fp-ts-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; validate external JSON and request 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 This Skill
- When building React apps with fp-ts for type-safe state management
- When handling loading/error/success states in data fetching
- When implementing form validation with error accumulation
- When using React 18/19 or Next.js 14/15 with functional patterns
---
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
- 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…
- frontend-architecture – Kiến trúc frontend độc lập framework, áp dụng cho mọi ứng dụng React hoặc React Native…
- frontend-developer – Xây dựng component React, triển khai bố cục responsive và xử lý quản lý state phía…
- senior-architect – Skill này nên được dùng khi người dùng yêu cầu “thiết kế kiến trúc hệ thống”, “đánh giá…
- senior-backend – Thiết kế và triển khai hệ thống backend gồm REST API, microservices, kiến trúc cơ sở dữ…
- fsi-compliance-checker – Ánh xạ thay đổi mã, kiến trúc và hạ tầng sang các mã kiểm soát cụ thể trong PCI-DSS…