{ "schema_version": "2026-03-26", "generated_at": "2026-03-31T00:00:00+00:00", "id": "vercel-react-best-practices", "slug": "vercel-react-best-practices", "display_name": "Vercel React Best Practices", "description": "Vercel React Best Practices workflow skill. Use this skill when the user needs React and Next.js performance optimization guidelines from Vercel Engineering. This skill should be used when writing, reviewing, or refactoring React/Next.js code to ensure optimal performance patterns. Triggers on tasks involving React components, Next.js pages, data fetching, bundle optimization, or performance improvements and the operator should rely on the packaged workflow, support pack, troubleshooting notes, and provenance links before merging or handing off.", "version": "0.0.1", "raw_category": "frontend", "canonical_category": "frontend", "taxonomy": { "raw_category": "frontend", "canonical_category": "frontend", "inferred_category": "frontend", "category_source": "frontmatter" }, "tags": [ "vercel-react-best-practices", "react", "and", "next", "performance", "optimization", "guidelines", "vercel" ], "tools": [ "codex-cli", "claude-code", "cursor", "gemini-cli", "opencode" ], "complexity": "advanced", "risk": "safe", "source": "community", "author": "vercel", "dates": { "added": "2026-03-31", "updated": "2026-03-31", "file_mtime": "2026-03-31T00:00:00+00:00" }, "paths": { "root": "skills/vercel-react-best-practices", "entrypoint": "skills/vercel-react-best-practices/SKILL.md", "metadata": "skills/vercel-react-best-practices/metadata.json" }, "resources": { "sub_resources": [ "agents", "assets", "examples", "references", "rules", "scripts" ], "files": [ "AGENTS.md", "EXTERNAL_SOURCE.json", "ORIGIN.md", "README.md", "SKILL.md", "omni-import-router.md", "omni-import-source-manifest.json", "omni-import-operator-packet.md", "omni-import-prompt-template.md", "omni-import-checklist.md", "omni-import-playbook.md", "omni-import-rubric.md", "omni-import-source-summary.md", "_sections.md", "_template.md", "advanced-event-handler-refs.md", "advanced-init-once.md", "advanced-use-latest.md", "async-api-routes.md", "async-cheap-condition-before-await.md", "async-defer-await.md", "async-dependencies.md", "async-parallel.md", "async-suspense-boundaries.md", "bundle-barrel-imports.md", "bundle-conditional.md", "bundle-defer-third-party.md", "bundle-dynamic-imports.md", "bundle-preload.md", "client-event-listeners.md", "client-localstorage-schema.md", "client-passive-event-listeners.md", "client-swr-dedup.md", "js-batch-dom-css.md", "js-cache-function-results.md", "js-cache-property-access.md", "js-cache-storage.md", "js-combine-iterations.md", "js-early-exit.md", "js-flatmap-filter.md", "js-hoist-regexp.md", "js-index-maps.md", "js-length-check-first.md", "js-min-max-loop.md", "js-request-idle-callback.md", "js-set-map-lookups.md", "js-tosorted-immutable.md", "rendering-activity.md", "rendering-animate-svg-wrapper.md", "rendering-conditional-render.md", "rendering-content-visibility.md", "rendering-hoist-jsx.md", "rendering-hydration-no-flicker.md", "rendering-hydration-suppress-warning.md", "rendering-resource-hints.md", "rendering-script-defer-async.md", "rendering-svg-precision.md", "rendering-usetransition-loading.md", "rerender-defer-reads.md", "rerender-dependencies.md", "rerender-derived-state-no-effect.md", "rerender-derived-state.md", "rerender-functional-setstate.md", "rerender-lazy-state-init.md", "rerender-memo-with-default-value.md", "rerender-memo.md", "rerender-move-effect-to-event.md", "rerender-no-inline-components.md", "rerender-simple-expression-in-memo.md", "rerender-split-combined-hooks.md", "rerender-transitions.md", "rerender-use-deferred-value.md", "rerender-use-ref-transient-values.md", "server-after-nonblocking.md", "server-auth-actions.md", "server-cache-lru.md", "server-cache-react.md", "server-dedup-props.md", "server-hoist-static-io.md", "server-parallel-fetching.md", "server-parallel-nested-fetching.md", "server-serialization.md", "omni_import_list_support_pack.py", "omni_import_print_origin.py" ], "files_count": 84, "references_count": 4, "agents_count": 1, "assets_count": 1 }, "content": { "body_length": 14895, "content_length": 15850, "body_lines": 272, "word_count": 2034, "has_code_blocks": true, "typed_code_blocks_count": 2, "has_examples_section": true, "example_count": 4, "has_workflow_section": true, "has_when_to_use_section": true, "has_best_practices_section": true, "has_troubleshooting_section": true, "problem_count": 3, "troubleshooting_pairs_count": 3, "has_additional_resources_section": true, "has_related_skills_section": true, "related_skills_count": 4, "has_local_support_links": true, "local_support_links_count": 6, "has_local_script_example": true, "local_script_example_count": 0, "semantic_signals": { "workflow_steps_count": 11, "workflow_section_length": 1355, "when_to_use_section_length": 670, "best_practices_items_count": 7, "best_practices_section_length": 1156, "troubleshooting_items_count": 0, "troubleshooting_section_length": 1342, "resources_items_count": 75, "resources_section_length": 6530, "examples_section_length": 1243, "examples_code_blocks_count": 8, "related_skills_section_length": 574, "decision_assets_count": 45, "table_count": 24, "linked_resource_families_count": 5, "linked_resource_families": [ "agents", "assets", "examples", "references", "scripts" ], "support_links_count": 8, "support_files_count": 10, "references_files_count": 4, "scripts_files_count": 2, "examples_files_count": 2, "agents_files_count": 1, "assets_files_count": 1, "tools_count": 5, "tags_count": 8, "body_density": 7.48 } }, "maturity": { "skill_level": 3, "skill_level_label": "resources", "has_scripts": true, "has_extra_files": true }, "best_practices": { "score": 100, "tier": "excellent", "signals": { "workflow_steps_count": 11, "workflow_section_length": 1355, "when_to_use_section_length": 670, "best_practices_items_count": 7, "best_practices_section_length": 1156, "troubleshooting_items_count": 0, "troubleshooting_section_length": 1342, "resources_items_count": 75, "resources_section_length": 6530, "examples_section_length": 1243, "examples_code_blocks_count": 8, "related_skills_section_length": 574, "decision_assets_count": 45, "table_count": 24, "linked_resource_families_count": 5, "linked_resource_families": [ "agents", "assets", "examples", "references", "scripts" ], "support_links_count": 8, "support_files_count": 10, "references_files_count": 4, "scripts_files_count": 2, "examples_files_count": 2, "agents_files_count": 1, "assets_files_count": 1, "tools_count": 5, "tags_count": 8, "body_density": 7.48 } }, "quality": { "score": 99, "tier": "platinum", "breakdown": { "body": 16, "description": 10, "metadata": 12, "recency": 8, "resources": 10, "best_practices": 10, "semantic_depth": 16, "operational_depth": 10, "support_pack": 10 } }, "security": { "score": 95, "tier": "review", "status": "passed", "findings_count": 0, "findings": [], "signals": { "scanned_files": 84, "script_files": 2, "binary_like_files": 0 }, "scanners": { "static": { "enabled": true, "status": "completed" }, "clamav": { "enabled": true, "status": "completed", "provider": "clamav", "detections": [], "infected_files": 0 }, "virustotal": { "enabled": true, "status": "completed", "provider": "virustotal", "lookups": 2, "positives": 0, "results": [ { "path": "skills/vercel-react-best-practices/scripts/omni_import_list_support_pack.py", "sha256": "3203bfbdabd001c2f51d371f5b3cb8b2948bb5c63b28a04f28a2ec11c4b03e34", "status": "not_found" }, { "path": "skills/vercel-react-best-practices/scripts/omni_import_print_origin.py", "sha256": "ef527a3a7375c3e95d3dd7340fa71de44024bac32b4e1773707c77cc69153bdd", "status": "not_found" } ], "details": "Hash lookups only. Unknown files are not uploaded during validation." } } }, "validation": { "errors": [], "warnings": [], "status": "passed" } }