EngineeringPROPRO REQUIREDFC-ENG-001
Frontend Claw
frontend-claw
v0.2.0May 19, 2026Frontend engineering — React, Next.js, Tailwind CSS, accessibility, and performance optimization that ships on time
Frontends that render fine on a MacBook Pro and break on everything else weren't tested, they were demoed. I build interfaces with accessibility baked in from the first component, responsive layouts that reflow at real breakpoints, and bundle sizes that don't make mobile users wait for the privilege of reading text.
OpenClaw
Hermes
Claude Code
Codex
Cursor
Windsurf
Aider
OllamaPRIMARY ACTION
Unlock with ProCOMPATIBLE WITH
OpenClawHermesClaude CodeCodex+4
8 compatible tools3 output formats
When to Use
- Implement production-grade code and architecture
- Audit design decisions and tradeoffs
- Catch reliability issues before release
- Raise quality consistency across teams
Compatible Frameworks
OpenClawHermesClaude CodeCodexCursorWindsurfAiderOllama8 TOOLS
Quality Gates
- no fake claims
- no secret exposure
- build must pass
- typescript must pass
- accessibility checked
3 GATES DEFINED
Expected Outputs
React/Vue/Svelte Component Library with Accessibility AuditResponsive Layout Implementation Tested on Mobile and DesktopBundle Size Report with Code-Splitting Recommendations
Native exports per tool
OpenClaw10 files
openclaw/AGENTS.mdopenclaw/SOUL.mdopenclaw/TOOLS.md+7 moreHermes5 files
hermes/skills/flickclaw/frontend-claw/SKILL.mdhermes/skills/flickclaw/frontend-claw/references/workflow.mdhermes/skills/flickclaw/frontend-claw/references/quality-gates.md+2 moreClaude Code6 files
claude-code/CLAUDE.mdclaude-code/.claude/skills/frontend-claw/SKILL.mdclaude-code/.claude/skills/frontend-claw/references/workflow.md+3 moreCodex5 files
codex/AGENTS.mdcodex/.flickclaw/agents/frontend-claw/codex.mdcodex/.flickclaw/agents/frontend-claw/workflow.md+2 moreCursor3 files
cursor/.cursor/rules/flickclaw-frontend-claw.mdccursor/.cursor/rules/flickclaw-frontend-claw-workflow.mdccursor/.cursor/rules/flickclaw-frontend-claw-quality-gates.mdcWindsurf3 files
windsurf/.windsurf/rules/flickclaw-frontend-claw.mdwindsurf/.windsurf/rules/flickclaw-frontend-claw-workflow.mdwindsurf/.windsurf/rules/flickclaw-frontend-claw-quality-gates.mdAider3 files
aider/CONVENTIONS.mdaider/aider.mdaider/.aider.conf.ymlOllama4 files
ollama/Modelfileollama/system-prompt.mdollama/template.md+1 moreInstall Commands
Install the FlickClaw CLI, then select your AI agent framework below to get the correct install command.
Step 1: Install CLI (one-time)
npm install -g @flickclaw/cli@latestStep 2: Select Framework
OpenClaw
npm exec --yes @flickclaw/cli@latest -- install frontend-claw --target openclawDownload as ZIP
Example Prompt
Try this prompt with Frontend Claw to see what it can do:
Review the codebase architecture and identify 3 areas for improvement. Focus on maintainability, test coverage, and performance. Produce React/Vue/Svelte Component Library with Accessibility Audit, Responsive Layout Implementation Tested on Mobile and Desktop, Bundle Size Report with Code-Splitting Recommendations.Example Output
IllustrativeWhat a typical Frontend Claw report looks like:
# Frontend Claw — Assessment Report **Project**: data-pipeline **Context**: an ETL pipeline processing 2M events/hour with PostgreSQL and Redis **Generated**: 2026-07-10 ## Executive Summary The Frontend Claw completed its review of data-pipeline (an ETL pipeline processing 2M events/hour with PostgreSQL and Redis). 3 findings were identified with concrete remediation steps. All quality gates were verified before delivery. ## Findings | # | Severity | Area | Finding | Recommended Action | |---|----------|------|---------|-------------------| | 1 | **P0** | Performance | N+1 queries in batch processing loop | Use eager loading with batch size 500 | | 2 | **P1** | Architecture | Tight coupling between extract and transform | Introduce event queue with dead letter handling | | 3 | **P2** | Testing | No integration tests for Redis failover | Add chaos test with Redis connection drop | ## Quality Gates - [✓] lighthouse_accessibility_score_is_95_or_higher - [✓] keyboard_navigation_works_for_all_interactive_elements - [✓] javascript_bundle_is_under_200kb_gzipped_for_the_initial_route ## Outputs Generated - **React/Vue/Svelte Component Library with Accessibility Audit**: Included in the report above. - **Responsive Layout Implementation Tested on Mobile and Desktop**: Included in the report above. - **Bundle Size Report with Code-Splitting Recommendations**: Included in the report above. ## Validation - [x] All quality gates passed (3/3) - [x] 3 findings documented with severity and remediation - [x] 3 output sections generated - [x] Evidence collected and referenced --- *This is an illustrative example output from FlickClaw. Results vary based on project context.*
RELATED AGENTS