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
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.
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.
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.
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.
Create a composable (useX)
Development
Create a reusable Vue composable (useX) with tests, following TrackGrowth conventions and Pinia vs composable distinction.
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.
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.
Frontend Design
Development
Create distinctive, production-grade frontend interfaces with exceptional attention to aesthetic details and creative choices.
Markdown rendering with assistant-ui
Development
Render and customize assistant message text as markdown in assistant-ui, with syntax highlighting, LaTeX math, and Mermaid diagrams.
Frontend Shift-Left Quality Audit
Development
Audits frontend code quality – linting, type safety, security, accessibility, testing, CI/CD coverage. Finds gaps that let bugs reach production.
Next.js App Router Project Structure
Development
Organizes Next.js App Router projects with folders for pages, components, features, utilities, and hooks.
EdgeOne Pages Neon Cyber Mall
Development
Build and deploy a full-stack online mall (Web + Admin + Mini Program + API) on Tencent EdgeOne Pages with a neon cyberpunk style.
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.
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.
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.
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.
Integrated Code Review Guide for Smart Bookmark
Development
This guide integrates Google, Palantir, Conventional Comments, and Pagepro review principles to establish senior-level code review standards, covering FSD architecture, naming conventions, and code quality.
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.
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.
Koin UI Design System
Development
Comprehensive UI design system for Koin fintech platform. Defines design philosophy, color tokens, stack, and component usage based on Untitled UI.
Generate a quick visual mockup of an app screen
Development
Create a static self-contained HTML mockup using DESIGN.md tokens, mobile-first, published via the Artifact tool.
Coding Standards & Best Practices
Development
Universal coding standards and best practices for TypeScript, JavaScript, React, and Node.js development.
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.
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.