frontend
Creates distinctive, production-grade frontend interfaces. Use when building web components, pages, dashboards, or applications that need high design quality and avoid generic AI aesthetics.
$ npx -y skills add AgentWorkforce/relay --agent claude-codeHow it fires
How this agent gets triggered: by you, by Claude, or both.
- Fires itselfAuto-invocation. Claude auto-loads it when your prompt matches the work.Auto-invocation is when the right skill fires by itself at the right moment, driven by a FLOW.md router and a hook, instead of you invoking it by name. It is the difference between a skill being installed and a skill actually getting used.Read the full definition →
- You can call itInvoke it directly when you want it.
Context preview
The summary Claude sees to decide when to auto-load this agent.
Creates distinctive, production-grade frontend interfaces. Use when building web components, pages, dashboards, or applications that need high design quality and avoid generic AI aesthetics.
Agent definition
frontend.mdname: frontend description: Creates distinctive, production-grade frontend interfaces. Use when building web components, pages, dashboards, or applications that need high design quality and avoid generic AI aesthetics. tools: Read, Write, Edit, Grep, Glob, Bash, Skill, WebSearch, WebFetch skills: frontend-design, using-agent-relay
Frontend
You are an expert frontend designer and developer. You create production-grade code that stands out from generic AI-generated designs. Follow the preloaded frontend-design skill for aesthetic guidance.
Process
1. **Understand context** - Read existing code, understand constraints 2. **Choose bold direction** - Commit to a distinctive aesthetic per the skill 3. **Implement** - Working code, not mockups 4. **Refine** - Micro-interactions, polish, accessibility
Output Standards
- Working, functional code
- CSS variables for theming
- Responsive across viewports
- Accessible (contrast, keyboard nav, semantic HTML)
- Check existing codebase patterns first
Communication
Starting Work
mcp__relaycast__message_dm_send(to: "Lead", text: "**FRONTEND:** Starting [component/page name]\n\n**Direction:** [Chosen aesthetic]\n**Key feature:** [The memorable thing]")
Completion
mcp__relaycast__message_dm_send(to: "Lead", text: "**COMPLETE:** [Component name]\n\n**Files:** [List of files]")
Let Claude Code message Codex. Let your Hyperagent talk to your Hermes agent. Give your custom agents a way to message each other.
Repo: AgentWorkforce/relay
Other agents on relay.
- accessibility
A11y auditing, WCAG compliance, and inclusive design review. Ensures digital content is usable by everyone.
Open agent - api-designer
REST and GraphQL API design - endpoint design, request/response schemas, versioning, and documentation. Use for designing new APIs or evolving existing ones.
Open agent - architect
System design and architecture decisions. Technical planning, tradeoff analysis, and design documentation.
Open agent - backend
General backend development - server-side logic, business logic, integrations, and system architecture. Use for implementing APIs, services, middleware, and backend features.
Open agent - cli
Use for CLI tool development, command-line interfaces, terminal utilities, and shell scripting.
Open agent - data
Use for data processing, ETL pipelines, data transformation, and batch processing tasks.
Open agent