스킬 frontend-dev-guidelines
📦

frontend-dev-guidelines

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

일관된 React 프런트엔드 구축

프런트엔드 팀은 앱 패턴이 라우팅, 페칭, 로딩, 스타일링 전반에서 서로 다를 때 시간을 낭비합니다. 이 스킬은 Next.js, React, TypeScript, shadcn/ui, MUI, TanStack Query를 위한 간결한 가이드라인을 제공합니다.

지원: Claude Codex Code(CC)
Maintain this Skill? Claim it 🥉 78 브론즈

내 에이전트로 설치

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

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

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

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

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

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

테스트해 보기

"frontend-dev-guidelines" 사용 중입니다. 필터, 테이블, 편집 작업이 있는 게시물 대시보드 페이지를 계획하세요.

예상 결과:

  • API, 훅, 컴포넌트, 타입, 헬퍼가 포함된 기능 폴더를 사용하세요.
  • Suspense boundary 안에서 테이블을 렌더링하고 무거운 그리드는 lazy load하세요.
  • 목록, 상세 레코드, mutations에 TanStack Query 키를 사용하세요.
  • 페이지 레이아웃을 유지하는 로딩 및 오류 boundary를 추가하세요.

"frontend-dev-guidelines" 사용 중입니다. 로딩 및 오류 동작에 대해 프로필 편집기를 검토하세요.

예상 결과:

  • 페이지 구조를 대체하는 이른 로딩 반환을 피하세요.
  • 데이터를 별도로 로드할 수 있는 경우 독립 섹션을 SuspenseLoader로 감싸세요.
  • 캐시 무효화와 사용자 피드백을 위해 mutation 성공 및 오류 핸들러를 사용하세요.

"frontend-dev-guidelines" 사용 중입니다. 목록, 상세, 편집 보기가 필요한 새 기능을 구성하세요.

예상 결과:

  • API 서비스, 라우트 컴포넌트, 재사용 가능한 하위 컴포넌트, 훅, 공유 타입이 포함된 기능 디렉터리를 만드세요.
  • 여러 영역에서 재사용될 때만 일반 UI 컴포넌트를 기능 외부에 유지하세요.
  • 기능 index 파일을 통해 공개 exports를 문서화하세요.

보안 감사

안전
v9 • 2026. 7. 23. 버전별 보고서 열기

All 151 static findings are false positives in instructional Markdown and TypeScript examples. Dynamic imports use fixed paths, backticks are documentation syntax, and relative imports do not access the filesystem. Network examples use application clients or a same-origin endpoint, and no prompt injection or malicious intent was found.

11
스캔된 파일
5,553
분석된 줄 수
0
검토 항목
0
오탐 무시됨

위험 요인

