Best skills for Frontend developer
As a frontend developer, your daily focus is on building responsive and intuitive interfaces. To level up, adding targeted AI skills can make a real difference. Skills like WebSocket Engineer help you master real-time connections, crucial for collaborative apps or live notifications. Domain-Driven Design (DDD), on the other hand, lets you structure business logic directly in the frontend, reducing complexity and improving maintainability. A common pitfall: don't mistake DDD for just another folder structure — it's about modeling the domain with the product team. Also, avoid overusing WebSocket without a clear need, as it can overcomplicate your app. These skills aren't buzzwords; they sharpen your expertise and address real challenges in modern frontend development.
24 skills selected
Electron App Scaffolder
Development
Scaffolds a production-ready Electron app with TypeScript, React, and Vite. Automatically sets up project structure, core dependencies, and optional features like SQLite (via Knex), Jest testing, and Storybook for component development.
BIM Verdi Design System
Development
Generates BIM Verdi UI components and pages following the established design system. Enforces enterprise-calm aesthetics with warm orange accent, Moderat typography, and whitespace-based layout. Use when building templates or frontend for bimverdi.no to avoid generic AI patterns.
Distinctive Frontend Design
Development
Creates production-grade web interfaces with distinctive visual identity and high design quality. Use when building landing pages, dashboards, React components, or any web UI that needs intentional, memorable aesthetics rather than generic layouts. Generates polished code with advanced typography, color systems, motion, and responsive design.
Arcanea React & Next.js Performance Guide
Development
This skill provides 57 performance optimization rules for React 19 and Next.js 16, covering data fetching, bundle size, server-side rendering, client-side rendering, and re-render optimization. It helps developers eliminate waterfalls, reduce bundle size, and improve overall frontend performance in the Arcanea platform.
Pre-PR Preflight Check
Development
Runs a comprehensive set of checks on changed files before creating a pull request, covering TypeScript strictness, React patterns, route structure, data fetching, validation, environment variables, imports, dead code, security, git hygiene, performance, styling, dates, accessibility, and code style. Helps catch common issues early to speed up code review and reduce bugs.
runi Design System
Development
Create React components and pages that follow the runi design system, which conveys vigilance and protection through subtle signal dots and semantic color tokens. Use this skill when building UI for the runi HTTP client to ensure consistent dark mode support, custom component craftsmanship, and a calm, book-like aesthetic. It helps maintain the brand’s philosophy of collapsing uncertainty into truth with actionable insights.
Scaffold Custom React Hook
Development
Scaffolds a new custom React hook inside an existing feature module. It walks you through naming, selecting the target feature, choosing a hook category (data fetching, state management, or utility), and generates the hook file along with a barrel export. Use when you need to quickly add a reusable hook to a feature following project conventions.
Stimulus Best Practices for Rails
Development
Provides best practices for structuring Stimulus controllers in Rails applications, including target definitions, actions, values, and classes. Covers when to use Stimulus for UI enhancements like toggles and form interactions, and when to rely on Turbo or server-side approaches.
Modern CSS Standards for CUI Projects
Development
Use this skill to apply modern CSS standards for CUI projects, including BEM naming, custom properties, Grid/Flexbox, and container queries. It provides guidelines for responsive design, performance optimization, accessibility, and tooling setup (PostCSS, Stylelint). Best when writing, modifying, or reviewing CSS in a professional development environment.
Adding a Frontend Page in Yew
Development
Step-by-step guide for adding a new page to the Lightfriend Yew frontend. Covers creating the page component, adding a route variant and handler, declaring the module in the inline mod block (no mod.rs), and optionally adding a navigation link. Helps when you need to extend the UI with a new view.
Vue Component Development and Code Review
Development
Skill for Vue component development and code review. In development mode, it generates high-quality Vue components and composables from user descriptions. In review mode, use /vue <path> to analyze Vue files and produce a structured report with checkpoints.
Code Linting and Auto-fix
Development
Lint and auto-fix JavaScript, CSS, and PHP files to enforce coding standards (ESLint, Stylelint, WPCS). Run before committing to ensure code quality and compliance.
Architecture Performance Optimization
Development
Use to analyze and resolve performance bottlenecks across database, API, network, and frontend layers. It guides identifying bottleneck types, measuring baseline metrics, and applying layer-specific optimizations like indexing, caching, lazy loading, and OnPush change detection. Helpful when dealing with slow API responses, database query optimization, frontend rendering issues, or scalability planning.
Writing Optimized React Effects
Development
Guides writing React components by avoiding unnecessary useEffect calls. Helps when creating or reviewing React components, refactoring effects, or when code uses useEffect to transform data or handle events instead of external system synchronization.
UI Development Server
Development
Starts the Vite/React development server with hot module replacement. Supports multiple environments (development, staging, production, e2e) and custom ports. Useful for rapid frontend development and testing with real-time updates.
Excel Import Modal Generator
Development
Generates a complete Excel import modal using the useExcelImport hook, including the modal component, parser function, and TypeScript interfaces. Run this when adding a new domain's import feature or refactoring an existing modal to the standard pattern. It also guides on connecting parent component callbacks.
Game Loopers CSS BEM Auditor
Development
Audits and refactors CSS to comply with Game Loopers' BEM methodology and design system. Detects non-compliant selectors, design token violations, naming collisions, and overly specific rules, then suggests BEM-aligned fixes. Helps maintain consistency and scalability across Astro, SolidJS, and global stylesheets.
Design System Creator
Development
Architect and implement comprehensive design systems using OKLCH tokens, CSS custom properties, and three-tier token architecture. Helps when building scalable style guides, component libraries, or theming systems from scratch or auditing existing CSS.
Find UI Component
Development
Maps UI screenshots or visual descriptions to frontend component source files. Automatically activates before /scout when a screenshot is pasted with UI intent, extracting visual signals (text, layout, colors) and matching them against a component index with confidence scoring. Outputs a Mermaid diagram of component relationships to streamline navigation.
React - UI Design and Performance
Development
This skill organizes design, review, and performance optimization for React/Next.js projects, treating UI as a computation model (components/state/rendering). It is triggered for repositories listing React or Next.js in `doc/input/rdd.md`, or when discussing state management, rendering, Server Components, SSR, streaming, bundling, or performance. It offers checklists and common pitfalls to ensure clean architecture and performance.
Frontend UI/UX Development
Development
Specialized skill for building modern, accessible, and performant user interfaces. It covers visual design, component architecture, animation, and accessibility, ensuring consistent, polished frontend code. Helpful when delegating UI work or implementing visual designs.
React Feature Flags Checker
Development
Use when you need to check feature flag states, compare channels, or debug why a feature behaves differently across release channels. Supports comparing channels with --diff, grouping by cleanup status with --cleanup, and CSV export. Helps diagnose flag-related inconsistencies across Meta internal and OSS channels.
Next.js - Full-Stack React Framework
Development
Assists with building production-grade React applications using Next.js. Use when working with the App Router, Server Components, Server Actions, Middleware, or deploying to Vercel or self-hosted environments. Trigger words: nextjs, next.js, app router, server components, server actions, react framework, ssr, isr.
React Email - HTML Email Templates
Development
Use when building HTML email templates with React components. Helps create responsive, consistent emails for common use cases like welcome emails, password resets, notifications, order confirmations, and newsletters. Provides a component library and local preview server to streamline email development across major clients.
How to choose
- How are these skills selected?
- Each skill is curated and verified by the Skills Guides editorial team. We run a security and quality review on every entry, so only verified skills appear in this selection.
- What do the security ratings mean?
- We label skills Safe, Caution or Risky based on our security analysis — checking for prompt-injection risks, requested permissions and other red flags. The rating gives you an at-a-glance sense of how much trust a skill warrants.
- How do I install a skill?
- Open any skill page and follow its install instructions for your tool — Claude Code, Cursor or Copilot. Each skill lists the exact steps so you can get it running in a couple of minutes.