Frontend

Overview

Digest-first frontend skill with repo classification, dynamic detection, and internal lane routing for review, API, testing, analytics, observability, CI/CD, planning, and commit workflows.

This skill ships inside the Frontend Workflow plugin and can be installed through the Claude Code marketplace or directly in Codex from its skill path.

Parent Surface

Parent docs: Frontend Workflow

Related wrapper commands from the parent plugin:

When to Use This Skill

assuming a specific stack.

rediscovering tooling every session.

• The user wants frontend help in a plain app, design-system, or monorepo.
• You need a stable frontend workflow that adapts to the repo instead of assuming a specific stack.
• You want later tasks to reuse a persistent repo-local digest instead of rediscovering tooling every session.

Example Prompts

for the "feedback" flow.

frontend test stack.

docs/frontend-skill-digest/AGENTS.md and docs/frontend-skill-digest/project-digest.md.

the repo's detected branch model.

commit using detected repo conventions.

• /frontend:work review 123 - Review PR #123 with thread-aware context.
• /frontend:work api feedback - Implement or debug frontend API integration for the "feedback" flow.
• /frontend:work testing - Run, add, or repair tests using the detected frontend test stack.
• /frontend:refresh-digest - Recompute and persist docs/frontend-skill-digest/AGENTS.md and docs/frontend-skill-digest/project-digest.md.
• /frontend:work new-branch 45 digest-contract-fix - Create a branch using the repo's detected branch model.
• /frontend:work commit "align frontend digest contract" - Create an atomic commit using detected repo conventions.

Digest-First Preflight

Every frontend task starts here.

Read both files from the target repo:

Treat the digest as stale when any of these changed since the last run: lockfile, workspace layout, primary framework, testing stack, analytics/observability stack, design-system ownership, API contract source, or backend directory mapping.

Freshness evidence in the digest (when present): generated commit SHA, inspected file list, key file hashes or mtimes.

Workflow below) and persist the result to docs/frontend-skill-digest/.

ephemeral inline detection (no file writes). Detect package manager, framework, workspace layout, AND lane-specific facts relevant to the requested lane (API contract sources, analytics stack, observability stack, CI provider, test stack, branch model). Proceed with reduced confidence and note the missing digest in output.

Do not silently write digest files outside of /frontend:refresh-digest.

Do not assume: yarn, dev / main, React Query, axios, styled-components, Playwright, CloudFlare / Crafting, Sentry, or Mixpanel. Use what the digest or inline detection finds.

• docs/frontend-skill-digest/AGENTS.md
• docs/frontend-skill-digest/project-digest.md
• User ran /frontend:refresh-digest: run full detection (see Detection Workflow below) and persist the result to docs/frontend-skill-digest/.
• User ran any other command: if the digest is missing or stale, run ephemeral inline detection (no file writes). Detect package manager, framework, workspace layout, AND lane-specific facts relevant to the requested lane (API contract sources, analytics stack, observability stack, CI provider, test stack, branch model). Proceed with reduced confidence and note the missing digest in output.

Detection Workflow

Follow this order when persisting a full digest.

monorepo-frontend, or unknown. Use workspace manifests, package layout, Storybook/token packages, app entrypoints, framework markers, internal package relationships.

system, install command, likely lint/type-check/unit/E2E commands.

Storybook, library-only, SSR/SPA/component-library hints.

Tailwind, CSS Modules, Sass, component libraries, token packages, whether the repo publishes/consumes a design system.

Zustand, Apollo, fetch wrappers, generated clients, endpoint registries. Determine API contract sources in ranked order (generated SDK, OpenAPI, Bruno/Postman, local backend, external backend).

Storybook visual tests, workspace scoping.

Sentry, LogRocket, Datadog RUM. Do not force a tool if none is present.

preview/sandbox tooling, release workflows, default branches, docs/planning folder conventions.

or out_of_scope.

Write to docs/frontend-skill-digest/AGENTS.md (operating contract) and docs/frontend-skill-digest/project-digest.md (full fingerprint). Both files have required schemas defined in references/digest-schema.md.

Include freshness evidence: generated commit SHA, inspected file list, key file hashes or mtimes.

Resources

Installation

Switch between Claude Code and Codex, then copy the install command for the runtime you use.

claude plugin marketplace add DiversioTeam/agent-skills-marketplace
claude plugin install frontend@diversiotech

CODEX_HOME="${CODEX_HOME:-$HOME/.codex}"
python3 "$CODEX_HOME/skills/.system/skill-installer/scripts/install-skill-from-github.py" \
  --repo DiversioTeam/agent-skills-marketplace \
  --path plugins/frontend/skills/frontend

Invocation:

/frontend:review
/frontend:commit
/frontend:work
/frontend:new-branch
/frontend:refresh-digest

name: frontend