{
  "id": "skl_c02b177b912e",
  "slug": "skill-react",
  "asset_type": "skill",
  "name": "React (FormEngine AI Form Builder) — Production Architecture & Agent Playbook",
  "tagline": "Generating React forms from screenshots, PDFs, HTML, or text descriptions with validated FormEngine JSON schema. Renders through RSuite, Material UI, or Ma",
  "description_md": "### Overview & Capability Scope\n**React (FormEngine AI Form Builder) — Production Architecture & Agent Playbook** (`skill-react`) is a verified, portable `SKILL.md` playbook curated with **@nutlope** for Grok Bot (`x.ai/bot/`), Claude Code (`~/.claude/skills/`), and Cursor (`.cursor/skills/`).\n\nGenerating React forms from screenshots, PDFs, HTML, or text descriptions with validated FormEngine JSON schema. Renders through RSuite, Material UI, or Mantine.\n\n### Required Stack & Tooling\n- **Primary Stack:** React, FormEngine AI Form Builder\n- **Category:** `engineering`\n- **Source & Reference:** [https://github.com/PatrickJS/awesome-cursorrules/blob/main/rules/react-formengine-ai-form-builder-cursorrules-prompt-file.mdc](https://github.com/PatrickJS/awesome-cursorrules/blob/main/rules/react-formengine-ai-form-builder-cursorrules-prompt-file.mdc)\n\n### Quickstart Installation\nInstall this `SKILL.md` playbook directly into your agent workspace:\n```bash\nnpx lightstate install skill-react\n```\nOr copy the complete `SKILL.md` specification below into `.cursor/skills/skill-react/SKILL.md` or `~/.claude/skills/skill-react/SKILL.md`.\n\n### Verification Commands\n```bash\nnpx lightstate install skill-react\ngit status --short\nnpm test || pytest || cargo test\n```\n",
  "primary_category": "engineering",
  "categories_json": "[\"engineering\", \"skills\"]",
  "tags_json": "[\"react\", \"formengine-ai-form-builder\", \"skill-md\", \"engineering\"]",
  "compatible_agents_json": "[\"grok-bot\", \"claude-code\", \"cursor\"]",
  "integrations_json": "[\"React\", \"FormEngine AI Form Builder\"]",
  "includes_json": "[]",
  "safety_level": "Read-Only / Ask-First",
  "safety_summary": "Verified capability blueprint by @nutlope.",
  "share_url": "",
  "deep_link_uri": "",
  "mcp_endpoint": "",
  "mcp_transport": "http",
  "install_command": "npx lightstate install skill-react",
  "skill_markdown": "---\nname: react\ndescription: Generating React forms from screenshots, PDFs, HTML, or text descriptions with validated FormEngine JSON schema. Renders through RSuite, Material UI, or Mantine. Use when working with React, FormEngine AI Form Builder.\ntriggers:\n  - react\n  - react\n  - formengine ai form builder\n---\n\n# React (FormEngine AI Form Builder) — Production Architecture & Agent Playbook\n\n## 1. When to Use This Skill\nLoad `skill-react` whenever an engineering, architecture, or operations task involves **React, FormEngine AI Form Builder**. Specifically:\n- Generating React forms from screenshots, PDFs, HTML, or text descriptions with validated FormEngine JSON schema. Renders through RSuite, Material UI, or Mantine.\n- Designing, reviewing, refactoring, or debugging production configurations without guesswork or deprecated flags.\n- Running deterministic pre-flight validation and post-execution verification checks before reporting completion.\n\n## 2. Prerequisites & Required Environment\n- **Target Stack:** React, FormEngine AI Form Builder\n- **Permissions Boundary:** Read-only inspection by default; ask for explicit human confirmation before executing destructive mutations or production deployments.\n- **Reference Specification:** `https://github.com/PatrickJS/awesome-cursorrules/blob/main/rules/react-formengine-ai-form-builder-cursorrules-prompt-file.mdc`\n\n## 3. Step-by-Step Execution Playbook\n1. **Context & Configuration Discovery:**\n   Inspect existing project manifests (`package.json`, `tsconfig.json`, `pyproject.toml`, `Cargo.toml`, `wrangler.jsonc`, or schema declarations) before proposing changes. Never overwrite existing bindings or credentials blindly.\n2. **Deterministic Implementation:**\n   Apply the canonical production patterns for **React**:\n   - Enforce strict schema and type validation at every external boundary.\n   - Include explicit error handling, structured telemetry, and idempotency keys on all mutating calls.\n   - Keep secrets in environment variables or managed secret stores—never hardcode tokens in source files.\n3. **Verification & Regression Gate:**\n   Run the verification commands below and inspect both exit codes and output payloads before marking the task complete.\n\n## 4. Reference Commands & CLI Workflow\n```bash\nnpx lightstate install skill-react\ngit status --short\nnpm test || pytest || cargo test\n```\n\n## 5. Edge Cases & Anti-Hallucination Guardrails\n- **Zero Unverified Claims:** Never claim a build, migration, test run, or API call succeeded without inspecting the command output or HTTP status code.\n- **Rollback Readiness:** Always record the previous state or migration version so changes can be reverted cleanly if downstream health checks fail.\n",
  "starter_prompt": "Load the React (FormEngine AI Form Builder) — Production Architecture & Agent Playbook (skill-react) playbook. First inspect our current configuration and codebase for React, FormEngine AI Form Builder. Then propose a concrete, step-by-step implementation plan following the skill-react guardrails, run the non-destructive verification commands (npx lightstate install skill-react), and summarize any findings, risks, or required environment variables before making production changes.",
  "project_url": "https://github.com/PatrickJS/awesome-cursorrules/blob/main/rules/react-formengine-ai-form-builder-cursorrules-prompt-file.mdc",
  "repo_url": "https://github.com/PatrickJS/awesome-cursorrules/blob/main/rules/react-formengine-ai-form-builder-cursorrules-prompt-file.mdc",
  "creator_handle": "nutlope",
  "creator_name": "Hassan El Mghari (@nutlope)",
  "creator_avatar_url": null,
  "creator_url": "https://x.com/nutlope",
  "creator_platform": "x",
  "creator_cal_url": null,
  "claimed_by_user_id": null,
  "scouted_by_handle": null,
  "source_url": "https://github.com/PatrickJS/awesome-cursorrules/blob/main/rules/react-formengine-ai-form-builder-cursorrules-prompt-file.mdc",
  "source_tweet_id": null,
  "source_origin": "certified_builder",
  "source_posted_at": null,
  "x_likes": 293,
  "x_bookmarks": 609,
  "x_retweets": 152,
  "x_views": 4102,
  "human_upvotes": 293,
  "human_installs": 293,
  "bot_pulls": 609,
  "pulse_score": 88,
  "gravity_rank_score": 2305.5,
  "is_featured": 0,
  "is_verified": 1,
  "is_sponsored": 0,
  "sponsor_tier": "free",
  "sponsor_label": "",
  "sponsor_cta_url": "",
  "sponsor_expires_at": null,
  "commercial_intent_score": 0,
  "status": "active",
  "created_at": "2026-10-24T22:25:00Z",
  "updated_at": "2026-10-24T22:25:00Z",
  "verified_at": null,
  "primitive": "skill",
  "title": "React (FormEngine AI Form Builder) — Production Architecture & Agent Playbook",
  "description": "Generating React forms from screenshots, PDFs, HTML, or text descriptions with validated FormEngine JSON schema. Renders through RSuite, Material UI, or Ma",
  "category": "engineering",
  "tags": "[\"react\", \"formengine-ai-form-builder\", \"skill-md\", \"engineering\"]",
  "agent_compatibility": "[\"grok-bot\", \"claude-code\", \"cursor\"]",
  "author_handle": "nutlope",
  "author_name": "Hassan El Mghari (@nutlope)",
  "author_avatar": null,
  "source_tweet_url": "https://github.com/PatrickJS/awesome-cursorrules/blob/main/rules/react-formengine-ai-form-builder-cursorrules-prompt-file.mdc",
  "github_url": "https://github.com/PatrickJS/awesome-cursorrules/blob/main/rules/react-formengine-ai-form-builder-cursorrules-prompt-file.mdc",
  "external_url": "https://github.com/PatrickJS/awesome-cursorrules/blob/main/rules/react-formengine-ai-form-builder-cursorrules-prompt-file.mdc",
  "upvotes_count": 293,
  "installs_count": 293
}