fandhe-frontend

Name: fandhe-frontend
Author: fandhe-ai

github.com/fandhe-aiDevelopment4202 installsUpdated 4d ago

About fandhe-frontend

fandhe-frontend is a Rust frontend framework covering SSR, SPA, SSG, and View Transitions, with deployment as a single executable. This reference skill indexes framework guides, component APIs, wireframe components, and examples for Rust frontend developers.

Key features

01Supports SSR, SPA, SSG, and View Transitions
02Deploys as a single executable
03Offers headless and pre-styled components
04Includes wireframe components and page-section examples
05Indexes APIs and guides by topic

Use cases

01Build an SSR or SSG frontend project
02Find form, navigation, or overlay component APIs
03Create low-fidelity interface wireframes
04Reference marketing or application page sections

Install

Copy the command and run it in a terminal.

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

After installing, type/fandhe-frontendin Claude Code to confirm it loaded.

Bundled files

References and scripts installed along with 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

Details

From the project README

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 list 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
EC の完成済みセクション例（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

Comments

Markdown supported

Details

Author: fandhe-ai
Repository: fandhe-ai/agent-reference-skills
Category: Development
Installs: 202
GitHub stars: 4

Report

More skills

All skills

remotion-render

github.com/inference-sh

1.6M

Render videos from React/Remotion component code via inference.sh. Pass TSX code, get MP4. Supports all Remotion APIs: useCurrentFrame, useVideoConfig, spring, interpolate, AbsoluteFill, Sequence. Configurable resolution, FPS, duration, codec. Use for: programmatic video generation, animated graphics, motion design, data-driven videos, React animations to video. Triggers: remotion, render video from code, tsx to video, react video, programmatic video, remotion render, code to video, animated video, motion graphics code, react animation video

improve-codebase-architecture

github.com/mattpocock

1.2M

Scan a codebase for architecture improvement opportunities, present them as a visual HTML report, then dive deep into whichever one you pick.

design-mobile-apps

github.com/designed-by-ai

1.1M

Design mobile app screens with Sleek, edit Sleek projects, and implement their designs in React Native or HTML

vercel-react-best-practices

github.com/vercel-labs

855.5k

React and Next.js performance optimization guidelines from Vercel Engineering. This skill should be used when writing, reviewing, or refactoring React/Next.js code to ensure optimal performance patterns. Triggers on tasks involving React components, Next.js pages, data fetching, bundle optimization, or performance improvements.

fandhe-frontend

About fandhe-frontend

Key features

Use cases

Install

Bundled files

Details

fandhe-frontend

対象バージョン

ディレクトリ構成

探索手順

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

Comments

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