Frontend Patterns

What it does

The davila7-frontend-patterns skill provides a collection of reusable frontend development patterns and code snippets, optimized for modern web applications. It includes best practices for structuring components, managing state, and implementing common UI interactions using popular frameworks like React.

When to use it

• You're building a new React application and want to follow established component design patterns.
• You need to implement complex UI interactions such as modals or form validation quickly.
• You are refactoring an existing frontend codebase to improve maintainability and scalability.
• You want to ensure your code aligns with industry-standard practices for accessibility and performance.

Key capabilities

• Predefined React component structures
• State management patterns using hooks
• UI interaction implementations (e.g., modals, dropdowns)
• Accessibility and performance best practices

Example prompts

• "Implement a reusable modal component in React following best practices."
• "Show me how to handle form validation with custom hooks."
• "Provide a pattern for creating accessible dropdown menus in React."

Tips & gotchas

• Ensure your project is set up with React and necessary dependencies before using these patterns.
• Some patterns may require additional configuration or integration with state management libraries like Redux.