frontend-patterns
Frontend development patterns for React, Next.js, state management, performance optimization, and UI best practices. Use when building or reviewing React or Next.js components, state, or render performance.
Before you install
- Last update
- Files in folder
- 2
- Scripts
- No script files found
- SKILL.md size
- 16 KB (about 4,015 tokens of context each time it loads)
- License
- MIT
- Source on GitHub
- affaan-m/ECC
Skills are plain text instructions the agent follows, sometimes with scripts. Check the source, prefer repositories with many installs and stars, and read any script it ships.
Install
npx skills add affaan-m/ECC@frontend-patternsRuns in a terminal with Node.js 18 or newer. Add -y to skip the prompts and -g to install for every project instead of this one.
Install for your agent
npx skills add affaan-m/ECC@frontend-patterns --agent claude-code -y- Project install writes to
.claude/skills/frontend-patterns- Global install writes to
~/.claude/skills/frontend-patterns
Start a new session afterwards so the agent picks the skill up. In Claude Code you can also call it directly with /frontend-patterns.
What it does
Frontend Development Patterns Modern frontend patterns for React, Next.js, and performant user interfaces. When to Activate - Building React components (composition, props, rendering) - Managing state (useState, useReducer, Zustand, Context) - Implementing data fetching (SWR, React Query, server components) - Optimizing performance (memoization, virtualization, code splitting) - Working with forms (validation, controlled inputs, Zod schemas) - Handling client-side routing and navigation - Building accessible, responsive UI patterns Privacy and Data Boundaries Frontend examples should use…
Excerpt from the skill's own SKILL.md. Read the full file on GitHub before installing: skills run with your agent's permissions.
Categories
Related skills
- docker-patterns
affaan-m/ECC
Docker and Docker Compose patterns for local development, container security, networking, volume strategies, and multi-service orchestration. Use when setting up containerized development environments or reviewing Docker configurations.
- video-editing
affaan-m/ECC
AI-assisted video editing workflows for cutting, structuring, and augmenting real footage. Covers the full pipeline from raw capture through FFmpeg, Remotion, ElevenLabs, fal.ai, and final polish in Descript or CapCut. Use when the user wants to edit video, cut footage, create vlogs, or build video content.
- security-review
affaan-m/ECC
Use this skill when adding authentication, handling user input, working with secrets, creating API endpoints, or implementing payment/sensitive features. Provides comprehensive security checklist and patterns.
- backend-patterns
affaan-m/ECC
Backend architecture patterns, API design, database optimization, and server-side best practices for Node.js, Express, and Next.js API routes. Use when building or reviewing Node.js, Express, or Next.js API routes and their data access.
- backend-patterns
affaan-m/ECC
Backend architecture patterns, API design, database optimization, and server-side best practices for Node.js, Express, and Next.js API routes.
- frontend-patterns
affaan-m/ECC
Frontend development patterns for React, Next.js, state management, performance optimization, and UI best practices.