Execute qualquer Skill no Manus
com um clique

Execute qualquer Skill no Manus com um clique

frontend-development

Estrelas8

Forks1

Atualizado19 de junho de 2023 às 21:05

WHEN to auto-invoke: Creating UI components, building React/Vue/Svelte components, Next.js pages, styling with Tailwind/CSS, state management setup, form handling, accessibility improvements, client-side interactivity. WHEN NOT to invoke: API-only work, database operations, backend logic, DevOps/deployment, pure testing without UI.

Instalação

Instalar com Codex ou Claude Copie este prompt, cole no Codex, Claude ou outro assistente e deixe que ele revise a página da skill e instale para você.

Executar no Manus

Fonte

gr8monk3ys

gr8monk3ys/link-flame

Abrir repositório GitHub Ver repositórios do creator

Download

Executar no Manus

Ocupações relacionadasSOC

Baseado na classificação ocupacional SOC

Desenvolvedores webInformática e Matemática·SOC 15-1254

SKILL.md

readonly

name	frontend-development
description	WHEN to auto-invoke: Creating UI components, building React/Vue/Svelte components, Next.js pages, styling with Tailwind/CSS, state management setup, form handling, accessibility improvements, client-side interactivity. WHEN NOT to invoke: API-only work, database operations, backend logic, DevOps/deployment, pure testing without UI.

Frontend Development Skill

You are an expert in building modern, accessible React applications with Next.js.

Capabilities

Component Development

React 19 patterns (Server Components, Client Components)
TypeScript-first component design
Proper prop typing with interfaces
Compound component patterns
Render prop and hook patterns

Next.js Pages

App Router page structure
Layouts and templates
Loading and error states
Metadata and SEO optimization
Dynamic routes and catch-all routes

Styling

Tailwind CSS utility patterns
CSS-in-JS when needed (styled-components, emotion)
Responsive design (mobile-first)
Dark mode support with CSS variables
Animation with Framer Motion

State Management

Zustand for global state
React Context for feature-specific state
Server state with TanStack Query
Form state with React Hook Form
URL state with nuqs

Accessibility

WCAG 2.1 AA compliance
Semantic HTML structure
ARIA attributes when needed
Keyboard navigation
Screen reader compatibility
Focus management

Best Practices

Server First: Default to Server Components
Minimize Client: Only use 'use client' when necessary
Type Props: Always define prop interfaces
Accessible by Default: Use semantic HTML
Responsive Design: Mobile-first approach

Component Structure

// Feature-based organization
src/
  features/
    auth/
      components/
      hooks/
      utils/
    dashboard/
      components/
      hooks/
      utils/

Integration Points

shadcn/ui for base components
Radix UI for headless primitives
TanStack Query for server state
Zustand for client state
React Hook Form for forms

Mais deste repositório

mesmo repositório

api-development

gr8monk3ys/link-flame

WHEN to auto-invoke: Creating API routes, building endpoints, adding route.ts files, implementing REST/GraphQL APIs, adding authentication to APIs, rate limiting, API validation with Zod, handling HTTP methods (GET/POST/PUT/DELETE). WHEN NOT to invoke: Pure frontend work, styling, React components without API calls, documentation-only tasks, database migrations without API changes.

2023-06-198

code-quality

gr8monk3ys/link-flame

WHEN to auto-invoke: Code review requests, refactoring code, cleaning up code, performance optimization, security audits, linting issues, reducing technical debt. WHEN NOT to invoke: Building new features (use domain-specific skills), initial implementation, documentation-only work.

2023-06-198

continuous-learning

gr8monk3ys/link-flame

WHEN to auto-invoke: End of productive sessions, after solving difficult problems, after user corrections, after discovering effective workarounds, after establishing project conventions. WHEN NOT to invoke: Trivial sessions, sessions with only exploration, when explicitly told not to learn.

2023-06-198

database-operations

gr8monk3ys/link-flame

WHEN to auto-invoke: Database schema design, creating migrations, writing SQL queries, query optimization, Supabase operations, Prisma/Drizzle schema changes, PostgreSQL tasks, RLS policies, indexes. WHEN NOT to invoke: Pure frontend work, API logic without database, styling, React components, deployment tasks.

2023-06-198

devops-automation

gr8monk3ys/link-flame

WHEN to auto-invoke: Creating CI/CD pipelines, GitHub Actions workflows, Docker/containerization, Vercel/Netlify deployment, infrastructure as code, environment variables, deployment configurations. WHEN NOT to invoke: Application code changes, UI development, database schema design, testing application logic.

2023-06-198

eval-harness

gr8monk3ys/link-flame

WHEN to auto-invoke: Measuring code quality, testing AI outputs, establishing success criteria, defining acceptance tests, checking implementation correctness. WHEN NOT to invoke: Simple implementations, prototyping, exploration phases, when speed matters more than measurement.

2023-06-198

name	frontend-development
description	WHEN to auto-invoke: Creating UI components, building React/Vue/Svelte components, Next.js pages, styling with Tailwind/CSS, state management setup, form handling, accessibility improvements, client-side interactivity. WHEN NOT to invoke: API-only work, database operations, backend logic, DevOps/deployment, pure testing without UI.

Frontend Development Skill

You are an expert in building modern, accessible React applications with Next.js.

Capabilities

Component Development

React 19 patterns (Server Components, Client Components)
TypeScript-first component design
Proper prop typing with interfaces
Compound component patterns
Render prop and hook patterns

Next.js Pages

App Router page structure
Layouts and templates
Loading and error states
Metadata and SEO optimization
Dynamic routes and catch-all routes

Styling

Tailwind CSS utility patterns
CSS-in-JS when needed (styled-components, emotion)
Responsive design (mobile-first)
Dark mode support with CSS variables
Animation with Framer Motion

State Management

Zustand for global state
React Context for feature-specific state
Server state with TanStack Query
Form state with React Hook Form
URL state with nuqs

Accessibility

WCAG 2.1 AA compliance
Semantic HTML structure
ARIA attributes when needed
Keyboard navigation
Screen reader compatibility
Focus management

Best Practices

Server First: Default to Server Components
Minimize Client: Only use 'use client' when necessary
Type Props: Always define prop interfaces
Accessible by Default: Use semantic HTML
Responsive Design: Mobile-first approach

Component Structure

// Feature-based organization
src/
  features/
    auth/
      components/
      hooks/
      utils/
    dashboard/
      components/
      hooks/
      utils/

Integration Points

shadcn/ui for base components
Radix UI for headless primitives
TanStack Query for server state
Zustand for client state
React Hook Form for forms