본문으로 건너뛰기
cccskills
무료GitHub에 공개

pb-redesign-app

Overhaul one app's UI against an audit: UX audit and UI review of the running app, current versus proposed design tokens, a before/after visual plan, a startcycle build, point fixes, accessibility and browser tests, delivered as a PR after GO. Use for "redesign this app", "design overhaul", "audit and fix the UI", "give the app a new look".

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

연동 도구GitHub
설치 방법 보기

포함된 파일(1)

  • SKILL.md4.0 KB

SKILL.md(원문)

설치하기 전에 에이전트에게 전달되는 지시 내용을 확인할 수 있습니다.

Redesign one app

What you get: one app's UI overhauled against a written audit, new design tokens and a before/after plan, delivered as a pull request after your GO.

Inputs

  • repo — the app's checkout, default the current directory
  • app_url — the running local dev URL (not a remote or production site)
  • scope — the screens or flows to redesign, asked once

Steps

  1. ui-ux-pro-max review (plus ux-audit and ui-review if the optional StyleSeed package is installed) — app_url opened and screenshotted per screen in scope with chrome-devtools (puppeteer_navigate, puppeteer_screenshot) → production_artifacts/pb-redesign-app-<date>/audit.md with numbered findings — app_url unreachable or chrome-devtools unavailable → log it and stop; every finding has a screenshot or a file reference
  2. Token diff (godmode-ui-ux DTCG rules; ui-tokens if the optional StyleSeed package is installed) — current tokens read from the repo versus proposed DTCG tokens → tokens-diff.md in the same folder — diff written, nothing applied yet
  3. plan-canvas (Plan Builder mode) — before/after per screen in scope → plan link or file in the run log — stops for approval
  4. startcycle (architect, techlead, reviewer) — the approved plan and audit → build on a new branch; godmode-ui-ux rules apply to the UI work — reviewer reports no open blocking finding
  5. bdb-visual-edit — point fixes the human annotates in the running app via aos-plan-canvas annotate, each after its diff plan is approved → edited files in the run log — only the picked files change
  6. wcag-audit-patterns and webapp-testing — accessibility pass plus a browser test of the changed screens, then the repo's lint and test scripts → results in the run log — all exit 0; each audit finding marked fixed or deferred
  7. [GO] git push -u origin <branch> and gh pr create — one combined GO; the WAITING FOR GO line names the branch, base branch, PR title and the head SHA. The run stops here until the human types GO. Where the hook runs, it covers git push; gh pr create is not hooked, so this GO is its only guard. Afterwards gh pr view <branch> --json state -q .state equals OPEN and the PR URL is logged.

Run log: production_artifacts/pb-redesign-app-<date>.md in the start directory, never committed

Rules

  • Anything other than the literal GO (case-insensitive) is not a GO; a GO covers only that one step, one time.
  • GO is by contract in every harness. The go-gate hook is only a backstop on Claude Code, OpenCode and agy (Codex: unverified; Cursor, Kimi: none). A missing hook is never permission to proceed.
  • A failed check stops the run: write the failure into the run log and report. No silent retries.
  • Write one run-log line per step as it completes (N. done|skipped|failed — artifact — check result) and WAITING FOR GO: <step> at each gate.

리뷰

아직 리뷰가 없습니다. 사용해 본 소감을 남겨 주세요.

댓글

로그인 없이 쓸 수 있습니다. 사용 후기, 질문, 작동하지 않은 환경 등을 편하게 남겨 주세요.

아직 댓글이 없습니다. 첫 댓글을 남겨 보세요.

보내면 바로 공개됩니다. 이메일 주소나 전화번호 같은 개인 정보는 쓰지 마세요. URL은 2개까지입니다.

0 / 1,000자

이 양식은 reCAPTCHA로 보호되며 Google 개인정보처리방침 및 서비스 약관이 적용됩니다.

같은 저장소의 스킬

Use when manage multiple local CLI agents via tmux sessions (start/stop/monitor/assign) with cron-friendly scheduling.

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

hybridlabor-api/aos62026년 10월 16일 업데이트

Use when a hybrid memory system that provides persistent, searchable knowledge management for AI agents (Architecture, Patterns, Decisions).

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

hybridlabor-api/aos62026년 10월 16일 업데이트

Reference for how BDB structures autonomous software engineering work — the seven-node dispatcher graph (Architect, TechLead, UI/UX, Engineering, Media/EventTech, Reviewer, Shipping) that /startcycle-graph actually runs. Use when you need the high-level lifecycle framing without inventing your own process.

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

hybridlabor-api/aos62026년 10월 16일 업데이트

Tools are how AI agents interact with the world. A well-designed tool is the difference between an agent that works and one that hallucinates, fails silently, or costs 10x more tokens than necessary. This skill covers tool design from schema to error handling.

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

hybridlabor-api/aos62026년 10월 16일 업데이트

Harness patterns for coding agents — memory, permissions, context engineering, delegation, skills, hooks, bootstrap.

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

hybridlabor-api/aos62026년 10월 16일 업데이트

agenttrail: live map of a multi-agent build in the browser: which plan component is being worked on, by which agent or harness, what is done and what is stuck. Use when a multi-agent pipeline starts (/startcycle, /startcycle-graph, /teamwork-preview) or after a plan-canvas approve, when the user asks to see what the agents are doing ("live map", "build board", "who is running now"), or by yourself whenever a multi-agent run is under way — no user prompt needed.

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

hybridlabor-api/aos62026년 10월 16일 업데이트

hybridlabor-api의 스킬 모두 보기

이 스킬의 문제 신고