Skills frontend-developer
📦

frontend-developer

Content revision r2 Safe

Build Modern React and Next.js Interfaces

Complex frontend work requires coordinated decisions across architecture, state, accessibility, testing, and performance. This skill provides implementation guidance for modern React and Next.js projects.

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

Test it

Using "frontend-developer". Plan an accessible account settings form with optimistic updates.

Expected outcome:

  • A component boundary plan for server data, form state, and mutation feedback.
  • Accessible labels, validation messages, focus handling, and keyboard behavior.
  • Pending, success, rollback, and error states with focused test cases.

Using "frontend-developer". Improve a slow Next.js product page.

Expected outcome:

  • A prioritized review of rendering, image loading, fonts, scripts, caching, and bundle size.
  • Recommended measurements for LCP, CLS, interaction latency, and route payloads.
  • Specific optimization steps with expected impact and regression checks.

Using "frontend-developer". Choose state management for a collaborative dashboard.

Expected outcome:

  • A separation of server cache, local interface state, form state, and real-time updates.
  • A library recommendation based on synchronization, complexity, and team constraints.
  • A conflict handling strategy with optimistic updates and recovery behavior.

Security Audit

Safe
v5 • 7/23/2026 Open versioned report

Both low-severity static alerts are false positives caused by unrelated CSS layout and browser testing text. No malicious intent or semantic security issue was found.

1
Files scanned
175
Lines analyzed
0
Review items
0
False positives ignored
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
Security Assessment

Copy report link

https://skillstore.io/skills/sickn33-frontend-developer/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-developer/security.svg)](https://skillstore.io/skills/sickn33-frontend-developer?utm_source=security_passport_badge)

HTML badge

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

Embed card

<iframe src="https://skillstore.io/embed/skills/sickn33-frontend-developer.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-developer security audit report (audit version 5) [Author version unspecified]. Skillstore. https://skillstore.io/skills/sickn33-frontend-developer/audits/5

BibTeX citation

@techreport{sickn33-sickn33-frontend-developer-2026, author = {sickn33}, title = {frontend-developer security audit report (audit version 5)}, institution = {Skillstore}, year = {2026}, number = {5}, url = {https://skillstore.io/skills/sickn33-frontend-developer/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-developer 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-developer/audits/5" identifiers: - type: other value: "skillstore:sickn33-frontend-developer:audit:5" description: "Skillstore immutable audit report identifier"

Compare variants

2 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
sickn33 Recommended Current

sickn33-frontend-developer

Skillstore Score 78
Evidence Confidence High
Skillstore usage 15
Updated

2026-08-21

zl2023github

zl2023github-frontend-developer

Skillstore Score 69
Evidence Confidence Medium
Skillstore usage 3
Updated

2026-08-21

Skillstore Score

Why this score Evidence Confidence: High
55
Architecture
85
Maintainability
87
Content
69
Community
83
Spec Compliance

What You Can Build

Build a Product Interface

Create responsive React screens with typed components, loading states, accessible interactions, and maintainable styling.

Plan a Next.js Architecture

Choose rendering, routing, data fetching, caching, and state patterns for a new application.

Improve Web Quality

Audit an existing interface for accessibility, rendering performance, Core Web Vitals, and testing gaps.

Try These Prompts

Create a React Component 
Build a React component for [feature]. Use TypeScript, responsive styling, keyboard support, loading states, and clear prop definitions.
Design an App Router Page 
Create a Next.js App Router page for [workflow]. Explain server and client boundaries, data fetching, caching, errors, and metadata.
Optimize an Existing Interface 
Review [component or page] for unnecessary rendering, bundle cost, accessibility, and Core Web Vitals. Prioritize changes and define verification steps.
Plan a Frontend Platform 
Design a frontend architecture for [product]. Cover routing, rendering, state, design systems, testing, observability, deployment constraints, and migration risks.

Best Practices

  • Provide framework versions, browser targets, target devices, data contracts, and measurable success criteria.
  • Request accessibility, loading, error, empty, and responsive states as part of the initial implementation.
  • Validate generated guidance with type checks, automated tests, browser profiling, and real device review.

Avoid

  • Do not request isolated visual components without data behavior, interaction states, or accessibility requirements.
  • Do not apply performance optimizations before measuring rendering, network, and bundle behavior.
  • Do not accept framework recommendations without checking project constraints, current documentation, and deployment compatibility.

Frequently Asked Questions

Which frameworks does this skill cover?
It focuses on React 19, Next.js 15, TypeScript, modern CSS, and common React ecosystem tools.
Can it build accessible interfaces?
Yes. It covers semantic HTML, ARIA patterns, keyboard navigation, focus management, contrast, forms, and accessibility testing.
Can it improve frontend performance?
Yes. It addresses rendering, code splitting, images, fonts, caching, bundles, Core Web Vitals, and profiling.
Does it support application state and data fetching?
Yes. It covers React Query, SWR, Zustand, Jotai, Valtio, Redux Toolkit, Context, WebSockets, and optimistic updates.
Does it replace project testing?
No. Generated work still requires type checks, automated tests, browser validation, accessibility review, and deployment verification.
What information produces the best result?
Provide the user workflow, framework version, existing code, data contracts, design constraints, browser targets, and acceptance criteria.

Developer Details

Author

sickn33

License

MIT

Skillstore revision

r2

Version notice

The author did not declare a version.

Repository

https://github.com/sickn33/antigravity-awesome-skills/tree/main/skills/frontend-developer

Ref

88a8e9a07f4c54ab105c1c41b6267c287146b07b

Maintenance freshness

7/26/2026

Usage

10 downloads · 100 views

File structure

📄 SKILL.md