Jeden Skill in Manus ausführen
mit einem Klick

Jeden Skill in Manus mit einem Klick ausführen

react-19

React 19 patterns with React Compiler. Trigger: When writing React 19 components/hooks in .tsx (React Compiler rules, hook patterns, refs as props). If using Next.js App Router/Server Actions, also use nextjs-16.

In Manus ausführen

Sterne14.009

Forks2.189

Aktualisiert12. Mai 2026 um 17:05

Quelle

prowler-cloud

prowler-cloud/prowler

GitHub-Repository öffnen Creator-Repositorys ansehen

Installationsbefehl

Download

In Manus ausführen

Verwandte BerufeSOC

Basierend auf der SOC-Berufsklassifikation

SoftwareentwicklerInformatik- und Mathematikberufe·SOC 15-1252

WebentwicklerSOC 15-1254

SKILL.md

readonly

name	react-19
description	React 19 patterns with React Compiler. Trigger: When writing React 19 components/hooks in .tsx (React Compiler rules, hook patterns, refs as props). If using Next.js App Router/Server Actions, also use nextjs-16.
license	Apache-2.0
metadata	{"author":"prowler-cloud","version":"1.0","scope":["root","ui"],"auto_invoke":"Writing React components"}
allowed-tools	Read, Edit, Write, Glob, Grep, Bash, WebFetch, WebSearch, Task

No Manual Memoization (REQUIRED)

// ✅ React Compiler handles optimization automatically
function Component({ items }) {
  const filtered = items.filter(x => x.active);
  const sorted = filtered.sort((a, b) => a.name.localeCompare(b.name));

  const handleClick = (id) => {
    console.log(id);
  };

  return <List items={sorted} onClick={handleClick} />;
}

// ❌ NEVER: Manual memoization
const filtered = useMemo(() => items.filter(x => x.active), [items]);
const handleClick = useCallback((id) => console.log(id), []);

Imports (REQUIRED)

// ✅ ALWAYS: Named imports
import { useState, useEffect, useRef } from "react";

// ❌ NEVER
import React from "react";
import * as React from "react";

Server Components First

// ✅ Server Component (default) - no directive
export default async function Page() {
  const data = await fetchData();
  return <ClientComponent data={data} />;
}

// ✅ Client Component - only when needed
"use client";
export function Interactive() {
  const [state, setState] = useState(false);
  return <button onClick={() => setState(!state)}>Toggle</button>;
}

When to use "use client"

useState, useEffect, useRef, useContext
Event handlers (onClick, onChange)
Browser APIs (window, localStorage)

use() Hook

import { use } from "react";

// Read promises (suspends until resolved)
function Comments({ promise }) {
  const comments = use(promise);
  return comments.map(c => <div key={c.id}>{c.text}</div>);
}

// Conditional context (not possible with useContext!)
function Theme({ showTheme }) {
  if (showTheme) {
    const theme = use(ThemeContext);
    return <div style={{ color: theme.primary }}>Themed</div>;
  }
  return <div>Plain</div>;
}

Actions & useActionState

"use server";
async function submitForm(formData: FormData) {
  await saveToDatabase(formData);
  revalidatePath("/");
}

// With pending state
import { useActionState } from "react";

function Form() {
  const [state, action, isPending] = useActionState(submitForm, null);
  return (
    <form action={action}>
      <button disabled={isPending}>
        {isPending ? "Saving..." : "Save"}
      </button>
    </form>
  );
}

ref as Prop (No forwardRef)

// ✅ React 19: ref is just a prop
function Input({ ref, ...props }) {
  return <input ref={ref} {...props} />;
}

// ❌ Old way (unnecessary now)
const Input = forwardRef((props, ref) => <input ref={ref} {...props} />);

Mehr aus diesem Repository

gleiches Repository

prowler-tour

prowler-cloud/prowler

Keeps product-tour definitions aligned with the UI features they describe. Trigger: When modifying UI components that have associated tours, editing tour definition files, or renaming data-tour-id attributes.

2026-06-1514.0k

django-drf

prowler-cloud/prowler

Django REST Framework patterns. Trigger: When implementing generic DRF APIs (ViewSets, serializers, routers, permissions, filtersets). For Prowler API specifics (RLS/RBAC/Providers), also use prowler-api.

2026-05-2714.0k

django-migration-psql

prowler-cloud/prowler

Reviews Django migration files for PostgreSQL best practices specific to Prowler. Trigger: When creating migrations, running makemigrations/pgmakemigrations, reviewing migration PRs, adding indexes or constraints to database tables, modifying existing migration files, or writing data backfill migrations. Always use this skill when you see AddIndex, CreateModel, AddConstraint, RunPython, bulk_create, bulk_update, or backfill operations in migration files.

2026-05-2714.0k

gh-aw

prowler-cloud/prowler

Create and maintain GitHub Agentic Workflows (gh-aw) for Prowler. Trigger: When creating agentic workflows, modifying gh-aw frontmatter, configuring safe-outputs, setting up MCP servers in workflows, importing Copilot Custom Agents, or debugging gh-aw compilation.

2026-05-2714.0k

jsonapi

prowler-cloud/prowler

Strict JSON:API v1.1 specification compliance. Trigger: When creating or modifying API endpoints, reviewing API responses, or validating JSON:API compliance.

2026-05-2714.0k

nextjs-16

prowler-cloud/prowler

Next.js 16 App Router patterns. Trigger: When working in Next.js App Router (app/), Server Components vs Client Components, Server Actions, Route Handlers, proxy.ts, caching/revalidation, Cache Components, and streaming/Suspense.

2026-05-2714.0k

// ✅ React Compiler handles optimization automatically function Component({ items }) { const filtered = items.filter(x => x.active); const sorted = filtered.sort((a, b) => a.name.localeCompare(b.name)); const handleClick = (id) => { console.log(id); }; return <List items={sorted} onClick={handleClick} />; } // ❌ NEVER: Manual memoization const filtered = useMemo(() => items.filter(x => x.active), [items]); const handleClick = useCallback((id) => console.log(id), []);

// ✅ Server Component (default) - no directive export default async function Page() { const data = await fetchData(); return <ClientComponent data={data} />; } // ✅ Client Component - only when needed "use client"; export function Interactive() { const [state, setState] = useState(false); return <button onClick={() => setState(!state)}>Toggle</button>; }

import { use } from "react"; // Read promises (suspends until resolved) function Comments({ promise }) { const comments = use(promise); return comments.map(c => <div key={c.id}>{c.text}</div>); } // Conditional context (not possible with useContext!) function Theme({ showTheme }) { if (showTheme) { const theme = use(ThemeContext); return <div style={{ color: theme.primary }}>Themed</div>; } return <div>Plain</div>; }

"use server"; async function submitForm(formData: FormData) { await saveToDatabase(formData); revalidatePath("/"); } // With pending state import { useActionState } from "react"; function Form() { const [state, action, isPending] = useActionState(submitForm, null); return ( <form action={action}> <button disabled={isPending}> {isPending ? "Saving..." : "Save"} </button> </form> ); }

// ✅ React 19: ref is just a prop function Input({ ref, ...props }) { return <input ref={ref} {...props} />; } // ❌ Old way (unnecessary now) const Input = forwardRef((props, ref) => <input ref={ref} {...props} />);