fandhe-frontend is a frontend framework built in Rust. It covers SSR / SPA / SSG / View Transitions within a single framework, and handles everything up to deployment as a single executable (assuming Docker). Default escaping for text interpolation,unsafe elimination of (core / interactive は forbid(unsafe_code)), and upper-limit management of the number of dependent crates are fixed as product specifications—a design oriented toward reducing security risks in the AI era.
How to use it differently from other skills — This skill's Primitives (fandhe-frontend-headless-ui）・Themes（fandhe-frontend-pre-styled-ui) correspond to Ark UI / Chakra UI v3 in component names and anatomy composition, butAll Rust APIs and @ark-ui/react / @chakra-ui/react 's JS/TS API is a different thing (they cannot import each other). Primitives is a headless layer that provides only style-less anatomy and state machines (equivalent toskills/ark-ui/ ), and Themes is a thin styled wrapper layer that adds default CSS and variants to Primitives (equivalent toskills/chakra-ui/ ). Use skills/ark-ui/ skills/chakra-ui/ for investigating React/JS projects, and use this skill for investigating Rust projects. When investigating the backend (a Rust HTTP server framework), refer to skills/fandhe-backend/ .
Wireframes（fandhe-frontend-wireframe-ui) are low-fidelity wireframe parts, and are a different thing from Primitives / Themes (different crate, different API. Do not substitute them for each other even if the parts have similar names). Blocks is not a new API, but a completed section example that composes Themes / Primitives / core parts (the code originates from the unpublished crate docs-site and is intended to be copied and used).
Official documentation: https://fandhe-ai.github.io/fandhe-frontend/ / Repository: https://github.com/Fandhe-AI/fandhe-frontend
Target version
| Crate | Version |
|---|---|
| core | 0.4.3 |
| app | 0.2.6 |
| interactive | 0.2.7 |
| server | 0.2.6 |
| headless-ui | 0.69.2 |
| pre-styled-ui | 0.241.0 |
| wireframe-ui | 0.52.0 |
cli (fw) |
0.5.2 |
| wasm-full | 0.46.0 |
| animation | 0.17.1 |
The official docs site is as of commit 4c8c7d1 (2026-10-08).api/keyed-list-api.md と api/binding-api.md is outside the official docs index and originates from the crate source.
Directory structure
skills/fandhe-frontend/
SKILL.md
references/
getting-started/
README.md
introduction.md
quickstart.md
guides/
README.md
component-authoring.md
embedding-guide.md
view-transitions.md
npm-asset-build.md
no-js-ssg.md
wasm-full-features.md
pre-styled-ui-motion-feature.md
animation-core.md
animation.md
deployment.md
docs-site-external-repos.md
api/
README.md
component-api.md
app-api.md
interactive-api.md
hydration-api.md
hydration-state-format.md
router-path-matching.md
headless-ui-api.md
pre-styled-ui-api.md
pre-styled-recipe-api.md
server-api.md
keyed-list-api.md
binding-api.md
primitives/ # fandhe-frontend-headless-ui（Rust, unstyled）計 75 ページ
form/ # 25 ページ
README.md
checkbox.md
slider.md
color-picker.md
...
collections/ # 10 ページ
README.md
combobox.md
select.md
tree-view.md
...
overlays/ # 10 ページ
README.md
dialog.md
popover.md
toast.md
...
disclosure/ # 5 ページ
README.md
accordion.md
tabs.md
splitter.md
...
date-time/ # 4 ページ
README.md
calendar.md
date-input.md
date-picker.md
timer.md
navigation/ # 7 ページ
README.md
breadcrumb.md
navigation-menu.md
skip-nav.md
...
display/ # 14 ページ
README.md
avatar.md
progress.md
qr-code.md
...
themes/ # fandhe-frontend-pre-styled-ui（Rust, styled）計 123 ページ
forms/ # 29 ページ
README.md
button.md
checkbox.md
input.md
...
data-display/ # 22 ページ
README.md
card.md
table.md
badge.md
...
typography/ # 14 ページ
README.md
heading.md
text.md
link.md
...
charts/ # 12 ページ
README.md
charts.md
bar-chart.md
line-chart.md
...
collections/ # 11 ページ
README.md
select.md
menu.md
tree-view.md
...
overlays/ # 10 ページ
README.md
dialog.md
toast.md
tooltip.md
...
feedback/ # 6 ページ
README.md
alert.md
spinner.md
skeleton.md
...
navigation/ # 6 ページ
README.md
breadcrumb.md
navigation-menu.md
toolbar.md
...
disclosure/ # 5 ページ
README.md
accordion.md
scroll-area.md
splitter.md
tabs.md
...
date-time/ # 4 ページ
README.md
calendar.md
date-input.md
date-picker.md
timer.md
utilities/ # 4 ページ
README.md
download-trigger.md
separator.md
skip-nav.md
visually-hidden.md
wireframes/ # fandhe-frontend-wireframe-ui（Rust, 低忠実度ワイヤーフレーム）計 49 部品
foundations/ # common-types
README.md
common-types.md
layout/
README.md
overview.md
frame.md
stack.md
...
text/
README.md
overview.md
text.md
...
forms/
README.md
overview.md
button.md
input.md
...
navigation/
README.md
overview.md
tabs.md
...
overlay-feedback/
README.md
overview.md
modal.md
...
data-display/
README.md
overview.md
card-basic.md
...
media/
README.md
overview.md
image.md
...
blocks/ # Themes / Primitives / core の合成例。4 区分・計 65 カテゴリ・329 block
marketing/ # 23 カテゴリ
README.md
overview.md # 区分集約ページ
hero.md
pricing.md
...
application/ # 26 カテゴリ
README.md
overview.md
app-shell.md
dashboard.md
...
ecommerce/ # 12 カテゴリ
README.md
overview.md
cart.md
checkout.md
...
docs/ # 4 カテゴリ
README.md
overview.md
api-reference.md
code-block.md
docs-layout.md
example-preview.md
samples/
README.md
ssr-routing.md
ssg-blog.md
dist-server-docker.md
interactive-view-transitions.md
headless-pre-styled-ui.md
wireframe-ui.md
vercel-ssg.md
vercel-ssr.md
scripts/
README.md
install.md
cli.md
build.md
deploy.md
Search procedure
Derive the category from the task, and identify the target page in the category's README.md:
- Find the category corresponding to the task in the mapping table below (
primitives/*とthemes/*has duplicate component names, so distinguish by whether the style-less version of the Rust API is needed or the styled version is needed.wireframes/*is a separate crate for low-fidelity mocks, andblocks/*is a composition example of completed sections) - For that category,
references/{category}/README.mdto identify the target page - Read the target page's
.mdto check the details
Task → Category Mapping
| Task | Category | Reference README |
|---|---|---|
Want to know what fandhe-frontend is, its features and design philosophy / fw new shortest path in |
getting-started | references/getting-started/README.md |
| Macro-independent component description / embedding into existing HTML / enabling View Transitions / incorporating NPM static assets | guides | references/guides/README.md |
el/text/render/raw_html Core APIs such as, App/Loader/Router API, Hydration API and state format, public API and slot recipe of headless-ui/pre-styled-ui, keyed list diff (keyed/keyed_diff), attribute, text, and class bindings (bind/binding） |
api | references/api/README.md |
Constraints and alternative patterns in an SSG setup with zero client JS,fandhe-frontend-server の SSG API（generate/generate_with/generate_pages/generate_assets） |
guides / api | references/guides/README.md / references/api/README.md |
| I want to know the form-related Primitives (unstyled) APIs such as Checkbox, Slider, and Color Picker | primitives/form | references/primitives/form/README.md |
| I want to know the collection-related Primitives (unstyled) APIs such as Combobox, Select, and Tree View | primitives/collections | references/primitives/collections/README.md |
| I want to know the overlay-related Primitives (unstyled) APIs such as Dialog, Popover, and Toast | primitives/overlays | references/primitives/overlays/README.md |
| I want to know the disclosure-related Primitives (unstyled) APIs such as Accordion, Tabs, and Splitter | primitives/disclosure | references/primitives/disclosure/README.md |
| I want to know the date/time-related Primitives (unstyled) APIs such as Calendar, Date Picker, and Timer | primitives/date-time | references/primitives/date-time/README.md |
| I want to know the navigation-related Primitives (unstyled) APIs such as Breadcrumb, NavigationMenu, and SkipNav | primitives/navigation | references/primitives/navigation/README.md |
| I want to know the display-related Primitives (unstyled) APIs such as Avatar, Progress, and QrCode | primitives/display | references/primitives/display/README.md |
| I want to know the form-related Themes (styled) components such as Button, Checkbox, and Input | themes/forms | references/themes/forms/README.md |
| I want to know the data display-related Themes (styled) components such as Card, Table, Badge, and Avatar | themes/data-display | references/themes/data-display/README.md |
| I want to know the typography-related Themes (styled) components such as Heading, Text, Link, and List | themes/typography | references/themes/typography/README.md |
| I want to know the chart-related Themes (styled) components such as BarChart, LineChart, and PieChart | themes/charts | references/themes/charts/README.md |
| I want to know the collection-related Themes (styled) components such as Select, Menu, and Tree View | themes/collections | references/themes/collections/README.md |
| I want to know the overlay-related Themes (styled) components such as Dialog, Toast, and Tooltip | themes/overlays | references/themes/overlays/README.md |
| I want to know the feedback-related Themes (styled) components such as Alert, Spinner, and Skeleton | themes/feedback | references/themes/feedback/README.md |
| I want to know the navigation-related Themes (styled) components such as Breadcrumb, NavigationMenu, and Toolbar | themes/navigation | references/themes/navigation/README.md |
| I want to know the disclosure-related Themes (styled) components such as Accordion, Tabs, and Splitter | themes/disclosure | references/themes/disclosure/README.md |
| I want to know the date/time-related Themes (styled) components such as Calendar, Date Picker, and Timer | themes/date-time | references/themes/date-time/README.md |
| I want to know the utility-related Themes (styled) components such as Separator, SkipNav, and VisuallyHidden | themes/utilities | references/themes/utilities/README.md |
Animation (data-* attribute features andfandhe-animation core/Web adapters),pre-styled-ui の motion feature、wasm-full feature selection, and Vercel deployment (SSG / SSR) |
guides | references/guides/README.md |
Use the docs site generator (docs-site) in an external repository (introduction,nav.toml, brand key, GitHub Pages publishing) |
guides | references/guides/README.md |
| Look for completed section examples for LP and marketing sites (Hero / Pricing / CTA / FAQ / Footer, etc.) | blocks/marketing | references/blocks/marketing/README.md |
| Look for completed section examples for app screens (App Shell / Dashboard / Auth / Settings / Dialog, etc.) | blocks/application | references/blocks/application/README.md |
| Look for completed section examples for EC (Cart / Checkout / Filter / Category, etc.) | blocks/ecommerce | references/blocks/ecommerce/README.md |
| Look for completed section examples for documentation sites (API reference / Code block / Docs layout / Example preview) | blocks/docs | references/blocks/docs/README.md |
| Common types (common-types) when building wireframes (low-fidelity mocks) | wireframes/foundations | references/wireframes/foundations/README.md |
| Wireframe layout components (Frame / Stack / Grid / Divider) | wireframes/layout | references/wireframes/layout/README.md |
| Wireframe text-related components (Text / Paragraph / Link / Tag / RichText / Annotation) | wireframes/text | references/wireframes/text/README.md |
| Wireframe form-related components (Button / Input / Select / Checkbox / Slider, etc.) | wireframes/forms | references/wireframes/forms/README.md |
| Wireframe navigation-related components (Tabs / Menu / Breadcrumbs / Pagination / Accordion, etc.) | wireframes/navigation | references/wireframes/navigation/README.md |
| Wireframe overlay and feedback-related components (Modal / Toast / Tooltip / Alert / Spinner / Progress) | wireframes/overlay-feedback | references/wireframes/overlay-feedback/README.md |
| Wireframe data display-related components (Card / List / Stat / Avatar / Icon, etc.) | wireframes/data-display | references/wireframes/data-display/README.md |
| Wireframe media-related components (Image / Chart / Map / Table / Media) | wireframes/media | references/wireframes/media/README.md |
| I want to know about SSR routing, SSG static export, single binary distribution, state machine dispatch with View Transitions, typical usage across headless/pre-styled components, wireframe composition, and Vercel deployment examples | samples | samples/README.md |
fw I want to know about CLI/WASM toolchain installation, building, deployment (including Vercel), and pre-deployment verification commands |
scripts | scripts/README.md |