Animated React Component Libraries
Hainrixz/editor-pro-max
Helps choose and drop in animated React components from Magic UI and React Bits for landing pages, marketing sites and dashboards, instead of hand-coding animations.
Enforces that any new/changed user-facing capability is added to BOTH the marketing site (Landing.jsx / src/features.js) AND the real app (App.jsx and friends) — never just one.
Install Sync Site App
$ npx skills add FontWoW/FontWoW.github.io --skill sync-site-app -a claude-codeProject install by default; add -g for ~/.claude/skills/.
$ gh skill install FontWoW/FontWoW.github.io sync-site-app --agent claude-codeProject scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).
$ git clone --depth 1 https://github.com/FontWoW/FontWoW.github.io.git skills-src && mkdir -p .claude/skills && cp -r skills-src/.claude/skills/sync-site-app .claude/skills/sync-site-app && rm -rf skills-srcUse ~/.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/
Install the "sync-site-app" agent skill from https://github.com/FontWoW/FontWoW.github.io/tree/main/.claude/skills/sync-site-app into .claude/skills/sync-site-app/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "sync-site-app", then confirm the skill loads.Claude Code copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$skill-installer install https://github.com/FontWoW/FontWoW.github.io/tree/main/.claude/skills/sync-site-appType this inside Codex. $skill-installer <name> installs a curated skill from openai/skills. The installer writes to $CODEX_HOME/skills (default ~/.codex/skills). Restart Codex if the skill does not show up.
$ npx skills add FontWoW/FontWoW.github.io --skill sync-site-app -a codexProject install goes to .agents/skills/; add -g for ~/.codex/skills/.
$ gh skill install FontWoW/FontWoW.github.io sync-site-app --agent codexProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/FontWoW/FontWoW.github.io.git skills-src && mkdir -p .agents/skills && cp -r skills-src/.claude/skills/sync-site-app .agents/skills/sync-site-app && rm -rf skills-srcUse ~/.agents/skills/ instead of .agents/skills for a personal install.
Codex skills documentation · loads skills from .agents/skills/
Install the "sync-site-app" agent skill from https://github.com/FontWoW/FontWoW.github.io/tree/main/.claude/skills/sync-site-app into .agents/skills/sync-site-app/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "sync-site-app", then confirm the skill loads.Codex copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ npx skills add FontWoW/FontWoW.github.io --skill sync-site-app -a cursorProject install goes to .agents/skills/; add -g for ~/.cursor/skills/.
$ gh skill install FontWoW/FontWoW.github.io sync-site-app --agent cursorProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/FontWoW/FontWoW.github.io.git skills-src && mkdir -p .cursor/skills && cp -r skills-src/.claude/skills/sync-site-app .cursor/skills/sync-site-app && rm -rf skills-srcUse ~/.cursor/skills/ instead of .cursor/skills for a personal install.
Cursor skills documentation · loads skills from .cursor/skills/, .agents/skills/, .claude/skills/, .codex/skills/
Install the "sync-site-app" agent skill from https://github.com/FontWoW/FontWoW.github.io/tree/main/.claude/skills/sync-site-app into .cursor/skills/sync-site-app/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "sync-site-app", then confirm the skill loads.Cursor copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ gemini skills install https://github.com/FontWoW/FontWoW.github.io.git --path .claude/skills/sync-site-app--scope user (default) or --scope workspace; --path is the subfolder of the repo that holds the skill; --consent skips the security confirmation prompt.
$ npx skills add FontWoW/FontWoW.github.io --skill sync-site-app -a gemini-cliProject install goes to .agents/skills/; add -g for ~/.gemini/skills/.
$ gh skill install FontWoW/FontWoW.github.io sync-site-app --agent gemini-cliProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/FontWoW/FontWoW.github.io.git skills-src && mkdir -p .gemini/skills && cp -r skills-src/.claude/skills/sync-site-app .gemini/skills/sync-site-app && rm -rf skills-srcUse ~/.gemini/skills/ instead of .gemini/skills for a personal install, then run /skills reload.
Gemini CLI skills documentation · loads skills from .gemini/skills/, .agents/skills/
Install the "sync-site-app" agent skill from https://github.com/FontWoW/FontWoW.github.io/tree/main/.claude/skills/sync-site-app into .gemini/skills/sync-site-app/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "sync-site-app", then confirm the skill loads.Gemini CLI copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ gh skill install FontWoW/FontWoW.github.io sync-site-appInstalls for Copilot at project scope by default; add --scope user for a personal install. Preview a skill first with gh skill preview. Needs GitHub CLI 2.90.0 or later (public preview).
$ npx skills add FontWoW/FontWoW.github.io --skill sync-site-app -a github-copilotProject install goes to .agents/skills/; add -g for ~/.copilot/skills/.
$ git clone --depth 1 https://github.com/FontWoW/FontWoW.github.io.git skills-src && mkdir -p .github/skills && cp -r skills-src/.claude/skills/sync-site-app .github/skills/sync-site-app && rm -rf skills-srcUse ~/.copilot/skills/ instead of .github/skills for a personal install. Commit .github/skills so cloud agent and code review can use it.
GitHub Copilot skills documentation · loads skills from .github/skills/, .claude/skills/, .agents/skills/
Install the "sync-site-app" agent skill from https://github.com/FontWoW/FontWoW.github.io/tree/main/.claude/skills/sync-site-app into .github/skills/sync-site-app/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "sync-site-app", then confirm the skill loads.GitHub Copilot copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ npx skills add FontWoW/FontWoW.github.io --skill sync-site-app -a opencodeOpenCode documents no install command of its own. Project install goes to .agents/skills/; add -g for ~/.config/opencode/skills/.
$ gh skill install FontWoW/FontWoW.github.io sync-site-app --agent opencodeProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/FontWoW/FontWoW.github.io.git skills-src && mkdir -p .opencode/skills && cp -r skills-src/.claude/skills/sync-site-app .opencode/skills/sync-site-app && rm -rf skills-srcUse ~/.config/opencode/skills/ instead of .opencode/skills for a personal install.
OpenCode skills documentation · loads skills from .opencode/skills/, .claude/skills/, .agents/skills/
Install the "sync-site-app" agent skill from https://github.com/FontWoW/FontWoW.github.io/tree/main/.claude/skills/sync-site-app into .opencode/skills/sync-site-app/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "sync-site-app", then confirm the skill loads.OpenCode copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
Facts
- Skill name
sync-site-app- GitHub stars
- 158
- Token cost
- ~731 tokens
- SKILL.md length
- 342 words
- Files
- 1
- Skills in repo
- 3
- Repo updated
- First seen
- Licence
- GPL-3.0
At a glance
Enforces that any new/changed user-facing capability is added to BOTH the marketing site (Landing.jsx / src/features.js) AND the real app (App.jsx and friends) — never just one.
- Works in 3 steps: Implement it for real in the app — the… → Reflect it in src/features.js —… → Do both in the same change. Never ship…
- قابلیت جدید اضافه کن
- SKILL.md covers Rule and Workflow
- Instructions only: no scripts, shell commands, URLs or credentials in SKILL.md
What it does
Sync Site App is an agent skill from FontWoW/FontWoW.github.io. Enforces that any new/changed user-facing capability is added to BOTH the marketing site (Landing.jsx / src/features.js) AND the real app (App.jsx and friends) — never just one. Trigger on "قابلیت جدید اضافه کن", "این امکان رو اضافه کن به اپ/سایت", "فیچر جدید", "option/feature/امکان جدید", or any request to add, change, or remove an editor capability, export option, style/effect, template, or anything listed in the "امکانات" section on the landing page.
Its SKILL.md is about 730 tokens, which your agent loads only when the skill is triggered. It is a single SKILL.md file with no bundled scripts.
It sits in Frontend & Design, covering Landing pages and React components. The licence is GPL-3.0.
When your agent uses it
- قابلیت جدید اضافه کن
- این امکان رو اضافه کن به اپ/سایت
- Option/feature/امکان جدید
- Any request to add
Example prompts
- “option/feature/امکان جدید”
- “Use the sync-site-app skill to enforce that any new/changed user-facing capability is added to BOTH the marketing site (Landing.jsx /…”
- “/sync-site-app”
Workflow steps
3 steps, taken from the first numbered list in SKILL.md.
- Implement it for real in the app — the actual editor behavior in src/App.jsx (or
- Reflect it in src/features.js — add/update/remove the matching entry so the landing page
- Do both in the same change. Never ship an app capability without updating the site's
What it can do on your machine
Read from SKILL.md and the folder at commit 1b58eb6. 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
Sync Site App loads about 731 tokens when it runs. Until then it costs about 118 tokens; SKILL.md has 342 words of instructions outside code blocks.
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 FontWoW/FontWoW.github.io at commit 1b58eb6, republished under its GPL-3.0 licence (© FontWoW). 342 words, ~731 tokens.
Download SKILL.mdSave it as
.claude/skills/sync-site-app/SKILL.md (or your agent's skills folder).- name
- sync-site-app
- description
- Enforces that any new/changed user-facing capability is added to BOTH the marketing site (Landing.jsx / src/features.js) AND the real app (App.jsx and friends) — never just one. Trigger on "قابلیت جدید اضافه کن", "این امکان رو اضافه کن به اپ/سایت", "فیچر جدید", "option/feature/امکان جدید", or any request to add, change, or remove an editor capability, export option, style/effect, template, or anything listed in the "امکانات" section on the landing page.
Sync site ↔ app
FontWoW ships two surfaces from one repo:
- سایت (site) —
src/Landing.jsx, the marketing/landing page. Its "امکانات" section renders fromsrc/features.js. - اپلیکیشن (app) —
src/App.jsx(plussrc/native.js,src/templates.json, etc.), the real editor where the capability actually lives.
src/features.js is the canonical registry connecting the two. It is mandatory, not optional,
that these move together.
Rule
Whenever a user-facing option/capability is added, changed, or removed:
- Implement it for real in the app — the actual editor behavior in
src/App.jsx(orsrc/native.js,src/templates.json, etc. as appropriate). - Reflect it in
src/features.js— add/update/remove the matching entry so the landing page description stays accurate. Use an existing card if the new capability is a variant of one already listed (e.g. a new text effect belongs under "استایل و افکت متن"); only add a new card for a genuinely new capability category. - Do both in the same change. Never ship an app capability without updating the site's
description of it, and never edit
src/features.jsto describe something that isn't actually implemented in the app yet.
Treat this as a hard gate before considering the task done — if you changed one side and not the other, the task is incomplete.
Workflow
- Read
src/features.jsto see current entries and decide whether the change fits an existing card or needs a new one. - Make the real implementation change in
src/App.jsx(or wherever the capability actually lives). - Update
src/features.jsto match (iconNamemust reference a real export fromsrc/icons.jsx— check withgrep "^export" src/icons.jsxif unsure which icons exist). - Landing.jsx imports
FEATURESfromsrc/features.jsand needs no further edits unless the overall section layout/copy around it changes. - If the change is significant enough to warrant new screenshots (
docs/screen-*.pngreferenced inLanding.jsx), flag that to the user rather than silently skipping it — don't generate fake screenshots. - Before finishing, diff-check: does every new/changed capability in this change have a
corresponding entry in
src/features.js, and does everysrc/features.jsentry you touched correspond to something real in the app? If not, go back and fix the missing side.
© FontWoW, GPL-3.0. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file
Files
Just SKILL.md in .claude/skills/sync-site-app of FontWoW/FontWoW.github.io.
Open the folder on GitHubat commit 1b58eb6
Compare with similar skills
Sync Site App 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.
| Skill | Stars | Used in | Tokens | Auto-check | Licence | Repo updated |
|---|---|---|---|---|---|---|
| Sync Site App this skillFontWoW/FontWoW.github.io | 158 | — | ~731 | Automated safety check: Pass | GPL-3.0 | |
| Animated React Component LibrariesHainrixz/editor-pro-max | 261 | 1 repos | ~5.7k | Automated safety check: Pass | Custom licence | |
| Ark UIBrandon030722/ark-ui-skill | 265 | — | ~3.7k | Automated safety check: Pass | None | |
| Frontend DesignYYH211/Claude-meta-skill | 282 | 1 repos | ~2.2k | Automated safety check: Pass | MIT | |
| Frontend DesignJetBrains/skills | 364 | 129 repos | ~1.2k | Automated safety check: Pass | Apache-2.0 | |
| Vetta UI Designopenvetta/open-vetta | 291 | — | ~7.3k | Automated safety check: Pass | Apache-2.0 |
Similar skills
Ark UI
Brandon030722/ark-ui-skill
Design, implement, audit, or refactor web and game-adjacent interfaces using an evidence-based Hypergryph visual language with two independent choices: product family and application depth (1…
Frontend Design
YYH211/Claude-meta-skill
Creates unique, production-grade frontend interfaces with exceptional design quality.
- Official
Frontend Design
JetBrains/skills
Create distinctive, production-grade frontend interfaces with high design quality.
Vetta UI Design
openvetta/open-vetta
Build and edit design documents (.vetd) on the Vetta design canvas — app screens, landing pages, slides, posters, infographics.
Docs
kmworks/kmreader
Regenerate README.md, APPSTOREDESCRIPTION.txt, and the KMReader landing page (src/pages/reader/index.tsx in the kmworks/website repo) based on current important product features in the codebase.
More from FontWoW/FontWoW.github.io
PR Auto Review
FontWoW/FontWoW.github.io
Automatically review open GitHub PRs on this repo (FontWoW.github.io) — inspect the diff for correctness, security, scope, and code-quality issues, then approve clean PRs or leave a Persian, Rick…
AI Contribute
FontWoW/FontWoW.github.io
Lets any contributor's own AI assistant pick up work on this repo (FontWoW/FontWoW.github.io) autonomously — reads open GitHub issues, classifies each as a bug or a feature request, picks one…
Related
Categories
Questions about Sync Site App
What does Sync Site App do?
Enforces that any new/changed user-facing capability is added to BOTH the marketing site (Landing.jsx / src/features.js) AND the real app (App.jsx and friends) — never just one. io.jsx and friends) — never just one.
When should I use Sync Site App?
Sync Site App fits situations like: قابلیت جدید اضافه کن; این امکان رو اضافه کن به اپ/سایت; option/feature/امکان جدید; any request to add.
How do I install Sync Site App in Claude Code?
Run `npx skills add FontWoW/FontWoW.github.io --skill sync-site-app -a claude-code`. Or copy the skill folder (.claude/skills/sync-site-app in FontWoW/FontWoW.github.io) into .claude/skills/sync-site-app in your project. Claude Code loads it when a task matches its description.
How do I install Sync Site App in Codex?
Run `npx skills add FontWoW/FontWoW.github.io --skill sync-site-app -a codex`. Or copy the skill folder (.claude/skills/sync-site-app in FontWoW/FontWoW.github.io) into .agents/skills/sync-site-app in your project. Codex loads it when a task matches its description.
Can I use Sync Site App 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 FontWoW/FontWoW.github.io --skill sync-site-app -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/sync-site-app, .gemini/skills/sync-site-app, .github/skills/sync-site-app and .opencode/skills/sync-site-app in your project.
What does Sync Site App need to run?
SKILL.md names no scripts, command-line tools or credentials: Sync Site App is instructions for the agent only.
Does Sync Site App 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 Sync Site App 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 Sync Site App use?
Sync Site App is published under the GPL-3.0 licence (the repository's licence). It allows redistribution, so the full SKILL.md is shown on this page.
How many tokens does Sync Site App use?
About 731 tokens (SKILL.md is roughly 2.9k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full.
What are the alternatives to Sync Site App?
Skills that share tags, products or a category with Sync Site App: Animated React Component Libraries (Hainrixz/editor-pro-max, 261 stars), Ark UI (Brandon030722/ark-ui-skill, 265 stars), Frontend Design (YYH211/Claude-meta-skill, 282 stars) and Frontend Design (JetBrains/skills, 364 stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.
Who maintains Sync Site App?
FontWoW (a GitHub organization) maintains it in FontWoW/FontWoW.github.io, which has 158 GitHub stars. The repository holds 3 skills in this directory. The repository was last updated on October 8, 2026.
Source: FontWoW/FontWoW.github.io on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.