Skill

frontend

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"

Install

npx claudepluginhub mikeparcewski/wicked-garden --plugin wicked-garden

Tool Access

This skill uses the workspace's default tool permissions.

Preview

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

Supporting Assets

refs/checklists.mdrefs/patterns.md

SKILL.md

Similar Skills

kotlin-ktor-patterns

Provides Ktor server patterns for routing DSL, plugins (auth, CORS, serialization), Koin DI, WebSockets, services, and testApplication testing.

everything-claude-code

163.2k

deep-research

Conducts multi-source web research with firecrawl and exa MCPs: searches, scrapes pages, synthesizes cited reports. For deep dives, competitive analysis, tech evaluations, or due diligence.

everything-claude-code

163.2k

inventory-demand-planning

Provides demand forecasting, safety stock optimization, replenishment planning, and promotional lift estimation for multi-location retailers managing 300-800 SKUs.

everything-claude-code

163.2k

Stats

Stars8

Forks1

Last CommitApr 3, 2026

Actions

View Source View Plugin View on GitHub View README

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