develop-frontend
Build Next.js React Frontends
Teams need consistent frontend implementation across UI, data fetching, forms, tests, and release checks. This skill guides Claude, Codex, and Claude Code through a structured Next.js and React workflow.
Install with my Agent
Copy this request to your Agent. It includes the canonical Skill page and manifest.
Review the Skillstore skill "develop-frontend" from https://skillstore.io/skills/crearize-develop-frontend.md and its manifest at https://skillstore.io/api/skills/crearize-develop-frontend/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 "develop-frontend". Implement a dashboard filter panel for authenticated users.
Expected outcome:
A planned file list, reusable component choices, API hook responsibilities, tests to add, and validation commands to run.
Using "develop-frontend". Add coverage for a user list view that calls an API.
Expected outcome:
- Behavior tests for populated, empty, loading, and error states.
- MSW handlers for successful and failed API responses.
- A final checklist covering lint, tests, build, and browser verification.
Using "develop-frontend". Prepare the final frontend completion report.
Expected outcome:
A concise report with implemented pages, changed files, test results, server verification, and required checklist status.
Security Audit
SafeAll static command findings are Markdown formatting, inline paths, code fences, or normal frontend validation commands. The URL findings are localhost examples for local testing. No prompt injection, obfuscation, exfiltration, or malicious intent was found.
Risk Factors
⚙️ External commands (62)
🌐 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/crearize-develop-frontend/audits/8?utm_source=security_passport&utm_medium=share&utm_campaign=versioned_reportMarkdown badge
[](https://skillstore.io/skills/crearize-develop-frontend?utm_source=security_passport_badge)HTML badge
<a href="https://skillstore.io/skills/crearize-develop-frontend?utm_source=security_passport_badge"><img src="https://skillstore.io/badges/skills/crearize-develop-frontend/security.svg" alt="Skillstore security assessment" loading="lazy"></a>Embed card
<iframe src="https://skillstore.io/embed/skills/crearize-develop-frontend.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
Crearize. (2026). develop-frontend security audit report (audit version 8) [Author version unspecified]. Skillstore. https://skillstore.io/skills/crearize-develop-frontend/audits/8BibTeX citation
@techreport{crearize-crearize-develop-frontend-2026,
author = {Crearize},
title = {develop-frontend security audit report (audit version 8)},
institution = {Skillstore},
year = {2026},
number = {8},
url = {https://skillstore.io/skills/crearize-develop-frontend/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: "develop-frontend security audit report (audit version 8)"
version: "unspecified"
type: report
authors:
- name: "Crearize"
date-released: "2026-07-05"
url: "https://skillstore.io/skills/crearize-develop-frontend/audits/8"
identifiers:
- type: other
value: "skillstore:crearize-develop-frontend:audit:8"
description: "Skillstore immutable audit report identifier"
Skillstore Score
Why this score Evidence Confidence: HighWhat You Can Build
Implement Product Features
Build a new authenticated page with reusable components, API hooks, tests, and validation steps.
Standardize Frontend Delivery
Apply a repeatable workflow for planning, file placement, component boundaries, and completion reporting.
Verify API-Driven Interfaces
Mock API responses, test loading and error states, and confirm browser behavior before release.
Try These Prompts
Use the develop-frontend skill to plan the UI for [feature]. Review the relevant documents, identify reusable shadcn/ui components, and list the files to create.
Use the develop-frontend skill to implement [view name]. Create the page, container, presentational components, and API hook with loading and error states.
Use the develop-frontend skill to add tests for [component or view]. Include user behavior tests, MSW API mocks, and coverage for error and loading states.
Use the develop-frontend skill to finish [feature]. Run lint, tests, build, local server verification, responsive checks, and prepare the completion report.
Best Practices
- Confirm branch state, issue number, and project documentation before editing code.
- Prefer existing shadcn/ui components and keep presentational logic separate from container logic.
- Run lint, tests, build, and browser verification before reporting completion.
Avoid
- Editing shared shadcn/ui source components directly instead of wrapping or extending them.
- Skipping loading, error, and empty states for API-backed views.
- Leaving unused code, commented code, any types, or missing tests in the final change.