跳到正文
cccskills
免费在 GitHub 公开

frontend-builder

Builds frontend interfaces inside an active Codex Project Autopilot project, following its approved plan and design direction. It implements responsive screens, covers key UI states, checks specified widths, and records implementation handoff details.

中文简介正在准备中。当前显示英语简介。

原文查看原文说明

Используй только внутри активного Codex Project Autopilot-проекта по утверждённому плану; не включай для обычных frontend-задач вне автопилота.

hashgraph-online/awesome-codex-plugins星标 1,422(GitHub 1,422 + cccskills 0)

实测评分 未实测

查看安装方法

适用场景

  • Building a planned frontend screen in an active Autopilot project
  • Implementing responsive layouts and key UI states
  • Recording routes, backend placeholders, and checked screen widths

包含的文件(1)

  • SKILL.md5.2 KB

SKILL.md(原文)

安装前可以查看交给 AI 代理的指令内容。

Фронтенд-разработчик

Правило активации

Если пользователь просто просит сделать интерфейс или страницу без явного запуска автопилота, этот skill не активируется.

Если в текущем workspace нет .codex-agent/state.json, этот skill не имеет права начинать работу и должен вернуть задачу оркестратору на bootstrap.

Ты отвечаешь за UI как инженер, а не просто как верстальщик.

Вход

  • implementation-plan.md
  • design-direction.md
  • active-context.md
  • state.json
  • локальный style-skill или брендовый гайд, если он приложен к проекту

Выход

  • frontend-код
  • execution-log.md
  • обновленный state.json

Обязан

  • читать design-direction.md перед правками UI
  • делать desktop и mobile одинаково аккуратно
  • учитывать loading, empty, error, success состояния
  • не ломать маршруты и смысл продукта ради косметики
  • сохранять композиционный замысел, а не упрощать всё до одинаковых секций
  • поддерживать разницу между hero, proof, detail и CTA по плотности и роли
  • проверять экран минимум на ширинах 1440, 768 и 375
  • не допускать горизонтальный скролл, вылезающий текст, случайные сиротские переносы и слишком мелкие tap targets
  • если дизайн требует сложных форм, реализовывать их осознанно через SVG/CSS, а не заменять обратно на прямоугольные блоки
  • проверять, что web-шрифты реально рендерят русский текст без падения в случайный fallback

Инженерный стиль

Ты не просто “рисуешь UI”. Ты должен собрать интерфейс так, чтобы:

  • пользователь понимал, что делать дальше
  • состояния не ломали сценарий
  • реализация не имитировала логику, которой нет
  • первый экран не терял свой визуальный якорь после перевода в код
  • proof-блок выглядел убедительно, а не как ещё одна декоративная панель
  • типографика оставалась читаемой на мобильном, а не просто “уменьшенной”
  • сложные формы, перекрытия и асимметрия не ломали читаемость и адаптив
  • русский текст не распадался из-за неподходящей гарнитуры или слишком узких мерок

Запрещено

  • скатываться в generic UI
  • подменять реальную архитектуру красивой витриной
  • придумывать несуществующие backend API
  • сводить все секции к одному карточному паттерну
  • выравнивать весь экран до “аккуратной, но безликой” сетки
  • считать адаптив готовым без ручной проверки реального мобильного экрана
  • упрощать смелую композицию до очередного grid+cards без явной причины

Самопроверка

  • интерфейс понятный?
  • mobile не сломан?
  • дизайн не деградировал до шаблона?
  • все критичные состояния покрыты?
  • hero всё ещё держит внимание?
  • секции различаются по роли, а не только по тексту?
  • нет горизонтального скролла и обрезанного текста?
  • headline и CTA нормально читаются на 375 px?
  • ключевые кнопки и поля удобны для пальца?
  • форма-язык из design direction сохранён, а не потерян в коде?
  • шрифты корректно поддерживают язык интерфейса?

Handoff QA

Передай:

  • какие маршруты реально реализованы
  • какие состояния покрыты
  • что осталось заглушкой или depends on backend
  • на каких ширинах экран реально проверен

评价

还没有评价。欢迎分享你的使用感受。

评论

无需登录即可发表。欢迎分享使用感受、提问,或说明在哪些环境下无法运行。

还没有评论。来写第一条吧。

提交后会立即公开。请勿填写邮箱、电话等个人信息。URL 最多 2 个。

0 / 1000 字

此表单受 reCAPTCHA 保护,适用 Google 的隐私权政策和服务条款。

同一仓库的技能

Plan worthwhile local tasks by checking dependencies, effects, resources, and platform boundaries, then execute the exact approved plan. It can use safe parallel work or suitable Apple-silicon backends when the project exposes them.

中文简介正在准备中。当前显示英语简介。

  • Speed up independent local build or test steps
  • Plan a task with several dependency-linked operations
  • Choose an Apple-silicon backend for supported numerical or media work
hashgraph-online/awesome-codex-plugins14222026年10月27日 更新

add

免费

Record deferred engineering decisions and temporary workarounds in a debt registry, with context such as effort, ongoing cost, affected area, and payoff trigger. Entries receive short labels so they can be reviewed or dropped later.

中文简介正在准备中。当前显示英语简介。

  • Logging a TODO or unfinished implementation
  • Recording a temporary default or bypassed check
  • Tracking a swallowed error or loosened type
hashgraph-online/awesome-codex-plugins14222026年10月28日 更新

Generate or compare AI agent code for LangChain, EINO, AutoGen, AgentScope, and CrewAI using framework-specific templates, API mappings, conventions, and project structures. Reference files include verification dates to help identify potentially outdated guidance.

中文简介正在准备中。当前显示英语简介。

  • Creating an agent project for a chosen framework
  • Comparing APIs across supported agent frameworks
  • Referencing framework-specific tool and memory patterns
hashgraph-online/awesome-codex-plugins14222026年10月26日 更新

Investigate a reproducible bug, test failure, or unexpected page behavior, then make a narrowly scoped fix. The workflow calls for a regression test before changing code, verifies the fix, and reports remaining risks and evidence while avoiding unrelated refactoring or feature work.

中文简介正在准备中。当前显示英语简介。

  • Finding the cause of a failing test
  • Fixing an unexpected page or feature behavior
  • Adding a regression test before a minimal code change
hashgraph-online/awesome-codex-plugins14222026年10月28日 更新

Build an AI agent project through six collaborative stages, from requirements and architecture to tools, prompts, code generation, and verification. Start framework-independent, then generate a runnable project for frameworks such as LangChain, EINO, AutoGen, AgentScope, or CrewAI.

中文简介正在准备中。当前显示英语简介。

  • Designing an AI agent from a business need
  • Generating a runnable agent project
  • Planning tools, prompts, and orchestration
hashgraph-online/awesome-codex-plugins14222026年10月26日 更新

Audit a project or learning workflow for scope drift, conflicting plans, inconsistent names, and code quality concerns. The skill reads project files and code, then reports evidence, severity, and suggested next steps without changing files.

中文简介正在准备中。当前显示英语简介。

  • Checking whether project work has drifted from its agreed scope
  • Finding conflicting plans or inconsistent naming
  • Reviewing code against project decisions without editing it
hashgraph-online/awesome-codex-plugins14222026年10月28日 更新

查看 hashgraph-online 的全部技能

报告此技能的问题