Frontend Patterns (React & Next.js)
Teaches the agent React, Next.js, state and performance patterns for building UI code
- Repository
- affaan-m/ECC
- Stars
- 295,127
- Licence
- MIT
- Files
- 1 file
What it does
This skill gives the AI agent a reference guide of modern front-end coding patterns for React and Next.js, written in Spanish. When you ask for help building interface components, custom hooks, state management, data fetching, forms or performance tuning, the agent follows these patterns, such as component composition, compound components, render props, custom hooks for toggles, async data and debouncing, and a context-plus-reducer state approach. The file contains only instructions and code examples; it does not run anything on its own.
Great for
- Developers building React or Next.js applications who want consistent, idiomatic component code from an agent
- Teams who want a Spanish-language reference for front-end patterns
- Developers learning practical React patterns such as hooks and context
Skip it if
- Projects that do not use React or Next.js, since most patterns are React-specific
- Production-critical code that is used without review, because the examples are illustrative and not tested against a specific library version
Try asking
- “Create a reusable Card component with header and body subcomponents in React”
- “Write a custom hook that debounces a search input before calling an API”
- “Set up a context and reducer to manage a list of markets and a selected item”
- “Refactor a data-fetching component to use a useQuery-style hook with loading and error states”
Install in 3 steps
- 1
Download the skill
The ZIP contains the 1 original files, the MIT licence and an attribution note.
frontend-patterns.zip - 2
Add it to your agent
Claude Code (all projects)
mkdir -p ~/.claude/skills && unzip frontend-patterns.zip -d ~/.claude/skills/Claude Code / Agent SDK (this project only)
mkdir -p .claude/skills && unzip frontend-patterns.zip -d .claude/skills/Claude apps (web/desktop): Settings → Capabilities → Skills → Upload skill, and choose the ZIP.
- 3
Ask for the task
No special command needed — the agent reads the skill's description and loads it when your request matches. Try one of the prompts above.
Get better results
- Name your framework and version (for example React 18 with Next.js App Router) so the agent adapts the patterns correctly
- Review generated code, since the examples use simplified fetch and error handling that may need hardening for production
- Ask the agent to explain which pattern it chose and why, to learn the trade-offs
What's inside
- SKILL.md
Redistributed unmodified from affaan-m/ECC under the MIT licence. The assessment was drafted with AI from the skill's files on 2026-10-29. Skills can instruct your agent to run code — read SKILL.md and any scripts before installing.