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

live-ui-iteration

Continuous localhost UI iteration loop with Arman, through full surface certification. Use when he asks to fix, refine, review, or iterate on a page, route, panel, overlay, or other UI while he may inspect localhost. NOT for a report-only UI audit.

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

설치 방법 보기

포함된 파일(4)

  • SKILL.md10.4 KB
  • agents/openai.yaml315 B
  • references/readiness-gate.md3.6 KB
  • references/skill-router.md3.1 KB

SKILL.md(원문)

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

Live UI iteration

<!-- rules:stamp -->

Rules from common-docs/systems/platform/ui-shell/FEATURE.md — edit there, never here (python3 common-docs/meta/scripts/one_home.py --write).

  1. Delete means archive, everywhere. A delete that does not archive is a defect.
  2. A menu regroup ships as a side-by-side demo page with a what-goes-where list, never as a direct change.
  3. Every surface mounts the canonical menu. Use NonEditableContextMenu or EditableContextMenu from features/context-menu-v3/. Never use a bespoke DropdownMenu or a raw contextmenu handler, and never keep both.
  4. A menu without a source is a defect. A menu with no contentSource, entity or surfaceName opens with every verb dark. Fix these before unwired surfaces.
  5. Lists built on EntityListPage inherit the row menu through ItemContextMenu. They need their own wiring only for surface-specific sections.
  6. A window or overlay mounts its own menu. It never delegates to the page under it.
  7. Reuse the domain's action registry. Never create a second one.
  8. Secret-bearing surfaces follow VaultContextMenu. Pass getApplicationScope, force selection: "", put names and field keys in the content (never values or notes), and pass no entity.
  9. Done means the menu opens clean. The console shows no INERT MENU or VALUE MAPPING GAP scream.
  10. Chat is a universal agent host. Never bind a page-agent roster to it.
  11. Anything with an id shows it through the one canonical id component (display plus one-click copy).
  12. Flagship and first-run screens get a bespoke elevated stage, not the 28px app-chrome controls.
  13. Before a link goes to Arman, every screen on its path passes the Steve Jobs bar (walked and fixed by an Opus reviewer).
  14. Admin tables filter, search and sort on the server, and people are picked by name or email, never by id.
  15. Wasted vertical space is the worst sin; every status shown is backed by real state.
  16. A new output style or menu layout is a NEW function used only by the new path; never thin a shared builder.
  17. A page fetches only what it shows, each thing once; every removed fetch ships its on-engagement load.
<!-- rules:stamp-end -->

Own the focused surface continuously: requested changes first, then full surface completion, then certification. Arman may inspect localhost while you work; that is visibility, not a pause or a request for an early handoff.

The default is the full pass

  • Do not stop after the named fix. Make Arman's explicit changes first, verify that they are visible on localhost, send a brief progress update with the route, then continue through the full surface pass without asking whether to proceed.
  • Do not stop at a plan, diagnosis, partial checklist, or “first pass.” Continue until every applicable certification item is pass/fixed/N/A and live verification is complete.
  • Only narrow the work when Arman explicitly says “only make these changes,” “stop after this,” or equivalent. Even then, verify those changes proportionately and state that the surface was not fully certified.
  • New feedback becomes priority zero. Apply it, make it visible, then resume the remaining certification work.

Eligibility and continuity

  • Agent-native surfaces remain eligible. Chat, Agent Builder, runners, and window panels may use an outside helper with a recorded approved invocation contract. Keep their native subject agents and permanent residents isolated from ad-hoc surface values; placement or binding alone is never approval.
  • Integration never pauses this loop. Periodic integration, type sync, release, or shared-checkout sweeps are expected background activity. Checkpoint and push the current coherent owned files, then resume immediately; never wait for a sweep or release to end.
  • Only an exact-file collision can suspend a path. Preserve both owners' work, continue every non-overlapping task, and resume the collided path as soon as it is isolated. A general "freeze" message is not authority to stop the fleet.

Read references/readiness-gate.md before the first browser handoff. Read references/skill-router.md while gathering the surface so every applicable specialist contract is invoked.

Start independently

  1. Resolve the exact route, panel, or overlay and its feature directory.
  2. Read docs/official/browser-testing.md; start or reuse only pnpm preview:start on port 3001. (Cloud container? No dev server there — follow the cloud lane in page-pass "Where you verify".)
  3. Use the available browser tool to open an isolated in-app Browser for routine localhost work. Computer Use is allowed; no particular skill name or API is required. If the isolated browser cannot complete the task, follow the pre-authorized new-tab fallback in docs/official/browser-testing.md.
  4. Authenticate yourself with the repository's pre-authorized flows: the dev-login nonce handshake (openssl rand -hex 16 > .dev-login-nonce, then /api/dev-login?nonce=<that value>&next=/<route>) or AI_ADMIN_USERNAME / AI_ADMIN_PASSWORD at /login. Never put a durable token in a URL — the ?token= path was removed for leaking it. Never ask Arman to log in, provide credentials, click through setup, or perform routine verification.
  5. Inspect the real surface before editing: desktop state, current behavior, console, feature docs, manifest/readiness/last check, and exact-route review feedback.
  6. Run the first-screen gate at 1280×800. If a table, editor, list, or other primary workspace is only a token strip at the bottom—or starts below the fold—remove the obstruction before lower-priority polish. Browser visibility is not a pause.

Never print credentials or tokens. Keep the managed preview running so Arman can inspect it; close only the Browser tabs or groups you created when they are no longer needed.

Work order

1. Arman's request first

