Agent skill

Frontend Dev

by doccker in doccker/cc-use-exp

前端开发规范,包含 Vue 3 编码规范、UI 风格约束、TypeScript 规范等. An agent skill from doccker/cc-use-exp.

Custom licenceAuto-check passedFrontend & Design

Install Frontend Dev

skills CLI
$ npx skills add doccker/cc-use-exp --skill frontend-dev -a claude-code

Project install by default; add -g for ~/.claude/skills/.

GitHub CLI
$ gh skill install doccker/cc-use-exp frontend-dev --agent claude-code

Project scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).

Manual copy
$ git clone --depth 1 https://github.com/doccker/cc-use-exp.git skills-src && mkdir -p .claude/skills && cp -r skills-src/skills/frontend-dev .claude/skills/frontend-dev && rm -rf skills-src

Use ~/.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/

Facts

Skill name
frontend-dev
GitHub stars
1.1k
Token cost
~1.7k tokens
SKILL.md length
201 words
Files
4 (incl. references)
Skills in repo
67
Repo updated
First seen
Licence
Custom licence

At a glance

前端开发规范,包含 Vue 3 编码规范、UI 风格约束、TypeScript 规范等. An agent skill from doccker/cc-use-exp.

  • Frontend & Design work in your project
  • SKILL.md covers UI 风格约束, 技术栈, Vue 编码规范 and 状态管理(Pinia), plus 10 more sections
  • Instructions only: no scripts, shell commands, URLs or credentials in SKILL.md

What it does

Frontend Dev is an agent skill from doccker/cc-use-exp. 前端开发规范,包含 Vue 3 编码规范、UI 风格约束、TypeScript 规范等

Its SKILL.md is about 1.7k tokens, which your agent loads only when the skill is triggered. The skill folder holds 4 other files, including reference files (for example `references/date-time.md`, `references/frontend-style.md` and `references/miniapp-pitfalls.md`).

It sits in Frontend & Design. It works with Vue.js, TypeScript and React. The repository describes itself as: ⛔ No longer maintained → dev-agent-kit/recipes 让 Claude Code、Antigravity、Gemini CLI、Codex、Cursor 开箱即用的分层配置模板,总结十多年的日常开发经验.

When your agent uses it

  • Frontend & Design work in your project

Example prompts

  • “/frontend-dev”

What it can do on your machine

Read from SKILL.md and the folder at commit 64470cb. 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 (its code samples are typescript and vue).

    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

Frontend Dev loads about 1.7k tokens when it runs, and up to ~7.8k if it reads all its reference files. Until then it costs about 14 tokens; SKILL.md has 201 words of instructions outside code blocks.

Always · name and description, kept in context so the agent knows when to use it
~14
When it runs · the whole SKILL.md, loaded when a task matches
~1.7k
With references · SKILL.md plus every file in references/, read only if the agent opens them
~7.8k

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

Its licence (Custom licence) doesn't allow us to republish the file, so here is its outline and opening line. It has 201 words (~1,681 tokens).

name
frontend-dev
version
v3.0
paths
**/*.vue, **/*.tsx, **/*.jsx, **/*.ts, **/*.js, **/*.css, **/*.scss, **/*.less, **/package.json, **/vite.config.*

Read the full SKILL.md on GitHub

Files

SKILL.md and 3 other files (references) in skills/frontend-dev of doccker/cc-use-exp.

  • SKILL.md
  • references/date-time.md
  • references/frontend-style.md
  • references/miniapp-pitfalls.md

Open the folder on GitHubat commit 64470cb

Compare with similar skills

Frontend Dev 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.

Frontend Dev compared with similar skills
SkillStarsUsed inTokensAuto-checkLicenceRepo updated
Frontend Dev this skilldoccker/cc-use-exp1.1k—~1.7kAutomated safety check: PassCustom licence
Component ForgeEliasOulkadi/shokunin114—~3.6kAutomated safety check: NotesMIT
Frontend Code ReviewProgrammerAnthony/Expert-Coding-Harness235—~614Automated safety check: PassMIT
Frontend Componentqf-studio/navigator354—~4.5kAutomated safety check: NotesMIT
Dokan Frontend Devgetdokan/dokan288—~1.9kAutomated safety check: PassNone
Migrate Webapi Selectallmicrosoft/power-platform-skills967—~5.3kAutomated safety check: NotesMIT

Similar skills

  • Component Forge

    EliasOulkadi/shokunin

    Build production-grade components for React, Vue 3, and Svelte 5 with all states (loading, empty, error, success, idle), TypeScript strict, WCAG 2.2 accessibility, server components (RSC), and…

    114 GitHub stars~3.6k tokensUpdated 3 days ago
    Frontend & DesignAuto-check: notes
  • Frontend Code Review

    ProgrammerAnthony/Expert-Coding-Harness

    A skill your agent uses when 用户需要审查前端代码(React/Vue/Next.js/TypeScript/Tailwind等)、检查代码质量、性能问题、可维护性、安全漏洞、最佳实践落地时。触发场景:前端代码评审、前端代码优化、React/Vue代码检查、TypeScript代码审查、前端性能优化、前端安全审计、前端代码规范检查。

    235 GitHub stars~614 tokensUpdated 4 mo ago
    Frontend & DesignAuto-check passed
  • Frontend Component

    qf-studio/navigator

    Create React/Vue component with TypeScript, tests, and styles.

    354 GitHub stars~4.5k tokensUpdated yesterday
    Frontend & DesignAuto-check: notes
  • Dokan Frontend Dev

    getdokan/dokan

    Add or modify Dokan frontend code (React, TypeScript, Vue, Tailwind).

    288 GitHub stars~1.9k tokensUpdated today
    Frontend & DesignAuto-check passed
  • Migrate Webapi Selectall

    microsoft/power-platform-skills

    Official

    Reviews and migrates deprecated wildcard () values in Power Pages Web API fields site settings to least-privilege explicit Dataverse columns.

    967 GitHub stars~5.3k tokensUpdated yesterday
    Frontend & DesignAuto-check: notes
  • Olore Xstate Latest

    olorehq/olore

    Local XState documentation reference (latest). An agent skill from olorehq/olore.

    103 GitHub stars~989 tokensUpdated yesterday
    Frontend & DesignAuto-check passed

