frontend-dev-guidelines
Build Next.js Frontends With Modern Patterns
Modern Next.js projects need consistent patterns for components, routing, data fetching, and styling. This skill gives Claude, Codex, and Claude Code practical frontend guidance for React 19 and Next.js 15.
Install with my Agent
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/0chan-smc-frontend-dev-guidelines.md and its manifest at https://skillstore.io/api/skills/0chan-smc-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.
Agent-readable resources
Use these links when an AI agent, crawler, or script needs clean context instead of reading the full page.
Test it
Using "frontend-dev-guidelines". Create a product list route with loading and error states.
Expected outcome:
The skill would recommend an App Router page, a loading file, an error boundary, feature components, and Server Component data fetching.
Using "frontend-dev-guidelines". Review this interactive form component plan.
Expected outcome:
The skill would check Client Component requirements, typed props, validation, Server Actions, Shadcn/ui usage, and Tailwind class organization.
Using "frontend-dev-guidelines". Improve performance for a dashboard page.
Expected outcome:
The skill would suggest Server Components, Suspense boundaries, optimized images, font handling, and careful use of client hooks.
Security Audit
SafeAll static findings are false positives caused by Markdown formatting, placeholder example code, or JSX snippets. No prompt injection, malicious intent, credential access, command execution, or real network behavior was found in SKILL.md.
Risk Factors
⚙️ External commands (81)
🌐 Network access (2)
Share & cite this report
Share the versioned assessment report, neutral badge, embed card, and citations. Skillstore reports evidence without deciding whether this Skill is safe.
Copy report link
https://skillstore.io/skills/0chan-smc-frontend-dev-guidelines/audits/8?utm_source=security_passport&utm_medium=share&utm_campaign=versioned_reportMarkdown badge
[](https://skillstore.io/skills/0chan-smc-frontend-dev-guidelines?utm_source=security_passport_badge)HTML badge
<a href="https://skillstore.io/skills/0chan-smc-frontend-dev-guidelines?utm_source=security_passport_badge"><img src="https://skillstore.io/badges/skills/0chan-smc-frontend-dev-guidelines/security.svg" alt="Skillstore security assessment" loading="lazy"></a>Embed card
<iframe src="https://skillstore.io/embed/skills/0chan-smc-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>Academic citations (APA · BibTeX · CFF)
APA citation
0Chan-smc. (2026). frontend-dev-guidelines security audit report (audit version 8) [Author version unspecified]. Skillstore. https://skillstore.io/skills/0chan-smc-frontend-dev-guidelines/audits/8BibTeX citation
@techreport{0chan-smc-0chan-smc-frontend-dev-guidelines-2026,
author = {0Chan-smc},
title = {frontend-dev-guidelines security audit report (audit version 8)},
institution = {Skillstore},
year = {2026},
number = {8},
url = {https://skillstore.io/skills/0chan-smc-frontend-dev-guidelines/audits/8},
note = {Author version unspecified}
}CITATION.cff
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 8)"
version: "unspecified"
type: report
authors:
- name: "0Chan-smc"
date-released: "2026-07-06"
url: "https://skillstore.io/skills/0chan-smc-frontend-dev-guidelines/audits/8"
identifiers:
- type: other
value: "skillstore:0chan-smc-frontend-dev-guidelines:audit:8"
description: "Skillstore immutable audit report identifier"
Compare variants
7 installable variantsEach author remains a separate installable skill. The recommended variant is ranked by Skillstore evidence.
Why this variant is first
briandai22-frontend-dev-guidelines
2026-08-21
0chan-smc-frontend-dev-guidelines
2026-08-21
bom-98-frontend-dev-guidelines
2026-08-21
sickn33-frontend-dev-guidelines
2026-08-21
dojocodinglabs-frontend-dev-guidelines
2026-08-21
dimon94-frontend-dev-guidelines
2026-08-21
diet103-frontend-dev-guidelines
2026-08-21
Skillstore Score
Why this score Evidence Confidence: HighWhat You Can Build
Create Feature Pages
Plan a new App Router page with components, loading UI, error handling, and data fetching patterns.
Standardize Component Work
Apply consistent Server Component, Client Component, TypeScript, Shadcn/ui, and Tailwind CSS conventions.
Review Frontend Architecture
Check whether a Next.js feature follows modern file organization, performance, and typing practices.
Try These Prompts
Use the frontend-dev-guidelines skill to plan a Next.js 15 page for a posts list with loading and error states.
Use the frontend-dev-guidelines skill to decide which parts of this feature should be Server Components or Client Components.
Use the frontend-dev-guidelines skill to design a form flow with validation, Server Actions, and Shadcn/ui form components.
Use the frontend-dev-guidelines skill to review my Next.js feature plan for routing, file organization, performance, and TypeScript issues.
Best Practices
- Start with Server Components, then add Client Components only for interaction, hooks, or browser APIs.
- Keep route files, feature components, Server Actions, and shared UI in clear App Router locations.
- Use TypeScript, Shadcn/ui, Tailwind CSS, and the cn utility consistently across frontend code.
Avoid
- Adding use client to every component without checking whether browser APIs or hooks are needed.
- Mixing route logic, shared UI, feature code, and data mutations in one unstructured folder.
- Copying placeholder API URLs or example data models into production without adapting them.