skill(fw-react-app): add initial documentation and command structure for React Meta apps by rohankokkula · Pull Request #16 · freshworks-developers/fw-dev-tools

rohankokkula · 2026-05-06T07:38:01Z

Introduced README.md and SKILL.md to outline the purpose and usage of the fw-react-app skill for Freshworks Platform 3.0.
Added command documentation for /react-meta-scaffold, /react-meta-add-surface, and /react-meta-validate to facilitate app creation and validation.
Included plugin manifests for Cursor and Claude, detailing commands and descriptions.
Established rules for React Meta HTML shells and orchestration, ensuring compliance with platform standards.
Created quick reference and agent documentation to assist developers in implementing React Meta features effectively.

…or React Meta apps - Introduced README.md and SKILL.md to outline the purpose and usage of the fw-react-app skill for Freshworks Platform 3.0. - Added command documentation for `/react-meta-scaffold`, `/react-meta-add-surface`, and `/react-meta-validate` to facilitate app creation and validation. - Included plugin manifests for Cursor and Claude, detailing commands and descriptions. - Established rules for React Meta HTML shells and orchestration, ensuring compliance with platform standards. - Created quick reference and agent documentation to assist developers in implementing React Meta features effectively.

rohankokkula · 2026-05-06T07:38:36Z

!! do not merge this, testing with more use-cases

rapchic

Review — `fw-react-app` skill

Scope: React Meta app skill package (skills/fw-react-app/).

Summary

Solid React Meta patterns (metaConfig.framework: react, {{{appclient}}}, per-surface HTML+JSX). Blockers before merge: fw-app-dev rule conflict, wrong icon path, phantom fw-migrate-to-react-app, no marketplace/routing registration.

Findings by priority

Priority	Issue
P0	`fw-app-dev` always-on rules will fight React scaffold (vanilla `app.js`, Crayons CDN, `app/styles/images/icon.svg`)
P0	Icon path/docs mismatch — template uses `app/public/icon.svg` + manifest `"icon": "icon.svg"`
P0	`react-meta-validate.md` references non-existent `fw-migrate-to-react-app`
P1	Document `fdk create --template react-starter-template --app-dir <dir>`
P1	Add-surface: edit template in place; do not nest duplicate scaffolds into subdirectories
P2	Register in marketplace JSON, `AGENTS.md`, installer spec; align plugin version with sibling skills (`1.2.0`)

Suggested next steps

Add React Meta exception block at top of SKILL.md (override fw-app-dev file-tree gates).
Fix icon paths across commands/rules.
Remove or replace phantom migrate skill reference.
Wire skill into plugin manifests + routing spec before publish.

rapchic · 2026-07-15T07:06:43Z

+
+# Freshworks React Meta app creation
+
+**Orchestration:** Treat **`fw-app-dev`** (or **`app-dev`**) as the source of truth for Platform 3.0 rules—manifest shape, `fdk validate` loops, request templates (`<%= %>`), OAuth, SMI, security, lint/complexity, and `app/styles/images/icon.svg`. This skill adds **React Meta–specific** structure and workflows on top of that baseline.


🛠️ Refactor suggestion | P0 — fw-app-dev conflict

fw-app-dev rules (app-building-blocking-gates, freshworks-platform3, app-templates) are alwaysApply: true and mandate vanilla tree: app/scripts/app.js, Crayons CDN in HTML, app/styles/images/icon.svg.

React Meta uses react-starter-template with app/src/, Vite, app/public/icon.svg, and @freshworks/crayons/react.

