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
Create a composable (useX)
Development
Create a reusable Vue composable (useX) with tests, following TrackGrowth conventions and Pinia vs composable distinction.
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.
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.
Emotion to Mantine Migration
Development
Migrate Emotion styled-components to Mantine components with style props and CSS modules. Use when converting .styled.tsx files or removing @emotion imports.
Vector Icon Libraries Guide
Development
Guide to vector icon libraries: 10+ libraries, 200K+ icons, with decision matrices and frontend implementation best practices.
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.
React Hook Form Best Practices
Development
Master React Hook Form: avoid anti-patterns, manage subscriptions, and handle reset, dirty state, and controlled inputs correctly.
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.
UI Design System
Development
Design system reference for the Devkit Vue stack (Vuetify 4 + custom theme helpers). Used for styling, layout, and visual verification.
deevy UI: design and screen contracts
Development
Reference guide for deevy's web UI (apps/web): visual language for Humans/Agents/Gates, navigation model, shadcn registries, editor, and required test contracts.
Datagrok UI Building Guidelines
Development
Rules and patterns for building Datagrok TypeScript UI: lazy tabs, grids, viewers, layouts, dialogs, and popup toggle menus.
Next.js App Router Project Structure
Development
Organizes Next.js App Router projects with folders for pages, components, features, utilities, and hooks.
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.
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.
Effect-Atom Integration
Development
Bridges Effect-TS services with React via reactive atoms. Atom-as-State doctrine for canonical state management.
SWR: React Data Fetching & Caching
Development
Fetch, cache, and revalidate data in React with SWR, a lightweight library by Vercel. Supports pagination, optimistic updates, and background revalidation.
Rating Component (n-rate)
Development
A rating component for collecting user feedback with customizable icons, colors, and half-star support. Ideal for product reviews, feedback forms, and rating systems.
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.
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.
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.
HTML/CSS Design Expert
Development
Use for HTML/CSS layout, responsive behavior, and UI styling following the project design system. Reuse existing patterns and maintain accessibility.
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.
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.
How to choose
- How are these skills selected?
- An algorithm picks them among the published skills that match this page's criteria, such as category, tags or compatible tools. It ranks them by the quality score a language model gave them. On ranking pages, it also weighs GitHub stars and the security rating. Nobody reviews them one by one.
- What do the security ratings mean?
- A language model reads the SKILL.md file, without running it, and gives it a rating. Safe means it sees no meaningful execution risk. Caution means the skill uses powerful tools such as bash, docker or the network for a legitimate purpose. Risky means it asks for destructive actions, for secrets to be sent out, or for obfuscated code to run; a skill rated Risky is never published. The rating does not replace your own reading of the file.
- 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.