Agent skill

Project Use Cases

by GoogleChrome in GoogleChrome/modern-web-guidance-src

Best practices for creating use cases for a given feature. An agent skill from GoogleChrome/modern-web-guidance-src.

Apache-2.0Auto-check passed

Install Project Use Cases

skills CLI
$ npx skills add GoogleChrome/modern-web-guidance-src --skill project-use-cases -a claude-code

Project install by default; add -g for ~/.claude/skills/.

GitHub CLI
$ gh skill install GoogleChrome/modern-web-guidance-src project-use-cases --agent claude-code

Project scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).

Manual copy
$ git clone --depth 1 https://github.com/GoogleChrome/modern-web-guidance-src.git skills-src && mkdir -p .claude/skills && cp -r skills-src/.agents/skills/project-use-cases .claude/skills/project-use-cases && rm -rf skills-src

Use ~/.claude/skills/ instead of .claude/skills for a personal install. The folder must contain SKILL.md.

Claude Code skills documentation · loads skills from .claude/skills/

Facts

Skill name
project-use-cases
GitHub stars
1.1k
Token cost
~2.7k tokens
SKILL.md length
1,534 words
Files
2
Skills in repo
14
Repo updated
First seen
Licence
Apache-2.0

At a glance

Best practices for creating use cases for a given feature. An agent skill from GoogleChrome/modern-web-guidance-src.

  • Works in 3 steps: Stage 1: Identifying use cases for a… → Stage 2: Authoring guidance for a use case → Stage 3: Evaluating guidance for a use…
  • SKILL.md covers Identifying action-oriented…, Minimizing overlap and Implementation and scaffolding
  • Calls pnpm

What it does

Project Use Cases is an agent skill from GoogleChrome/modern-web-guidance-src. Best practices for creating use cases for a given feature. This is the first step in creating a new guide. Use this skill any time you're writing or reviewing a use case under the guides/ directory.

Its SKILL.md is about 2.7k tokens, which your agent loads only when the skill is triggered. The skill folder holds 2 other files.

The licence is Apache-2.0.

Example prompts

  • “/project-use-cases”

Workflow steps

3 steps, taken from the first numbered list in SKILL.md.

  1. Stage 1: Identifying use cases for a feature (you are here)
  2. Stage 2: Authoring guidance for a use case
  3. Stage 3: Evaluating guidance for a use case

What it can do on your machine

Read from SKILL.md and the folder at commit c312847. It shows what the files ask for, not the result of running them.

  • Tool permissions

    Pre-approves nothing: there is no allowed-tools line, so your agent's usual permission prompts apply.

    From allowed-tools in the SKILL.md frontmatter.

  • Runs code

    Shell commands in SKILL.md call:

    • pnpm

    From the folder's file list and the shell code blocks in SKILL.md.

  • Network

    No URLs in SKILL.md. Its commands use pnpm, which can reach the network depending on how they are called.

    From URLs in SKILL.md, links to its own repository left out.

  • Credentials

    Names no API keys, tokens, secrets or passwords.

    From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.

Context cost

Project Use Cases loads about 2.7k tokens when it runs. Until then it costs about 54 tokens; SKILL.md has 1,534 words of instructions outside code blocks.

Always · name and description, kept in context so the agent knows when to use it
~54
When it runs · the whole SKILL.md, loaded when a task matches
~2.7k

Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.

Safety

Auto-check passed

The automated check found no risky patterns in SKILL.md.

Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); files beside SKILL.md are not scanned.

SKILL.md

The full file from GoogleChrome/modern-web-guidance-src at commit c312847, republished under its Apache-2.0 licence (© GoogleChrome). 1,534 words, ~2,719 tokens.

