Skills frontend-dev-guidelines

📦

frontend-dev-guidelines

Name: frontend-dev-guidelines
Author: DojoCodingLabs

Content revision r1 Safe ⚡ Contains scripts⚙️ External commands📁 Filesystem access🌐 Network access

Build Next.js Frontends With Shared Guidelines

Frontend teams need consistent React and Next.js patterns across pages, components, forms, and data fetching. This skill provides practical guidance for shadcn/ui, Tailwind, Supabase, routing, performance, and TypeScript.

Supports: Claude Codex Code(CC)

🥉 78 Bronze

Install with my Agent

Copy this request to your Agent. It includes the canonical Skill page and manifest.

Agent request

Review the Skillstore skill "frontend-dev-guidelines" from https://skillstore.io/skills/dojocodinglabs-frontend-dev-guidelines.md and its manifest at https://skillstore.io/api/skills/dojocodinglabs-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.

Markdown detail GET /skills/dojocodinglabs-frontend-dev-guidelines.md Signed manifest GET /api/skills/dojocodinglabs-frontend-dev-guidelines/manifest Signed lockfile GET /api/skills/dojocodinglabs-frontend-dev-guidelines/lockfile

Test it

Using "frontend-dev-guidelines". Create a profile page with server data and a loading state.

Expected outcome:

A concise implementation plan with route placement, data fetching choice, metadata needs, loading UI, and component responsibilities.

Using "frontend-dev-guidelines". Review a React form for consistency with the guidelines.

Expected outcome:

A focused checklist covering validation, controlled fields, submit handling, error display, and reusable shadcn/ui components.

Using "frontend-dev-guidelines". Improve a slow route that loads charts and tables.

Expected outcome:

Recommendations for lazy loading heavy components, placing Suspense boundaries, memoizing expensive values, and avoiding unnecessary client components.

Security Audit

Safe

v8 • 7/6/2026 Open versioned report

All 153 static findings are adjudicated as false positives. The flagged items are Markdown examples or TypeScript and React patterns such as dynamic imports, template literals, relative imports, axios examples, same-origin fetches, and UI grid text. No prompt injection, data exfiltration intent, shell execution, or unsafe filesystem behavior was found in the reviewed skill content.

Files scanned

5,535

Lines analyzed

Review items

False positives ignored

Risk Factors

⚡ Contains scripts (19)

resources/complete-examples.md:301 resources/complete-examples.md:504 resources/complete-examples.md:505 resources/complete-examples.md:506 resources/complete-examples.md:613 resources/component-patterns.md:65 resources/component-patterns.md:70 resources/component-patterns.md:86 resources/component-patterns.md:134 resources/component-patterns.md:370 resources/component-patterns.md:491 resources/loading-and-error-states.md:38 resources/performance.md:377 resources/performance.md:383 resources/routing-guide.md:56 resources/routing-guide.md:99 resources/routing-guide.md:111 resources/routing-guide.md:323 resources/routing-guide.md:354

⚙️ External commands (45)

resources/complete-examples.md:85-146 resources/complete-examples.md:192-207 resources/complete-examples.md:207-212 resources/complete-examples.md:212-215 resources/complete-examples.md:309-327 resources/data-fetching.md:227-237 resources/data-fetching.md:237-252 resources/data-fetching.md:252-262 resources/data-fetching.md:262-265 resources/data-fetching.md:406-408 resources/file-organization.md:137-145 resources/typescript-standards.md:72-81 resources/typescript-standards.md:81-83 SKILL.md:19 SKILL.md:46 SKILL.md:49 SKILL.md:50 SKILL.md:57 SKILL.md:61 SKILL.md:69-78 SKILL.md:78-82 SKILL.md:82-93 SKILL.md:93-97 SKILL.md:97-122 SKILL.md:122-126 SKILL.md:126-144 SKILL.md:144-148 SKILL.md:148-162 SKILL.md:162-166 SKILL.md:166-195 SKILL.md:195-199 SKILL.md:199-219 SKILL.md:219-225 SKILL.md:225-260 SKILL.md:260-287 SKILL.md:287-316 SKILL.md:316-324 SKILL.md:324-333 SKILL.md:333-336 SKILL.md:336-340 SKILL.md:340-345 SKILL.md:345-349 SKILL.md:349-367 SKILL.md:367-371 SKILL.md:371-385

📁 Filesystem access (28)

🌐 Network access (4)

resources/data-fetching.md:269 resources/data-fetching.md:453 resources/data-fetching.md:461 resources/performance.md:224

No confirmed security findings were detected by the latest completed static and semantic audit. This does not prove the skill has no side effects.

Audited by: codex View Audit History →

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.

Open versioned report

Copy report link

