Skip to content
cccskills
FreePublished on GitHub

zt-react-performance

React performance: production-level waterfalls, dynamic import, render profiling. Use when implementing, reviewing or testing react performance for React, Vite, Next.js or Perfect_AI projects.

The English summary is being prepared. Showing the original description.

See how to install

Files included (1)

  • SKILL.md1.9 KB

SKILL.md (original)

Review the instructions the agent will receive before you install.

React performance

When to activate

Use on tasks involving waterfalls, dynamic import, render profiling. For unrelated backend tasks do not load this skill.

Implementation sequence

  1. Inspect project dependencies, application entrypoints, routing and build scripts.
  2. Define interfaces and state machines before visuals, preserve existing behavior.
  3. Build semantic HTML and mobile-first layouts with logical CSS; integrate motion only when interaction works.
  4. Validate keyboard, screen reader names, bidirectionality, input error and loading states.
  5. Run typecheck, build, unit tests, browser tests, and inspect responsive overflow.

Task-specific requirements

  • Scope: waterfalls, dynamic import, render profiling. Design the full execution path, not a screenshot placeholder.
  • Identify dependency version and actual supported API signature; avoid inventing APIs.
  • Use original code, or install licensed upstream through its maintained tool if the user wants upstream code.
  • Choose measurable states, error handling, accessibility and performance budgets.

Implementation starter

Implementation notes: Model waterfalls, dynamic import, render profiling as explicit states, define input/output props and independent cleanup. Read master reference(s) below before writing code.

Evidence / acceptance

  • 320px no horizontal overflow; 200% zoom; LTR islands correct; focus order consistent.
  • Test common, edge, interrupted, accessibility and responsive states; provide concrete artifacts/evidence.

Deep references

  • ../perfect-ai-master/references/04-ui-ux-system.md
  • ../perfect-ai-master/references/05-responsive-rtl.md
  • ../perfect-ai-master/references/11-workflow-architecture.md

Reviews

No reviews yet. Tell others what you thought.

Comments

No login needed. Share how it worked for you, ask a question, or note where it did not run.

No comments yet. Be the first to write one.

Comments are published right away. Do not include personal information such as email addresses or phone numbers. Up to 2 URLs.

0 / 1,000 characters

This form is protected by reCAPTCHA, and the Google Privacy Policy and Terms of Service apply.

More skills from this repository

Build, audit, and refactor premium Persian/English responsive websites and interactive 3D experiences with Anime.js v4, Three.js, motion choreography, color theory, RTL design systems, accessible UI/UX and VibeFarsi registry. Use for website design, animations, motion, landing pages, 3D/WebGL, responsive interfaces, visual quality, or Perfect_AI projects in Codex.

The English summary is being prepared. Showing the original description.

Realjustawall/Perfect-AI6Updated Oct 10, 2026

Accessibility automation: production-level axe audits and manual keyboard checks. Use when implementing, reviewing or testing accessibility automation for React, Vite, Next.js or Perfect_AI projects.

The English summary is being prepared. Showing the original description.

Realjustawall/Perfect-AI6Updated Oct 10, 2026

قواعد پروژه assistant for Codex; apply when building Persian/RTL web products, localizing content or integrating the related Iranian workflow. Local independent adaptation inspired by publicly documented VibeFarsi topics.

The English summary is being prepared. Showing the original description.

Realjustawall/Perfect-AI6Updated Oct 10, 2026

Easing mathematics: production-level cubic bezier, damped spring, velocity continuity. Use when implementing, reviewing or testing easing mathematics for React, Vite, Next.js or Perfect_AI projects.

The English summary is being prepared. Showing the original description.

Realjustawall/Perfect-AI6Updated Oct 10, 2026

Anime.js v4 core animations: production-level target selection, property keyframes, duration, ease, loop, play/pause. Use when implementing, reviewing or testing anime.js v4 core animations for React, Vite, Next.js or Perfect_AI projects.

The English summary is being prepared. Showing the original description.

Realjustawall/Perfect-AI6Updated Oct 10, 2026

Layout changes: production-level FLIP layout, additive composition, measurement. Use when implementing, reviewing or testing layout changes for React, Vite, Next.js or Perfect_AI projects.

The English summary is being prepared. Showing the original description.

Realjustawall/Perfect-AI6Updated Oct 10, 2026

See all skills by Realjustawall

Report a problem with this skill