스킬 writing-page-layout
📦

writing-page-layout

콘텐츠 리비전 r1 안전 ⚙️ 외부 명령어

간결한 Next.js 페이지 레이아웃 만들기

Next.js 페이지 파일은 레이아웃, 타입, 페이지 로직이 함께 커질 때 유지보수가 어려워질 수 있습니다. 이 스킬은 Claude, Codex, Claude Code가 분리된 타입을 사용하는 모듈식 page.tsx 레이아웃을 만들도록 안내합니다.

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

내 에이전트로 설치

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

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

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

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

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

Markdown 상세 GET /skills/emz1998-writing-page-layout.md 서명된 manifest GET /api/skills/emz1998-writing-page-layout/manifest 서명된 lockfile GET /api/skills/emz1998-writing-page-layout/lockfile

테스트해 보기

"writing-page-layout" 사용 중입니다. 대시보드 페이지 레이아웃을 만들어 달라는 요청.

예상 결과:

분리된 섹션, 짧은 page.tsx 설명, 별도 types 파일 권장 사항이 포함된 간결한 페이지 레이아웃 계획.

"writing-page-layout" 사용 중입니다. 레이아웃과 인터페이스가 섞여 있는 긴 페이지 파일.

예상 결과:

인터페이스를 페이지 파일 밖으로 이동하고 페이지가 레이아웃 구성에 집중하도록 유지하는 리팩터링 요약.

"writing-page-layout" 사용 중입니다. 서로 관련된 여러 앱 페이지에 대한 요청.

예상 결과:

각 페이지를 간결하게 유지하고 공유 타입 정의를 사용하는 일관된 파일 구성 제안.

보안 감사

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

The two static findings are false positives caused by Markdown inline code spans around file paths. No executable code, command invocation, prompt injection, or data-exfiltration intent was found in SKILL.md.

1
스캔된 파일
15
분석된 줄 수
0
검토 항목
0
오탐 무시됨

위험 요인

⚙️ 외부 명령어 (2)
SKILL.md:8 SKILL.md:14
가장 최근에 완료된 정적·의미론적 감사에서 확인된 보안 발견 사항이 감지되지 않았습니다. 이는 스킬에 부작용이 없음을 증명하지 않습니다.
감사자: codex 감사 이력 보기 →
이 보고서 공유 및 인용

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

버전별 보고서 열기
보안 평가

보고서 링크 복사

https://skillstore.io/skills/emz1998-writing-page-layout/audits/4?utm_source=security_passport&utm_medium=share&utm_campaign=versioned_report

Markdown 배지

