Skill

fe-component

Create a new React component with architecture review, implementation, styling, and tests

Install

npx claudepluginhub justn-hyeok/harness-for-yall --plugin fe-experts

Tool Access

This skill uses the workspace's default tool permissions.

SKILL.md

Similar Skills

cache-components

Guides Next.js Cache Components and Partial Prerendering (PPR) with cacheComponents enabled. Implements 'use cache', cacheLife(), cacheTag(), revalidateTag(), static/dynamic optimization, and cache debugging.

cache-components

138.9k

claude-opus-4-5-migration

2 files

Migrates code, prompts, and API calls from Claude Sonnet 4.0/4.5 or Opus 4.1 to Opus 4.5, updating model strings on Anthropic, AWS, GCP, Azure platforms.

claude-opus-4-5-migration

83.2k

bmad-help

Analyzes BMad project state from catalog CSV, configs, artifacts, and query to recommend next skills or answer questions. Useful for help requests, 'what next', or starting BMad.

bmad-pro-skills

43.8k

Stats

Parent Repo Stars0

Parent Repo Forks0

Last CommitApr 7, 2026

Actions

View Source View Plugin View on GitHub View README

Workflow

Architecture (fe-architect): Design the component spec

Determine server vs client component
Define prop interfaces and state requirements
Plan file structure and data flow

Implementation (fe-implementer): Build the component

Write TypeScript component code
Set up Jotai atoms if needed
Wire up data fetching (server) or interactivity (client)

Styling (fe-styler): Apply visual design

Add Tailwind classes with responsive breakpoints
Ensure dark mode support
Verify WCAG AA accessibility

Review (fe-perf + fe-tester in parallel):

fe-perf: Check bundle impact, re-render scope, lazy loading
fe-tester: Write Vitest + Testing Library tests

Execution

Start by spawning fe-architect with:

Design a React component: $ARGUMENTS.name Type: ${ARGUMENTS.type || "server"} Feature area: ${ARGUMENTS.feature || "general"} Provide the component spec, then delegate to fe-implementer for implementation. After implementation, delegate to fe-styler for styling. Finally, trigger parallel review with fe-perf and fe-tester.

Create Frontend Component

Build a complete React component through the Expert Pool pipeline.

Workflow

Architecture (fe-architect): Design the component spec
- Determine server vs client component
- Define prop interfaces and state requirements
- Plan file structure and data flow
Implementation (fe-implementer): Build the component
- Write TypeScript component code
- Set up Jotai atoms if needed
- Wire up data fetching (server) or interactivity (client)
Styling (fe-styler): Apply visual design
- Add Tailwind classes with responsive breakpoints
- Ensure dark mode support
- Verify WCAG AA accessibility
Review (fe-perf + fe-tester in parallel):
- fe-perf: Check bundle impact, re-render scope, lazy loading
- fe-tester: Write Vitest + Testing Library tests

Arguments

name: $ARGUMENTS.name — The component name
type: $ARGUMENTS.type — server (default) or client
feature: $ARGUMENTS.feature — Feature area for file organization

Execution

Start by spawning fe-architect with:

Design a React component: $ARGUMENTS.name
Type: ${ARGUMENTS.type || "server"}
Feature area: ${ARGUMENTS.feature || "general"}

Provide the component spec, then delegate to fe-implementer for implementation.
After implementation, delegate to fe-styler for styling.
Finally, trigger parallel review with fe-perf and fe-tester.