Skills frontend-dev-guidelines

📦

frontend-dev-guidelines

Name: frontend-dev-guidelines
Author: sickn33

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

Build Production React Frontends

Frontend teams often produce inconsistent architecture, loading behavior, and performance practices. This skill applies opinionated React and TypeScript standards with checklists and examples.

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/sickn33-frontend-dev-guidelines.md and its manifest at https://skillstore.io/api/skills/sickn33-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/sickn33-frontend-dev-guidelines.md Signed manifest GET /api/skills/sickn33-frontend-dev-guidelines/manifest Signed lockfile GET /api/skills/sickn33-frontend-dev-guidelines/lockfile

Test it

Using "frontend-dev-guidelines". Review a React page that fetches user data inside the component and returns an early spinner.

Expected outcome:

The review flags inline data access, the early loading return, missing feature boundaries, and untyped responses.
It recommends a typed feature API, Suspense query, feature-level boundary, and focused component responsibilities.

Using "frontend-dev-guidelines". Plan a new reporting feature with charts, routes, and export actions.

Expected outcome:

The plan defines feature folders, typed API contracts, lazy chart loading, route metadata, query keys, mutation feedback, and performance checks.

Using "frontend-dev-guidelines". Assess a proposed dashboard before implementation.

Expected outcome:

An FFCI assessment rates architectural fit, complexity, performance risk, reusability, and maintenance cost, then recommends proceeding, splitting, or redesigning.

Security Audit

Safe

v5 • 7/23/2026 Open versioned report

All 173 static findings are false positives caused by Markdown syntax and illustrative React or TypeScript code. The skill contains no executable scripts, shell commands, arbitrary file access, exfiltration endpoints, or prompt-injection instructions. No semantic security finding was identified.

Files scanned

5,461

Lines analyzed

Review items

False positives ignored

Risk Factors

⚡ Contains scripts (20)

⚙️ External commands (50)

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:43-45 SKILL.md:45-47 SKILL.md:47-64 SKILL.md:64-65 SKILL.md:65-77 SKILL.md:77-78 SKILL.md:78-83 SKILL.md:83-85 SKILL.md:85-107 SKILL.md:107-109 SKILL.md:109-110 SKILL.md:110-112 SKILL.md:112-115 SKILL.md:115-121 SKILL.md:121-122 SKILL.md:122 SKILL.md:123-124 SKILL.md:124-127 SKILL.md:127-135 SKILL.md:135 SKILL.md:136 SKILL.md:137 SKILL.md:138 SKILL.md:150-151 SKILL.md:151-157 SKILL.md:157-159 SKILL.md:159-161 SKILL.md:161-169 SKILL.md:169-175 SKILL.md:175-184 SKILL.md:184-194 SKILL.md:194-199 SKILL.md:199-207 SKILL.md:207 SKILL.md:208 SKILL.md:212-215 SKILL.md:215-230

📁 Filesystem access (29)

🌐 Network access (5)

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

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/sickn33-frontend-dev-guidelines/audits/5?utm_source=security_passport&utm_medium=share&utm_campaign=versioned_report

Markdown badge

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

HTML badge

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

Embed card

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

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

BibTeX citation

@techreport{sickn33-sickn33-frontend-dev-guidelines-2026,
  author = {sickn33},
  title = {frontend-dev-guidelines security audit report (audit version 5)},
  institution = {Skillstore},
  year = {2026},
  number = {5},
  url = {https://skillstore.io/skills/sickn33-frontend-dev-guidelines/audits/5},
  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 5)"
version: "unspecified"
type: report
authors:
  - name: "sickn33"
date-released: "2026-07-23"
url: "https://skillstore.io/skills/sickn33-frontend-dev-guidelines/audits/5"
identifiers:
  - type: other
    value: "skillstore:sickn33-frontend-dev-guidelines:audit:5"
    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 12

Updated

2026-08-21

0Chan-smc

0chan-smc-frontend-dev-guidelines

Skillstore Score 78

Evidence Confidence High

Skillstore usage 193

Updated

2026-08-21

BOM-98

bom-98-frontend-dev-guidelines

Skillstore Score 78

Evidence Confidence High

Skillstore usage 11

Updated

2026-08-21

sickn33 Current

sickn33-frontend-dev-guidelines

Skillstore Score 78

Evidence Confidence High

Skillstore usage 9

Updated

2026-08-21

DojoCodingLabs

dojocodinglabs-frontend-dev-guidelines

Skillstore Score 78

Evidence Confidence High

Skillstore usage 9

Updated

2026-08-21

Dimon94

dimon94-frontend-dev-guidelines

Skillstore Score 78

Evidence Confidence High

Skillstore usage 8

Updated

2026-08-21

diet103

diet103-frontend-dev-guidelines

Skillstore Score 78

Evidence Confidence High

Skillstore usage 8

Updated

2026-08-21

Skillstore Score

Why this score Evidence Confidence: High

Architecture

Maintainability

Content

Community

Spec Compliance

What You Can Build

Create a React Feature

Create a React feature with consistent folders, typed APIs, Suspense boundaries, routes, and MUI styling.

Standardize Code Reviews

Review pull requests against a shared checklist for architecture, typing, loading states, styling, and performance.

Modernize Legacy Screens

Refactor legacy loading, data fetching, and component organization toward a Suspense-first, feature-based design.

Try These Prompts

Create a Typed Component

Create a typed React component for [purpose]. Follow the component structure, loading, styling, and feedback rules in these guidelines.

Add a Feature Module

Add a feature named [name] using feature-based folders, a typed API layer, Suspense queries, lazy loading, and public exports.

Review Frontend Code

Review [files] against the frontend guidelines. List architecture, TypeScript, loading, styling, and performance violations, then propose prioritized fixes.

Refactor a Complex Workflow

Refactor [workflow] for TanStack Router, Suspense-first data fetching, cache-aware mutations, MUI v7, and strict TypeScript. Preserve behavior and identify migration risks.

Best Practices

Share the target repository structure, framework versions, and existing helper APIs before requesting implementation.
Ask for focused changes and require tests, type checks, and build validation in the target project.
Treat the rules as project defaults and document any justified exceptions during review.

Avoid

Applying MUI, TanStack, or Suspense conventions to projects that use different frameworks without adaptation.
Requesting broad rewrites without providing current architecture, dependencies, or acceptance criteria.
Accepting generated examples without checking accessibility, browser behavior, tests, and project-specific contracts.