mikeparcewski/frontend
skills/engineering/frontend/SKILL.md
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 --global
skillsauthnpx skillsauth add mikeparcewski/wicked-garden frontendInstall this skill globally with one command. Works with Claude Code, Cursor, and Windsurf.
Security Scan Results
3 of 9 scanners reported clean
Some scanners were skipped, did not run, or reported a non-clean status. Review each row below.
3
Scanners Passed
9
Scanners in report
Clean
TrivyContainer and dependency vulnerability scanner
95%
Clean
SemgrepStatic code analysis for vulnerabilities
95%
Clean
mcp-scan (Snyk)Model Context Protocol security validation
95%
Skipped
Snyk (dep)Open source security scanning
50%
Skipped
Socket.devSupply chain security analysis
50%
Skipped
VirusTotalMulti-engine malware detection
50%
Skipped
CrowdStrikeAdvanced threat intelligence
50%
Skipped
OSV-ScannerOpen Source Vulnerability database check
50%
Skipped
OWASP Dep-Check
50%
Last scanned: May 7, 2026, 6:26 AM142.2s3 files scanned
SKILL.md
- name:
- frontend
- description:
- |
- Use when:
- build a React component", "CSS layout issue", "frontend performance",
- portability:
- portable
- # TODO #339:
- When Claude Code supports 'paths' in skill frontmatter for
- # paths:
- ["**/*.tsx", "**/*.jsx", "**/*.css", "**/*.scss", "**/components/**"]
- 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
Related Skills
mikeparcewski/skills/engineering/large-scale-migration
development
VerifiedTrustedCommunity
--- name: large-scale-migration description: How to execute a LARGE MECHANICAL change across any codebase with LEVERAGE instead of an agent-grind or hand-edits — a cross-cutting migration, refactor, rename, dialect/framework/DB port, library adoption, or bulk transform. The map→transform→gate pattern: a deterministic transform driven by a source-of-truth map, proven by a differential-equivalence gate. Use when the work is "migrate all X to Y", "rename Z everywhere", "port to a new DB/dialect/fra
8SKILL.mdUpdated Jun 3, 2026
mikeparcewski/wicked-garden:classify
testing
VerifiedTrustedCommunity
v11 LLM-based work-shape classifier. Replaces the regex archetype detector with the model's own reasoning. Reads the user's prompt, picks the right archetype(s) from the catalog, identifies signals (blast_radius, novelty, reversibility, etc.), and persists to SessionState so subsequent turns steer correctly. Use when: the prompt_submit hook emitted a `<wg classify-due />` directive, OR explicitly invoked at session start, OR when re-classifying after the user changes scope mid-session.
8SKILL.mdUpdated May 26, 2026
mikeparcewski/wicked-garden:archetype
tools
VerifiedTrustedCommunity
v11 work-shape archetype runner. When a prompt has been routed to one of the 9 archetypes (triage, explore, specify, decide, ship, review, incident, build, migrate), 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 when one of the per-archetype slash commands resolves to this skill.
8SKILL.mdUpdated May 8, 2026
mikeparcewski/intent
development
VerifiedTrustedCommunity
Show or set the session intent variable. Intent gates how loud the framework is — simple-edit (silent), feature/research (synthesis directive), rigor (full crew context). Auto-detected on turn 1; this skill overrides explicitly. Sticky for the session. Use when: "set intent", "intent override", "/wicked-garden:intent", "make the framework quiet", "force rigor", "what's my intent".
8SKILL.mdUpdated May 6, 2026