Frontend

Handles modern frontend work with React, Vue, and Next.js, covering component patterns, custom hooks, and state management with Zustand and TanStack Query. The collaboration setup is smart: it knows to hand off API design questions to the api-design skill and pass testing scenarios to testing-strategies while pulling in endpoint lists from backend. The examples lean heavily on TypeScript and newer patterns like Next.js server components and server actions. It's opinionated about function components and hooks over class components, which matches where the ecosystem has moved. If you're building SPAs or server-rendered apps with these frameworks, it covers the ground between initial setup and production patterns.

skills.sh installs: 194
GitHub stars: 26
last updated: Aug 21, 2026

View on GitHub

Install

$ npx -y skills add miles990/claude-software-skills --skill frontend --agent claude-code

Installs into .claude/skills of the current project.

Files

Frontend Development

Overview

Modern frontend development patterns, frameworks, and best practices for building performant web applications.

React Ecosystem

Component Patterns

// Functional component with hooks
import { useState, useEffect, useCallback, useMemo } from 'react';

interface UserListProps {
  initialFilter?: string;
  onSelect: (user: User) => void;
}

function UserList({ initialFilter = '', onSelect }: UserListProps) {
  const [users, setUsers] = useState<User[]>([]);
  const [filter, setFilter] = useState(initialFilter);
  const [loading, setLoading] = useState(true);

  // Memoized filtered list
  const filteredUsers = useMemo(
    () => users.filter(u => u.name.toLowerCase().includes(filter.toLowerCase())),
    [users, filter]
  );

  // Stable callback reference
  const handleSelect = useCallback((user: User) => {
    onSelect(user);
  }, [onSelect]);

  useEffect(() => {
    async function fetchUsers() {
      setLoading(true);
      const data = await api.getUsers();
      setUsers(data);
      setLoading(false);
    }
    fetchUsers();
  }, []);

  if (loading) return <Skeleton count={5} />;

SKILL.md on GitHub