New: 98,000+ skills indexed from GitHub repos with 100+ stars · every skill safety-checkedBrowse top skillsTop skills
Esc to closeBrowse all skills
Submit a skillBrowse skills
Submit a skillBrowse skills

Agent skill

Ab Analyze Frontend

by ayoubben18 in ayoubben18/ab-method

Analyze and document a project's frontend patterns — component structure, state management, conventions.

MITAuto-check passedFrontend & Design

Install Ab Analyze Frontend

skills CLI
$ npx skills add ayoubben18/ab-method --skill ab-analyze-frontend -a claude-code

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

GitHub CLI
$ gh skill install ayoubben18/ab-method ab-analyze-frontend --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/ayoubben18/ab-method.git skills-src && mkdir -p .claude/skills && cp -r skills-src/.agents/skills/ab-analyze-frontend .claude/skills/ab-analyze-frontend && 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
ab-analyze-frontend
GitHub stars
192
Token cost
~358 tokens
SKILL.md length
167 words
Files
1
Skills in repo
26
Repo updated
First seen
Licence
MIT

At a glance

Analyze and document a project's frontend patterns — component structure, state management, conventions.

  • Works in 2 steps: The project root (the current working… → Only if the project has no such file (AB…
  • The user wants a frontend-only architecture analysis
  • Calls npx
  • Tasks that involve State management

What it does

Ab Analyze Frontend is an agent skill from ayoubben18/ab-method. Analyze and document a project's frontend patterns — component structure, state management, conventions. Use when the user wants a frontend-only architecture analysis.

Its SKILL.md is about 360 tokens, which your agent loads only when the skill is triggered. It is a single SKILL.md file with no bundled scripts.

It sits in Frontend & Design, covering State management. The repository describes itself as: A workflow system for Claude Code and Codex. It grills a problem into a domain-grounded plan, then either drives it through test-driven missions you review one at a time, or… The licence is MIT.

When your agent uses it

  • The user wants a frontend-only architecture analysis
  • Tasks that involve State management

Example prompts

  • “/ab-analyze-frontend”

Requirements

  • Node.js

Workflow steps

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

  1. The project root (the current working directory) first. If /.ab-method/... exists, use it. A project's own .ab-method/structure/index.yaml…
  2. Only if the project has no such file (AB Method installed as a plugin rather than with npx ab-method), read the bundled copy…

What it can do on your machine

Read from SKILL.md and the folder at commit 85946e3. 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:

    • npx

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

  • Network

    No URLs in SKILL.md. Its commands use npx, 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

Ab Analyze Frontend loads about 358 tokens when it runs. Until then it costs about 47 tokens; SKILL.md has 167 words of instructions outside code blocks.

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

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 ayoubben18/ab-method at commit 85946e3, republished under its MIT licence (© ayoubben18). 167 words, ~358 tokens.

Download SKILL.mdSave it as .claude/skills/ab-analyze-frontend/SKILL.md (or your agent's skills folder).
name
ab-analyze-frontend
description
Analyze and document a project's frontend patterns — component structure, state management, conventions. Use when the user wants a frontend-only architecture analysis.

This skill runs the AB Method analyze-frontend workflow.

Follow the workflow defined in .ab-method/core/analyze-frontend.md exactly — it contains the full process, output format, and rules.

Before doing anything, check .ab-method/structure/index.yaml. It defines where this workflow reads from and writes to. Paths are user-configurable; never hardcode them.

Locating .ab-method/. Every .ab-method/... path — here and inside the workflow files — is resolved in this order:

  1. The project root (the current working directory) first. If <project>/.ab-method/... exists, use it. A project's own .ab-method/structure/index.yaml is how it customises its paths, so it always wins — check for it even when the bundled copy is right there.
  2. Only if the project has no such file (AB Method installed as a plugin rather than with npx ab-method), read the bundled copy: ../../../.ab-method/ relative to this SKILL.md.

The bundled copy is read-only reference material. Every path the index or a workflow names (docs/..., CONTEXT.md, UBIQUITOUS_LANGUAGE.md, ...) is relative to the project root — never to the folder the bundled files live in. Never write inside that folder.

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

Files

Just SKILL.md in .agents/skills/ab-analyze-frontend of ayoubben18/ab-method.

Open the folder on GitHubat commit 85946e3

Compare with similar skills

Ab Analyze Frontend 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.

Ab Analyze Frontend compared with similar skills
SkillStarsUsed inTokensAuto-checkLicenceRepo updated
Ab Analyze Frontend this skillayoubben18/ab-method192—~358Automated safety check: PassMIT
Svelte Core Best Practicesrilldata/rill2.9k4 repos~1.8kAutomated safety check: PassApache-2.0
Dify Component Writing Guidelanggenius/dify158k—~626Automated safety check: PassCustom licence
React State Managementinvolvex/youtube-music-cli45613 repos~3kAutomated safety check: PassMIT
Pierre Theming Librarypierrecomputer/pierre6.3k—~661Automated safety check: PassApache-2.0
Frontend Patternskurealnum/dotfiles29019 repos~3.7kAutomated safety check: PassNone

Similar skills

  • Svelte Core Best Practices

    rilldata/rill

    Rules for writing idiomatic Svelte 5 code: when to reach for runes like state, derived and effect, and how to handle props, attachments and bindings.

    2.9k GitHub starsUsed in 4 repos~1.8k tokens
    Frontend & DesignAuto-check passed

  • Dify Component Writing Guide

    langgenius/dify

    Use when implementing or refactoring React/TypeScript components and the task requires decisions about component ownership, feature boundaries, state, data…

    158k GitHub stars~626 tokensUpdated today
    Frontend & DesignAuto-check passed

  • React State Management

    involvex/youtube-music-cli

    Master modern React state management with Redux Toolkit, Zustand, Jotai, and React Query.

    456 GitHub starsUsed in 13 repos~3k tokens
    Frontend & DesignAuto-check passed

  • Pierre Theming Library

    pierrecomputer/pierre

    Explains how to use the @pierre/theming package to list, resolve, select, switch and persist themes, with controller, color and React references.

    6.3k GitHub stars~661 tokensUpdated yesterday
    Frontend & DesignAuto-check passed

  • Frontend Patterns

    kurealnum/dotfiles

    Frontend development patterns for React, Next.js, state management, performance optimization, and UI best practices.

    290 GitHub starsUsed in 19 repos~3.7k tokens
    Frontend & DesignAuto-check passed

  • LobeHub Data Fetching Layers

    lobehub/lobehub

    Explains how LobeHub client code fetches data through services, SWR store hooks and cache keys, and when to avoid useEffect fetching or duplicated state.

    83k GitHub stars~1.8k tokensUpdated today
    Frontend & DesignAuto-check passed

More from ayoubben18/ab-method

All 26 skills in this repo

  • Codebase Design

    ayoubben18/ab-method

    Shared vocabulary and principles for designing deep modules — small interfaces, clean seams, testable through the interface.

    192 GitHub stars~1.7k tokensUpdated 9 days ago
    Auto-check passed

  • Grill With Docs

    ayoubben18/ab-method

    Grilling session that challenges your plan against the existing domain model, sharpens terminology, and updates documentation (CONTEXT.md, ADRs) inline as decisions crystallise.

    192 GitHub stars~2.1k tokensUpdated 9 days ago
    Auto-check passed

  • Change Map

    ayoubben18/ab-method

    Draw a task's blast radius twice. An agent skill from ayoubben18/ab-method.

    192 GitHub stars~2.9k tokensUpdated 9 days ago
    Auto-check passed

  • Handoff

    ayoubben18/ab-method

    Compact the current conversation (or a side-topic that surfaced mid-grill) into a handoff document another agent can pick up.

    192 GitHub stars~696 tokensUpdated 9 days ago
    Auto-check passed

  • Improve Codebase Architecture

    ayoubben18/ab-method

    Scan a codebase for deepening opportunities, present them as a visual HTML report, then grill through whichever one you pick.

    192 GitHub stars~1.9k tokensUpdated 9 days ago
    Auto-check passed

  • Reconcile Roadmap

    ayoubben18/ab-method

    Cross-plan coherence critic for a whole roadmap. An agent skill from ayoubben18/ab-method.

    192 GitHub stars~2.8k tokensUpdated 9 days ago
    Auto-check passed

Categories

Questions about Ab Analyze Frontend

What does Ab Analyze Frontend do?

Analyze and document a project's frontend patterns — component structure, state management, conventions. Ab Analyze Frontend is an agent skill from ayoubben18/ab-method. Analyze and document a project's frontend patterns — component structure, state management, conventions.

When should I use Ab Analyze Frontend?

Ab Analyze Frontend fits situations like: the user wants a frontend-only architecture analysis; tasks that involve State management.

How do I install Ab Analyze Frontend in Claude Code?

Run `npx skills add ayoubben18/ab-method --skill ab-analyze-frontend -a claude-code`. Or copy the skill folder (.agents/skills/ab-analyze-frontend in ayoubben18/ab-method) into .claude/skills/ab-analyze-frontend in your project. Claude Code loads it when a task matches its description.

How do I install Ab Analyze Frontend in Codex?

Run `npx skills add ayoubben18/ab-method --skill ab-analyze-frontend -a codex`. Or copy the skill folder (.agents/skills/ab-analyze-frontend in ayoubben18/ab-method) into .agents/skills/ab-analyze-frontend in your project. Codex loads it when a task matches its description.

Can I use Ab Analyze Frontend 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 ayoubben18/ab-method --skill ab-analyze-frontend -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/ab-analyze-frontend, .gemini/skills/ab-analyze-frontend, .github/skills/ab-analyze-frontend and .opencode/skills/ab-analyze-frontend in your project.

What does Ab Analyze Frontend need to run?

Going by SKILL.md and its folder, Ab Analyze Frontend needs the command-line tools its instructions call (npx). Our summary lists: Node.js.

Does Ab Analyze Frontend access the network?

SKILL.md contains no URLs. Its commands use npx, which can reach the network depending on how they are called. This is read from the text; nothing was executed.

Is Ab Analyze Frontend 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 Ab Analyze Frontend use?

Ab Analyze Frontend is published under the MIT licence (the repository's licence). It allows redistribution, so the full SKILL.md is shown on this page.

How many tokens does Ab Analyze Frontend use?

About 358 tokens (SKILL.md is roughly 1.4k 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 Ab Analyze Frontend?

Skills that share tags, products or a category with Ab Analyze Frontend: Svelte Core Best Practices (rilldata/rill, 2.9k stars), Dify Component Writing Guide (langgenius/dify, 158k stars), React State Management (involvex/youtube-music-cli, 456 stars) and Pierre Theming Library (pierrecomputer/pierre, 6.3k stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains Ab Analyze Frontend?

ayoubben18 (a GitHub user) maintains it in ayoubben18/ab-method, which has 192 GitHub stars. The repository holds 26 skills in this directory. The repository was last updated on October 1, 2026.

Source: ayoubben18/ab-method on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.