Implement the requested behavior before beginning broad cleanup. Preserve working behavior and use canonical primitives. Verify the requested path immediately. When it is visible, tell Arman where it is and that the full surface pass is continuing; do not call it complete.

2. Complete the surface

Invoke surface-check and run S1–S18 on the focused surface, fixing as you go. The default permits the time needed to establish high-value foundations such as Surface Values, runtime scope, bindings, write targets, canonical context menus, Pro inputs, mobile behavior, and documentation.

  • If the route is a real agent-aware surface, invoke the consolidated surface-authoring lifecycle and earn honest readiness.
  • Invoke context-menu-v3 for the full menu contract; Surface Check S6 is the verifier, not the implementation body.
  • Apply .claude/ui-skills/shared/application-ui-copy-and-hierarchy.md across the visible page. Remove duplicated titles, generic introductory prose, decorative hero spacing, and other obvious app-as-article habits without deleting consequential meaning.
  • The header owns destinations. A second body-level row of route buttons fails the pass. Remove duplicate doors; put remaining destinations in the canonical header navigation/overflow or one compact menu that opens the canonical route/window.
  • Summary cards stay summaries. Multiple actions inside a KPI/status tile share one compact row or menu; vertically stacked full-width buttons fail unless choosing between those actions is the card's primary job.
  • Clear and revert must tell the truth. Exercise them against real data; zero mutations are never success, and when removing an override reveals a fallback, name its provenance and explain that the override was removed rather than implying the effective value became blank.
  • Personalize at the named entity boundary. In multi-brand, multi-site, or agency surfaces, an organization-level membership, entitlement, or default may grant access but never proves that every child record shares that classification. Trace the exact brand/site/record field before showing an automatic recommendation or claiming “your industry.”
  • A workbench is not a dashboard. Keep the primary job's controls and work area on the main path. Fold a supporting insight into the number or control it explains; reduce setup, readiness, and coverage to compact doors into their owning routes; render templates and defaults only on their catalog or setup surface.
  • Fix shared primitives when the defect originates there; do not patch every consumer independently.
  • Keep the boundary to this surface and the canonical primitives it directly depends on. Log unrelated repo defects instead of turning the session into a fleet-wide sweep.

3. Certify live

Follow the readiness gate. A type-check or screenshot alone is not certification. Exercise the real requested interaction, surface context, menus, responsive layout, themes, states, console, and Error Inspector at the required viewports.

Review-queue relationship

At startup, read agent.review_queue rows for the exact route/surface and fold relevant existing feedback into the work. Respect ownership before claiming or mutating a row; never claim unrelated backlog merely because it shares a feature.

This live conversation normally replaces a new asynchronous review item because Arman is already walking through the result. Existing rows still follow agent-review-queue: local repair proof does not promote a row that requires later independent deployed verification.

Handoff

Say ready for review only when:

  • Arman's requested changes pass.
  • Every applicable S1–S18 item is pass/fixed/N/A with no deferred visual proof.
  • Desktop and mobile, light and dark, context-menu parity, console, and Error Inspector checks pass.
  • Surface readiness, DB mirror, docs, and ledger are truthful and current where applicable.
  • The exact localhost route is available.

Give Arman the route, a compact summary of changes, and the specific interactions worth reviewing. Keep localhost running. Do not claim deployment or production proof from localhost.

리뷰

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

댓글

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

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

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

0 / 1,000자

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

같은 저장소의 스킬

Admin debug system wiring for the floating AdminIndicator's live debug data and Copy Full Context. Use when adding debug visibility to a route or feature, wiring useDebugContext or the debug panel, capturing console errors, or enabling the copy-context workflow for a page.

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

armanisadeghi/ai-matrx32026년 10월 21일 업데이트

Compact two-icon Copy / Copy-for-AI controls (components/agent-copy). Use when adding copy buttons to a row, card, list, or record; merging duplicate Copy/JSON/AI controls; continuing the copy rollout; or writing a Copy-for-AI payload. NOT for markdown content actions (use rich-document-actions).

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

armanisadeghi/ai-matrx32026년 10월 21일 업데이트

Disclosing a surface's existing fixed AI jobs in the shell's top Agents menu. Use when a page, panel, overlay, or window already runs a mandate behind a button, assist, automatic action, or mode; when the agent-disclosure guard names a file; or during a surface check.

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

armanisadeghi/ai-matrx32026년 10월 21일 업데이트

The watch-fix-rerun method for making an existing platform agent or automated process efficient and correct: baseline its ledger, run one unit yourself, fix the class behind every wasted call, rerun, record. Use when asked to improve, optimize, watch, or 'make efficient' an agent, a sandbox session, a sync job, or any recurring automated process.

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

armanisadeghi/ai-matrx32026년 10월 21일 업데이트

Redux state for agent execution and firing agent shortcuts. Use when editing features/agents/redux/, building agent UI, creating a conversation, touching assembleRequest or NDJSON stream state, wiring agent-state selectors, adding a per-conversation capability, or triggering a shortcut from a button, menu, or code (useShortcutTrigger, launchAgentExecution).

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

armanisadeghi/ai-matrx32026년 10월 21일 업데이트

The provision for a call site: the exhaustive menu of values that place in the code can realistically produce. Use before creating or fixing a mandate or agent that reasons about more than its own input, when deciding whether an agent can answer at all with what it is sent, or when its output 'looks right' but nobody checked it could be. NOT for building the agent (use create-agent).

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

armanisadeghi/ai-matrx32026년 10월 21일 업데이트

armanisadeghi의 스킬 모두 보기

이 스킬의 문제 신고