[![Skillstore security assessment](https://skillstore.io/badges/skills/emz1998-writing-page-layout/security.svg)](https://skillstore.io/skills/emz1998-writing-page-layout?utm_source=security_passport_badge)

HTML 배지

<a href="https://skillstore.io/skills/emz1998-writing-page-layout?utm_source=security_passport_badge"><img src="https://skillstore.io/badges/skills/emz1998-writing-page-layout/security.svg" alt="Skillstore security assessment" loading="lazy"></a>

임베드 카드

<iframe src="https://skillstore.io/embed/skills/emz1998-writing-page-layout.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 인용

Emz1998. (2026). writing-page-layout security audit report (audit version 4) [Author version unspecified]. Skillstore. https://skillstore.io/skills/emz1998-writing-page-layout/audits/4

BibTeX 인용

@techreport{emz1998-emz1998-writing-page-layout-2026, author = {Emz1998}, title = {writing-page-layout security audit report (audit version 4)}, institution = {Skillstore}, year = {2026}, number = {4}, url = {https://skillstore.io/skills/emz1998-writing-page-layout/audits/4}, 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: "writing-page-layout security audit report (audit version 4)" version: "unspecified" type: report authors: - name: "Emz1998" date-released: "2026-07-06" url: "https://skillstore.io/skills/emz1998-writing-page-layout/audits/4" identifiers: - type: other value: "skillstore:emz1998-writing-page-layout:audit:4" description: "Skillstore immutable audit report identifier"

Skillstore 점수

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

만들 수 있는 것

작은 앱 페이지 만들기

페이지 파일을 집중적이고 모듈식으로 유지하면서 간결한 Next.js 페이지 레이아웃을 만듭니다.

긴 페이지 파일 리팩터링하기

복잡해진 페이지 레이아웃에서 타입 선언을 분리하고 페이지 파일 크기를 줄입니다.

생성된 레이아웃 표준화하기

제품을 위한 여러 Next.js 페이지를 생성할 때 일관된 페이지 레이아웃 규칙을 적용합니다.

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

기본 페이지 만들기 
간단한 대시보드를 위한 Next.js page.tsx 레이아웃을 만드세요. 페이지 파일을 40줄 미만으로 유지하고 모든 타입은 별도의 types 파일에 배치하세요.
모듈식으로 만들기 
설정 페이지를 위한 모듈식 Next.js page.tsx를 설계하세요. 레이아웃 섹션을 컴포넌트로 분리하고 인터페이스는 페이지 파일 밖에 두세요.
기존 레이아웃 리팩터링하기 
이 기존 Next.js 페이지 레이아웃을 스킬 규칙에 맞게 리팩터링하세요. 페이지 파일을 40줄 미만으로 줄이고 타입 정의를 별도 파일로 이동하세요.
페이지 시스템 계획하기 
서로 관련된 세 개의 Next.js 페이지 레이아웃을 위한 구조를 만드세요. 각 page.tsx를 간결하게 유지하고, 공유 타입을 별도로 정의하며, 파일 구성을 설명하세요.

모범 사례

  • 파일을 생성하기 전에 정확한 Next.js app 디렉터리 경로를 명확히 하세요.
  • page.tsx는 구성에 집중하고 세부 사항은 컴포넌트로 이동하세요.
  • 원본 스킬의 types 경로에 오타가 있으므로 생성된 경로를 검토하세요.

피하기

  • 모든 레이아웃 섹션, 헬퍼 로직, 타입 정의를 하나의 페이지 파일에 넣는 것.
  • 40줄 제한을 중요한 로직을 불명확한 추상화에 숨기는 이유로 사용하는 것.
  • 프로젝트 구조를 확인하지 않고 제안된 types 경로가 올바르다고 가정하는 것.

자주 묻는 질문

이 스킬은 무엇을 만드는 데 도움이 되나요?
모듈식 구조와 분리된 타입 정의를 갖춘 간결한 Next.js page.tsx 레이아웃을 생성하는 데 도움이 됩니다.
전체 애플리케이션을 작성하나요?
아니요. 전체 애플리케이션 아키텍처나 백엔드 동작이 아니라 페이지 레이아웃 구조에 집중합니다.
TypeScript와 함께 사용할 수 있나요?
예. 지침에서 타입과 인터페이스를 별도 파일로 분리하라고 명시적으로 언급합니다.
스타일링 가이드를 포함하나요?
아니요. 이 스킬은 CSS, 디자인 시스템 또는 접근성 요구 사항을 지정하지 않습니다.
40줄 규칙이 왜 유용한가요?
페이지 파일이 여러 관심사를 섞는 대신 레이아웃 구성에 집중하도록 권장합니다.
스킬의 정확한 types 경로를 사용해야 하나요?
먼저 프로젝트를 확인하세요. 원본 텍스트의 제안 경로에는 오타가 있는 것으로 보입니다.

개발자 세부 정보

작성자

Emz1998

라이선스

MIT

Skillstore 리비전

r1

버전 안내

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

리포지토리

https://github.com/Emz1998/nexly-notes/tree/main/archive/skills/code-style/pages

참조

a06681402992ceae98ba04d54cfd4ab004862696

유지보수 최신성

2026. 7. 21.

사용량

7 다운로드 · 146 조회

파일 구조

📄 SKILL.md

Emz1998의 다른 스킬

전체 보기

관련 스킬

전체 보기