fe-modularization

A guide for deciding how frontend code should be divided between modules, including where files belong and how modules connect.

In plain words
What is it for?
Moving code, creating modules, adding extension points, barrels, or endpoints, fixing boundary violations, and reviewing module design.
Why use it?
It helps prevent unclear module boundaries, unwanted side effects, and difficult moves when the frontend structure changes.

Skill for Claude CodeCodex

Install

Getting it into your agent

One page per mod, every tool's command on it. A separate URL per tool would split the same page into five that compete with each other.

agentmods
npx agentmods add skills/metabase/metabase/fe-modularization
Any agent
npx skills add metabase/metabase --skill fe-modularization
Clone the repo
git clone --depth 1 https://github.com/metabase/metabase

Made for: Claude Code, Codex.

Per session 59 Skills are progressive disclosure: only the name and description are preloaded; the body loads when the skill is used.
When invoked 3,398 The whole file, excluding the scripts and references it only reads on demand.
Security scan A 0 findings. Scan, not verified.
Origin unknown No closer match found in the catalogue.
Token cost

What it costs to keep this loaded

Counted locally with the o200k_base tokenizer, which is exact for GPT models; Claude uses its own tokenizer and its counts differ. Treat this as one consistent yardstick across the catalogue rather than a bill. Prices are per million input tokens.

ModelPer sessionOnce invoked
Fable 5 $0.00059 $0.03398
Opus 5 $0.00030 $0.01699
Sonnet 5 $0.00012 $0.00680
Haiku 4.5 $0.00006 $0.00340

Measured 3d ago against content hash d68a69ae14c1, method: parsed. Prices are Anthropic first-party input rates as of 2026-08-30, from the pricing page.

Security

Grade A, and why

fe-modularization scanned grade A with 0 findings against 26 rules in 11 categories — prompt injection, anti-refusal, data exfiltration, privilege escalation, supply chain, agent snooping, system-prompt leakage, SSRF and excessive agency — measured 3d ago.

A static scan of the body, not an audit. Every finding is printed with the line that produced it so you can judge whether it matters here. A mod is markdown that instructs an agent; that is exactly why what it instructs is worth reading.

Nothing flagged

None of the 26 patterns this scan looks for appear in this file: no shell pipes, no recursive deletes, no credential paths, no hidden text, no instruction-override or anti-refusal phrasing, no agent-config snooping. That is not a guarantee, it is the absence of the things that are checkable.

.claude/skills/fe-modularization/SKILL.md · 249 lines

The source is not reproduced here

No licence file

A repository with no LICENSE is all rights reserved by default, so the body is not copied here. The metadata, the measurements and the link are.

Read it on GitHub

Changes

What this file has done since we first saw it

Hashed on every crawl. A supply-chain change to an agent config is a question of when, not whether, so the history is kept rather than the latest state alone.

  1. 3d ago First seen · 249 lines · 59 tokens per session scan A d68a69ae14c1

Subscribe to this mod's changes

fe-modularization is a skill published in the GitHub repository metabase/metabase (49,035 stars, last pushed yesterday), with no licence file. It adds 59 tokens to every session and 3,398 once invoked, about $0.0003 per session on Opus 5. A static security scan graded it A with 0 findings. No closer match exists in the catalogue, so it is treated as the original; first seen 2026-08-30.

Related

Other skills, from other repositories

create-dashboard

Create dac dashboards by writing YAML or TSX definition files. Use when the user wants to create, modify, or understand dashboard files, widget configuration, filters, query templating, or CLI usage. TSX dashboards enable loops, variables, custom components, and data-driven layouts impossible in YAML.

bruin-data/dac · 62 tokens

bi-validation

BI validator driven by ValidationHook — inspects every dashboard, chart, and dataset delivered in the run, verifies config quality (chart type, metrics, dimensions, dataset wiring) and data presence via getchartdata when supported.

Datus-ai/Datus-agent · 47 tokens

grafana-dashboard

Create, view, and manage Grafana dashboards with panels and datasources.

Datus-ai/Datus-agent · 18 tokens

superset-dashboard

Create, view, and manage Superset dashboards with charts and datasets.

Datus-ai/Datus-agent · 17 tokens

data-access

A 股零鉴权取数手册。当需要真实的行情 / 市值 / 估值快照、季度报告期累计财务数据、机构一致预期 EPS、PE 历史序列、公告标题、日 K 线、交易日历时使用;只允许运行本 skill 登记的脚本取数(腾讯 / 新浪 / 同花顺 / baostock / 深交所 / 东财),禁止凭模型记忆给数,禁止自造爬虫。概念解释、观点讨论等不需要取数的话题不要加载。.

simonlin1212/Vibe-Research · 127 tokens

industry-chain

产业链下钻与不可替代性判定方法:以龙头为"需求入口"沿供应链逐层下钻(整机 / 龙头 → 部件 → 核心器件 → 材料 → 衬底与设备),用物理 / 材料约束(扩产周期、良率、认证周期、有无替代)当筛子找供给刚性的卡口;给每个标的贴不可替代性标签(techmoat / capacitymoat / both / 待补)并列证据;含"卡口越硬越贵"与预期差四问的校准。当任务涉及产业链位置、上下游、护城河、不可替代性、供给瓶颈、竞争格局时加载;单纯取数、估值计算、财报拆分等不涉及产业链结构的任务不要加载。只产出框架与证据表,不给投资动作建议。.

simonlin1212/Vibe-Research · 212 tokens