Build Modern React and Next.js Frontends
Modern frontend projects need consistent architecture, data fetching, state, styling, and loading patterns. This skill provides practical React, Next.js, TypeScript, MUI, shadcn/ui, Supabase, and TanStack Query guidance.
Copy this request to your Agent. It includes the canonical Skill page and manifest.
Review the Skillstore skill "frontend-dev-guidelines" from https://skillstore.io/skills/bom-98-frontend-dev-guidelines.md and its manifest at https://skillstore.io/api/skills/bom-98-frontend-dev-guidelines/manifest. Verify the artifact. You may proceed after verification, subject to the environment's own policy.Your Agent should still show its plan and request any confirmation required by the security policy.
Use these links when an AI agent, crawler, or script needs clean context instead of reading the full page.
Using "frontend-dev-guidelines". Create an account settings page with profile editing and server data.
Expected outcome:
Using "frontend-dev-guidelines". Review a slow dashboard with several large panels.
Expected outcome:
Using "frontend-dev-guidelines". Organize a new billing feature in an existing React project.
Expected outcome:
All 151 static findings are false positives in instructional Markdown and TypeScript examples. Dynamic imports use fixed paths, backticks are documentation syntax, and relative imports do not access the filesystem. Network examples use application clients or a same-origin endpoint, and no prompt injection or malicious intent was found.
Share the versioned assessment report, neutral badge, embed card, and citations. Skillstore reports evidence without deciding whether this Skill is safe.
https://skillstore.io/skills/bom-98-frontend-dev-guidelines/audits/9?utm_source=security_passport&utm_medium=share&utm_campaign=versioned_report[](https://skillstore.io/skills/bom-98-frontend-dev-guidelines?utm_source=security_passport_badge)<a href="https://skillstore.io/skills/bom-98-frontend-dev-guidelines?utm_source=security_passport_badge"><img src="https://skillstore.io/badges/skills/bom-98-frontend-dev-guidelines/security.svg" alt="Skillstore security assessment" loading="lazy"></a><iframe src="https://skillstore.io/embed/skills/bom-98-frontend-dev-guidelines.html" title="Skillstore Security Assessment" sandbox="allow-popups allow-popups-to-escape-sandbox" loading="lazy" referrerpolicy="no-referrer" width="420" height="180"></iframe>BOM-98. (2026). frontend-dev-guidelines security audit report (audit version 9) [Author version unspecified]. Skillstore. https://skillstore.io/skills/bom-98-frontend-dev-guidelines/audits/9@techreport{bom-98-bom-98-frontend-dev-guidelines-2026,
author = {BOM-98},
title = {frontend-dev-guidelines security audit report (audit version 9)},
institution = {Skillstore},
year = {2026},
number = {9},
url = {https://skillstore.io/skills/bom-98-frontend-dev-guidelines/audits/9},
note = {Author version unspecified}
}cff-version: 1.2.0
message: "If you use this Skill, cite its author and this versioned security audit report."
title: "frontend-dev-guidelines security audit report (audit version 9)"
version: "unspecified"
type: report
authors:
- name: "BOM-98"
date-released: "2026-07-23"
url: "https://skillstore.io/skills/bom-98-frontend-dev-guidelines/audits/9"
identifiers:
- type: other
value: "skillstore:bom-98-frontend-dev-guidelines:audit:9"
description: "Skillstore immutable audit report identifier"
Each author remains a separate installable skill. The recommended variant is ranked by Skillstore evidence.
Why this variant is first
briandai22-frontend-dev-guidelines
2026-09-09
0chan-smc-frontend-dev-guidelines
2026-09-09
bom-98-frontend-dev-guidelines
2026-09-09
sickn33-frontend-dev-guidelines
2026-09-09
dojocodinglabs-frontend-dev-guidelines
2026-09-09
dimon94-frontend-dev-guidelines
2026-09-09
diet103-frontend-dev-guidelines
2026-09-09
Plan a typed page with data loading, validation, responsive UI, and clear error states.
Define consistent feature folders, imports, components, query keys, and styling conventions.
Identify unnecessary client code, broad subscriptions, missing cleanup, and useful lazy-loading boundaries.
Create a React component for [feature]. Use TypeScript, accessible controls, responsive styling, and explicit loading and empty states.
Build a [form name] form with React Hook Form and Zod. Include validation messages, submission feedback, and typed values.
Implement data loading and mutations for [entity]. Use the project API client, stable query keys, cache invalidation, and recoverable errors.
Review [feature paths] for component boundaries, routing, type safety, accessibility, loading behavior, caching, and performance. Apply focused fixes and explain tradeoffs.
Author
BOM-98License
MIT
Skillstore revision
r2
Version notice
The author did not declare a version.
Ref
a39a91716eadede5f4cdefd78178fed4e837a128
Maintenance freshness
7/24/2026
Usage
9 downloads · 670 views
Create Better Claude Skills
Skill authors need a repeatable process for turning workflows into useful AI skills. This skill provides clear steps for examples, resource planning, metadata, packaging, and iteration.
Organize Type-Safe API Layers
Scattered endpoint definitions create duplicated URLs, inconsistent authentication, and weak type contracts. This skill applies a five-file TypeScript pattern with centralized endpoints and Supabase-aware clients.
Build Secure Supabase Authentication
Authentication mistakes can expose accounts and tenant data. This skill provides Next.js 15 and Supabase patterns for sessions, route protection, roles, and family isolation.
Build Frontend Apps Faster
by davila7
Frontend work often needs consistent React patterns, performance checks, and project scaffolding. This skill gives Claude and compatible agents practical guidance and local helper scripts for modern web application development.
Implement React View Transitions
by vercel-labs
React view transitions are easy to misplace, causing silent or noisy animations. This skill guides route, Suspense, list, and shared element animation choices.
Optimize React and Next.js Code
by vercel-labs
React and Next.js applications often lose performance through waterfalls, large bundles, and avoidable re-renders. This skill gives Claude, Codex, and Claude Code concrete review rules for faster frontend work.
Build Fullstack Apps With Senior Guidance
by alirezarezvani
Fullstack projects often need consistent setup, architecture choices, and quality checks. This skill provides scripts and references for React, Next.js, Node.js, GraphQL, and PostgreSQL work.
Build Type-Safe React Components
by softaworks
React TypeScript work often needs precise event, hook, and route types. This skill provides focused patterns for typed components, React 19 APIs, and routing.
Improve Vue Options API Code
by vuejs-ai
Vue Options API projects often lose type safety and correct this binding. This skill gives focused rules for safer Vue 3 components.