More from doccker/cc-use-exp

All 67 skills in this repo
  • API Design Safety

    doccker/cc-use-exp

    当设计或修改 REST API 响应结构、处理 API 返回值,或生成 Excel/CSV/PDF/对账文件等下游产物时触发。防止 API 设计缺陷导致的字段错位、类型歧义,以及生成产物时关键字段缺失但静默成功的问题。

    1.1k GitHub stars~2.6k tokensUpdated 1 mo ago
    Auto-check passed
  • Cc Code Quality Principles

    doccker/cc-use-exp

    当编写新模块、设计接口、重构代码或代码审查时触发。提供经典模块化六原则检查清单(大小适中/调用深度/扇入扇出/边界清晰/作用域内聚/可预测性),适用于 PR/Review/新模块设计场景。

    1.1k GitHub stars~816 tokensUpdated 1 mo ago
    Auto-check passed
  • Cc Review

    doccker/cc-use-exp

    结构化代码审查工作流,适用于显式 quick/full/security review;不负责普通实现或 bug 修复流程。

    1.1k GitHub stars~541 tokensUpdated 1 mo ago
    Auto-check passed
  • Cc Streaming Export Safety

    doccker/cc-use-exp

    当实现用户驱动的大文件导出或批量序列化(Excel/CSV/JSON/JSONL/PDF,数据量未知或超过 1 万行/10 MB)时触发;普通小文件下载、静态资源下载、非导出 Writer/Report 类不触发。防止 OOM、临时文件残留、同步导出阻塞 HTTP 线程和表格公式注入。

    1.1k GitHub stars~2.2k tokensUpdated 1 mo ago
    Auto-check passed
  • Code Quality Principles

    doccker/cc-use-exp

    当编写新模块、设计接口、重构代码或代码审查时触发。提供经典模块化六原则检查清单(大小适中/调用深度/扇入扇出/边界清晰/作用域内聚/可预测性),适用于 PR/Review/新模块设计场景。

    1.1k GitHub stars~803 tokensUpdated 1 mo ago
    Auto-check passed
  • External System Debugging

    doccker/cc-use-exp

    涉及浏览器、编辑器、CDN/WAF、IM 平台、操作系统剪贴板、第三方 SaaS 等"外部黑盒系统"的代码编写或 bug 调试时触发。强制先抓真实环境数据再推理,避免连续 2 轮"凭代码推理"的修复 no-op。关键词:粘贴/复制异常、跨平台显示不一致、第三方 API 怪结果、CDN/WAF 拦截、本地复现失败、HTML→MD 转换丢属性。

    1.1k GitHub stars~823 tokensUpdated 1 mo ago
    Auto-check passed

Questions about Frontend Dev

What does Frontend Dev do?

前端开发规范,包含 Vue 3 编码规范、UI 风格约束、TypeScript 规范等. An agent skill from doccker/cc-use-exp. Frontend Dev is an agent skill from doccker/cc-use-exp.

When should I use Frontend Dev?

Frontend Dev fits situations like: frontend & Design work in your project.

How do I install Frontend Dev in Claude Code?

Run `npx skills add doccker/cc-use-exp --skill frontend-dev -a claude-code`. Or copy the skill folder (skills/frontend-dev in doccker/cc-use-exp) into .claude/skills/frontend-dev in your project. Claude Code loads it when a task matches its description.

How do I install Frontend Dev in Codex?

Run `npx skills add doccker/cc-use-exp --skill frontend-dev -a codex`. Or copy the skill folder (skills/frontend-dev in doccker/cc-use-exp) into .agents/skills/frontend-dev in your project. Codex loads it when a task matches its description.

Can I use Frontend Dev 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 doccker/cc-use-exp --skill frontend-dev -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/frontend-dev, .gemini/skills/frontend-dev, .github/skills/frontend-dev and .opencode/skills/frontend-dev in your project.

What does Frontend Dev need to run?

SKILL.md names no scripts, command-line tools or credentials: Frontend Dev is instructions for the agent only.

Does Frontend Dev 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 Frontend Dev 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 Frontend Dev use?

Frontend Dev has a licence file (the repository's licence) that doesn't match a standard licence. Read it on GitHub before reusing the skill.

How many tokens does Frontend Dev use?

About 1.7k tokens (SKILL.md is roughly 6.7k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full. Its references folder adds about 6.1k tokens, read only when the agent opens those files.

What are the alternatives to Frontend Dev?

Skills that share tags, products or a category with Frontend Dev: Component Forge (EliasOulkadi/shokunin, 114 stars), Frontend Code Review (ProgrammerAnthony/Expert-Coding-Harness, 235 stars), Frontend Component (qf-studio/navigator, 354 stars) and Dokan Frontend Dev (getdokan/dokan, 288 stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains Frontend Dev?

doccker (a GitHub user) maintains it in doccker/cc-use-exp, which has 1,063 GitHub stars. The repository holds 67 skills in this directory. The repository was last updated on August 26, 2026.

Source: doccker/cc-use-exp on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.