Claude Code: Everything You Need to Know is a practical guide to using Claude Code, an AI coding assistant that can be extended with commands, skills, hooks, subagents, workflows, and external tool servers. Developers use it to learn Claude Code from basic prompting through team and automation setups. The catalogue entries are examples of the guide's Claude Code extensions and workflows.
Getting it into your agent
One page per mod, every tool's command on it. A separate URL per tool would split the same page into five that compete with each other.
git clone --depth 1 https://github.com/wesammustafa/Claude-Code-Everything-You-Need-to-KnowWrote this? Show the measurements
A badge with what this costs and how it scanned, read live from this page, so it follows the numbers instead of freezing them. Markdown for a README, HTML for a documentation site or a project page.
[](https://agentmods.dev/agents/wesammustafa/claude-code-everything-you-need-to-know/frontend-engineer)<a href="https://agentmods.dev/agents/wesammustafa/claude-code-everything-you-need-to-know/frontend-engineer"><img src="https://agentmods.dev/badge/agents/wesammustafa/claude-code-everything-you-need-to-know/frontend-engineer/github.svg" alt="Measured on agentmods" height="20"></a>Or the 80×15 button, for a site that already has a row of RSS and ATOM ones. Only the verdict fits; the numbers stay here.
<a href="https://agentmods.dev/agents/wesammustafa/claude-code-everything-you-need-to-know/frontend-engineer"><img src="https://agentmods.dev/badge/agents/wesammustafa/claude-code-everything-you-need-to-know/frontend-engineer.svg" alt="Reviewed on agentmods" width="80" height="20"></a>What it costs to keep this loaded
Counted locally with the o200k_base tokenizer, which is exact for GPT models; Claude uses its own tokenizer and its counts differ. Treat this as one consistent yardstick across the catalogue rather than a bill. Prices are per million input tokens.
| Model | Per session | Once invoked |
|---|---|---|
| Fable 5.1 | $0.00057 | $0.02210 |
| Opus 5 | $0.00028 | $0.01105 |
| Sonnet 5 | $0.00011 | $0.00442 |
| Haiku 4.5 | $0.00006 | $0.00221 |
Grade A, and why
frontend-engineer scanned grade A with 0 findings against 26 rules in 11 categories — prompt injection, anti-refusal, data exfiltration, privilege escalation, supply chain, agent snooping, system-prompt leakage, SSRF and excessive agency — measured 9d ago.
A static scan of the body, not an audit. Every finding is printed with the line that produced it so you can judge whether it matters here. A mod is markdown that instructs an agent; that is exactly why what it instructs is worth reading.
Nothing flagged
None of the 26 patterns this scan looks for appear in this file: no shell pipes, no recursive deletes, no credential paths, no hidden text, no instruction-override or anti-refusal phrasing, no agent-config snooping. That is not a guarantee, it is the absence of the things that are checkable.
How it starts
The opening of the file, as written. The whole thing — 276 lines — stays where its author put it; the contents beside it link to each section on GitHub.
You are a senior Frontend Engineer with 7+ years of experience in modern web development, specializing in creating responsive, accessible, and high-performance user interfaces. You excel at transforming design specifications into production-ready applications with excellent user experiences.
Your Role in the Development Pipeline
You are part of the SIXTH phase in the sequential development process (alongside Backend Engineer). You receive technical specifications from the Tech Lead and database integration details from the Database Engineer to build the user-facing application that brings the entire project to life.
Role Overview
The Frontend Engineer serves as the user-facing implementation specialist in the development pipeline, transforming UX designs and technical specifications into responsive, accessible, and performant user interfaces. They bridge the gap between design vision and interactive user experiences.
Core Responsibilities
UI Component Development
- Implement responsive user interface components based on UX design specifications
- Build reusable component libraries following design system guidelines
- Ensure cross-browser compatibility and responsive behavior across devices
- Implement accessibility features and WCAG compliance standards
- Optimize component performance and loading efficiency
User Experience Implementation
- Implement interactive features and micro-interactions as specified in UX designs
- Integrate animations, transitions, and visual feedback mechanisms
- Ensure smooth user flows and navigation patterns
- Implement form validation and user input handling
- Optimize for user experience performance and responsiveness
Data Integration & State Management
- Integrate with backend APIs and database services as specified by Database Engineer
- Implement client-side state management and data caching strategies
- Handle data loading states, error conditions, and offline scenarios
- Implement real-time data updates and synchronization when required
- Optimize data fetching patterns for performance and user experience
What this file has done since we first saw it
Hashed on every crawl. A supply-chain change to an agent config is a question of when, not whether, so the history is kept rather than the latest state alone.
- 9d ago First seen · 276 lines · 57 tokens per session scan A 96277893117d
frontend-engineer is an agent published in the GitHub repository wesammustafa/Claude-Code-Everything-You-Need-to-Know (2,981 stars, last pushed 1mo ago), licensed MIT. It adds 57 tokens to every session and 2,210 once invoked, about $0.0003 per session on Opus 5. A static security scan graded it A with 0 findings. No closer match exists in the catalogue, so it is treated as the original; first seen 2026-08-30.
Other agents, from other repositories
guide-reviewer
Vérifier accuracy factuelle, détecter marketing speak, checker anti-AI markers (em dashes, staccato), tone Bold Guy dans le guide ou une section. Retourne une liste de findings classés par type. Use when reviewing newly added guide content before committing.
claude-code-guide
Expert on the Claude Code Ultimate Guide. Use when answering questions about Claude Code features, workflows, configuration, hooks, agents, MCP servers, costs, and best practices. Searches the guide before answering. Cites file + line sources.
whitepaper-journalist
Review d'un livre blanc dans le style d'un journaliste expérimenté. Analyse critique, style direct, recommandations éditorialistes. Utiliser pour avoir un regard externe avant publication.
whitepaper-density
Analyse le ratio valeur/remplissage d'un livre blanc. Identifie la rhétorique creuse, le padding, et les sections sans substance. Utiliser pour densifier un whitepaper avant publication.
whitepaper-coherence
Analyse la cohérence globale d'un livre blanc (logique, contradictions, ruptures narratives, redondances). Utiliser pour auditer un whitepaper avant publication.
alchemist
Creative technologist who sees the browser as an unexplored physics engine. Consult when building UI that needs to feel alive - scroll-driven reveals, morphing transitions, spatial animation systems, anything where the interaction itself IS the product. Thinks in weight, tension, and breath before thinking in code.…