⚡ 스크립트 포함 (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
⚙️ 외부 명령어 (44)
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:44 SKILL.md:47 SKILL.md:48 SKILL.md:55 SKILL.md:59 SKILL.md:67-76 SKILL.md:76-80 SKILL.md:80-91 SKILL.md:91-95 SKILL.md:95-120 SKILL.md:120-124 SKILL.md:124-142 SKILL.md:142-146 SKILL.md:146-160 SKILL.md:160-164 SKILL.md:164-193 SKILL.md:193-197 SKILL.md:197-217 SKILL.md:217-223 SKILL.md:223-258 SKILL.md:258-285 SKILL.md:285-333 SKILL.md:333-341 SKILL.md:341-350 SKILL.md:350-353 SKILL.md:353-357 SKILL.md:357-362 SKILL.md:362-366 SKILL.md:366-384 SKILL.md:384-388 SKILL.md:388-402
📁 파일 시스템 접근 (28)
resources/complete-examples.md:20 resources/complete-examples.md:188 resources/complete-examples.md:221 resources/complete-examples.md:222 resources/complete-examples.md:338 resources/complete-examples.md:392 resources/complete-examples.md:548 resources/complete-examples.md:549 resources/complete-examples.md:753 resources/complete-examples.md:754 resources/complete-examples.md:755 resources/complete-examples.md:816 resources/component-patterns.md:199 resources/data-fetching.md:24 resources/data-fetching.md:70 resources/data-fetching.md:219 resources/data-fetching.md:308 resources/data-fetching.md:513 resources/data-fetching.md:544 resources/data-fetching.md:545 resources/data-fetching.md:631 resources/file-organization.md:237 resources/file-organization.md:238 resources/file-organization.md:395 resources/file-organization.md:396 resources/loading-and-error-states.md:300 resources/loading-and-error-states.md:339 resources/loading-and-error-states.md:365
🌐 네트워크 접근 (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/bom-98-frontend-dev-guidelines/audits/9?utm_source=security_passport&utm_medium=share&utm_campaign=versioned_report

Markdown 배지

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

HTML 배지

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

임베드 카드

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

BOM-98. (2026). frontend-dev-guidelines security audit report (audit version 9) [Author version unspecified]. Skillstore. https://skillstore.io/skills/bom-98-frontend-dev-guidelines/audits/9

BibTeX 인용

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

변형 비교

설치 가능한 변형 7개

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

이 변형이 1위인 이유

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 점수

이 점수의 이유 증거 신뢰도: 높음
55
아키텍처
85
유지보수성
87
콘텐츠
77
커뮤니티
83
사양 준수

만들 수 있는 것

새 기능 표준화

기능을 빌드하기 전에 라우팅, 컴포넌트 경계, API 서비스, 훅, 로딩 상태, 스타일을 계획합니다.

프런트엔드 아키텍처 검토

pull request가 Suspense, 데이터 페칭, TypeScript, 파일 레이아웃에 대한 공유 패턴을 따르는지 확인합니다.

React 코드베이스 온보딩

컴포넌트, 스타일링, 라우팅, 캐시 동작, 오류 처리에 대한 기대 규칙을 학습합니다.

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

페이지 계획 
frontend-dev-guidelines를 사용하여 [route]에 대한 새 페이지를 계획하세요. 컴포넌트 유형, 데이터 페칭, 로딩 상태, 오류 상태, 스타일링 선택을 포함하세요.
컴포넌트 설계 
frontend-dev-guidelines를 사용하여 재사용 가능한 [component]를 설계하세요. props, 상태 경계, UI 라이브러리 사용, 접근성 요구사항, 파일 위치를 정의하세요.
데이터 페칭 리팩터링 
frontend-dev-guidelines를 사용하여 [screen]을 Suspense가 포함된 TanStack Query로 리팩터링하세요. 캐시 키, 무효화, 로딩 동작, 오류 처리를 포함하세요.
기능 아키텍처 감사 
frontend-dev-guidelines를 사용하여 [feature folder]를 검토하세요. 라우팅, 컴포넌트, API 서비스, 훅, TypeScript, 스타일링, 성능 패턴의 편차를 식별하세요.

모범 사례

  • 상호작용에 클라이언트 상태가 필요한 경우가 아니라면 Server Components 또는 Suspense 기반 데이터 흐름을 사용하세요.
  • 기능 코드를 API 서비스, 훅, 컴포넌트, 헬퍼, 공유 타입별로 구성하세요.
  • 프런트엔드 작업을 완료로 표시하기 전에 로딩, 오류, TypeScript, 스타일링, 성능 검사를 추가하세요.

피하기

  • 서버 렌더링이나 Suspense로 워크플로를 처리할 수 있을 때 client-only 컴포넌트를 추가하지 마세요.
  • 기능 서비스 계층이 있을 때 API 호출을 컴포넌트 전반에 흩어놓지 마세요.
  • 레이아웃 이동을 일으키거나 페이지 구조를 숨기는 이른 로딩 반환을 사용하지 마세요.

자주 묻는 질문

이 스킬은 어떤 프로젝트에 가장 적합한가요?
최신 라우팅, 컴포넌트, 데이터 페칭, UI 패턴을 사용하는 React 및 TypeScript 프런트엔드 프로젝트에 적합합니다.
작동하는 애플리케이션 코드를 생성하나요?
AI 어시스턴트가 프로젝트 코드를 작성하거나 검토할 때 적용할 수 있는 패턴과 예제를 제공합니다.
Claude, Codex, Claude Code와 함께 사용할 수 있나요?
예. 보고서는 Claude, Codex, Claude Code 워크플로에 대한 지원을 표시합니다.
Next.js가 필요한가요?
아니요. Next.js 패턴이 중심이지만, 여러 리소스는 TanStack Router와 일반 React 아키텍처도 다룹니다.
보안 가이드가 포함되어 있나요?
제한적인 프런트엔드 안전 가이드만 포함되어 있습니다. 인증, 권한 부여, 데이터 노출에는 별도의 보안 검토를 사용하세요.
팀은 코드 리뷰 중에 이를 어떻게 사용해야 하나요?
어시스턴트에게 변경된 파일을 데이터 페칭, 로딩, 파일 레이아웃, TypeScript, 스타일링에 대해 문서화된 패턴과 비교하도록 요청하세요.

개발자 세부 정보

작성자

BOM-98

라이선스

MIT

Skillstore 리비전

r2

버전 안내

작성자가 버전을 선언하지 않았습니다.

리포지토리

https://github.com/BOM-98/FinTracker/tree/main/.claude/skills/frontend-dev-guidelines

참조

a39a91716eadede5f4cdefd78178fed4e837a128

유지보수 최신성

2026. 7. 25.

사용량

9 다운로드 · 670 조회

파일 구조

📁 resources/

📄 common-patterns.md

📄 complete-examples.md

📄 component-patterns.md

📄 data-fetching.md

📄 file-organization.md

📄 loading-and-error-states.md

📄 performance.md

📄 routing-guide.md

📄 styling-guide.md

📄 typescript-standards.md

📄 SKILL.md

BOM-98의 다른 스킬

전체 보기

관련 스킬

전체 보기