Exécutez n'importe quel Skill dans Manus
en un clic

Exécutez n'importe quel Skill dans Manus en un clic

loop-design-scan

Étoiles186

Forks32

Mis à jour4 juillet 2026 à 13:58

Local loop that scans a given area of the Accounted UI against the locked design system (.claude/rules/design.md) for UX friction, visual inconsistency, missing states, motion gaps, and accessibility issues (rendering pages in Chrome), then files GitHub issues for approved findings. Run locally (needs npm run dev + Chrome). Usage: /loop-design-scan <area> (e.g. bookkeeping, invoices, settings).

Installation

Installer avec Codex ou Claude Copiez ce prompt, collez-le dans Codex, Claude ou un autre assistant, puis laissez-le vérifier la page du skill et l'installer pour vous.

Exécuter dans Manus

Source

erp-mafia

erp-mafia/accounted

Ouvrir le dépôt GitHub Voir les dépôts du créateur

Téléchargement

Exécuter dans Manus

Métiers associésSOC

Basé sur la classification professionnelle SOC

Concepteurs web et d'interfaces numériquesProfessions informatiques et mathématiques·SOC 15-1255

SKILL.md

readonly

name	loop-design-scan
description	Local loop that scans a given area of the Accounted UI against the locked design system (.claude/rules/design.md) for UX friction, visual inconsistency, missing states, motion gaps, and accessibility issues (rendering pages in Chrome), then files GitHub issues for approved findings. Run locally (needs npm run dev + Chrome). Usage: /loop-design-scan <area> (e.g. bookkeeping, invoices, settings).

loop-design-scan

Goal: for one area of the app, surface concrete, design-system-grounded UI/UX improvements and file them as GitHub issues (deduped). This is the GitHub-Issues sibling of the scout-design skill (which targets Linear). Read .claude/loops.md first. Runs locally: it needs to render the UI.

Why local

A headless cloud session can't see the UI. This loop starts npm run dev and drives Chrome to render and screenshot real pages, then judges them against the design rules. Run on-demand or /loop 6h /loop-design-scan <area>.

1. Set up