Download SKILL.mdSave it as .claude/skills/project-use-cases/SKILL.md (or your agent's skills folder). This skill also uses 1 other file; get the full folder from GitHub.
name
project-use-cases
description
Best practices for creating use cases for a given feature. This is the first step in creating a new guide. Use this skill any time you're writing or reviewing a use case under the guides/ directory.

Stage 1: Identifying use cases for a feature (Needs use cases)

The primary goal of this stage is to translate a technical web platform feature into a carefully selected set of its most common and important use cases. This is the first of three stages in creating guidance:

  1. Stage 1: Identifying use cases for a feature (you are here)
  2. Stage 2: Authoring guidance for a use case
  3. Stage 3: Evaluating guidance for a use case

Identifying action-oriented tasks

A "use case" in this project is not a description of a feature; it's a task that the user is trying to implement, or a problem they're trying to solve. The feature is only relevant in the sense that it's part of the recommended solution for the use case.

  • Action-oriented thinking: Frame every use case as a task, and make sure it starts with a verb. Instead of "Scroll-driven animations support horizontal scrolling," use something like "Synchronize an animation's progress with the horizontal scroll distance of a container."
  • Bridge the knowledge gap: Assume the developer knows what they want to build (e.g., "I need a sticky header that shrinks on scroll") but might not know which modern web feature is the best solution (e.g., scroll-driven animations). Your use cases should facilitate this discovery by focusing on the desired outcome.
  • Balance Generality and Distinctness: The use case description should be general enough to capture the overall intent and match a wide range of user prompts. However, to leverage the vector search effectively, ensure the guide uses clear, descriptive headings. The RAG system chunks content by heading, making specific parts of your guide discoverable for specific prompts. The implementation details within those chunks must remain distinct and specific to ensure the agent receives an unambiguous solution. For example, instead of saying "Fade an image in/out..." in the description, say "Smoothly hide/show a component...".
  • Focus on the WHAT not the HOW: Do not mention the solution in the use case description. NEVER mention the specific API methods, properties, or the target feature name in the description itself. For example, avoid phrases like "...by doing..." or "...through the use of...". Ideally, the use case description should remain constant, even if the recommended features or best practices for implementing it change over time.
  • Scope: Aim for 2-5 distinct use cases per feature. Each use case should represent a distinct implementation pattern or a significant variation in how the feature is applied. IMPORTANT: Not every sub-feature or feature variation needs a use case.
  • MANDATORY: Drop niche use cases: Every guide must solve a tangible, high-priority developer need. Do not document niche features or visual tricks with negligible practical impact. Omit use cases unlikely to match real developer prompts.
  • Merge rather than split: If two proposed use cases would result in guides that are 99% identical, combine them into one, more general use case. Duplicate guides bloat context windows and create confusing contradictions.
  • Break down complex features: Conversely, do not cram multi-step, intricate features (like passkeys) into a single generic guide. Split them into logical, detailed use cases.
  • UX-Driven, Not Feature-Driven: Do not simply list every method, property, or option of an API as a separate use case. A use case must represent a distinct user experience goal or a distinct developer problem, not just a variation in API usage. If the implementation across proposed use cases is 90% identical, consolidate them.
  • Avoid Forcing Use Cases on Low-Level Utilities: If a feature is a low-level utility (like a new Promise method or a general object cloning function) that primarily acts as a drop-in replacement for legacy patterns, avoid forcing it into multiple outcome-oriented use cases. Instead, consider recommending a single 'Fundamental Guide' (e.g., "Deep cloning complex objects") or placing it in a top-level discipline skill file.
  • Granular Guide Decomposition (Avoid Monoliths): For discipline-level guides, ensure the guidance is broken down into granular "subskills" (i.e., smaller, focused guides) rather than a single monolithic guide. Monolithic guides are too complex to evaluate in the harness, as they present too many best practices to test simultaneously. The primary discipline-level guide (either a category root guide at guides/<category>/<category>/guide.md, such as guides/css/css/guide.md, or a named guide registered in DISCIPLINE_GUIDES in lib/guide-validation.ts, such as guides/wasm/cpp-on-the-web/guide.md) should serve as a conceptual "hub" that establishes the agent's mental model for the discipline, explaining when and how to reference each granular subskill guide, and linking them via the {{ GUIDE_REF("guide-slug") }} macro.

Minimizing overlap

This guidance is ultimately served through a RAG (Retrieval-Augmented Generation) search system. If multiple guides have significant overlap, coding agents may struggle to select the most relevant one, leading to confusing or contradictory advice.

  • Check existing guides: Before creating a new use case, review existing guides in the same discipline.
  • Search by web-feature-id: Each guide lists the web features it relies on in the web-feature-ids metadata field. Search for the ID of the feature you're writing about in existing guides and open PRs to see how it's being used.
  • Merge or differentiate: If your proposed use case is substantially similar to an existing one, do not create a duplicate. Instead, consider how the existing guide should be updated to include your new scenario as a variation or a specific directive.
  • Distinct value proposition: Every new guide must offer a distinct solution to a distinct problem.
Show full SKILL.md (675 more words)Show less

Implementation and scaffolding

The following steps are REQUIRED for creating a new use case:

  • Step 1: Describe the use case

    You MUST choose a short (max 1024 characters), action-oriented description of the problem the feature solves. The description must be a single sentence, start with a verb, and answer the question: "What is the user trying to DO?"

    For example, a use case of the fetch-priority feature is "Deprioritize background data fetches made with the Fetch API to prevent network contention with user-initiated requests."

  • Step 2: Choose a category

    Use cases MUST live under the guides/ directory, organized into a single, high-level category such as motion or performance. List the current subdirectories under guides/ and choose the most appropriate one.

    Categorize by the use case, not the implementation. This is the "WHAT not HOW" principle applied to taxonomy: a category should name the user's goal (motion, overlays, datetime, typography), not the technology used to achieve it. Quick test: could someone who understands the use case but can't write the code file it correctly? If the only way to know where a guide belongs is to know which API it uses, the category is implementation-shaped. Two guides solving the same goal with different tech (e.g. a tab underline that morphs via anchor positioning vs. view transitions) belong in the same category.

    Some categories are named after a technology domain (css, html, canvas) because they are anchored by a comprehensive reference guide for that technology (e.g. html/html/guide.md). These are valid homes for use cases genuinely about that technology, or that don't yet have enough siblings to form a use-case cluster.

    File by primary goal; cover cross-cutting concerns inline. Performance, accessibility, privacy, security, and UX are verticals nearly every guide touches. File a guide by what it is primarily trying to accomplish and address secondary concerns in the guide.md body, not via category. A scroll-driven animation with a rendering cost still belongs in motion or scroll, with its performance notes in the guide, not in performance. (This is why the catch-all user-experience category was removed: UX is a vertical every guide addresses, not a bucket of its own.)

  • Step 3: Create the use case subdirectory

    Create a subdirectory under guides/<category>/ for your use case. The subdirectory name MUST be a short, slugified version of the action-oriented use case. For example, for the use case in Step 1, the subdirectory name is deprioritize-background-fetches.

    DO NOT prefix the slug with action verbs like create-, build-, or add-. Slugs are directory names scanned in lists—action verbs just add noise and make it harder to find what you're looking for.

  • Step 4: Create the guide.md stub

    Create a guide.md file in the new subdirectory. For now, the guide should only contain metadata about the use case. The actual content of the guide will be filled in later after peer review.

    The required YAML frontmatter fields are:

    • name: Short, slugified name of the use case.
    • description: Action-oriented description of the use case.
    • web-feature-ids: List of web feature IDs that the use case relies on. These can be found in the web-features package or via webstatus.dev.

    For example:

    yaml
    ---
    name: deprioritize-background-fetches
    description: Deprioritize background data fetches made with the Fetch API to prevent network contention with user-initiated requests.
    web-feature-ids:
      - fetch-priority
      - fetch
    ---
  • Step 5: Create the expectations.md stub

    Create an expectations.md file in the new subdirectory outlining the must-pass verification criteria for any application implementing this guidance.

  • Step 6: Generate base-app evaluation capsules

    Once guide.md and expectations.md are authored, run gd dev guides/<category>/<guide> to automatically generate and calibrate the evaluation capsules across SUPPORTED_BASE_APPS under targets/<base_app>/.

  • Step 7: Validate the use case

    Run pnpm --filter guides test to validate the use case structure and target integrity.

  • Step 8: Get the use case approved

    Submit the use case for review by creating a Pull Request containing the authored guide.md and expectations.md along with the generated targets/ directory.

After the use case is approved, you can proceed to refining the guidance and expectations as needed. Additional guidance for these stages is provided by the project-guides and project-evals skills.

© GoogleChrome, Apache-2.0. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file

Files

SKILL.md and 1 other file in .agents/skills/project-use-cases of GoogleChrome/modern-web-guidance-src.

  • SKILL.md
  • examples/demo.html

Open the folder on GitHubat commit c312847

Compare with similar skills

Project Use Cases next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.

Project Use Cases compared with similar skills
SkillStarsUsed inTokensAuto-checkLicenceRepo updated
Project Use Cases this skillGoogleChrome/modern-web-guidance-src1.1k—~2.7kAutomated safety check: PassApache-2.0
Case Reviewsickn33/agentic-awesome-skills47k1 repos~1.6kAutomated safety check: PassMIT
Case Reviewzhaoxuya520/reverse-skill40k1 repos~1.6kAutomated safety check: WarnMIT
Clinical Case Reportnexu-io/open-design100k—~2.2kAutomated safety check: PassApache-2.0
Secops Casesgoogle/skills21k—~3.2kAutomated safety check: WarnApache-2.0
Case Briefanthropics/claude-for-legal9.6k3 repos~1.6kAutomated safety check: PassApache-2.0

Similar skills

  • Case Review

    sickn33/agentic-awesome-skills

    Quality-gate review of a reverse-engineering or assessment case package: scope readiness, Evidence-to-Finding-to-Path traceability, work-item coverage, timeline consistency, and artifact hashes.

    47k GitHub starsUsed in 1 repo~1.6k tokens
    SecurityAuto-check passed
  • Case Review

    zhaoxuya520/reverse-skill

    Reviews a reverse-skill case package for scope readiness, Evidence to Finding to Path traceability, work item coverage, timeline references, and optional artifact hash integrity before report handoff.

    40k GitHub starsUsed in 1 repo~1.6k tokens
    SecurityAuto-check: warnings
  • Clinical Case Report

    nexu-io/open-design

    Structured medical case presentation for clinical rounds, conferences, and documentation.

    100k GitHub stars~2.2k tokensUpdated today
    Auto-check passed
  • Secops Cases

    google/skills

    Official

    Manage Google Security Operations (SecOps) SOAR cases throughout their lifecycle.

    21k GitHub stars~3.2k tokensUpdated today
    SecurityAuto-check: warnings
  • Case Brief

    anthropics/claude-for-legal

    Official

    Brief a case in your preferred format. An agent skill from anthropics/claude-for-legal.

    9.6k GitHub starsUsed in 3 repos~1.6k tokens
    Auto-check passed
  • Document Spf Use Case

    videojs/video.js

    Document an SPF use-case record. An agent skill from videojs/video.js.

    40k GitHub stars~431 tokensUpdated today
    Auto-check passed

More from GoogleChrome/modern-web-guidance-src

All 14 skills in this repo
  • Nightly Eval Investigation

    GoogleChrome/modern-web-guidance-src

    Downloads and analyzes the latest three distinct nightly evaluation runs (Claude Code, Codex CLI, and Jetski CLI) from the GCS remote dashboard to identify and flag unhealthy or low-performing tasks…

    1.1k GitHub stars~3.3k tokensUpdated today
    Auto-check passed
  • Chrome Extensions

    GoogleChrome/modern-web-guidance-src

    Build and publish Chrome Extensions using Manifest V3 best practices.

    1.1k GitHub stars~6.6k tokensUpdated today
    Auto-check: notes
  • Coherence Auditor

    GoogleChrome/modern-web-guidance-src

    Run a document coherence, link integrity, and git repository status audit across repository markdown files using a dedicated subagent.

    1.1k GitHub stars~901 tokensUpdated today
    Auto-check passed
  • Privacy

    GoogleChrome/modern-web-guidance-src

    Action-oriented guidelines for privacy by design, data minimization, third-party audits, and modern browser privacy APIs.

    1.1k GitHub stars~2.1k tokensUpdated today
    Auto-check passed
  • Project Coding Standards

    GoogleChrome/modern-web-guidance-src

    Coding style, architectural conventions, and PR review standards for the modern-web-guidance-src (guidance) repository.

    1.1k GitHub stars~2k tokensUpdated today
    Auto-check passed
  • Project Discipline Guides

    GoogleChrome/modern-web-guidance-src

    Workflow for refactoring discipline-level guides (e.g., JavaScript, CSS) to remove "Common Knowledge" by generating and comparing against model-specific "Knowledge Mirrors".

    1.1k GitHub stars~1.1k tokensUpdated today
    Auto-check passed

Questions about Project Use Cases

What does Project Use Cases do?

Best practices for creating use cases for a given feature. An agent skill from GoogleChrome/modern-web-guidance-src. Project Use Cases is an agent skill from GoogleChrome/modern-web-guidance-src. Best practices for creating use cases for a given feature.

How do I install Project Use Cases in Claude Code?

Run `npx skills add GoogleChrome/modern-web-guidance-src --skill project-use-cases -a claude-code`. Or copy the skill folder (.agents/skills/project-use-cases in GoogleChrome/modern-web-guidance-src) into .claude/skills/project-use-cases in your project. Claude Code loads it when a task matches its description.

How do I install Project Use Cases in Codex?

Run `npx skills add GoogleChrome/modern-web-guidance-src --skill project-use-cases -a codex`. Or copy the skill folder (.agents/skills/project-use-cases in GoogleChrome/modern-web-guidance-src) into .agents/skills/project-use-cases in your project. Codex loads it when a task matches its description.

Can I use Project Use Cases in Cursor, Gemini CLI or GitHub Copilot?

Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add GoogleChrome/modern-web-guidance-src --skill project-use-cases -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/project-use-cases, .gemini/skills/project-use-cases, .github/skills/project-use-cases and .opencode/skills/project-use-cases in your project.

What does Project Use Cases need to run?

Going by SKILL.md and its folder, Project Use Cases needs the command-line tools its instructions call (pnpm).

Does Project Use Cases access the network?

SKILL.md contains no URLs. Any network use would come from the scripts or tools the agent runs. This is read from the text; nothing was executed.

Is Project Use Cases safe to install?

Our automated static check of SKILL.md found no risky patterns, such as piping downloads into a shell, reading credential files or hidden Unicode. It is not a guarantee. Review the folder before installing.

What licence does Project Use Cases use?

Project Use Cases is published under the Apache-2.0 licence (the repository's licence). It allows redistribution, so the full SKILL.md is shown on this page.

How many tokens does Project Use Cases use?

About 2.7k tokens (SKILL.md is roughly 11k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full.

What are the alternatives to Project Use Cases?

Skills that share tags, products or a category with Project Use Cases: Case Review (sickn33/agentic-awesome-skills, 47k stars), Case Review (zhaoxuya520/reverse-skill, 40k stars), Clinical Case Report (nexu-io/open-design, 100k stars) and Secops Cases (google/skills, 21k stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains Project Use Cases?

GoogleChrome (a GitHub organization) maintains it in GoogleChrome/modern-web-guidance-src, which has 1,134 GitHub stars. The repository holds 14 skills in this directory. The repository was last updated on October 7, 2026.

Source: GoogleChrome/modern-web-guidance-src on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.