cc-skill-frontend-patterns
sickn33/agentic-awesome-skills
React, Next.js, and state management patterns for performant, maintainable frontends.
What is cc-skill-frontend-patterns?
A reference skill covering modern frontend development patterns including React and Next.js best practices, state management approaches, performance optimization techniques, and UI design patterns. Use this when building or refactoring frontend applications to follow established conventions and avoid common pitfalls.
- Provides patterns for React component architecture and composition
- Covers Next.js-specific patterns for server-side rendering and static generation
- Explains state management strategies and tool selection
- Documents performance optimization techniques for frontend applications
- Outlines UI best practices and accessibility considerations
How to install cc-skill-frontend-patterns
npx skills add https://github.com/sickn33/agentic-awesome-skills --skill cc-skill-frontend-patterns- Node.js and npm installed
- Familiarity with React fundamentals
- Understanding of JavaScript ES6+ syntax
How to use cc-skill-frontend-patterns
- 1.Install the skill using the provided npm command
- 2.Read the detailed guide in references/detailed-guide.md completely for end-to-end work or load relevant sections for focused tasks
- 3.Review the patterns applicable to your specific use case
- 4.Apply the recommended patterns to your codebase
- 5.Validate changes through testing and code review before deployment
Use cases
- Architecting a new React or Next.js application with scalable patterns
- Refactoring existing frontend code to follow established best practices
- Selecting appropriate state management solutions for different project scales
- Optimizing frontend performance in production applications
- Implementing consistent UI patterns across a design system
- Frontend engineers and React developers
- Full-stack developers building web applications
- Engineering teams establishing frontend standards
- Developers transitioning to Next.js from other frameworks
cc-skill-frontend-patterns FAQ
No. Select patterns that match your project's scale, team expertise, and specific requirements. The skill provides options; not all are mandatory for every project.
The detailed guide covers different state management approaches with trade-offs. Consider your application complexity, team familiarity, and performance requirements when choosing.
Most patterns work with React 16+, but some (like hooks-based patterns) require React 16.8 or later. Check the detailed guide for version-specific notes.
Core React patterns are framework-agnostic, but the skill includes Next.js-specific patterns for SSR, static generation, and file-based routing that apply only to Next.js projects.
Full instructions (SKILL.md)
Source of truth, from sickn33/agentic-awesome-skills.
name: cc-skill-frontend-patterns description: "Frontend development patterns for React, Next.js, state management, performance optimization, and UI best practices." risk: critical source: community date_added: "2026-02-27"
Frontend Development Patterns
Modern frontend patterns for React, Next.js, and performant user interfaces.
Detailed Guide
Read the detailed guide before executing this skill. It retains the complete procedure and reference material. Treat its safety, prerequisites, and validation requirements as mandatory. For focused work, load the relevant sections; for end-to-end work, read the guide completely.
When to Use
This skill is applicable to execute the workflow or actions described in the overview.
Limitations
- Use this skill only when the task clearly matches the scope described above.
- Do not treat the output as a substitute for environment-specific validation, testing, or expert review.
- Stop and ask for clarification if required inputs, permissions, safety boundaries, or success criteria are missing.
Related skills
More from sickn33/agentic-awesome-skills and the wider catalog.
cc-skill-security-review
Identify and fix security vulnerabilities in code before deployment.
clean-code
Transform working code into clean, maintainable code using Uncle Bob's proven principles.
code-refactoring-refactor-clean
Expert code refactoring using clean code principles and SOLID design patterns.
code-review-checklist
Systematic checklist for thorough code reviews covering functionality, security, performance, and maintainability.
context-compression
Compress agent conversation history while preserving task-critical information like file paths and decisions.
context-window-management
Optimize LLM context windows through summarization, trimming, routing, and token budgeting strategies.