fandhe-frontend

Name: fandhe-frontend
Author: fandhe-ai

github.com/fandhe-ai开发4202 次安装4 天前更新

关于 fandhe-frontend

fandhe-frontend 是 Rust 前端框架，覆盖 SSR、SPA、SSG 和 View Transitions，并支持构建为单个可执行文件部署。该参考技能按任务索引框架、组件 API、线框组件及示例文档，适用于 Rust 前端开发者。

主要功能

01支持 SSR、SPA、SSG 与 View Transitions
02单个可执行文件部署
03提供 headless 与预样式组件
04包含线框组件及页面区块示例
05按主题索引 API 与指南

适用场景

01搭建 SSR 或 SSG 前端项目
02查找表单、导航及覆盖层组件 API
03构建低保真界面线框
04参考营销页或应用页面区块

安装

复制下面的命令，在终端中运行。

$npx skills add https://github.com/fandhe-ai/agent-reference-skills --skill fandhe-frontend

安装后在 Claude Code 中输入/fandhe-frontend确认已加载。

包含的文件

除 SKILL.md 外，安装时一起下载的参考资料和脚本。

references/api/

app-api.md

binding-api.md

component-api.md

headless-ui-api.md

hydration-api.md

hydration-state-format.md

interactive-api.md

keyed-list-api.md

pre-styled-recipe-api.md

pre-styled-ui-api.md

README.md

router-path-matching.md

server-api.md

references/blocks/application/

action-panel.md

ai-chat.md

app-shell.md

auth.md

card-heading.md

card.md

chart.md

command-palette.md

dashboard.md

description-list.md

dialog.md

empty-state.md

feed.md

form-layout.md

grid-list.md

help-center.md

list.md

详细介绍

fandhe-frontend

fandhe-frontend は Rust 製フロントエンドフレームワーク。SSR / SPA / SSG / View Transitions を単一フレームワークで網羅し、単一実行ファイル（Docker 想定）でのデプロイまでを担う。テキスト補間の既定エスケープ・unsafe の排除（core / interactive は forbid(unsafe_code)）・依存クレート数の上限管理を製品仕様として固定した、AI 時代のセキュリティリスク低減志向の設計。

他スキルとの使い分け — 本スキルの Primitives（fandhe-frontend-headless-ui）・Themes（fandhe-frontend-pre-styled-ui）はコンポーネント名・anatomy 構成が Ark UI / Chakra UI v3 と対応するが、すべて Rust API であり @ark-ui/react / @chakra-ui/react の JS/TS API とは別物（相互に import できない）。Primitives はスタイル無しの anatomy と状態機械のみを提供する headless 層（skills/ark-ui/ 相当）、Themes は Primitives に既定 CSS と variant を足した薄い styled ラッパー層（skills/chakra-ui/ 相当）。React/JS プロジェクトの調査には skills/ark-ui/ skills/chakra-ui/ を、Rust プロジェクトの調査には本スキルを使うこと。バックエンド（Rust 製 HTTP サーバーフレームワーク）を調べる場合は skills/fandhe-backend/ を参照すること。

Wireframes（fandhe-frontend-wireframe-ui）は低忠実度ワイヤーフレーム部品であり、Primitives / Themes とは別物（別クレート・別 API。名前が近い部品でも相互に置き換えない）。Blocks は新規 API ではなく、Themes / Primitives / core 部品を合成した完成済みセクション例（コードは未公開 crate docs-site 由来でコピー利用前提）。

公式ドキュメント: https://fandhe-ai.github.io/fandhe-frontend/ / リポジトリ: https://github.com/Fandhe-AI/fandhe-frontend

対象バージョン

クレート	バージョン
core	0.4.3
app	0.2.8
interactive	0.2.7
server	0.2.8
headless-ui	0.73.0
pre-styled-ui	0.245.0
wireframe-ui	0.52.0
cli (`fw`)	0.5.2
wasm-full	0.48.1
animation	0.17.1

