Agent skill

Faasjs React Ant Design

by faasjs in faasjs/faasjs

A skill your agent uses when building or reviewing FaasJS React UI, especially @faasjs/ant-design pages, useFaas, useFaasStream, faas requests, CRUD screens, Table faasData, Description faasData…

MITAuto-check passedBackend & APIs

Install Faasjs React Ant Design

skills CLI
$ npx skills add faasjs/faasjs --skill faasjs-react-ant-design -a claude-code

Project install by default; add -g for ~/.claude/skills/.

GitHub CLI
$ gh skill install faasjs/faasjs faasjs-react-ant-design --agent claude-code

Project scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).

Manual copy
$ git clone --depth 1 https://github.com/faasjs/faasjs.git skills-src && mkdir -p .claude/skills && cp -r skills-src/skills/faasjs-react-ant-design .claude/skills/faasjs-react-ant-design && rm -rf skills-src

Use ~/.claude/skills/ instead of .claude/skills for a personal install. The folder must contain SKILL.md.

Claude Code skills documentation · loads skills from .claude/skills/

Facts

Skill name
faasjs-react-ant-design
GitHub stars
121
Token cost
~693 tokens
SKILL.md length
290 words
Files
6 (incl. references)
Skills in repo
8
Repo updated
First seen
Licence
MIT

At a glance

A skill your agent uses when building or reviewing FaasJS React UI, especially @faasjs/ant-design pages, useFaas, useFaasStream, faas requests, CRUD screens, Table faasData, Description faasData…

  • Works in 6 steps: Start from feature-local files under… → Use @faasjs/ant-design request exports… → Use useFaas for component-owned… → …
  • Reviewing FaasJS React UI
  • SKILL.md covers Default Workflow, Load These References, Gotchas and Validation
  • Instructions only: no scripts, shell commands, URLs or credentials in SKILL.md

What it does

Faasjs React Ant Design is an agent skill from faasjs/faasjs. 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.

Its SKILL.md is about 690 tokens, which your agent loads only when the skill is triggered. The skill folder holds 7 other files, including reference files (for example `references/guidelines/ant-design.md`, `references/guidelines/crud-patterns.md` and `references/guidelines/react-data-fetching.md`).

It sits in Backend & APIs, covering Serverless and React components. It works with React and Ant Design. The repository describes itself as: 🚀 FaasJS is an agent-friendly full-stack TypeScript framework for building predictable, type-safe applications with minimal dependencies. The licence is MIT.

When your agent uses it

  • Reviewing FaasJS React UI
  • Especially @faasjs/ant-design pages
  • Description faasData
  • Conditional FormItem hidden/if behavior

Example prompts

  • “/faasjs-react-ant-design”

Workflow steps

6 steps, taken from the first numbered list in SKILL.md.

  1. Start from feature-local files under features//.
  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.

What it can do on your machine

Read from SKILL.md and the folder at commit 8136384. It shows what the files ask for, not the result of running them.

  • Tool permissions

    Pre-approves nothing: there is no allowed-tools line, so your agent's usual permission prompts apply.

    From allowed-tools in the SKILL.md frontmatter.

  • Runs code

    No scripts in the folder and no shell commands in SKILL.md.

    From the folder's file list and the shell code blocks in SKILL.md.

  • Network

    No URLs in SKILL.md.

    From URLs in SKILL.md, links to its own repository left out.

  • Credentials

    Names no API keys, tokens, secrets or passwords.

    From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.

Context cost

Faasjs React Ant Design loads about 693 tokens when it runs, and up to ~18k if it reads all its reference files. Until then it costs about 78 tokens; SKILL.md has 290 words of instructions outside code blocks.

Always · name and description, kept in context so the agent knows when to use it
~78
When it runs · the whole SKILL.md, loaded when a task matches
~693
With references · SKILL.md plus every file in references/, read only if the agent opens them
~18k

Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.

Safety

Auto-check passed

The automated check found no risky patterns in SKILL.md.

Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); files beside SKILL.md are not scanned.

SKILL.md

The full file from faasjs/faasjs at commit 8136384, republished under its MIT licence (© faasjs). 290 words, ~693 tokens.

