How does it handle API calls and loading states?

It uses the RemoteData pattern, which explicitly represents four states: NotAsked, Loading, Success, and Failure, reducing runtime errors during async operations.

Which UI libraries are used for styling?

The skill utilizes TailwindCSS and DaisyUI to provide a modern, utility-first approach to styling components.

What architecture does this skill follow?

It implements the Model-View-Update (MVU) architecture, also known as the Elm architecture, which ensures predictable state management through pure functions.

Where does the skill write the F# code?

State management logic (Model, Msg, Update) is typically placed in src/Client/State.fs, while UI components are placed in src/Client/View.fs.

F# Elmish & Feliz Frontend

Name: F# Elmish & Feliz Frontend
Author: heimeshoff

byheimeshoff

•

デザインツール

Implements production-ready F# frontend interfaces using the Elmish MVU architecture and Feliz React components.

This skill provides a structured framework for building F# web frontends by leveraging the robust Model-View-Update (MVU) pattern. It automates the creation of type-safe application states, message-driven updates, and responsive UI components using Feliz and TailwindCSS. By incorporating the RemoteData pattern for asynchronous operations, it ensures that API interactions are handled gracefully with explicit states for loading, success, and failure, making it ideal for developers building complex, functional web applications.

主な機能

01Scaffolds Model-View-Update (MVU) architecture for predictable state management

02Implements the RemoteData pattern for robust asynchronous API handling

03Creates type-safe React components using the Feliz DSL

04Integrates TailwindCSS and DaisyUI for modern, responsive styling

05Separates state logic and view definitions into standardized project files

061 GitHub stars

ユースケース

01Building interactive data-driven forms and dashboards in F#

02Managing complex client-side state transitions with pure functional updates

03Adding new UI features or components to an existing Fable/Elmish project

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add heimeshoff/cinemarco fsharp-frontend

For use in Claude.ai and ChatGPT

Download Skill