fp-ts-react
Build Type-Safe React Apps with fp-ts Patterns
Managing state, errors, and async operations in React often leads to bugs from null values or unhandled failures. This skill provides practical fp-ts patterns for type-safe state management, form validation with error accumulation, and reliable async data fetching.
Baixar o ZIP da skill
Upload no Claude
Vá em Configurações → Capacidades → Skills → Upload skill
Ative e comece a usar
Testar
A utilizar "fp-ts-react". User submits signup form with invalid email and short password
Resultado esperado:
- Form displays two error messages together:
- - Invalid email address
- - Password must be at least 8 characters
- Form data is not submitted until all validations pass
A utilizar "fp-ts-react". Dashboard component fetches user profile, stats, and notifications in parallel
Resultado esperado:
- Initial state shows loading spinner
- All three API requests execute concurrently
- Success state displays complete dashboard with user info, metrics, and notification list
- If any request fails, error state shows with retry option
Auditoria de Segurança
SeguroAll 91 static analysis findings are false positives. The SKILL.md file is documentation containing TypeScript code examples in markdown format. Detected 'external_commands' are markdown backtick code blocks, not shell execution. Network findings reference example URLs in documentation. No executable code or actual security risks present.
Pontuação de qualidade
O Que Você Pode Construir
Form Validation with Error Collection
Validate signup forms showing all field errors at once instead of one at a time. Use Either with applicative validation to collect errors from email, password, and name fields simultaneously.
API Data Fetching with Proper State Handling
Replace boolean flags (isLoading, isError, data) with RemoteData type that enforces exactly four states: NotAsked, Loading, Failure, Success. Eliminates impossible state combinations.
Type-Safe Optional User Data
Handle logged-in vs logged-out UI states using Option type instead of null checks. Pattern match on user presence for cleaner conditional rendering without undefined guard clauses.
Tente Estes Prompts
Show me how to use fp-ts Option type in React to handle a user profile that may not be loaded yet. Include a useState hook and pattern match with O.match for rendering different UI states.
Create a signup form validation using fp-ts Either that shows all validation errors at once. Validate email format, password length (8+ chars), and required name field. Use sequenceS to combine validators.
Write a useFetch custom hook using fp-ts TaskEither that wraps the fetch API. Handle HTTP errors, loading states, and provide type-safe results. Show how to chain multiple API calls with flatMap.
Implement the RemoteData pattern for React with four states: NotAsked, Loading, Failure, Success. Create a fold function to pattern match all states and show a complete UserProfile component that fetches data on mount.
Melhores Práticas
- Use useMemo to prevent unnecessary re-renders when creating fp-ts values like O.some() that generate new references each render
- Prefer RemoteData over separate loading/error/data booleans to eliminate impossible state combinations at the type level
- Use Either with applicative validation (sequenceS) for forms to show all field errors instead of failing on first error
Evitar
- Do not use fp-ts Option Either TaskEither as React dependency array values directly without memoization - they create new references every render
- Avoid mixing null undefined checks with Option in the same codebase - commit fully to fp-ts patterns for consistency
- Do not use TaskEither for synchronous operations - reserve it for async operations that might fail, use Either for sync validation