npm run dev (starts on :3000). Load the design contract: .claude/rules/design.md (editorial monochrome, locked tokens, primitives, spacing scale, a11y bar).
Map the area to its route(s), e.g. bookkeeping → app/(dashboard)/bookkeeping/*.

2. Render & inspect each page (Chrome MCP)

For each page in the area: navigate, screenshot, and check the console for zero new errors/warnings. Exercise key states where possible: loading, empty, populated, error.

3. Evaluate against the design system (what "good" means here)

Flag concrete deviations, each tied to file:line and a rule:

Tokens/spacing: forbidden spacing (p-5, 2.5, hardcoded px), non-token colors for status (bg-blue-100, bg-emerald-500/10 instead of <Badge variant>).
Primitives not used: hand-rolled empty state / skeleton / page header / table instead of the components in .claude/rules/design.md (EmptyState, Skeleton, PageHeader, Table).
Missing states: no loading skeleton, no empty state, no error handling on a data view.
Typography: font-medium on Hedvig display text; missing tabular-nums on financial numbers.
Motion: press-scale / hover-lift / spring overshoot (all forbidden); missing transition-colors.
A11y: contrast < AA, icon-only button without aria-label, no visible focus ring, touch target < 40px.
UX friction: unclear labels, redundant PageHeader.description, slow paths for the 90-second session.

4. Adversarial verification (kill false positives)

Prefer the .claude/workflows/design-scan.js workflow: it fans out one agent per page, then runs a skeptic agent per finding ("is this a real regression against the locked design system, or a nitpick?"). Only findings that survive get filed. Cap 6 findings/run; log the rest.

5. File issues (deduped: see loops.md)

Title: [design] <area>: <short problem>
Labels: loop:auto, loop:design, enhancement
Body: what's wrong (with file:line) · which design rule it breaks · concrete before→after · screenshot ref
      <!-- loop-fingerprint: <area>:<file>:<rule> -->

Dedupe against existing loop:design issues before filing. Do not auto-fix UI here: design changes want human taste; file the ticket. (If asked to fix, use /frontend-design on an approved ticket.)

Plus depuis ce dépôt

même dépôt

loop-ignite

erp-mafia/accounted

Verify the agentic loops are actually running and ignite any that are not. Use at the start of any session, or whenever the user manually asks to "check the pr comments" / check logs / triage issues, which signals a loop is not firing. The loops exist (dev_docs/loops.md); the historical failure mode is that nobody initiates them.

2026-07-17185

create-extension

erp-mafia/accounted

Generate and implement extensions for Accounted: scaffold files, configure manifests, write event handlers, API routes, services, workspace UIs, settings panels, and testing. Use when creating new extensions, adding surfaces to existing extensions, or understanding the extension architecture. Covers the full lifecycle from scaffolding to registration.

2026-07-04185

create-ticket

erp-mafia/accounted

Create a detailed Linear ticket from a prompt. Asks 5 clarifying questions one at a time, scans the codebase, previews the ticket, and creates it via Linear MCP. Supports prompt templates: /create-ticket /security, /create-ticket /design <area>, /create-ticket <free text>.

2026-07-04185

erp-api-route

erp-mafia/accounted

Generate Next.js 16 API routes for Accounted with correct auth guards, Supabase client usage, event emission, journal entry creation, and error handling. Use when creating new API endpoints in app/api/. Handles the Next.js 16 async params pattern, ensureInitialized() for events, non-blocking journal entry wrapping, and defense-in-depth user_id filtering.

2026-07-04185

iso-27001-2022-compliance

erp-mafia/accounted

Authoritative reference for verifying ISO/IEC 27001:2022 compliance from a code repository. Use whenever a task involves auditing, automating, or generating evidence for ISO 27001 controls, the ISMS document set (Clauses 4-10), the Statement of Applicability (SoA), or Annex A controls (A.5 Organizational, A.6 People, A.7 Physical, A.8 Technological). Trigger on mentions of ISO 27001, ISO/IEC 27001, 27001:2022, ISMS, SoA, Annex A, "Statement of Applicability", a specific control identifier (A.5.x, A.6.x, A.7.x, A.8.x), Checkov/Trivy/Steampipe ISO compliance specs, the 2013-to-2022 control transition, NIST 800-53 / CIS Controls / SOC 2 crosswalks, agentic auditing of policy documents, or building CI/CD pipeline gates for security compliance. Trigger even when phrasing is indirect ("is our Terraform compliant", "scan our policies for audit readiness", "what does the standard require for cryptography", "map our controls to SOC 2", "build a compliance scanner"), these all qualify.

2026-07-04185

loop-issue-triage

erp-mafia/accounted

Proactive loop that keeps GitHub Issues in erp-mafia/accounted tidy (label, dedupe, close stale/already-fixed, reconcile with merged PRs) and auto-implements small, well-scoped fixes as PRs. Use on a schedule (cloud routine) or on-demand via /loop-issue-triage. Follows dev_docs/loops.md (propose-don't-merge).

2026-07-04185

name	loop-design-scan
description	Local loop that scans a given area of the Accounted UI against the locked design system (.claude/rules/design.md) for UX friction, visual inconsistency, missing states, motion gaps, and accessibility issues (rendering pages in Chrome), then files GitHub issues for approved findings. Run locally (needs npm run dev + Chrome). Usage: /loop-design-scan <area> (e.g. bookkeeping, invoices, settings).

loop-design-scan

Why local

1. Set up

npm run dev (starts on :3000). Load the design contract: .claude/rules/design.md (editorial monochrome, locked tokens, primitives, spacing scale, a11y bar).
Map the area to its route(s), e.g. bookkeeping → app/(dashboard)/bookkeeping/*.

2. Render & inspect each page (Chrome MCP)

For each page in the area: navigate, screenshot, and check the console for zero new errors/warnings. Exercise key states where possible: loading, empty, populated, error.

3. Evaluate against the design system (what "good" means here)

Flag concrete deviations, each tied to file:line and a rule:

Tokens/spacing: forbidden spacing (p-5, 2.5, hardcoded px), non-token colors for status (bg-blue-100, bg-emerald-500/10 instead of <Badge variant>).
Primitives not used: hand-rolled empty state / skeleton / page header / table instead of the components in .claude/rules/design.md (EmptyState, Skeleton, PageHeader, Table).
Missing states: no loading skeleton, no empty state, no error handling on a data view.
Typography: font-medium on Hedvig display text; missing tabular-nums on financial numbers.
Motion: press-scale / hover-lift / spring overshoot (all forbidden); missing transition-colors.
A11y: contrast < AA, icon-only button without aria-label, no visible focus ring, touch target < 40px.
UX friction: unclear labels, redundant PageHeader.description, slow paths for the 90-second session.

4. Adversarial verification (kill false positives)

5. File issues (deduped: see loops.md)

Title: [design] <area>: <short problem>
Labels: loop:auto, loop:design, enhancement
Body: what's wrong (with file:line) · which design rule it breaks · concrete before→after · screenshot ref
      <!-- loop-fingerprint: <area>:<file>:<rule> -->

Dedupe against existing loop:design issues before filing. Do not auto-fix UI here: design changes want human taste; file the ticket. (If asked to fix, use /frontend-design on an approved ticket.)