Habilidades Frontend Developer
📦

Frontend Developer

Seguro

Build modern React and Next.js applications

Frontend development requires deep expertise in React, performance optimization, and accessibility standards. This skill provides production-ready guidance for building scalable web applications with modern tools and best practices.

Suporta: Claude Codex Code(CC)
🥉 72 Bronze
1

Baixar o ZIP da skill

2

Upload no Claude

Vá em Configurações → Capacidades → Skills → Upload skill

3

Ative e comece a usar

Testar

A utilizar "Frontend Developer". Create an accessible modal dialog component

Resultado esperado:

  • Modal component with focus trap and keyboard navigation
  • ARIA attributes for screen reader compatibility
  • Backdrop click handling and escape key dismissal
  • TypeScript interface for modal props and configuration

A utilizar "Frontend Developer". Optimize a slow-rendering product list

Resultado esperado:

  • Virtual scrolling implementation for large datasets
  • Memoized product card components with React.memo
  • Debounced search and filter handlers
  • Code splitting for image-heavy components

Auditoria de Segurança

Seguro
v1 • 2/25/2026

This is a prompt-only skill containing only instructional text in SKILL.md. Static analysis scanned 0 files with 0 lines of executable code and detected no security patterns. The skill provides frontend development guidance for React and Next.js without any code execution, network access, or file system operations. No malicious patterns or prompt injection attempts detected.

0
Arquivos analisados
0
Linhas analisadas
0
achados
1
Total de auditorias
Nenhum problema de segurança encontrado
Auditado por: claude

Pontuação de qualidade

38
Arquitetura
100
Manutenibilidade
87
Conteúdo
50
Comunidade
100
Segurança
74
Conformidade com especificações

O Que Você Pode Construir

React Component Development

Build production-ready React components with TypeScript, proper hooks usage, and optimized rendering patterns for scalable applications.

Next.js Application Architecture

Design full-stack Next.js applications with Server Components, Server Actions, and optimal data fetching strategies.

Performance Optimization

Analyze and improve frontend performance through code splitting, lazy loading, and Core Web Vitals optimization techniques.

Tente Estes Prompts

Basic Component Creation 
Create a reusable React button component with TypeScript props, supporting variants (primary, secondary), sizes, and disabled state. Include Tailwind CSS classes and proper accessibility attributes.
Server Component with Data Fetching 
Build a Next.js 15 Server Component that fetches product data from an API, implements Suspense boundaries for streaming, and handles loading and error states gracefully.
Form with Server Actions 
Implement a contact form using Next.js Server Actions with Zod validation, optimistic updates using useOptimistic, and proper error handling with user feedback.
Performance Audit and Optimization 
Analyze this React component for performance issues. Identify unnecessary re-renders, suggest memoization strategies, and provide optimized code with useMemo, useCallback, and React.memo where appropriate.

Melhores Práticas

  • Always include TypeScript types for props, state, and API responses to catch errors early
  • Implement proper loading states and error boundaries for all async operations
  • Use semantic HTML elements and ARIA attributes to ensure accessibility compliance

Evitar

  • Avoid using useEffect for data fetching when React Query or Server Components are available
  • Do not store server state in React state when dedicated data fetching libraries exist
  • Never skip accessibility testing or assume default HTML behavior is sufficient

Perguntas Frequentes

What React version does this skill support?
This skill specializes in React 19+ features including Server Components, Actions, useActionState, useOptimistic, and concurrent rendering patterns.
Can this skill help with Next.js 15 migration?
Yes, this skill provides guidance on migrating from Pages Router to App Router, implementing Server Components, and adopting Next.js 15 best practices.
Does this skill support state management libraries?
Yes, expertise includes Zustand, Jotai, Valtio, Redux Toolkit, React Query, SWR, and Context API optimization patterns.
Can this skill help with accessibility compliance?
Yes, this skill implements WCAG 2.1/2.2 AA standards, ARIA patterns, keyboard navigation, focus management, and screen reader optimization.
What testing approaches does this skill recommend?
This skill recommends React Testing Library for unit tests, Playwright or Cypress for E2E testing, and Storybook for component documentation and visual regression.
Does this skill support CSS frameworks?
Yes, expertise includes Tailwind CSS, CSS Modules, CSS-in-JS solutions like emotion and styled-components, and design token integration.

Detalhes do Desenvolvedor

Autor

sickn33

Licença

MIT

Repositório

https://github.com/sickn33/antigravity-awesome-skills/tree/main/skills/frontend-developer

Referência

main

Estrutura de arquivos

📄 SKILL.md