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.
npx agentmods add commands/rcdelacruz/claude-code-agents/workflow-implement-frontendgit clone --depth 1 https://github.com/rcdelacruz/claude-code-agentsWhat 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 | $0.00008 | $0.00914 |
| Opus 5 | $0.00004 | $0.00457 |
| Sonnet 5 | $0.00002 | $0.00183 |
| Haiku 4.5 | $0.00001 | $0.00091 |
Grade A, and why
workflow-implement-frontend 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 2d 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 — 155 lines — stays where its author put it; the contents beside it link to each section on GitHub.
You are in FRONTEND IMPLEMENTATION MODE.
Use frontend-ui agent to build modern, accessible UI components.
Implementation Workflow
1. Component Planning (5 mins)
- Identify component type (Server or Client Component)
- Plan component hierarchy
- Define props interface
- List required shadcn/ui components
2. Install shadcn/ui Components (2 mins)
# Install required components
npx shadcn-ui@latest add button
npx shadcn-ui@latest add form
npx shadcn-ui@latest add input
npx shadcn-ui@latest add dialog
npx shadcn-ui@latest add dropdown-menu
3. Build UI Components (20-30 mins)
Create components following these patterns:
Form Components (with react-hook-form + Zod)
// Example: PostForm component
- Define Zod schema
- Set up useForm with zodResolver
- Build form with shadcn/ui Form components
- Handle submission with Server Actions
- Show validation errors
- Add loading states
Display Components
// Example: PostCard component
- Use shadcn/ui Card, Badge, Button
- Implement responsive design
- Add hover states and animations
- Include accessibility attributes
Interactive Components
// Example: DeletePostDialog
- Use shadcn/ui Dialog, AlertDialog
- Add confirmation step
- Implement optimistic updates
- Show toast notifications
4. Client-Side Features (15-20 mins)
State Management
- Use useState for local UI state
- Use Zustand for global client state
- Use React Query for server state
Optimistic Updates
// Example: Like post optimistically
- Update UI immediately
- Call API in background
- Rollback on error
- Show toast on success/error
Infinite Scroll/Pagination
// Use TanStack Query + Intersection Observer
- Implement useInfiniteQuery
- Add loading skeleton
- Handle edge cases (empty, error)
5. Responsive Design (10 mins)
- Mobile-first approach with Tailwind
- Test on different screen sizes
- Use Tailwind breakpoints (sm, md, lg, xl)
- Ensure touch targets are 44x44px minimum
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.
- 2d ago First seen · 155 lines · 8 tokens per session scan A 3673b2fa0de2
workflow-implement-frontend is a command published in the GitHub repository rcdelacruz/claude-code-agents (2 stars, last pushed 10mo ago), licensed MIT. It adds 8 tokens to every session and 914 once invoked, about $0.0000 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-31.
Other commands, from other repositories
auto-browse
Auto-browse — learn, optimize, and graduate browser operations or web data-mining workflows.
research-perplexity
Run a deep research query using Perplexity's /research mode via Playwright browser automation. This is an alternative to /export-to-council that uses Perplexity's dedicated research mode instead of multi-model council.
webapp-testing
Toolkit for interacting with and testing local web applications using Playwright. Supports verifying frontend functionality, debugging UI behavior, capturing browser screenshots, and viewing browser logs.
review
Compare a reference design against an implementation. Accepts Figma URL, image file, or browser URL as reference.
graphify
Turn your vault into a clustered knowledge graph with HTML and JSON outputs.
laravel-playwright
E2E Playwright patterns; use the laravel:e2e-playwright skill exactly as written.