Download SKILL.mdSave it as .claude/skills/faasjs-react-ant-design/SKILL.md (or your agent's skills folder). This skill also uses 5 other files; get the full folder from GitHub.
name
faasjs-react-ant-design
description
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 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.

© faasjs, MIT. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file

Files

SKILL.md and 5 other files (references) in skills/faasjs-react-ant-design of faasjs/faasjs.

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

Open the folder on GitHubat commit 8136384

Compare with similar skills

Faasjs React Ant Design next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.

Faasjs React Ant Design compared with similar skills
SkillStarsUsed inTokensAuto-checkLicenceRepo updated
Faasjs React Ant Design this skillfaasjs/faasjs121—~693Automated safety check: PassMIT
South Admin CRUD Generatorsouthliu/south-admin-react580—~1.7kAutomated safety check: PassMIT
NEAR Intents Swap Integrationinternet-court/internet-court-skill6.4k2 repos~939Automated safety check: PassCustom licence
Trigger.dev Realtimepapermark/papermark9.2k—~1.7kAutomated safety check: PassCustom licence
Feature SyncNG-ZORRO/ng-zorro-antd9.2k—~840Automated safety check: PassMIT
React Emailviclafouch/meme-studio1102 repos~3.6kAutomated safety check: PassMIT

Similar skills

  • South Admin CRUD Generator

    southliu/south-admin-react

    Generates a full CRUD page - page component, data model and API client - from the south-admin-react project's own VS Code snippet templates.

    580 GitHub stars~1.7k tokensUpdated 17 days ago
    Frontend & DesignAuto-check passed
  • NEAR Intents Swap Integration

    internet-court/internet-court-skill

    Builds cross-chain token swaps and bridge flows with the NEAR Intents 1Click API: quotes, deposit addresses, per-chain deposits and status polling.

    6.4k GitHub starsUsed in 2 repos~939 tokens
    Backend & APIsAuto-check passed
  • Trigger.dev Realtime

    papermark/papermark

    Shows how to subscribe to Trigger.dev task runs from the backend and from React for progress indicators, live dashboards, AI response streams and approval waits.

    9.2k GitHub stars~1.7k tokensUpdated 1 mo ago
    Backend & APIsAuto-check passed
  • Feature Sync

    NG-ZORRO/ng-zorro-antd

    Sync an Ant Design React component or feature into NG-ZORRO.

    9.2k GitHub stars~840 tokensUpdated 7 days ago
    Frontend & DesignAuto-check passed
  • React Email

    viclafouch/meme-studio

    A skill your agent uses when creating HTML email templates with React components - welcome emails, password resets, notifications, order confirmations, newsletters, or transactional emails.

    110 GitHub starsUsed in 2 repos~3.6k tokens
    Backend & APIsAuto-check passed
  • Frontmcp Auth UI

    agentfront/frontmcp

    A skill your agent uses when customizing, branding, or replacing the built-in FrontMCP OAuth pages (the login, consent, federated-select, incremental-authorization, and error pages) with your own…

    146 GitHub stars~3.7k tokensUpdated today
    Backend & APIsAuto-check passed

More from faasjs/faasjs

All 8 skills in this repo
  • Faasjs API Jobs

    faasjs/faasjs

    A skill your agent uses when building or reviewing FaasJS backend APIs and jobs: .api.ts files, defineApi, zod params schemas, HttpError, HTTP helpers, middleware/staticHandler, .job.ts files…

    121 GitHub stars~653 tokensUpdated 1 mo ago
    Auto-check passed
  • Faasjs Pg

    faasjs/faasjs

    A skill your agent uses when working with @faasjs/pg or PostgreSQL in FaasJS: Tables declaration merging, QueryBuilder, select aliases, parameterized sql expressions, raw SQL, numeric/decimal/bigint…

    121 GitHub stars~718 tokensUpdated 1 mo ago
    Auto-check passed
  • A skill your agent uses when building or reviewing FaasJS plugins and runtime infrastructure: Plugin lifecycle hooks including concurrent mount and failed-mount retry behavior, InvokeData mutation…

    121 GitHub stars~500 tokensUpdated 1 mo ago
    Auto-check: notes
  • A skill your agent uses when creating, configuring, reviewing, or onboarding a FaasJS project; working with create-faas-app, vp CLI, TypeScript or Vite config, feature folders, file and naming…

    121 GitHub stars~577 tokensUpdated 1 mo ago
    Auto-check passed
  • A skill your agent uses when working in any FaasJS repo and no narrower FaasJS skill is already selected, or when a task spans project conventions, validation gates, security boundaries, and…

    121 GitHub stars~741 tokensUpdated 1 mo ago
    Auto-check passed
  • Faasjs Specs

    faasjs/faasjs

    A skill your agent uses when implementing, reviewing, or verifying normative FaasJS runtime behavior and compatibility for faas.yaml, staged config discovery and merge order, zero-mapping route…

    121 GitHub stars~444 tokensUpdated 1 mo ago
    Auto-check passed

Works with

Questions about Faasjs React Ant Design

What does Faasjs React Ant Design do?

A skill your agent uses when building or reviewing FaasJS React UI, especially @faasjs/ant-design pages, useFaas, useFaasStream, faas requests, CRUD screens, Table faasData, Description faasData…. Faasjs React Ant Design is an agent skill from faasjs/faasjs. 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.

When should I use Faasjs React Ant Design?

Faasjs React Ant Design fits situations like: reviewing FaasJS React UI; especially @faasjs/ant-design pages; description faasData; conditional FormItem hidden/if behavior.

How do I install Faasjs React Ant Design in Claude Code?

Run `npx skills add faasjs/faasjs --skill faasjs-react-ant-design -a claude-code`. Or copy the skill folder (skills/faasjs-react-ant-design in faasjs/faasjs) into .claude/skills/faasjs-react-ant-design in your project. Claude Code loads it when a task matches its description.

How do I install Faasjs React Ant Design in Codex?

Run `npx skills add faasjs/faasjs --skill faasjs-react-ant-design -a codex`. Or copy the skill folder (skills/faasjs-react-ant-design in faasjs/faasjs) into .agents/skills/faasjs-react-ant-design in your project. Codex loads it when a task matches its description.

Can I use Faasjs React Ant Design in Cursor, Gemini CLI or GitHub Copilot?

Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add faasjs/faasjs --skill faasjs-react-ant-design -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/faasjs-react-ant-design, .gemini/skills/faasjs-react-ant-design, .github/skills/faasjs-react-ant-design and .opencode/skills/faasjs-react-ant-design in your project.

What does Faasjs React Ant Design need to run?

SKILL.md names no scripts, command-line tools or credentials: Faasjs React Ant Design is instructions for the agent only.

Does Faasjs React Ant Design access the network?

SKILL.md contains no URLs. Any network use would come from the scripts or tools the agent runs. This is read from the text; nothing was executed.

Is Faasjs React Ant Design safe to install?

Our automated static check of SKILL.md found no risky patterns, such as piping downloads into a shell, reading credential files or hidden Unicode. It is not a guarantee. Review the folder before installing.

What licence does Faasjs React Ant Design use?

Faasjs React Ant Design is published under the MIT licence (the repository's licence). It allows redistribution, so the full SKILL.md is shown on this page.

How many tokens does Faasjs React Ant Design use?

About 693 tokens (SKILL.md is roughly 2.8k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full. Its references folder adds about 17k tokens, read only when the agent opens those files.

What are the alternatives to Faasjs React Ant Design?

Skills that share tags, products or a category with Faasjs React Ant Design: South Admin CRUD Generator (southliu/south-admin-react, 580 stars), NEAR Intents Swap Integration (internet-court/internet-court-skill, 6.4k stars), Trigger.dev Realtime (papermark/papermark, 9.2k stars) and Feature Sync (NG-ZORRO/ng-zorro-antd, 9.2k stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains Faasjs React Ant Design?

faasjs (a GitHub organization) maintains it in faasjs/faasjs, which has 121 GitHub stars. The repository holds 8 skills in this directory. The repository was last updated on September 3, 2026.

Source: faasjs/faasjs on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.