frontend-development

frontend-development is a skill for Claude Code, Codex from BuildrAI/Buildr. It costs 56 tokens per session (1,086 once invoked), scanned A, original, MIT.

A frontend development skill for changing web pages, interactions, and styling. Frontend means the part of an application that people see and use in a browser.

In plain words
What is it for?
It is for building or fixing pages and components, reusing established interactions, isolating demo data and side effects, and keeping formal and prototype views consistent.
Why use it?
It helps changes fit the existing components, theme, data flow, and business behavior instead of creating disconnected copies or unauthorized prototypes.

Skill for Claude CodeCodex

Written for no agent in particular: nothing here depends on one.

Good fit It is for building or fixing pages and components, reusing established interactions, isolating demo data and side effects, and keeping formal and prototype views consistent.

Compare 6 skills from other repositories ↓
Install with agentmods
npx agentmods add skills/buildrai/buildr/frontend-development
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.

Any agent
npx skills add BuildrAI/Buildr --skill frontend-development
Clone the repo
git clone --depth 1 https://github.com/BuildrAI/Buildr

Made for: Claude Code, Codex.

Wrote this? Show the measurements

A badge with what this costs and how it scanned, read live from this page, so it follows the numbers instead of freezing them. Markdown for a README, HTML for a documentation site or a project page.

agentmods badge for frontend-development

