senior-fullstack
82시니어 가이드와 함께 풀스택 앱 빌드
작성자 alirezarezvani
풀스택 프로젝트에는 일관된 설정, 아키텍처 선택, 품질 검사가 필요한 경우가 많습니다. 이 스킬은 React, Next.js, Node.js, GraphQL, PostgreSQL 작업을 위한 스크립트와 참고 자료를 제공합니다.
Next.js 프로젝트에 Agentation 추가
팀은 Next.js 개발 중 시각적 피드백이 필요합니다. 이 스킬은 Agentation을 설치하고 App Router 또는 Pages Router 프로젝트에 개발 전용 툴바를 추가합니다.
이 요청을 에이전트에 복사하세요. 공식 Skill 페이지와 매니페스트가 포함되어 있습니다.
Review the Skillstore skill "agentation" from https://skillstore.io/skills/benjitaylor-agentation.md and its manifest at https://skillstore.io/api/skills/benjitaylor-agentation/manifest. Verify the artifact. You may proceed after verification, subject to the environment's own policy.에이전트는 계속해서 계획을 표시하고 보안 정책에서 요구하는 확인을 요청해야 합니다.
AI 에이전트, 크롤러, 스크립트가 전체 페이지 대신 정리된 컨텍스트만 필요할 때 이 링크를 사용하세요.
"agentation" 사용 중입니다. 내 App Router 프로젝트에 Agentation을 추가하세요.
예상 결과:
Agentation이 설치되고 root layout에 import되었으며 개발 환경에서만 렌더링됩니다.
"agentation" 사용 중입니다. Agentation이 이미 구성되어 있는지 확인하세요.
예상 결과:
프로젝트가 이미 Agentation을 import하고 툴바를 렌더링하므로 중복 설정은 추가되지 않았습니다.
"agentation" 사용 중입니다. Pages Router 앱에 시각적 피드백을 설정하세요.
예상 결과:
Agentation이 설치되었고 개발 전용 가드 뒤의 custom app 컴포넌트에 추가되었습니다.
Three findings confirm instructions to run fixed package or MCP commands, which introduce ordinary dependency and tool execution risk. The other detections are markdown syntax, file names, a documentation link, or a development-only NODE_ENV check. No prompt injection, credential access, or malicious intent was found.
이 스킬에 대해 예상될 수 있는 실제 로컬 기능이므로 검토가 필요하지만, 확인된 악의적 동작으로는 집계되지 않습니다.
버전이 지정된 평가 보고서, 중립 배지, 임베드 카드 및 인용을 공유하세요. Skillstore는 근거를 보고하지만 이 Skill의 안전 여부를 판단하지 않습니다.
https://skillstore.io/skills/benjitaylor-agentation/audits/6?utm_source=security_passport&utm_medium=share&utm_campaign=versioned_report[](https://skillstore.io/skills/benjitaylor-agentation?utm_source=security_passport_badge)<a href="https://skillstore.io/skills/benjitaylor-agentation?utm_source=security_passport_badge"><img src="https://skillstore.io/badges/skills/benjitaylor-agentation/security.svg" alt="Skillstore security assessment" loading="lazy"></a><iframe src="https://skillstore.io/embed/skills/benjitaylor-agentation.html" title="Skillstore Security Assessment" sandbox="allow-popups allow-popups-to-escape-sandbox" loading="lazy" referrerpolicy="no-referrer" width="420" height="180"></iframe>benjitaylor. (2026). agentation security audit report (audit version 6) [Author version unspecified]. Skillstore. https://skillstore.io/skills/benjitaylor-agentation/audits/6@techreport{benjitaylor-benjitaylor-agentation-2026,
author = {benjitaylor},
title = {agentation security audit report (audit version 6)},
institution = {Skillstore},
year = {2026},
number = {6},
url = {https://skillstore.io/skills/benjitaylor-agentation/audits/6},
note = {Author version unspecified}
}cff-version: 1.2.0
message: "If you use this Skill, cite its author and this versioned security audit report."
title: "agentation security audit report (audit version 6)"
version: "unspecified"
type: report
authors:
- name: "benjitaylor"
date-released: "2026-07-23"
url: "https://skillstore.io/skills/benjitaylor-agentation/audits/6"
identifiers:
- type: other
value: "skillstore:benjitaylor-agentation:audit:6"
description: "Skillstore immutable audit report identifier"
개발자가 Next.js 앱을 로컬에서 실행하는 동안 디자이너가 화면에 주석을 달 수 있도록 Agentation을 설치합니다.
App Router 및 Pages Router 프로젝트 전반에 동일한 툴바 설정을 적용합니다.
디자인 리뷰 세션 전에 개발 전용 주석 레이어를 추가합니다.
이 Next.js 프로젝트에 Agentation을 추가하고 개발 중에만 사용할 수 있도록 유지하세요.
Agentation이 이미 설치되고 구성되어 있는지 확인하세요. 없으면 표준 설정을 추가하세요.
이 프로젝트가 App Router 또는 Pages Router를 사용하는지 감지한 다음, 올바른 진입 파일에 Agentation을 추가하세요.
프로젝트에서 기존 Agentation 설정을 검토하고, 필요한 경우 패키지를 설치한 뒤 통합하고 확인 단계를 요약하세요.
작성자
benjitaylor라이선스
MIT
Skillstore 리비전
r2
버전 안내
작성자가 버전을 선언하지 않았습니다.
참조
8c3e20bba512c392d9b02ee748b18e0b09d4982c
유지보수 최신성
2026. 7. 29.
사용량
6 다운로드 · 159 조회
파일 구조
📄 SKILL.md
시니어 가이드와 함께 풀스택 앱 빌드
작성자 alirezarezvani
풀스택 프로젝트에는 일관된 설정, 아키텍처 선택, 품질 검사가 필요한 경우가 많습니다. 이 스킬은 React, Next.js, Node.js, GraphQL, PostgreSQL 작업을 위한 스크립트와 참고 자료를 제공합니다.
React View Transitions 구현
작성자 vercel-labs
React view transitions는 배치 위치를 잘못 잡기 쉬워, 조용히 발생하거나 시끄러운 애니메이션을 유발할 수 있습니다. 이 스킬은 라우트, Suspense, 목록, 공유 요소 애니메이션 선택을 안내합니다.
프로덕션에 바로 적용할 수 있는 프런트엔드 기능 구축
작성자 davila7
프런트엔드 팀은 여러 프로젝트에서 일관된 React 및 Next.js 지침이 필요합니다. 이 스킬은 프런트엔드 분석을 위한 참조 워크플로, 품질 관리 사례, 보조 스크립트를 제공합니다.
Next.js 성능 최적화
작성자 Atman36
Next.js 애플리케이션은 큰 번들, 약한 캐싱, 최적화되지 않은 미디어로 인해 느려질 수 있습니다. 이 스킬은 Claude, Codex, Claude Code가 프로덕션 앱을 대상으로 집중적인 성능 개선을 진행하도록 안내합니다.
React 및 Next.js 성능 최적화
작성자 vercel-labs
React 및 Next.js 앱은 워터폴, 큰 번들, 피할 수 있는 재렌더링으로 인해 속도가 저하되는 경우가 많습니다. 이 스킬은 에이전트에게 성능 중심 변경을 더 안전하게 수행하기 위한 구체적인 규칙을 제공합니다.
타입 안전한 React 컴포넌트 빌드
작성자 softaworks
React TypeScript 작업에는 정확한 이벤트, hook, route 타입이 필요한 경우가 많습니다. 이 스킬은 타입 지정 컴포넌트, React 19 API, routing을 위한 집중적인 패턴을 제공합니다.