Add a blocking preamble (like fw-ai-actions-app's fw-app-dev override):

## fw-app-dev override (React Meta) When this skill is active, IGNORE fw-app-dev gates for: - app/scripts/app.js, app/styles/style.css - Crayons CDN script tags in HTML - app/styles/images/icon.svg Use react-starter-template layout instead.

Without this, agents will corrupt scaffolds during validate/fix.

rapchic · 2026-07-15T07:06:43Z

+## Canonical create path
+
+1. Empty folder for the app; **do not** scatter app files in an unrelated repo root.
+2. Run **`fdk create`** and select **`react-starter-template`** (official scaffold: `package.json`, `app/index.html`, `app/components/*.jsx`, `vitest.config.js`, etc.).


📝 Nitpick | P1 — CLI flag

Document non-interactive scaffold:

fdk create --template react-starter-template --app-dir <target-dir>

Use --app-dir for non-interactive and CI flows; skill only shows bare fdk create.

rapchic · 2026-07-15T07:06:43Z

+
+## Do not
+
+- Generate **Platform 2.x** manifests or **`$request.post|get`|** patterns.


⚠️ Potential issue | P0 — typo

$request.post|get| looks like a pipe typo. Should be:

Never $request.post(), $request.get(), or direct URL calls — only $request.invokeTemplate().

Agents may copy the broken token literally.

rapchic · 2026-07-15T07:06:43Z

+
+- Generate **Platform 2.x** manifests or **`$request.post|get`|** patterns.
+- Use **`{{variable}}`** in request templates—use **`<%= iparam.* %>`, `<%= context.* %>`, `<%= access_token %>`** only.
+- Ship frontend apps without a manifest **`icon`** path that resolves to an existing file (commonly **`app/styles/images/icon.svg`** per `fw-app-dev`—keep manifest paths and disk layout in sync).


⚠️ Potential issue | P0 — wrong icon path

References app/styles/images/icon.svg (fw-app-dev vanilla path).

react-starter-template uses:

File: app/public/icon.svg

Manifest: "icon": "icon.svg"

Template apps validate with 0 platform errors using those paths. Update all skill docs.

rapchic · 2026-07-15T07:06:43Z

+- **Rules:** [rules/react-meta-bootstrap.mdc](rules/react-meta-bootstrap.mdc), [rules/react-meta-orchestration.mdc](rules/react-meta-orchestration.mdc)
+- **Commands:** [commands/](commands/)
+- **Quick reference:** [references/react-meta-quick-reference.md](references/react-meta-quick-reference.md)
+- Full React Meta narrative (bootstrap, templates, SMI, troubleshooting): **React Meta gist** PDF / internal docs


📝 Nitpick | P2 — gist vs template

References external gist for React Meta narrative while scaffold uses react-starter-template. Prefer canonical in-repo snippet from template's App.jsx / entry files so agents don't fetch stale gist content.

rapchic · 2026-07-15T07:06:44Z

+{
+  "name": "fw-react-app",
+  "displayName": "Freshworks React Meta Apps",
+  "version": "1.0.0",


📝 Nitpick | P2 — version drift

Same as Cursor plugin — align version with fw-app-dev / fw-setup (1.2.0) when adding marketplace entries.

rapchic · 2026-07-15T07:06:44Z

+---
+description: React Meta HTML shells, SDK bootstrap, and per-surface JSX entries for Freshworks Platform 3.0.
+globs: ["**/app/**/*.html", "**/app/**/*.jsx", "**/config/iparams.html"]
+alwaysApply: false


💡 Suggestion | P1 — alwaysApply

alwaysApply: false means bootstrap rules won't load unless manually attached. For React workspaces, consider alwaysApply: true only when skill routing is wired — or document that agents must load this rule when metaConfig.framework === 'react'.

Otherwise fw-app-dev wins by default.

rapchic · 2026-07-15T07:06:44Z

+## Platform semantics
+
+- **manifest**, **modules**, **requests.json ↔ manifest sync**, **OAuth**, **`renderData`**, **events**, **complexity ≤ 7**, **async/await**, **unused parameters**: **fw-app-dev** (or **app-dev** skill) is authoritative.
+- **React Meta** skills only add: **metaConfig**, **JSX/bundler** conventions, **HTML shells**, **migration** from vanilla UI.


⚠️ Potential issue | P0 — missing migrate command

Orchestration mentions migration from vanilla UI but validate command references non-existent fw-migrate-to-react-app. Either add a react-meta-migrate.md command or remove migrate from orchestration until skill exists.

rapchic · 2026-07-15T07:06:44Z

+## Layout (matches [fw-app-dev](https://github.com/freshworks-developers/fw-dev-tools/tree/main/skills/fw-app-dev))
+
+| Path | Role |
+|------|------|


🛠️ Refactor suggestion | P2 — not installable yet

README describes usage but skill is not in .cursor-plugin/marketplace.json, .claude-plugin/marketplace.json, AGENTS.md inventory, or installer/src/specs/fw-dev-tools-spec.md.

npx @freshworks/fw-dev-tools install won't route to /react-meta-* until those are updated (see CONTRIBUTING.md plugin table).

rapchic · 2026-07-15T07:06:44Z

@@ -0,0 +1,14 @@
+# Agent: React Meta UI review (optional)


💡 Suggestion | P2 — fw-review integration

Agent prompt is useful but not wired into fw-review pipeline (skills/fw-review/scripts/). Consider adding React-specific checks (metaConfig, {{{appclient}}}, no duplicate scaffold dirs) to script-check-rules or document that react-meta-review is optional pre-fw-review only.

thakurganeshsinghfw marked this pull request as draft June 3, 2026 05:17

rapchic reviewed Jul 15, 2026

View reviewed changes

rapchic mentioned this pull request Jul 15, 2026

skills: fw-new-react-app and fw-react-migrate #24

Open

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

skill(fw-react-app): add initial documentation and command structure for React Meta apps - #16

skill(fw-react-app): add initial documentation and command structure for React Meta apps#16
rohankokkula wants to merge 1 commit into
mainfrom
fw-react-app

rohankokkula commented May 6, 2026

Uh oh!

rohankokkula commented May 6, 2026 •

edited

Loading

Uh oh!

rapchic left a comment •

edited

Loading

Uh oh!

rapchic Jul 15, 2026

Uh oh!

rapchic Jul 15, 2026 •

edited

Loading

Uh oh!

rapchic Jul 15, 2026

Uh oh!

rapchic Jul 15, 2026 •

edited

Loading

Uh oh!

rapchic Jul 15, 2026

Uh oh!

rapchic Jul 15, 2026

Uh oh!

rapchic Jul 15, 2026

Uh oh!

rapchic Jul 15, 2026

Uh oh!

rapchic Jul 15, 2026

Uh oh!

rapchic Jul 15, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants


		# Freshworks React Meta app creation

		Orchestration: Treat `fw-app-dev` (or `app-dev`) as the source of truth for Platform 3.0 rules—manifest shape, `fdk validate` loops, request templates (`<%= %>`), OAuth, SMI, security, lint/complexity, and `app/styles/images/icon.svg`. This skill adds React Meta–specific structure and workflows on top of that baseline.


		## Do not

		- Generate Platform 2.x manifests or `$request.post\|get`\| patterns.

Uh oh!

Conversation

rohankokkula commented May 6, 2026

Uh oh!

rohankokkula commented May 6, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

rapchic left a comment • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Review — fw-react-app skill

Summary

Findings by priority

Suggested next steps

Uh oh!

Choose a reason for hiding this comment

Uh oh!

rapchic Jul 15, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

rapchic Jul 15, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

rohankokkula commented May 6, 2026 •

edited

Loading

rapchic left a comment •

edited

Loading

Review — `fw-react-app` skill

rapchic Jul 15, 2026 •

edited

Loading

rapchic Jul 15, 2026 •

edited

Loading