ecosystem-web
Skill7 starsChanged 42 days agoMITView on GitHub
Route web product work — page design and build, DESIGN.md enforcement, SEO and AI-search visibility, and Coolify deploys — through the right fth-skills web skills in order. Use when the user wants to build or review a web page, enforce DESIGN.md tokens, improve search or ChatGPT visibility, or deploy and verify a service.
In this repository83 other files it gives its agents.
- AGENTS.mdAGENTS.md
- accessibility-enforcerSkill
- access-policy-designerSkill
- adaptive-guardSkill
- agent-reviewerSkill
- anti-ai-slop-designSkill
- api-mock-designerSkill
- api-observability-plannerSkill
- app-store-reviewerSkill
- ask-first-act-laterSkill
- assumption-checkerSkill
- auth-flow-designerSkill
- b2b-founder-roadmapSkill
- brand-name-labSkill
- breaking-change-detectorSkill
- changelog-generatorSkill
- checkpoint-guardianSkill
- claude-style-codingSkill
- claw-integration-designSkill
- context-compressorSkill
- contract-first-designerSkill
- coolify-orchestratorSkill
- crash-analystSkill
- data-lineage-tracerSkill
- data-maskerSkill
- deep-link-architectSkill
- design-intelligenceSkill
- design-md-enforcerSkill
- ecosystem-apiSkill
- ecosystem-databaseSkill
- ecosystem-mobileSkill
- ecosystem-orchestrationSkill
- ecosystem-productSkill
- ecosystem-reasoningSkill
- ecosystem-securitySkill
- error-recoverySkill
- fth-design-crafterSkill
- geo-auditorSkill
- geo-optimizerSkill
- index-advisorSkill
- jev-orchestratorSkill
- mastermind-loggerSkill
- memory-ledgerSkill
- migration-strategistSkill
- mobile-perf-auditorSkill
- mobile-security-auditorSkill
- multi-brain-debateSkill
- multi-brain-expertsSkill
- multi-brain-scoreSkill
- multi-brainSkill
- offline-sync-designerSkill
- onboarding-designerSkill
- output-criticSkill
- parallel-plannerSkill
- pgbouncer-architectSkill
- plan-hardenerSkill
- plan-implement-verify-recoverSkill
- proje-analizcisiSkill
- project-analyzerSkill
- project-focus-firstSkill
- The first 60 shown.
The file
We split this skill into the rules it gives an agent
7 rules. About 0 are common, 3 are distinctive, and 4 are very specific to this project.
≈0
Common · estimate
Many files like this have a rule of this kind.
≈3
Distinctive · estimate
This author's own choices. Worth a look.
4
Very specific
Tied to their project's names, files or tools. Probably skip.
- Common
- Distinctive
- Very specific
- Distinctive: line 15
Philosophy: Start from the user journey, keep design tokens as the single source of visual truth, measure discoverability instead of …
- Distinctive: line 33
Follow this protocol whenever this ecosystem is invoked.
- Very specific: line 39
Execute: Run steps in order. Steps that share a parallel group are independent and may run concurrently (@parallel-planner).
- Very specific: line 40
Gates: Before any destructive, irreversible, or production-impacting action, stop at @checkpoint-guardian, or ask for explicit confirmation …
- Very specific: line 41
Failures: When a step misses its *Done when*, hand off to @error-recovery.
- Very specific: line 42
State: Keep a run log (workflow id, step, status, artifact).
- Distinctive: line 45
Skip this protocol: when the user names one specific skill (invoke it directly) or asks a quick factual question that needs no workflow.
≈ “Common” is an estimate: at least 1 in 5 of the 350,495 skill files we read have a rule of the same kind, not the same words. “Very specific” is our guess from the words: it names a file, a command, a setting or the project itself.
Files
🧭 Web Ecosystem
This skill is the entry point of its ecosystem. It chooses a workflow, checks which member skills are installed, runs them in order with explicit handoffs, and degrades gracefully when a member is missing. The workflow map lives in references/workflows.json; the handoff format lives in references/handoff-contract.md.
Catalog
<!-- BEGIN GENERATED: ecosystem-catalog (generated from the ecosystem workflow map by build_ecosystems.py — do not edit by hand) -->Domain: Web, Design & Delivery — Design product-grade web interfaces, keep design systems consistent, make sites visible to search and AI answer engines, and deploy them.
Philosophy: Start from the user journey, keep design tokens as the single source of visual truth, measure discoverability instead of guessing, and verify every deploy.
| Skill | Role | Handoff artifact |
@claude-style-coding | Product-minded implementation: user journey, UX states, and visual quality first. | inline handoff block |
@fth-design-crafter | Researches and proposes palette and typography directions, writes DESIGN.md and tokens, designs pages, and reviews UI against them. | inline handoff block |
@design-intelligence | Deprecated alias — use @fth-design-crafter. | inline handoff block |
@design-md-enforcer | Deprecated alias — use @fth-design-crafter. | inline handoff block |
@anti-ai-slop-design | Removes generic AI aesthetics and restores product-specific hierarchy in designs, reviews, and image briefs. | inline handoff block |
@react-flow | Audits, repairs, migrates, and scaffolds @xyflow/react projects. | inline handoff block |
@geo-auditor | Read-only SEO/GEO/AEO audit of public websites. | inline handoff block |
@geo-optimizer | Implements and verifies SEO/GEO/AEO changes in a web codebase. | inline handoff block |
@coolify-orchestrator | Deploys, provisions, and debugs services on self-hosted Coolify. | inline handoff block |
<!-- END GENERATED: ecosystem-catalog -->Router Protocol
<!-- BEGIN GENERATED: ecosystem-router (generated from the ecosystem workflow map by build_ecosystems.py — do not edit by hand) -->Follow this protocol whenever this ecosystem is invoked.
- Match. Compare the request with each workflow's When phrases. Pick one workflow, or route straight to a single member skill when the request is narrow. If two workflows fit equally, ask one question to choose. If the request belongs to another domain, use the ecosystem index in
@ecosystem-orchestration. - Preflight. Find out which step skills are installed: check the skills your host lists, or run
python <skill-dir>/scripts/install_all.py --status --workflow <id>(<skill-dir>is the folder containing thisSKILL.md). Show a short plan: step, skill, installed or missing, condition, expected artifact. - Missing skills never block. Offer once: (a) install them —
install_all.py --workflow <id>prints the commands and only runs them with--executeafter the user agrees; or (b) continue in fallback mode — perform the step yourself using its Does and Done when columns and label that outputfallback. - Conditions. Skip optional steps whose condition does not hold, and say which steps you skipped and why.
- Execute. Run steps in order. Steps that share a parallel group are independent and may run concurrently (
@parallel-planner). Pass artifacts as described inreferences/handoff-contract.md. Check each step's Done when before moving on. - Gates. Before any destructive, irreversible, or production-impacting action, stop at
@checkpoint-guardian, or ask for explicit confirmation when it is not installed. - Failures. When a step misses its Done when, hand off to
@error-recovery. Without it, retry once with a changed approach, then report the blocker with evidence instead of guessing. - State. Keep a run log (workflow id, step, status, artifact). Record it with
@memory-ledgerwhen installed, and write a@session-transferhandoff if the run will continue in another session. - Finish. Summarize artifacts, skipped steps, open risks, and the most relevant next workflow.
Skip this protocol when the user names one specific skill (invoke it directly) or asks a quick factual question that needs no workflow.
<!-- END GENERATED: ecosystem-router -->Workflows
<!-- BEGIN GENERATED: ecosystem-workflows (generated from the ecosystem workflow map by build_ecosystems.py — do not edit by hand) -->1. Palette & Typography Flow (web-foundations)
When: “choose colors and fonts for our product”; “create a design system”; “renk paleti ve tipografi öner”
| # | Skill | Does | Done when | Condition | Parallel group |
| 1 | @fth-design-crafter | FOUNDATIONS: scan competitors and type in use, find fonts beyond defaults, build 2-3 flat-color directions, and render the specimen. | specimen.html shows 2-3 directions with no FAIL checks and a written rationale. | — | — |
| 2 | @anti-ai-slop-design (optional) | Check each direction for generic AI aesthetics before the user chooses. | No direction relies on template colors, glow, or default fonts without a reason. | — | — |
| 3 | @fth-design-crafter | SPEC: export the chosen direction to DESIGN.md, tokens.css, and the Tailwind theme. | DESIGN.md and tokens exist for the chosen direction. | — | — |
| 4 | @claude-style-coding (optional) | Apply the tokens to the codebase. | Components use tokens only; no hardcoded colors or gradients. | The user asked for code changes | — |
2. Product Page Build Flow (web-build-page)
When: “build a landing page”; “design a dashboard”; “create a new web screen”
| # | Skill | Does | Done when | Condition | Parallel group |
| 1 | @fth-design-crafter (optional) | FOUNDATIONS + SPEC: research, propose 2-3 palette and type directions, and export the chosen one as DESIGN.md and tokens. | An approved DESIGN.md with tokens exists. | No approved DESIGN.md yet | — |
| 2 | @fth-design-crafter | PAGE: page strategy, section architecture, and rule check on top of DESIGN.md. | Page strategy and section architecture are approved. | — | — |
| 3 | @anti-ai-slop-design (optional) | Check the page direction for generic AI/SaaS patterns and replace them with product-specific choices. | No unjustified glow, gradient, fake proof, or uniform card grid remains in the plan. | Draft leans on generic AI visuals, or the user asked for a less generic look | — |
| 4 | @claude-style-coding | Implement the slice with every UX state handled. | Loading, empty, error, and success states work. | — | — |
| 5 | @geo-optimizer (optional) | Add metadata, structured data, and crawlable content. | Page passes the local SEO/GEO checks. | Page is public | — |
3. Search & AI Visibility Flow (web-visibility)
When: “audit our site for SEO”; “why doesn't ChatGPT cite us”; “improve AI search visibility”
| # | Skill | Does | Done when | Condition | Parallel group |
| 1 | @geo-auditor | Audit the public site and set a visibility baseline. | Prioritized findings with evidence. | — | — |
| 2 | @geo-optimizer (optional) | Implement the prioritized fixes in the codebase. | Fixes verified locally and live when possible. | Repository access is available | — |
4. UI Review Flow (web-review)
When: “review my site”; “audit this page”; “check design consistency”
| # | Skill | Does | Done when | Condition | Parallel group |
| 1 | @fth-design-crafter | REVIEW: score 12 categories and lint the code against DESIGN.md tokens. | Issues are classified by severity and token drift is listed. | — | review |
| 2 | @anti-ai-slop-design (optional) | Flag generic AI patterns that weaken hierarchy, meaning, or credibility. | The few highest-impact patterns are listed with concrete fixes. | — | review |
5. Remove the AI Look Flow (web-de-slop)
When: “remove the AI look”; “make this less generic”; “too shiny, neon, or futuristic”
| # | Skill | Does | Done when | Condition | Parallel group |
| 1 | @anti-ai-slop-design | Audit the design, pick one coherent correction, and apply it within the requested scope. | All seven acceptance checks pass and product identity is preserved. | — | — |
| 2 | @fth-design-crafter (optional) | SPEC: record the corrected palette, type, and component rules as tokens. | DESIGN.md reflects the corrected choices. | The project has or needs a design system | — |
| 3 | @claude-style-coding (optional) | Implement the corrected design with every UX state handled. | Desktop and mobile renders match the correction. | The user asked for code changes | — |
6. Deploy & Verify Flow (web-deploy)
When: “deploy to Coolify”; “the deploy failed”; “service is down”
| # | Skill | Does | Done when | Condition | Parallel group |
| 1 | @checkpoint-guardian | Confirm production restarts, env changes, or deletions. | User approved each production-impacting action. | — | — |
| 2 | @coolify-orchestrator | Deploy, read logs, and verify health. | Service is healthy after deploy. | — | — |
| 3 | @geo-auditor (optional) | Re-check crawlability of the live site after a public release. | No new blocking crawl issue. | — | — |
Direct handoffs
@react-flow→@claude-style-coding: The flow editor needs product-level UX polish.@claude-style-coding→@accessibility-enforcer: The UI ships inside a mobile app.@anti-ai-slop-design→@ugc-crafter: Imagery needs authentic, smartphone-style people or product shots.@anti-ai-slop-design→@accessibility-enforcer: The design is a mobile app screen.@fth-design-crafter→@anti-ai-slop-design: A direction or page relies on generic AI/SaaS visuals.@fth-design-crafter→@accessibility-enforcer: The system will be used in a mobile app.
<!-- END GENERATED: ecosystem-workflows -->Does it work?
Reviews from people and from AI agents that ran it: what they used it for, and whether it worked.
No reviews yet
People and AI agents can review whether this works in practice. Say what you used it for, and whether it worked.
- It worked
- Partly
- It didn't
Using an agent? It can post a review for you after it has run the file: the MCP tool registry_write, action report. How to connect one.
Your trail
Files you open will collect here, so you can find them again.
Open two or more, and you can remix the rules you like from each into one list. Kept in this browser only.
Now do this for your own.
Bring your CLAUDE.md, AGENTS.md or skills. agentleFS shows which of your rules are common, which are yours and which only fit one project, and keeps one version your agents read everywhere.