wicked-garden-engineering-frontend

Stars8

Forks2

UpdatedJuly 11, 2026 at 17:42

Frontend engineering specialist for React, CSS, browser APIs, component design, accessibility, and performance. This skill should be used when the user asks about UI implementation, component review, or frontend-specific questions. Use when: "build a React component", "CSS layout issue", "frontend performance", "browser API", "component design", "accessibility check", "responsive design"

Installation

Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.

Source

mikeparcewski

mikeparcewski/wicked-garden

View GitHub Repository View Creator Repositories

Download

Related occupationsSOC

Based on SOC occupation classification

Web DevelopersComputer and Mathematical Occupations·SOC 15-1254

File Explorer

3 files

SKILL.md

readonly

name	wicked-garden-engineering-frontend
description	Frontend engineering specialist for React, CSS, browser APIs, component design, accessibility, and performance. This skill should be used when the user asks about UI implementation, component review, or frontend-specific questions. Use when: "build a React component", "CSS layout issue", "frontend performance", "browser API", "component design", "accessibility check", "responsive design"
portability	portable
phase_relevance	["design","build"]
archetype_relevance	["*"]

Frontend Skill

Specialized frontend engineering guidance for React, CSS, and browser-based applications.

When to Use

Building React components
CSS and styling questions
Browser API usage
Frontend performance optimization
Accessibility (a11y) guidance
User says "frontend", "React", "CSS", "component", "UI"

Key Focus Areas

React Patterns

Component composition and single responsibility
Hook usage (useState, useEffect, custom hooks)
State management (context, props, lifting state)
Performance (memo, useMemo, useCallback)
Error boundaries

CSS & Styling

Responsive design (flexbox, grid, media queries)
Modern CSS (custom properties, container queries)
Animations (GPU-accelerated)
Theming and design systems

Browser APIs

Fetch API and async operations
Local/Session Storage
Event handling
Performance API

Accessibility

Semantic HTML elements
ARIA labels and roles
Keyboard navigation
Screen reader compatibility
WCAG color contrast

Performance

Code splitting and lazy loading
Bundle optimization
Image optimization
Virtual scrolling
Debouncing and throttling

Review Process

Use comprehensive checklists for:

Component quality (responsibility, props, composition)
React best practices (hooks, effects, state)
Styling (responsiveness, consistency)
Accessibility (semantic HTML, keyboard nav, ARIA)

See refs/checklists.md for detailed checklists, anti-patterns, and output templates.

Code Patterns

Common React and CSS patterns for:

Component structure with TypeScript
Custom hooks (debounce, etc.)
Responsive design
Accessibility patterns
Performance optimization

See refs/patterns.md for code examples and best practices.

Notes

Prioritize accessibility from the start
Mobile-first responsive design
Use semantic HTML before reaching for ARIA
Test with keyboard navigation and screen readers

More from this repository

same repository

wicked-garden-archetype

mikeparcewski/wicked-garden