https://skillstore.io/skills/dojocodinglabs-frontend-dev-guidelines/audits/8?utm_source=security_passport&utm_medium=share&utm_campaign=versioned_report

Markdown badge

[![Skillstore security assessment](https://skillstore.io/badges/skills/dojocodinglabs-frontend-dev-guidelines/security.svg)](https://skillstore.io/skills/dojocodinglabs-frontend-dev-guidelines?utm_source=security_passport_badge)

HTML badge

<a href="https://skillstore.io/skills/dojocodinglabs-frontend-dev-guidelines?utm_source=security_passport_badge"><img src="https://skillstore.io/badges/skills/dojocodinglabs-frontend-dev-guidelines/security.svg" alt="Skillstore security assessment" loading="lazy"></a>

Embed card

<iframe src="https://skillstore.io/embed/skills/dojocodinglabs-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

DojoCodingLabs. (2026). frontend-dev-guidelines security audit report (audit version 8) [Author version unspecified]. Skillstore. https://skillstore.io/skills/dojocodinglabs-frontend-dev-guidelines/audits/8

BibTeX citation

@techreport{dojocodinglabs-dojocodinglabs-frontend-dev-guidelines-2026,
  author = {DojoCodingLabs},
  title = {frontend-dev-guidelines security audit report (audit version 8)},
  institution = {Skillstore},
  year = {2026},
  number = {8},
  url = {https://skillstore.io/skills/dojocodinglabs-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: "DojoCodingLabs"
date-released: "2026-07-06"
url: "https://skillstore.io/skills/dojocodinglabs-frontend-dev-guidelines/audits/8"
identifiers:
  - type: other
    value: "skillstore:dojocodinglabs-frontend-dev-guidelines:audit:8"
    description: "Skillstore immutable audit report identifier"

Compare variants

7 installable variants

Each author remains a separate installable skill. The recommended variant is ranked by Skillstore evidence.

Why this variant is first

Highest Skillstore Score

Author / source Skillstore Score Evidence Confidence Skillstore usage Updated

BrianDai22 Recommended

briandai22-frontend-dev-guidelines

Skillstore Score 79

Evidence Confidence High

Skillstore usage 15

Updated

2026-09-09

0Chan-smc

0chan-smc-frontend-dev-guidelines

Skillstore Score 78

Evidence Confidence High

Skillstore usage 194

Updated

2026-09-09

BOM-98

bom-98-frontend-dev-guidelines

Skillstore Score 78

Evidence Confidence High

Skillstore usage 12

Updated

2026-09-09

sickn33

sickn33-frontend-dev-guidelines

Skillstore Score 78

Evidence Confidence High

Skillstore usage 11

Updated

2026-09-09

DojoCodingLabs Current

dojocodinglabs-frontend-dev-guidelines

Skillstore Score 78

Evidence Confidence High

Skillstore usage 11

Updated

2026-09-09

Dimon94

dimon94-frontend-dev-guidelines

Skillstore Score 78

Evidence Confidence High

Skillstore usage 9

Updated

2026-09-09

diet103

diet103-frontend-dev-guidelines

Skillstore Score 78

Evidence Confidence High

Skillstore usage 9

Updated

2026-09-09

Skillstore Score

Why this score Evidence Confidence: High

Architecture

Maintainability

Content

Community

Spec Compliance

What You Can Build

Create Feature Pages

Use the guidelines to build pages with data fetching, loading states, errors, and typed component structure.

Standardize Frontend Architecture

Use the conventions to align teams on folders, components, imports, forms, and data layer patterns.

Guide AI Frontend Changes

Give Claude, Codex, or Claude Code clear implementation rules for Next.js and React tasks.

Try These Prompts

Create a Page

Use the frontend-dev-guidelines skill to create a Next.js App Router page for a dashboard list. Include loading, error, metadata, and typed props.

Build a Form

Use the frontend-dev-guidelines skill to design a React Hook Form with Zod validation and shadcn/ui fields. Explain the component boundaries.

Refactor Data Fetching

Use the frontend-dev-guidelines skill to refactor this feature from client-side fetching to safer Server Components or TanStack Query patterns.

Plan a Feature Module

Use the frontend-dev-guidelines skill to plan a complete feature module with routes, components, API helpers, loading states, errors, and TypeScript types.

Best Practices

Use Server Components by default and add client components only for hooks, browser APIs, or events.
Keep forms typed with React Hook Form, Zod schemas, and clear validation messages.
Add loading, error, and Suspense boundaries close to the data or component that needs them.

Avoid

Adding use client to every component without a browser-only need.
Creating ad hoc UI instead of using the shared shadcn/ui and Tailwind patterns.
Fetching server data into client state when a Server Component or query cache fits better.