本文へ移動
cccskills
無料GitHub で公開

scroll-audit

Audit a live website's or local page's scroll experience and return a scored remediation plan. Use for an audit, review, score or benchmark request about scroll performance, parallax, pinned sections, scroll-jacking, reduced motion or motion accessibility, including "why does this page feel janky". Inspect authorised targets, separate observed behavior from unavailable evidence, and prioritise repairs across pacing, performance, accessibility and emotional arc. This skill diagnoses existing pages; it does not build or publish them.

日本語の概要は準備中です。原文の説明を表示しています。

MustBeSimo/web-design-studioスター 50(GitHub 50 + cccskills 0)

実行スコア 未検証

インストール方法を見る

含まれるファイル(6)

  • SKILL.md7.6 KB
  • .clawhubignore31 B
  • references/detection.md4.8 KB
  • references/example-remediation-plan.md6.1 KB
  • references/report-template.md3.4 KB
  • references/scoring.md6.0 KB

SKILL.md(原文)

インストールする前に、エージェントに与えられる指示の中身を確認できます。

Scroll audit

Use Web Design Studio to inspect an existing scroll experience and turn evidence into a scored repair plan. Use the agent's available browser and source access. This text-only skill includes a rubric and report template, not an executable scanner. Scores describe the inspected page and conditions, not every visitor.

When this fires

  • The user asks to audit, review, score or benchmark an existing scroll experience.
  • A page feels janky, gets stuck in pinned sections or fights normal scrolling.
  • Parallax, camera movement or scroll-jacking makes content difficult to read.
  • The user wants reduced-motion or motion-accessibility findings with priorities.

Keep the review within the requested page, route and device scope. A general SEO review or a request to build a new site is outside this skill's purpose.

Before you fetch

Audit only sites the user owns or is authorised to test. Establish that scope before loading the target. A benchmark request does not waive this requirement. The fetch runs in the agent's network context. Loading scripts or using controls can trigger analytics, ad impressions or other side effects.

Confirm before fetching localhost or internal URLs. Existing explicit permission for the exact target is sufficient. Read a supplied local file within the user's scope; obtain confirmation before serving or opening it through a local URL.

Never enter real credentials. Prefer a throwaway test account and a session the user has already authenticated. Do not request passwords in chat, bypass access controls, submit forms or activate purchases as part of this audit. If access is unavailable, report the limitation and inspect only the authorised public surface.

Procedure

1. Fetch and analyse

Open the requested route and record the URL or local path, date, device, browser, viewport, motion preference and available tools. Follow detection across all seven categories. Inspect the opening, transitions, readable holds and exit, then reverse direction. Observe keyboard access and the reduced-motion version when the tools support them.

Record evidence by chapter and selector. A missing browser, inaccessible source or unavailable trace is missing evidence. Do not infer a frame rate from smooth-looking screenshots or infer accessibility from the presence of a media query.

2. Score each dimension

Read scoring. Apply its four formulas to the recorded findings and keep a deduction ledger. State the observation behind each deduction, its count and any cap. Explain judgment calls, especially narrative findings. If a required measurement is unavailable, label the affected score provisional or not assessed. Do not present an incomplete review as a complete overall grade.

3. Check taste violations

Apply all seventeen checks and the critical caps in scoring. Keep these deductions separate from the base formula so another reviewer can reproduce the result. Explain brand-dependent judgments. The rubric is a diagnostic convention, not a prescription for a site's fonts, palette, layout or motion character.

4. Write remediation-plan.md

Use the report template. Put critical issues first, with the affected chapter, evidence, practical repair and estimated effort. Distinguish measured results from rubric judgments and projected improvements. Do not invent timings, source filenames or before/after scores. Record unavailable checks explicitly. Write in the user's requested output directory.

See the fictional remediation plan for a completed example with a deduction ledger and unavailable checks.

5. Present and offer fixes

