mcpField
F
faasjs-react-ant-design

faasjs-react-ant-design

github.com/faasjsDevelopment120188 installsUpdated 10w ago
Repository

About faasjs-react-ant-design

faasjs-react-ant-design is a skill for building React interfaces with Ant Design in FaasJS projects. It outlines request handling, shared state, CRUD composition, and testing patterns.

Key features

  1. 01Feature-local file organization
  2. 02FaasJS request and streaming hooks
  3. 03React lifecycle and shared state guidance
  4. 04Reusable CRUD composition
  5. 05Component and request-flow testing

Use cases

  1. 01Building Ant Design data-entry features
  2. 02Choosing request handling for components
  3. 03Creating CRUD flows from shared metadata

Install

Copy the command and run it in a terminal.

$npx skills add https://github.com/faasjs/faasjs --skill faasjs-react-ant-design

After installing, type/faasjs-react-ant-designin Claude Code to confirm it loaded.

Bundled files

References and scripts installed along with SKILL.md.

references/guidelines/
ant-design.md
crud-patterns.md
react-data-fetching.md
react-testing.md
react.md

Details

From the project README

FaasJS React And Ant Design

Default Workflow

  1. 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.

Comments

Markdown supported