skills.rest
donchrillo
donchrilloCOMMUNITY
Explore all skills by this author →
GitHub

frontend-refactor

Identify and resolve frontend code smells and security vulnerabilities in JavaScript, React, and CSS.

Updated Nov 21, 2025
Search Tags:#security#refactoring#frontend#javascript#css#pwa#code smells
One-click install
npx skills add https://github.com/donchrillo/temu --skill frontend-refactor
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend-refactor
Source: https://github.com/donchrillo/temu/tree/main/.opencode/skills/frontend-refactor
Command: npx skills add https://github.com/donchrillo/temu --skill frontend-refactor

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill addresses common frontend code smells and security vulnerabilities, leading to more maintainable, performant, and secure web applications.

Core Features & Use Cases

  • Identify & Fix Code Smells: Detects and provides solutions for issues like large functions, XSS vulnerabilities, magic strings, and global state.
  • Enhance Security: Offers patterns for preventing XSS, CSRF, and implementing Content Security Policies.
  • Improve CSS Practices: Guides on eliminating CSS duplication, using variables, and consolidating media queries.
  • PWA Patterns: Demonstrates service worker strategies for offline support and performance.
  • Use Case: A developer notices their React component functions are becoming too long and difficult to test. They use this Skill to learn how to break them down into smaller, more manageable units and apply best practices for state management.

Quick Start

Use the frontend-refactor skill to refactor a large monolithic function by extracting logical blocks into smaller, focused functions.

Frequently Asked Questions about frontend-refactor

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I refactor large React component functions into smaller manageable units?▼

To refactor large React functions, extract logical blocks into smaller, focused functions. This improves state management and testability by breaking down monolithic components into manageable units following React patterns.

What are common frontend code smells in JavaScript and CSS?▼

Common frontend code smells include large functions, magic strings, global state, and CSS duplication. Identifying these issues allows you to apply variables, consolidate media queries, and optimize DOM manipulation for better maintainability.

How do I prevent XSS and CSRF vulnerabilities in frontend JavaScript code?▼

Prevent XSS and CSRF vulnerabilities in frontend JavaScript by applying specific security patterns and implementing Content Security Policies. These measures protect web applications from common injection and cross-site request attacks.

How do I implement PWA service worker strategies for offline support?▼

Implement PWA service worker strategies to enable offline support and optimize performance. These patterns cache assets and manage network requests, ensuring progressive web applications remain functional without connectivity.

Does this frontend refactoring approach work with vanilla JavaScript or only React?▼

This refactoring approach works with both vanilla JavaScript and React. It requires an understanding of vanilla JavaScript patterns, React component structures, and CSS best practices to resolve code smells across different frontend implementations.

How do I eliminate CSS duplication and consolidate media queries effectively?▼

Eliminate CSS duplication by using CSS variables and consolidating media queries. This improves stylesheet maintainability and ensures consistent styling practices across large web applications.

Related Skills

Explore More Software Engineering Skills→
BotteletBottelet
2.3k

safe-refactoring-rules

Enforce deterministic, behavior-preserving refactoring rules across codebases.

Community
Advanced
saschadudkin-sketchsaschadudkin-sketch

pwa-workbox-expert

Configure Workbox service workers and cache strategies for Progressive Web Apps.

Community
Advanced
eliottbusinesseliottbusiness

requesting-code-review

Automate pre-commit code review with static analysis and security scanning.

Community
Advanced
FlorianRiquelmeFlorianRiquelme

Global Coding Style

Enforce consistent coding style across PHP, JavaScript, TypeScript, Vue, and React codebases.

Community
Basic