Frontend orchestrator

Skill ComeOnOliver/skillshub/skills/aiskillstore/marketplace/brownbull/frontend-orchestrator

🧠 The right skill, one API call. AI agent skills registry with token-efficient skill resolution. 5,000+ skills from 500+ top repos.

Install

npx -y skills add ComeOnOliver/skillshub --skill frontend-orchestrator

Assembled from the repository path, not quoted from the project. Check it against their README if it does not work.

What its author says it does

Copied from the file, not written here

Coordinates frontend development tasks (React, TypeScript, UI/UX). Use when implementing user interfaces, components, state management, or visual features. Applies frontend-standard.md for quality gates.

SKILL.md

4.6 KB, as published. Nobody here has run it

Frontend Orchestrator Skill

Role

Acts as CTO-Frontend, managing all UI/UX tasks, React components, state management, and visual testing.

Responsibilities

Component Management
- Track component hierarchy
- Manage state dependencies
- Ensure design system compliance
Task Execution
- Assign tasks to frontend skills
- Monitor visual test results
- Validate accessibility (WCAG AA)

Context Maintenance

ai-state/active/frontend/
├── components.json    # Component registry
├── routes.json       # Route definitions
├── state.json        # State shape
└── tasks/           # Active frontend tasks

Skill Coordination

Available Frontend Skills

react-component-skill - Creates/updates React components
state-management-skill - Redux/Context updates
route-config-skill - React Router changes
ui-test-skill - Playwright visual tests
style-skill - Tailwind/CSS updates

Context Package to Skills

context:
  task_id: "task-001-auth"
  components:
    existing: ["LoginForm", "AuthContext"]
    design_system: ["Button", "Input", "Card"]
  state:
    current: "auth: { user, token, loading }"
    available_actions: ["login", "logout", "refresh"]
  standards:
    - "react-patterns.md"
    - "accessibility-wcag.md"
  test_requirements:
    visual: ["all viewport sizes", "loading states"]

Task Processing Flow

Receive from Main Orchestrator

{
  "task_id": "task-001-auth",
  "what": "Password reset form",
  "where": "/src/components/auth/"
}

Prepare Context

Load current component state
Check design system components
Review past similar implementations

Assign to Skill

{
  "skill": "react-component-skill",
  "action": "create",
  "context": "[prepared context]"
}

Monitor Execution

Watch operations.log
Run visual tests via Playwright
Check accessibility

Validate Results

checks:
  ✅ Component renders
  ✅ Form validation works
  ✅ Error states display
  ✅ Responsive on mobile
  ✅ Keyboard navigable
  ✅ Screen reader compatible

Frontend-Specific Standards

Component Checklist

State Management Rules

Single source of truth
Immutable updates only
Actions are serializable
Computed values in selectors
No business logic in components

Integration Points

With Backend Orchestrator

API contract negotiation
Error format agreement
Loading state coordination

With Human-Docs

Updates frontend-developer.md with:

New components added
Routes modified
State shape changes
Common patterns to follow

Event Communication

Listening For

{
  "event": "backend.api.updated",
  "endpoint": "/api/auth/reset",
  "changes": ["new response format"]
}

Broadcasting

{
  "event": "frontend.component.created",
  "component": "PasswordResetForm",
  "location": "/src/components/auth/",
  "tests": "passed",
  "coverage": "92%"
}

Test Requirements

Every Frontend Task Must

Unit Tests - Component logic
Integration Tests - Component interactions
Visual Tests - Playwright screenshots
Accessibility Tests - WCAG AA compliance
Responsive Tests - Mobile/tablet/desktop
Performance Tests - Lighthouse scores

Success Metrics

Visual test pass rate > 95%
Accessibility score > 90
Performance score > 80
Zero TypeScript errors
Component reuse > 60%

Common Issues & Solutions

Issue: "Component re-renders too often"

Solution: Add memoization, check dependency arrays

Issue: "State updates not reflecting"

Solution: Check immutability, verify reducer logic

Issue: "Visual test flakiness"

Solution: Add wait conditions, stabilize animations

Anti-Patterns to Avoid

❌ Business logic in components ❌ Direct DOM manipulation ❌ Inline styles (use Tailwind) ❌ Skipping error boundaries ❌ Ignoring accessibility ❌ Creating mega-components