公式 docs サイトは commit 7256504 時点（2026-10-16）。api/keyed-list-api.md と api/binding-api.md は公式 docs 索引外で、crate ソース由来。

ディレクトリ構成

skills/fandhe-frontend/
  SKILL.md
  references/
    getting-started/
      README.md
      introduction.md
      quickstart.md
    guides/
      README.md
      component-authoring.md
      embedding-guide.md
      ssr-embedding.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 カテゴリ・335 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

探索手順

タスクからカテゴリを引き、カテゴリの README.md で目的のページを特定する:

下記マッピング表でタスクに対応するカテゴリを探す（primitives/* と themes/* はコンポーネント名が重複するため、Rust API のスタイル無し版が必要か styled 版が必要かで区別する。wireframes/* は低忠実度モック用の別クレート、blocks/* は完成済みセクションの合成例）
そのカテゴリの references/{category}/README.md を参照して目的のページを特定する
該当ページの .md を Read して詳細を確認する

タスク → カテゴリマッピング

任务	类别	参考 README
了解 fandhe-frontend 是什么、其特点与设计理念 / 使用 `fw new` 的最短路径	getting-started	references/getting-started/README.md
不依赖宏的组件编写 / 嵌入现有 HTML / 从现有服务（如 fandhe-backend）的处理程序中集成 SSR（`Document` 构建器、CSP 元标签、`ViewTransitions`）/ 启用 View Transitions / 导入 NPM 静态资源	guides	references/guides/README.md
了解 `el`/`text`/`render`/`raw_html` 等核心 API、App/Loader/Router API、`Document` 构建器、Hydration API 与状态格式、headless-ui/pre-styled-ui 的公开 API 与 slot recipe、keyed 列表 diff（`keyed`/`keyed_diff`）、属性、文本与 class 绑定（`bind`/`binding`）	api	references/api/README.md
了解客户端 JS 为零的 SSG 配置中的限制与替代模式、`fandhe-frontend-server` 的 SSG API（`generate`/`generate_with`/`generate_pages`/`generate_assets`）	guides / api	references/guides/README.md / references/api/README.md
了解 Checkbox、Slider、Color Picker 等表单类 Primitives（unstyled）API、类型化 autocomplete（`AutocompleteToken`・passkey 的 `webauthn`）	primitives/form	references/primitives/form/README.md
了解 Combobox、Select、Tree View 等集合类 Primitives（unstyled）API	primitives/collections	references/primitives/collections/README.md
了解 Dialog、Popover、Toast 等叠加层类 Primitives（unstyled）API	primitives/overlays	references/primitives/overlays/README.md
了解 Accordion、Tabs、Splitter 等折叠类 Primitives（unstyled）API	primitives/disclosure	references/primitives/disclosure/README.md
了解 Calendar、Date Picker、Timer 等日期时间类 Primitives（unstyled）API	primitives/date-time	references/primitives/date-time/README.md
了解 Breadcrumb、NavigationMenu、SkipNav 等导航类 Primitives（unstyled）API	primitives/navigation	references/primitives/navigation/README.md
了解 Avatar、Progress、QrCode 等展示类 Primitives（unstyled）API	primitives/display	references/primitives/display/README.md
了解 Button、Checkbox、Input 等表单类 Themes（styled）组件、类型化 autocomplete（`AutocompleteToken`・passkey 的 `webauthn`）	themes/forms	references/themes/forms/README.md
了解 Card、Table、Badge、Avatar 等数据展示类 Themes（styled）组件	themes/data-display	references/themes/data-display/README.md
了解 Heading、Text、Link、List 等排版类 Themes（styled）组件	themes/typography	references/themes/typography/README.md
了解 BarChart、LineChart、PieChart 等图表类 Themes（styled）组件	themes/charts	references/themes/charts/README.md
了解 Select、Menu、Tree View 等集合类 Themes（styled）组件	themes/collections	references/themes/collections/README.md
了解 Dialog、Toast、Tooltip 等叠加层类 Themes（styled）组件	themes/overlays	references/themes/overlays/README.md
了解 Alert、Spinner、Skeleton 等反馈类 Themes（styled）组件	themes/feedback	references/themes/feedback/README.md
了解 Breadcrumb、NavigationMenu、Toolbar 等导航类 Themes（styled）组件	themes/navigation	references/themes/navigation/README.md
了解 Accordion、Tabs、Splitter 等折叠类 Themes（styled）组件	themes/disclosure	references/themes/disclosure/README.md
了解 Calendar、Date Picker、Timer 等日期时间类 Themes（styled）组件	themes/date-time	references/themes/date-time/README.md
了解 Separator、SkipNav、VisuallyHidden 等实用工具类 Themes（styled）组件	themes/utilities	references/themes/utilities/README.md
了解动画（`data-*` 属性功能・`fandhe-animation` 核心/Web 适配器）、`pre-styled-ui` 的 `motion` feature、`wasm-full` 的 feature 选择、Vercel 部署（SSG / SSR）	guides	references/guides/README.md
在外部仓库中使用 docs 网站生成器（`docs-site`）（安装・`nav.toml`・品牌键・发布到 GitHub Pages）	guides	references/guides/README.md
查找 LP、营销网站的完整区块示例（Hero / Pricing / CTA / FAQ / Footer 等）	blocks/marketing	references/blocks/marketing/README.md
查找应用界面的完整区块示例（App Shell / Dashboard / Auth / Settings / Dialog 等）	blocks/application	references/blocks/application/README.md
查找电商的完整区块示例（Cart / Checkout / Filter / Category 等）	blocks/ecommerce	references/blocks/ecommerce/README.md
查找文档网站的完整区块示例（API reference / Code block / Docs layout / Example preview）	blocks/docs	references/blocks/docs/README.md
了解构建线框图（低保真模型）时使用的通用类型（common-types）	wireframes/foundations	references/wireframes/foundations/README.md
了解线框图的布局组件（Frame / Stack / Grid / Divider）	wireframes/layout	references/wireframes/layout/README.md
了解线框图的文本类组件（Text / Paragraph / Link / Tag / RichText / Annotation）	wireframes/text	references/wireframes/text/README.md
了解线框图的表单类组件（Button / Input / Select / Checkbox / Slider 等）	wireframes/forms	references/wireframes/forms/README.md
了解线框图的导航类组件（Tabs / Menu / Breadcrumbs / Pagination / Accordion 等）	wireframes/navigation	references/wireframes/navigation/README.md
了解线框图的叠加层与反馈类组件（Modal / Toast / Tooltip / Alert / Spinner / Progress）	wireframes/overlay-feedback	references/wireframes/overlay-feedback/README.md
了解线框图的数据展示类组件（Card / List / Stat / Avatar / Icon 等）	wireframes/data-display	references/wireframes/data-display/README.md
了解线框图的媒体类组件（Image / Chart / Map / Table / Media）	wireframes/media	references/wireframes/media/README.md
了解 SSR 路由、SSG 静态导出、单一二进制文件分发、带有 View Transitions 的状态机 dispatch、跨 headless/pre-styled 组件的典型用法、线框图构建、Vercel 部署示例	samples	samples/README.md
了解 `fw` CLI・WASM 工具链安装、构建、部署（包括 Vercel）以及部署前验证命令	scripts	scripts/README.md

支持 Markdown

登录后评论

基本信息

作者: fandhe-ai
仓库: fandhe-ai/agent-reference-skills
分类: 开发
安装次数: 202
GitHub Stars: 4

报告问题

fandhe-frontend

关于 fandhe-frontend

主要功能

适用场景

安装

包含的文件

详细介绍

fandhe-frontend

対象バージョン

ディレクトリ構成

探索手順

タスク → カテゴリ マッピング

评论

タスク → カテゴリマッピング