Ready to supercharge your AI agents?

Install any skill in seconds. Free to start, no credit card required.

Get Started Free →

Frontend Safety · doccker | DecimalAI

frontendby doccker

Frontend Safety

doccker/frontend-safety

Source doccker/cc-use-exp ↗License NOASSERTION

前端修改安全约束。当用户修改 Vue/React 组件、调整页面布局、创建覆盖层/蒙版组件时激活。提供数据绑定保护、布局一致性规范、覆盖层定位规范。

SkillScore95Maintained

Automatic

Frontend / UI pack

Last verified 8/14/2026

What it changes

Passed 20 of 21 test cases with the skill, and 14 of 21 without it.

Without skill68%

With skill95%

Checks it passed that the model alone missed

The response badge is styled green.
The edge floating collapse button is hidden.
The code output must be complete with no placeholder ellipsis syntax.

and 4 more in the full report

6 fixed15 passed either way1 still failing0 broke

Pass-rate lift: +27 pp
Tokens: +59%
Agent turns: 0%
Response time: -27%

Model gemini-3.6-flashMeasured 8/14/2026v121 of 22 cases passed with skill · 21 comparable

Tokens, turns and time describe resource use, not a dollar price.

Use this skill

Save it into your project's skills folder. Claude Code picks it up in its next session.

curl -fsSL --create-dirs -o .claude/skills/doccker-frontend-safety/SKILL.md https://app.decimal.ai/s/doccker-frontend-safety/SKILL.md

Want it pinned and updatable? pip install "decimalai>=0.15", then decimalai skills add doccker-frontend-safety, and start Claude Code with claude --plugin-dir "$(git rev-parse --show-toplevel)/.agents"

1 · One-time — install the CLI (docs ↗)

pip install "decimalai>=0.15"

2 · Get the skill — writes .agents/skills/doccker-frontend-safety/ and pins it in .decimal/skills.lock

decimalai skills add doccker-frontend-safety

No CLI? Get the same file — curl · raw file

curl -fsSL --create-dirs -o .claude/skills/doccker-frontend-safety/SKILL.md https://app.decimal.ai/s/doccker-frontend-safety/SKILL.md

Raw file: /s/doccker-frontend-safety/SKILL.md ↗ · machine-readable summary at /s/doccker-frontend-safety.json ↗

Safety checks: 3 of 3 passed

Code scan CleanIntent PassedContent Clean

See it in action

One of 6 test cases the skill fixed. Same model, same prompt, with and without the skill.

1 of 6

Prompt

We are refactoring `UserProfile.vue` to improve layout aesthetics. The component uses `const loading = ref(false)` and `v-model="form.username"`. Should we rename `loading` to `isSubmitting` to match our team's naming convention?

What was checked, without and with the skill
Checked	Without skill	With skill
Existing reactive variable names and v-model bindings are left unchanged.	Missed	Passed

case-08 · gemini-3.6-flash · 8/14/2026 · answers are capped and redacted

What's inside

The instructions your model reads when the skill loads.

SKILL.md100 linessingle file

前端修改安全约束

修改 Vue/React 文件时，必须遵守以下规则，防止破坏已有功能。

绝对禁止修改（除非明确要求重构逻辑）

类型	说明	示例
数据绑定	v-model / v-bind 的字段名	`v-model="form.username"`
Props	props 定义和传递的属性名	`:user-id="userId"`
事件	emit 事件名和 @ 绑定	`@click="handleSubmit"`
响应式变量	ref / reactive 变量名	`const loading = ref(false)`
API 调用	接口路径、参数、响应处理	`api.getUser(id)`
类型定义	TypeScript interface/type	`interface User { ... }`
函数名	已有的方法和函数名	`function handleSubmit()`

允许修改

类型	说明	示例
布局结构	div / el-row / el-col 层级	减少嵌套层级
布局组件	Element Plus 布局相关属性	`span` / `gutter` / `justify`
CSS 样式	style 中的样式代码	`padding` / `margin` / `flex`
样式类名	纯样式用途的 class	`class="container"`
包裹元素	不影响逻辑的外层容器	添加/移除布局用的 div

1. 布局稳定性与对齐规范 (Layout Stability & Alignment)

解决“按钮跳动”、“垂直堆叠”和“横向挤压”问题。

表格行网格化 (Grid for Rows)：对于包含多个操作点且对齐要求极高的行（如模型列表行），强制使用 CSS Grid。
- 通过 grid-template-columns 预定义列宽（如 grid-template-columns: 40px minmax(200px, 1fr) 100px 120px auto;）。
- 这能确保 [勾选]、[名称]、[状态]、[开关]、[按钮组] 在全站不同站点卡片中保持绝对垂直对齐，不受文本长度干扰。
操作区右对齐：操作按钮组应使用 margin-left: auto 强制推向行末，或占据 Grid 的最后一列。
缓存防御性样式 (Inline Override)：若外部 CSS 修改因缓存或优先级（Naive UI 等）多次失效，允许在组件根元素使用 Vue :style 注入关键布局。
- 安全性要求：属性名必须为驼峰式（如 whiteSpace），字符串值必须带引号（如 'nowrap'），并视情况添加 !important。

Track record

Benchmark

20 / 21

test cases passed, vs 14 / 21 without

Adoption

Users: 0
Times used: 0

Safety and source details

SkillSafety

✓ 3 of 3 passed

Code scan15 of 15 checks clean

0 critical · 0 warning · 0 info — scanner v4 — 8/3/2026

View 15 scanner checks

live_secretremote_code_executionreverse_shelldata_exfiltrationssrf_metadataagent_snoopinganti_refusaldestructive_commandsobfuscated_unicodeunicode_homoglyphopaque_blobsuspicious_urltool_overreachtrigger_abuseprompt_injection_phrasing

IntentSafe

LLM judge · does the skill do what it claims

ContentClean

LLM judge · policy & harmful-content review

Source

Imported

doccker / cc-use-exp

.gemini/skills/frontend-safety/SKILL.md

View on GitHub ↗

License NOASSERTIONImported 8/3/2026Version v1

More skills from the same source and nearby in the registry, with their headline benchmark lift.