How do I install the Faasjs React Ant Design skill?

Run npx skillmds@latest add faasjs/faasjs-react-ant-design in your terminal (requires Node.js), paste this page's agent-chat prompt into Claude, Cursor, or any MCP-connected agent, or download the SKILL.md file and copy it into your agent's skills directory.

Is Faasjs React Ant Design safe to use?

This skill has not completed SkillMD's automated safety review yet. Capability flags: docs only. SkillMD never runs a skill's scripts for you; review the SKILL.md before installing.

Which AI agents work with Faasjs React Ant Design?

This skill is tagged as working with Claude Code, Claude.ai, OpenAI Codex. SKILL.md is an open format, so most agents that read a skills directory can load it too.

Is Faasjs React Ant Design free to use?

Yes. Installing skills from SkillMD is free, and the skill stays under its author's original license.

Who published Faasjs React Ant Design?

faasjs (@faasjs) published this skill. Their other Agent Skills are listed on their SkillMD profile.

Faasjs React Ant Design by faasjs — Agent Skill

Name: Faasjs React Ant Design
Rating: 4.5 (4 reviews)
Author: faasjs

Faasjs React Ant Design

Use when building or reviewing FaasJS React UI, especially @faasjs/ant-design pages, useFaas, useFaasStream, faas requests, CRUD screens, Table faasData, Description faasData, Form faas, conditional FormItem hidden/if behavior, drawers/modals, React hooks, shared state, and React tests.

faasjs f167519 6 files · 71.1 KB Updated Sep 10, 2026

File contents

FaasJS React And Ant Design

Default Workflow

Start from feature-local files under features/<feature>/.
Use @faasjs/ant-design request exports in Ant Design apps so request errors and feedback stay consistent.
Use useFaas for component-owned requests, faas for event handlers, Form faas for submits, and useFaasStream for streaming.
Avoid native useEffect by default; use FaasJS React lifecycle helpers for side effects and non-primitive dependencies.
Use createProxyStates for shared state whose data changes must be propagated across independent components or component trees.
For CRUD, compose list, detail, create/update, and delete from shared feature metadata rather than separate one-off flows.

Load These References

Component and hook rules: references/guidelines/react.md.
Request flow selection and lifecycle controls: references/guidelines/react-data-fetching.md.
@faasjs/ant-design page, route, CRUD, and feedback patterns: references/guidelines/ant-design.md.
React request-flow and component tests: references/guidelines/react-testing.md.
Complete CRUD vertical slice composition: references/guidelines/crud-patterns.md.

Gotchas

Import faas, useFaas, useFaasStream, FaasReactClient, FaasDataWrapper, and withFaasData from @faasjs/ant-design in Ant Design apps.
Import createProxyStates from @faasjs/react; create a stable feature-local state channel and export the generated useXxx, setXxx, and xxxRef helpers.
Destructure hook returns at the call site; do not keep broad result or states objects.
Keep React event handlers inline by default; extract only for reuse or real boundaries.
For object or array dependencies, use equal memo/effect helpers instead of native dependency arrays.
Use hidden for controlled field visibility and if(values) for value-dependent visibility; test visibility again when props or relevant values change.
Prefer useStates or useStatesRef for component-local state, and createSplittingContext for provider-scoped shared state; reach for createProxyStates when data-change notifications must cross components, regardless of where the setter is called.

Validation

Use vp test <pattern> for affected component, hook, or request-flow tests.
Use setMock for request-layer React tests.
Run vp check --fix before handoff when UI files changed.

---name: faasjs-react-ant-designdescription: Use when building or reviewing FaasJS React UI, especially @faasjs/ant-design pages, useFaas, useFaasStream, faas requests, CRUD screens, Table faasData, Description faasData, Form faas, conditional FormItem hidden/if behavior, drawers/modals, React hooks, shared state, and React tests.---# FaasJS React And Ant Design## Default Workflow1. Start from feature-local files under `features/<feature>/`.2. Use `@faasjs/ant-design` request exports in Ant Design apps so request errors and feedback stay consistent.3. Use `useFaas` for component-owned requests, `faas` for event handlers, `Form` `faas` for submits, and `useFaasStream` for streaming.4. Avoid native `useEffect` by default; use FaasJS React lifecycle helpers for side effects and non-primitive dependencies.5. Use `createProxyStates` for shared state whose data changes must be propagated across independent components or component trees.6. For CRUD, compose list, detail, create/update, and delete from shared feature metadata rather than separate one-off flows.## Load These References- Component and hook rules: `references/guidelines/react.md`.- Request flow selection and lifecycle controls: `references/guidelines/react-data-fetching.md`.- `@faasjs/ant-design` page, route, CRUD, and feedback patterns: `references/guidelines/ant-design.md`.- React request-flow and component tests: `references/guidelines/react-testing.md`.- Complete CRUD vertical slice composition: `references/guidelines/crud-patterns.md`.## Gotchas- Import `faas`, `useFaas`, `useFaasStream`, `FaasReactClient`, `FaasDataWrapper`, and `withFaasData` from `@faasjs/ant-design` in Ant Design apps.- Import `createProxyStates` from `@faasjs/react`; create a stable feature-local state channel and export the generated `useXxx`, `setXxx`, and `xxxRef` helpers.- Destructure hook returns at the call site; do not keep broad `result` or `states` objects.- Keep React event handlers inline by default; extract only for reuse or real boundaries.- For object or array dependencies, use equal memo/effect helpers instead of native dependency arrays.- Use `hidden` for controlled field visibility and `if(values)` for value-dependent visibility; test visibility again when props or relevant values change.- Prefer `useStates` or `useStatesRef` for component-local state, and `createSplittingContext` for provider-scoped shared state; reach for `createProxyStates` when data-change notifications must cross components, regardless of where the setter is called.## Validation- Use `vp test <pattern>` for affected component, hook, or request-flow tests.- Use `setMock` for request-layer React tests.- Run `vp check --fix` before handoff when UI files changed.

Frequently asked questions