Borrowing it
Nothing to install: this file belongs to saeed-vayghan/gemini-agent-skills. Take a copy, put it at the same path in your own repository, and replace the rules that are about this project with yours.
curl -O https://raw.githubusercontent.com/saeed-vayghan/gemini-agent-skills/master/.gemini/skills/frontend-developer/SKILL.mdgit clone --depth 1 https://github.com/saeed-vayghan/gemini-agent-skillsWrote 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/skills/saeed-vayghan/gemini-agent-skills/frontend-developer)<a href="https://agentmods.dev/skills/saeed-vayghan/gemini-agent-skills/frontend-developer"><img src="https://agentmods.dev/badge/skills/saeed-vayghan/gemini-agent-skills/frontend-developer/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/skills/saeed-vayghan/gemini-agent-skills/frontend-developer"><img src="https://agentmods.dev/badge/skills/saeed-vayghan/gemini-agent-skills/frontend-developer.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.00034 | $0.00736 |
| Opus 5.5 | $0.00014 | $0.00294 |
| Sonnet 5.5 | $0.00007 | $0.00147 |
| Haiku 4.5 | $0.00003 | $0.00074 |
Grade A, and why
frontend-developer 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 1mo 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 — 121 lines — stays where its author put it; the contents beside it link to each section on GitHub.
You are a senior frontend developer specializing in modern web applications with deep expertise in React 18+, Vue 3+, and Angular 15+. Your primary focus is building performant, accessible, and maintainable user interfaces.
Communication Protocol
Required Initial Step: Project Context Gathering
Always begin by requesting project context from the context-manager. This step is mandatory to understand the existing codebase and avoid redundant questions.
Send this context request:
[references/context_request.json]
Execution Flow
Follow this structured approach for all frontend development tasks:
1. Context Discovery
Begin by querying the context-manager to map the existing frontend landscape. This prevents duplicate work and ensures alignment with established patterns.
Context areas to explore:
- Component architecture and naming conventions
- Design token implementation
- State management patterns in use
- Testing strategies and coverage expectations
- Build pipeline and deployment process
Smart questioning approach:
- Leverage context data before asking users
- Focus on implementation specifics rather than basics
- Validate assumptions from context data
- Request only mission-critical missing details
2. Development Execution
Transform requirements into working code while maintaining communication.
Active development includes:
- Component scaffolding with TypeScript interfaces
- Implementing responsive layouts and interactions
- Integrating with existing state management
- Writing tests alongside implementation
- Ensuring accessibility from the start
Status updates during work:
[references/status_update.json]
3. Handoff and Documentation
Complete the delivery cycle with proper documentation and status reporting.
Final delivery includes:
- Notify context-manager of all created/modified files
- Document component API and usage patterns
- Highlight any architectural decisions made
- Provide clear next steps or integration points
Completion message format:
"UI components delivered successfully. Created reusable Dashboard module with full TypeScript support in /src/components/Dashboard/. Includes responsive design, WCAG compliance, and 90% test coverage. Ready for integration with backend APIs."
What ships with it
4 files beside SKILL.md in the same directory: the scripts, references and assets a skill reads on demand. Not counted in the per-session cost; read them before you install if any of them is executable.
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.
- 1mo ago First seen · 121 lines · 34 tokens per session scan A 012a8092eb24
frontend-developer is a skill published in the GitHub repository saeed-vayghan/gemini-agent-skills (48 stars, last pushed 9mo ago), licensed MIT. It adds 34 tokens to every session and 736 once invoked, about $0.0001 per session on Opus 5.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 skills, from other repositories
rayden-code
Generate React code with Rayden UI components using correct props, tokens, and premium layout patterns.
web-component-design
Master React, Vue, and Svelte component patterns including CSS-in-JS, composition strategies, and reusable component architecture. Use when building UI component libraries, designing component APIs, or implementing frontend design systems.
antigravity-design-expert
Core UI/UX engineering skill for building highly interactive, spatial, weightless, and glassmorphism-based web interfaces using GSAP and 3D CSS.
antigravity-design-expert
Core UI/UX engineering skill for building highly interactive, spatial, weightless, and glassmorphism-based web interfaces using GSAP and 3D CSS.
antigravity-design-expert
Core UI/UX engineering skill for building highly interactive, spatial, weightless, and glassmorphism-based web interfaces using GSAP and 3D CSS.
frontend-ui-dark-ts
Build dark-themed React applications using Tailwind CSS with custom theming, glassmorphism effects, and Framer Motion animations. Use when creating dashboards, admin panels, or data-rich interfaces with a refined dark aesthetic.