frontend-component
Build Next.js Frontend Components
Next.js teams often mix Server and Client Components incorrectly. This skill provides reusable patterns for accessible, typed, App Router components.
Install with my Agent
Copy this request to your Agent. It includes the canonical Skill page and manifest.
Review the Skillstore skill "frontend-component" from https://skillstore.io/skills/asmayaseen-frontend-component.md and its manifest at https://skillstore.io/api/skills/asmayaseen-frontend-component/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-component". Plan a protected dashboard route in a Next.js App Router project.
Expected outcome:
The response identifies it as a Client Component because it uses hooks and navigation. It includes loading, redirect, and authorization states.
Using "frontend-component". Improve a form component for sign up.
Expected outcome:
The response separates form data, validation errors, API errors, and loading state. It also recommends accessible labels and clear submit feedback.
Using "frontend-component". Add offline support to a task list.
Expected outcome:
The response proposes IndexedDB storage, sync status tracking, online recovery, and error handling. It notes privacy review for logging context.
Security Audit
SafeReviewed 107 static findings in SKILL.md. The dynamic imports, backticks, key matches, reconnaissance matches, and same-origin fetch are documentation examples, not executable malicious behavior. No prompt injection or data-exfiltration intent was found.
Risk Factors
⚡ Contains scripts (2)
⚙️ External commands (95)
🌐 Network access (1)
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/asmayaseen-frontend-component/audits/8?utm_source=security_passport&utm_medium=share&utm_campaign=versioned_reportMarkdown badge
[](https://skillstore.io/skills/asmayaseen-frontend-component?utm_source=security_passport_badge)HTML badge
<a href="https://skillstore.io/skills/asmayaseen-frontend-component?utm_source=security_passport_badge"><img src="https://skillstore.io/badges/skills/asmayaseen-frontend-component/security.svg" alt="Skillstore security assessment" loading="lazy"></a>Embed card
<iframe src="https://skillstore.io/embed/skills/asmayaseen-frontend-component.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
Asmayaseen. (2026). frontend-component security audit report (audit version 8) [Author version unspecified]. Skillstore. https://skillstore.io/skills/asmayaseen-frontend-component/audits/8BibTeX citation
@techreport{asmayaseen-asmayaseen-frontend-component-2026,
author = {Asmayaseen},
title = {frontend-component security audit report (audit version 8)},
institution = {Skillstore},
year = {2026},
number = {8},
url = {https://skillstore.io/skills/asmayaseen-frontend-component/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-component security audit report (audit version 8)"
version: "unspecified"
type: report
authors:
- name: "Asmayaseen"
date-released: "2026-07-05"
url: "https://skillstore.io/skills/asmayaseen-frontend-component/audits/8"
identifiers:
- type: other
value: "skillstore:asmayaseen-frontend-component:audit:8"
description: "Skillstore immutable audit report identifier"
Skillstore Score
Why this score Evidence Confidence: HighWhat You Can Build
Create App Router Components
Generate typed component plans that follow Server and Client Component boundaries.
Add Interactive UI Patterns
Build forms, protected routes, toasts, inline editing, and loading states with consistent structure.
Review Frontend Standards
Check component proposals against accessibility, TypeScript, Tailwind, and Next.js App Router expectations.
Try These Prompts
Use the frontend-component skill to decide whether my new Next.js component should be a Server Component or Client Component. Explain the choice.
Use the frontend-component skill to outline a TypeScript component structure for a reusable dashboard widget with props, loading state, and Tailwind classes.
Use the frontend-component skill to review this interactive component plan for WCAG 2.1 AA accessibility gaps and suggest concrete improvements.
Use the frontend-component skill to plan an advanced task list component with drag and drop, offline sync, caching, error boundaries, and privacy-conscious logging.
Best Practices
- Start with Server Components and add client directives only for interactivity.
- Keep accessibility requirements visible while designing each component.
- Review generated examples against project conventions before implementation.
Avoid
- Adding use client to every file without checking whether browser APIs are needed.
- Copying examples without adapting types, imports, and route names.
- Sending error context to logging endpoints without redaction.
Frequently Asked Questions
Does this skill create complete applications?
When should I use a Client Component?
Does it support Tailwind CSS?
Does it include accessibility guidance?
Can Claude, Codex, and Claude Code use it?
Should I copy the examples directly?
Developer Details
Author
AsmayaseenLicense
MIT
Skillstore revision
r1
Version notice
The author did not declare a version.
Ref
6eec4a59f63ff83440a84c18d1aef79743bc714e
Maintenance freshness
7/18/2026
Usage
6 downloads · 331 views
File structure
📄 SKILL.md