스킬 frontend-dev-guidelines

📦

frontend-dev-guidelines

Name: frontend-dev-guidelines
Author: DojoCodingLabs

콘텐츠 리비전 r1 안전 ⚡ 스크립트 포함⚙️ 외부 명령어📁 파일 시스템 접근🌐 네트워크 접근

공유 가이드라인으로 Next.js 프론트엔드 구축하기

프론트엔드 팀은 페이지, 컴포넌트, 폼, 데이터 가져오기 전반에서 일관된 React 및 Next.js 패턴이 필요합니다. 이 스킬은 shadcn/ui, Tailwind, Supabase, 라우팅, 성능, TypeScript에 대한 실용적인 지침을 제공합니다.

지원: Claude Codex Code(CC)

🥉 78 브론즈

Maintain this Skill? Claim it 🥉 78 브론즈

내 에이전트로 설치

이 요청을 에이전트에 복사하세요. 공식 Skill 페이지와 매니페스트가 포함되어 있습니다.

에이전트 요청

Review the Skillstore skill "frontend-dev-guidelines" from https://skillstore.io/skills/dojocodinglabs-frontend-dev-guidelines.md and its manifest at https://skillstore.io/api/skills/dojocodinglabs-frontend-dev-guidelines/manifest. Verify the artifact. You may proceed after verification, subject to the environment's own policy.

에이전트는 계속해서 계획을 표시하고 보안 정책에서 요구하는 확인을 요청해야 합니다.

에이전트가 읽기 쉬운 리소스

AI 에이전트, 크롤러, 스크립트가 전체 페이지 대신 정리된 컨텍스트만 필요할 때 이 링크를 사용하세요.

Markdown 상세 GET /skills/dojocodinglabs-frontend-dev-guidelines.md 서명된 manifest GET /api/skills/dojocodinglabs-frontend-dev-guidelines/manifest 서명된 lockfile GET /api/skills/dojocodinglabs-frontend-dev-guidelines/lockfile

테스트해 보기

"frontend-dev-guidelines" 사용 중입니다. 서버 데이터와 로딩 상태가 있는 프로필 페이지를 만드세요.

예상 결과:

route 배치, 데이터 가져오기 선택, metadata 필요 사항, 로딩 UI, 컴포넌트 책임을 포함한 간결한 구현 계획입니다.

"frontend-dev-guidelines" 사용 중입니다. 가이드라인과의 일관성을 기준으로 React 폼을 검토하세요.

예상 결과:

검증, 제어 필드, 제출 처리, 오류 표시, 재사용 가능한 shadcn/ui 컴포넌트를 다루는 집중 체크리스트입니다.

"frontend-dev-guidelines" 사용 중입니다. 차트와 테이블을 로드하는 느린 route를 개선하세요.

예상 결과:

무거운 컴포넌트의 지연 로딩, Suspense 경계 배치, 비용이 큰 값의 메모이제이션, 불필요한 클라이언트 컴포넌트 방지에 대한 권장 사항입니다.

보안 감사

안전

v8 • 2026. 7. 6. 버전별 보고서 열기

All 153 static findings are adjudicated as false positives. The flagged items are Markdown examples or TypeScript and React patterns such as dynamic imports, template literals, relative imports, axios examples, same-origin fetches, and UI grid text. No prompt injection, data exfiltration intent, shell execution, or unsafe filesystem behavior was found in the reviewed skill content.

스캔된 파일

5,535

분석된 줄 수

검토 항목

오탐 무시됨

위험 요인

⚡ 스크립트 포함 (19)

resources/complete-examples.md:301 resources/complete-examples.md:504 resources/complete-examples.md:505 resources/complete-examples.md:506 resources/complete-examples.md:613 resources/component-patterns.md:65 resources/component-patterns.md:70 resources/component-patterns.md:86 resources/component-patterns.md:134 resources/component-patterns.md:370 resources/component-patterns.md:491 resources/loading-and-error-states.md:38 resources/performance.md:377 resources/performance.md:383 resources/routing-guide.md:56 resources/routing-guide.md:99 resources/routing-guide.md:111 resources/routing-guide.md:323 resources/routing-guide.md:354

