frontend-dev-guidelines
Build Modern React Frontends
Frontend teams need consistent patterns for React, TypeScript, routing, data fetching, and loading states. This skill provides practical guidelines and examples for building maintainable frontend features.
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/dimon94-frontend-dev-guidelines.md and its manifest at https://skillstore.io/api/skills/dimon94-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 user details page with data loading and edit feedback.
Expected outcome:
A feature plan with route placement, typed API service methods, a Suspense wrapped component, mutation flow, snackbar feedback, and cache invalidation steps.
Using "frontend-dev-guidelines". Review a dashboard component that fetches several datasets.
Expected outcome:
A concise review covering query placement, parallel data loading, memoization needs, layout stability, MUI Grid syntax, and cleanup recommendations.
Using "frontend-dev-guidelines". Organize a new posts feature in an existing React app.
Expected outcome:
A folder outline with API, components, hooks, helpers, types, public exports, route files, and import alias guidance.
Security Audit
SafeThe static findings were reviewed against the skill files and are false positives from Markdown documentation and fixed frontend examples. The dynamic imports are React code-splitting examples, path traversal detections are import paths or documentation links, and network references are local application API client guidance. No prompt injection, malicious intent, data exfiltration, or executable installer behavior was found.
Risk Factors
⚡ Contains scripts (22)
⚙️ External commands (68)
📁 Filesystem access (30)
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/dimon94-frontend-dev-guidelines/audits/8?utm_source=security_passport&utm_medium=share&utm_campaign=versioned_reportMarkdown badge
[](https://skillstore.io/skills/dimon94-frontend-dev-guidelines?utm_source=security_passport_badge)HTML badge
<a href="https://skillstore.io/skills/dimon94-frontend-dev-guidelines?utm_source=security_passport_badge"><img src="https://skillstore.io/badges/skills/dimon94-frontend-dev-guidelines/security.svg" alt="Skillstore security assessment" loading="lazy"></a>Embed card
<iframe src="https://skillstore.io/embed/skills/dimon94-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
Dimon94. (2026). frontend-dev-guidelines security audit report (audit version 8) [Author version unspecified]. Skillstore. https://skillstore.io/skills/dimon94-frontend-dev-guidelines/audits/8BibTeX citation
@techreport{dimon94-dimon94-frontend-dev-guidelines-2026,
author = {Dimon94},
title = {frontend-dev-guidelines security audit report (audit version 8)},
institution = {Skillstore},
year = {2026},
number = {8},
url = {https://skillstore.io/skills/dimon94-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: "Dimon94"
date-released: "2026-07-06"
url: "https://skillstore.io/skills/dimon94-frontend-dev-guidelines/audits/8"
identifiers:
- type: other
value: "skillstore:dimon94-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-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
Skillstore Score
Why this score Evidence Confidence: HighWhat You Can Build
Create a Feature Module
Plan a new feature folder with API services, components, hooks, helpers, types, and route files.
Standardize Team Patterns
Review component, routing, styling, and data fetching choices against a shared frontend convention.
Modernize Legacy Screens
Refactor older loading, query, and layout patterns toward Suspense, typed services, and stable layouts.
Try These Prompts
Create a React TypeScript component for [purpose]. Follow the frontend guidelines for props, hooks, exports, MUI styling, and Suspense boundaries when needed.
Add TanStack Query data fetching for [entity]. Use useSuspenseQuery, a feature API service, typed return values, cache keys, and the project loading pattern.
Design a complete feature for [workflow]. Include folder structure, route file, lazy loading, API service, types, components, and user notifications.
Review this frontend code for guideline compliance. Focus on file organization, Suspense usage, cache strategy, MUI v7 syntax, performance, and TypeScript standards.
Best Practices
- Use Suspense boundaries and useSuspenseQuery for new data driven components.
- Keep domain code inside feature folders and export only the public feature API.
- Use typed MUI sx styles, MUI v7 Grid syntax, and stable loading layouts.
Avoid
- Returning early with standalone loading spinners that shift the layout.
- Creating deep relative imports when project aliases can express intent clearly.
- Mixing feature-specific components into shared component folders without reuse needs.
Frequently Asked Questions
What frontend stack does this skill target?
Can it create complete feature structures?
Does it run code or install packages?
How does it handle loading states?
Is it useful for legacy code?
Will examples match every repository?
Developer Details
Author
Dimon94License
MIT
Skillstore revision
r1
Version notice
The author did not declare a version.
Ref
72d5025b022c77f7a51bdf5c1637c689c80e89d1
Maintenance freshness
7/18/2026
Usage
6 downloads · 684 views