Summarise the overall score and grade, or explain why either is unavailable. Name the single fix that would remove the largest observed obstacle. Offer to implement critical fixes with cinematic-scroll if it is installed. The audit alone does not authorise changes. After an accepted repair, repeat affected checks and compare them under the same conditions.

Dimensions and grades

Score each dimension from 0 to 100. Pacing, Performance, Accessibility and Emotional Arc each contribute 25% of the overall result after deductions and caps.

TierScore bandPacingPerformanceAccessibilityEmotional arc
A90-100Deliberate rhythm and releaseFew observed technical penaltiesContent and controls remain reachableClear progression serving the subject
B70-89Isolated timing issuesMinor execution issuesLimited access gapsCoherent but repetitive progression
C50-69Repeated timing problemsNoticeable execution problemsSignificant gapsWeak connection between motion and meaning
D30-49Scroll feels obstructedSerious execution problemsEssential paths are obstructedRepetitive or disconnected treatment
F0-29Broken or persistently trapped flowCritical execution failureEssential content is unreachableDisorienting or contradictory treatment

Use the calculated band, not the description alone, to assign a grade. A high score is not certification of accessibility, device performance or conversion.

Edge cases

  • No scroll interactions: the inherited rubric uses Pacing 50, Performance 100, Accessibility 100 and Emotional Arc 30, overall 70. Label this a nominal static baseline, not measured proof of performance or accessibility. Report observed defects separately. Do not claim that a static page needs motion to tell a story.
  • SPA: cover the requested initial route and loaded state. Identify untested navigation and recommend separate route checks rather than claiming whole-app coverage.
  • Authentication: use an authorised test session. If none is available, mark protected content not assessed and explain which public states were inspected.
  • Custom library: assess observed scheduling, property changes and cleanup. A recognised library name earns no points by itself.
  • CSS-only scroll timelines: inspect computed animation state, supported-browser behavior and the fallback. No JavaScript does not mean no scroll interaction.
  • Mixed quality: score chapters first and weight their scores by scroll range. Show those ranges so a long broken chapter is not hidden by a short successful one.
  • Reduced motion active: label the active preference. Compare normal and reduced modes separately when authorised and possible. Report a score gap above 30 points with its cause; missing normal-mode evidence must stay visible.

Output contract

Write remediation-plan.md using the linked template. Then return a short chat summary with the overall score, grade, the single most impactful fix and remaining unknowns. If a complete score is unsupported, say so instead of filling the gap. Offer to implement critical fixes with the cinematic-scroll skill if installed.

レビュー

まだレビューはありません。使ってみた感想をお寄せください。

コメント

ログインなしで書き込めます。使ってみた感想、質問、動かなかった環境などを気軽にどうぞ。

まだコメントはありません。最初のコメントを書いてみませんか。

送信するとすぐに公開されます。メールアドレスや電話番号などの個人情報は書かないでください。URL は 2 つまでです。

0 / 1000 文字

このフォームは reCAPTCHA で保護されており、Google のプライバシーポリシーと利用規約が適用されます。

同じリポジトリのスキル

Design and build cinematic websites, interactive portfolios, product stories, and real-time 3D experiences with subject-specific art direction and scroll choreography. Use for new builds, redesigns, motion improvements, scroll audits, or storyboards in standalone HTML and existing apps; includes responsive, reduced-motion, and static fallbacks. Not for ordinary dashboards or unrelated animation.

日本語の概要は準備中です。原文の説明を表示しています。

MustBeSimo/web-design-studio502026年10月28日 更新

Decide what a launch, landing or product page must say and prove before any design or motion work. Use for a landing page, launch page, waitlist, pricing page copy or conversion brief, including requests about a headline, call to action, objections, proof or "what should the page say". Establish the audience, offer, traffic context and credible evidence, then deliver a story brief for cinematic-scroll. Use for new pages or message revisions, without prescribing a visual style or inventing business facts.

日本語の概要は準備中です。原文の説明を表示しています。

MustBeSimo/web-design-studio502026年10月28日 更新

MustBeSimo のスキルをすべて見る

このスキルの問題を報告する