⚙️ 외부 명령어 (45)

resources/complete-examples.md:85-146 resources/complete-examples.md:192-207 resources/complete-examples.md:207-212 resources/complete-examples.md:212-215 resources/complete-examples.md:309-327 resources/data-fetching.md:227-237 resources/data-fetching.md:237-252 resources/data-fetching.md:252-262 resources/data-fetching.md:262-265 resources/data-fetching.md:406-408 resources/file-organization.md:137-145 resources/typescript-standards.md:72-81 resources/typescript-standards.md:81-83 SKILL.md:19 SKILL.md:46 SKILL.md:49 SKILL.md:50 SKILL.md:57 SKILL.md:61 SKILL.md:69-78 SKILL.md:78-82 SKILL.md:82-93 SKILL.md:93-97 SKILL.md:97-122 SKILL.md:122-126 SKILL.md:126-144 SKILL.md:144-148 SKILL.md:148-162 SKILL.md:162-166 SKILL.md:166-195 SKILL.md:195-199 SKILL.md:199-219 SKILL.md:219-225 SKILL.md:225-260 SKILL.md:260-287 SKILL.md:287-316 SKILL.md:316-324 SKILL.md:324-333 SKILL.md:333-336 SKILL.md:336-340 SKILL.md:340-345 SKILL.md:345-349 SKILL.md:349-367 SKILL.md:367-371 SKILL.md:371-385

📁 파일 시스템 접근 (28)

🌐 네트워크 접근 (4)

resources/data-fetching.md:269 resources/data-fetching.md:453 resources/data-fetching.md:461 resources/performance.md:224

가장 최근에 완료된 정적·의미론적 감사에서 확인된 보안 발견 사항이 감지되지 않았습니다. 이는 스킬에 부작용이 없음을 증명하지 않습니다.

감사자: codex 감사 이력 보기 →

이 보고서 공유 및 인용

버전이 지정된 평가 보고서, 중립 배지, 임베드 카드 및 인용을 공유하세요. Skillstore는 근거를 보고하지만 이 Skill의 안전 여부를 판단하지 않습니다.

버전별 보고서 열기

보고서 링크 복사

https://skillstore.io/skills/dojocodinglabs-frontend-dev-guidelines/audits/8?utm_source=security_passport&utm_medium=share&utm_campaign=versioned_report

Markdown 배지