v11 work-shape archetype runner. When a prompt has been routed to one of the archetypes (triage, explore, specify, decide, ship, review, incident, build, migrate, modernize), this skill is the entry point. It picks the right per-archetype playbook from refs/ and executes the phase shape declared in `.claude-plugin/archetypes.json`. Use when: a `<wg archetype="X">` or `<wg archetypes>` system-reminder tag appears, an explicit "let's run the X archetype" request, or a direct per-archetype ask — "triage this prompt", "review this PR / artifact", "build this feature", "decide between these options", "explore this problem", "handle this incident", "run this migration", "modernize / port this legacy app", "ship this release", "write acceptance criteria" (invoke with archetype=<name> plus the user's args — see the Direct invocation table).

2026-07-218

wicked-garden-engineering-conformance-reviewer

mikeparcewski/wicked-garden

Pattern-conformance agent-half: evaluates a produced artifact or diff against a set of architectural/design pattern rules from the conformance-rule store (wicked_governance schema). Returns structured findings with rule ID, severity, and rationale — the deterministic half (mechanical rule recall) is done by the guard pipeline; this is the semantic evaluation step. Triggered by: the guard_pipeline `outgov_pattern` check (session-close), or explicitly by an engineering review when WICKED_OUTGOV_RULES_DIR is populated. NOT a replacement for the full `engineering` review skill — focuses only on conformance to stored Pattern rules; architecture and code-quality checks live in the `engineering` skill. Semantic evaluation reuses `wicked-garden-qe-semantic-reviewer` as the designated agent-half evaluator (per garden#983 spec). This skill is the orchestrating wrapper that loads applicable Pattern rules and delegates the per-rule semantic judgment to qe-semantic-reviewer.

2026-07-168

wicked-garden-domain-coverage

mikeparcewski/wicked-garden

Coverage evaluator + pre-build threat model for the domain-extraction workflow (CONTRACT-3 §2). Emits `coverage-report.json` from the estate store, then adversarially reviews the extracted domain model: hunts missing error paths, ungrounded rules, reason-less drops, cross-cluster smears, and coverage holes. Use when: dispatched as the `coverage` phase of a domain-extraction workflow run. The phase runs in a git worktree; WICKED_ESTATE_DB points at the live estate store. NOT for mining rules (domain-extractor) or grouping domains (domain-modeler). This worker EMITS coverage evidence AND CRITIQUES the domain model.

2026-07-168

wicked-garden-core

mikeparcewski/wicked-garden

Core utility surface for the wicked-garden plugin: help/overview, first-run setup + codebase onboarding, the wicked-* peer installer, selective state reset, the where-am-i path manifest, and structured issue filing. Use when: "wicked-garden help", "show wicked-garden commands", "what can wicked-garden do", "set up wicked-garden", "setup", "--reconfigure", "onboard this codebase", "install wicked tools", "add peers", "install layers", "reset wicked-garden", "clear state", "--list-projects", "where am I", "path manifest", "report issue", "file a bug", "--list-unfiled", or any former /wicked-garden:{help|setup|install|reset| where-am-i|report-issue} invocation.

2026-07-158

wicked-garden-domain-extractor

mikeparcewski/wicked-garden

Rule-extraction fork worker for the FOUNDATIONAL domain-model capability. Mines testable business rules from a codebase — each with a numeric confidence and a provenance{source, ref, source_kinds} — and annotates them into the estate store so wicked-core can build the domain-model requirements graph (coverage-gated). This is a substrate, not a modernization tool: the `modernize` archetype DERIVES from it, and build / migrate / review / specify / explore can consume the same domain model — none OWN it. Use when: dispatched by wicked-garden-domain to mine the business_rules of a codebase (or a module); "extract the domain rules", "what does this system require", building the requirements half of a domain model. NOT for grouping into domains (that is domain-modeler) or judging coverage (that is domain-coverage — a seat-distinct evaluator).

2026-07-158

wicked-garden-domain-modeler

mikeparcewski/wicked-garden

Domain-graph fork worker for the modernize archetype. Groups the estate's Louvain communities into business domains, attaches each requirement to its cluster (advisory cluster_id provenance), and invokes wicked-core's domain-graph build (which reads the annotated estate store, recomputes coverage fail-closed, and builds the requirements graph) — then validates core's output against the vendored schema. Use when: dispatched by wicked-garden-domain after rule extraction to turn a flat rule set into cluster-keyed domains; "group these into domains", "build the requirements graph", "translate clusters into a domain model". NOT for mining the rules themselves (that is domain-extractor) or threat-modeling (that is domain-coverage).

2026-07-158

name	wicked-garden-engineering-frontend
description	Frontend engineering specialist for React, CSS, browser APIs, component design, accessibility, and performance. This skill should be used when the user asks about UI implementation, component review, or frontend-specific questions. Use when: "build a React component", "CSS layout issue", "frontend performance", "browser API", "component design", "accessibility check", "responsive design"
portability	portable
phase_relevance	["design","build"]
archetype_relevance	["*"]

Frontend Skill

Specialized frontend engineering guidance for React, CSS, and browser-based applications.

When to Use

Building React components
CSS and styling questions
Browser API usage
Frontend performance optimization
Accessibility (a11y) guidance
User says "frontend", "React", "CSS", "component", "UI"

Key Focus Areas

React Patterns

Component composition and single responsibility
Hook usage (useState, useEffect, custom hooks)
State management (context, props, lifting state)
Performance (memo, useMemo, useCallback)
Error boundaries

CSS & Styling

Responsive design (flexbox, grid, media queries)
Modern CSS (custom properties, container queries)
Animations (GPU-accelerated)
Theming and design systems

Browser APIs

Fetch API and async operations
Local/Session Storage
Event handling
Performance API

Accessibility

Semantic HTML elements
ARIA labels and roles
Keyboard navigation
Screen reader compatibility
WCAG color contrast

Performance

Code splitting and lazy loading
Bundle optimization
Image optimization
Virtual scrolling
Debouncing and throttling

Review Process

Use comprehensive checklists for:

Component quality (responsibility, props, composition)
React best practices (hooks, effects, state)
Styling (responsiveness, consistency)
Accessibility (semantic HTML, keyboard nav, ARIA)

See refs/checklists.md for detailed checklists, anti-patterns, and output templates.

Code Patterns

Common React and CSS patterns for:

Component structure with TypeScript
Custom hooks (debounce, etc.)
Responsive design
Accessibility patterns
Performance optimization

See refs/patterns.md for code examples and best practices.

Notes

Prioritize accessibility from the start
Mobile-first responsive design
Use semantic HTML before reaching for ARIA
Test with keyboard navigation and screen readers