README.md
[![agentmods](https://agentmods.dev/badge/skills/buildrai/buildr/frontend-development/github.svg)](https://agentmods.dev/skills/buildrai/buildr/frontend-development)
Your own site
<a href="https://agentmods.dev/skills/buildrai/buildr/frontend-development"><img src="https://agentmods.dev/badge/skills/buildrai/buildr/frontend-development/github.svg" alt="Measured on agentmods" height="20"></a>

Or the 80×15 button, for a site that already has a row of RSS and ATOM ones. Only the verdict fits; the numbers stay here.

agentmods 80×15 button for frontend-development

Your own site · 80×15
<a href="https://agentmods.dev/skills/buildrai/buildr/frontend-development"><img src="https://agentmods.dev/badge/skills/buildrai/buildr/frontend-development.svg" alt="Reviewed on agentmods" width="80" height="20"></a>
Per session 56 Skills are progressive disclosure: only the name and description are preloaded; the body loads when the skill is used.
When invoked 1,086 The whole file, excluding the scripts and references it only reads on demand.
Security scan A 0 findings. A grade says what 26 rules found in the file — not that it is safe.
Origin original 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.1 $0.00056 $0.01086
Opus 5.5 $0.00022 $0.00434
Sonnet 5.5 $0.00011 $0.00217
Haiku 4.5 $0.00006 $0.00109

Measured 10d ago against content hash 060d1102e683, method: parsed. Prices are Anthropic first-party input rates as of 2026-10-07, from the pricing page.

Security

Grade A, and why

frontend-development 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 10d 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.

projects/product/services/buildr/resources/workspace/skills/buildr/frontend-development/SKILL.md · 43 lines

What it actually says

前端开发

先找到本次界面对应的真实页面、组件(Component)、主题和交互来源,再决定复用、扩展或新增。遵循项目技术栈和目录约定,不要求引入 Buildr Web 的框架或重构整个前端。

按实际职责开发

  • 页面负责装配完整业务场景;组件(Component)承接可独立理解的展示与交互,相关输入、等待、成功和失败反馈保持在一起。
  • 优先复用已有组件(Component)、主题变量和完整交互;有意改变已有行为时明确原因并修改共同来源,不能默默复制近似实现。复用范围包含产品导航与页面框架;修改或模拟局部内容不授权重画外围界面。
  • 局部实现先留在所属功能,真实跨功能复用再提升到公共位置。不要为每个元素拆文件,也不要求所有组件(Component)无状态。
  • 确需两种运行入口时,由入口接入数据、导航和业务操作,共享界面不直接绑定真实写入。保留正式入口的保存时机、错误反馈和版本校验。
  • 样式延续当前主题与局部作用范围;新增颜色、间距或交互前先检查已有语义。让相关示例就近说明输入、操作结果及关键状态,不另建组件登记平台。

原型选择与授权

识别新增关键页面、主要布局或核心功能交互变化;这类变化存在实质设计选择且用户尚未表达偏好时,先询问是否需要界面原型(UI Prototype)。只有用户明确同意,才使用原型技能(UI Prototype Skill)。识别为“大改动”本身不是制作授权。

普通小改动、已明确的局部文案、样式和交互修复直接实现,不默认生成原型。只说“继续开发”不构成原型授权;同一任务已有明确授权或拒绝继续适用,不逐轮重复询问。此技能(Skill)可以持续指导开发,但不自动触发原型技能(UI Prototype Skill)。

用户决定按已有原型实施时,先核对确认版本与保存位置;尚未归入任务或仅留在临时预览位置时,在正式前端编辑前接续 ui-prototype 的“成果保存与接续”,由它保全成果、更新引用并验证适用的任务内展示,不重新询问是否制作原型。没有原型的普通局部修复仍直接实施。

原型源码已有执行位置时,在正式前端编辑前消费 task-triage 已核验的接续结果,在同一工作树(Worktree)和分支(Branch)继续开发;不因开始正式实现另建一套候选源码,也不因页面归档复制共享组件。没有源码位置时由任务分流按正常策略选择。

已有原型时先核对它与当前设计及源码的差异;以当前已确认设计和行为规范为准,不让演示中的临时操作覆盖真实业务语义。

已授权原型与正式页面的共同来源

需要原型时,两种入口导入同一份相关界面与主题源码。原型入口只提供模拟数据(Mock Data)、内存操作和受控导航,不导入真实会话、请求初始化或业务写入。仅替换数据不够:保存、跳转、上传等副作用也必须可替换。

例如现有下拉选择是“选中即保存”,正式入口传入已有保存能力,演示入口传入本地保存;不改成另一套多选确认流程。需要侧边说明时,复用已有侧边阅读容器与交互,只替换内容。

无可用来源或无法隔离真实操作时说明具体限制,不用手写近似冒充共同源码。新界面可以在已授权的隔离位置先形成候选组件(Component),审看后完善同一来源。

完成判断

指出本次复用或扩展的源文件,核对调用方、样式和副作用归属。按影响验证真实交互及必要状态;存在模拟入口时对照两种入口,说明模拟边界和未覆盖范围。共同源码变化后重建受影响原型并重新验证,不把旧画面的验证当成当前结果。

代码结构取舍沿用适用的代码架构技能(Code Architecture Skill);体验设计取舍沿用适用的体验设计技能(UX Design Skill)。不要求一次普通开发完整执行所有相关技能(Skill),不创建额外审批或验证状态。

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. 10d ago Changed · +2 lines 060d1102e683
  2. 29d ago First seen · 41 lines · 56 tokens per session scan A 31ec16a90ed7

Subscribe to this mod's changes

frontend-development is a skill published in the GitHub repository BuildrAI/Buildr (28 stars, last pushed yesterday), licensed MIT. It adds 56 tokens to every session and 1,086 once invoked, about $0.0002 per session on Opus 5.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-09-27.

Related

Other skills, from other repositories

anti-slop-design

Autonomous Principal Design Technologist. Cures vibe-coded software from AI frontend slop using curated token archetypes and 7-axis quality gating.

sickn33/agentic-awesome-skills · 34 tokens

chakra-ui-builder

Build responsive, accessible UI components and layouts using Chakra UI v3, install or configure Chakra UI in new and existing projects, and design scalable themes using tokens, semantic tokens, recipes, and slot recipes. Use this skill whenever a user asks to build, create, or generate any UI component, page, form…

chakra-ui/chakra-ui · 214 tokens

visual-ralph

Visual Ralph orchestration for frontend UI from generated references, static references, or live URL targets, using $ultragoal with built-in visual verdict and pixel-diff evidence until the implementation matches and leaves a reproducible design system.

Yeachan-Heo/oh-my-codex · 52 tokens

open-design-setup

Prepare or repair a project's prototyping environment so open-design can build prototypes with the project's own component library and render them through the project's toolchain. Use when the library target is needed and docs/design/prototyping.md is missing, stale, or failing; excludes HTML-only design work and…

compozy/compozy · 67 tokens

edit-site

Plans, coordinates and customizes PAC CLI-downloaded Standard or Enhanced data model non-SPA Power Pages sites created from Microsoft templates or manually in Design Studio. Use for requests involving pages, localized content, navigation, assets, snippets, site markers, Liquid/web templates, page layouts, or styling.…

microsoft/power-platform-skills · 104 tokens

frontend-visual-qa

Audits rendered UI and specific task/object-link handoffs; excludes ordinary source citations alone. Audits already-rendered UI and Markdown/Obsidian image layout — web app, deck/slide, dashboard, design-system, or Electron/native app — via real-browser/native-app journeys and a Playwright sweep. Use after UI…

daymade/claude-code-skills · 125 tokens