[![Skillstore security assessment](https://skillstore.io/badges/skills/dojocodinglabs-frontend-dev-guidelines/security.svg)](https://skillstore.io/skills/dojocodinglabs-frontend-dev-guidelines?utm_source=security_passport_badge)

HTML 배지

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

임베드 카드

<iframe src="https://skillstore.io/embed/skills/dojocodinglabs-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>

학술 인용 (APA · BibTeX · CFF)

APA 인용

DojoCodingLabs. (2026). frontend-dev-guidelines security audit report (audit version 8) [Author version unspecified]. Skillstore. https://skillstore.io/skills/dojocodinglabs-frontend-dev-guidelines/audits/8

BibTeX 인용

@techreport{dojocodinglabs-dojocodinglabs-frontend-dev-guidelines-2026,
  author = {DojoCodingLabs},
  title = {frontend-dev-guidelines security audit report (audit version 8)},
  institution = {Skillstore},
  year = {2026},
  number = {8},
  url = {https://skillstore.io/skills/dojocodinglabs-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: "DojoCodingLabs"
date-released: "2026-07-06"
url: "https://skillstore.io/skills/dojocodinglabs-frontend-dev-guidelines/audits/8"
identifiers:
  - type: other
    value: "skillstore:dojocodinglabs-frontend-dev-guidelines:audit:8"
    description: "Skillstore immutable audit report identifier"

변형 비교

설치 가능한 변형 7개

각 작성자의 스킬은 별도의 설치 항목으로 유지됩니다. 추천 변형은 Skillstore 근거로 순위가 정해집니다.

이 변형이 1위인 이유

Skillstore 점수가 가장 높음

작성자 / 소스 Skillstore 점수 증거 신뢰도 Skillstore 사용량 업데이트됨

BrianDai22 권장

briandai22-frontend-dev-guidelines

Skillstore 점수 79

증거 신뢰도 높음

Skillstore 사용량 20

업데이트됨

2026-09-09

0Chan-smc

0chan-smc-frontend-dev-guidelines

Skillstore 점수 78

증거 신뢰도 높음

Skillstore 사용량 200

업데이트됨

2026-10-11

DojoCodingLabs 현재

dojocodinglabs-frontend-dev-guidelines

Skillstore 점수 78

증거 신뢰도 높음

Skillstore 사용량 17

업데이트됨

2026-09-09

sickn33

sickn33-frontend-dev-guidelines

Skillstore 점수 78

증거 신뢰도 높음

Skillstore 사용량 16

업데이트됨

2026-09-09

BOM-98

bom-98-frontend-dev-guidelines

Skillstore 점수 78

증거 신뢰도 높음

Skillstore 사용량 16

업데이트됨

2026-09-09

Dimon94

dimon94-frontend-dev-guidelines

Skillstore 점수 78

증거 신뢰도 높음

Skillstore 사용량 14

업데이트됨

2026-09-09

diet103

diet103-frontend-dev-guidelines

Skillstore 점수 78

증거 신뢰도 높음

Skillstore 사용량 13

업데이트됨

2026-09-09

Skillstore 점수

이 점수의 이유 증거 신뢰도: 높음

아키텍처

유지보수성

콘텐츠

커뮤니티

사양 준수

만들 수 있는 것

기능 페이지 만들기

가이드라인을 사용해 데이터 가져오기, 로딩 상태, 오류, 타입이 지정된 컴포넌트 구조를 갖춘 페이지를 구축합니다.

프론트엔드 아키텍처 표준화

규칙을 사용해 폴더, 컴포넌트, import, 폼, 데이터 계층 패턴에 대해 팀의 방향을 맞춥니다.

AI 프론트엔드 변경 안내

Claude, Codex 또는 Claude Code에 Next.js 및 React 작업을 위한 명확한 구현 규칙을 제공합니다.

이 프롬프트를 사용해 보세요

페이지 만들기

frontend-dev-guidelines 스킬을 사용해 대시보드 목록용 Next.js App Router 페이지를 만드세요. 로딩, 오류, metadata, 타입이 지정된 props를 포함하세요.

폼 구축하기

frontend-dev-guidelines 스킬을 사용해 Zod 검증과 shadcn/ui 필드를 갖춘 React Hook Form을 설계하세요. 컴포넌트 경계를 설명하세요.

데이터 가져오기 리팩터링

frontend-dev-guidelines 스킬을 사용해 이 기능을 클라이언트 측 데이터 가져오기에서 더 안전한 Server Components 또는 TanStack Query 패턴으로 리팩터링하세요.

기능 모듈 계획하기

frontend-dev-guidelines 스킬을 사용해 routes, components, API helpers, loading states, errors, TypeScript types를 포함한 완전한 기능 모듈을 계획하세요.

모범 사례

기본적으로 Server Components를 사용하고, hooks, browser APIs 또는 events가 필요한 경우에만 클라이언트 컴포넌트를 추가합니다.
React Hook Form, Zod 스키마, 명확한 검증 메시지로 폼의 타입을 유지합니다.
로딩, 오류, Suspense 경계를 해당 데이터나 컴포넌트 가까이에 추가합니다.