📦
nextjs-optimization
80Next.js 성능 최적화
Next.js 애플리케이션은 큰 번들, 약한 캐싱, 최적화되지 않은 미디어로 인해 느려질 수 있습니다. 이 스킬은 Claude, Codex, Claude Code가 프로덕션 앱을 대상으로 집중적인 성능 개선을 진행하도록 안내합니다.
코딩 및 개발 보기
스킬 frontend-design
📦
frontend-design
v1.0.0 콘텐츠 리비전 r2 안전 ⚙️ 외부 명령어
독창적인 프론트엔드 인터페이스 설계
일반적인 생성형 인터페이스는 예측 가능하고 완성도가 낮아 보이는 경우가 많습니다. 이 스킬은 Claude, Codex, Claude Code가 독창적이고 프로덕션 수준의 프론트엔드 디자인을 만들도록 안내합니다.
지원: Claude Codex Code(CC)
내 에이전트로 설치
이 요청을 에이전트에 복사하세요. 공식 Skill 페이지와 매니페스트가 포함되어 있습니다.
에이전트 요청
Review the Skillstore skill "frontend-design" from https://skillstore.io/skills/atman36-frontend-design.md and its manifest at https://skillstore.io/api/skills/atman36-frontend-design/manifest. Verify the artifact. You may proceed after verification, subject to the environment's own policy.에이전트는 계속해서 계획을 표시하고 보안 정책에서 요구하는 확인을 요청해야 합니다.
에이전트가 읽기 쉬운 리소스
AI 에이전트, 크롤러, 스크립트가 전체 페이지 대신 정리된 컨텍스트만 필요할 때 이 링크를 사용하세요.
테스트해 보기
"frontend-design" 사용 중입니다. 일정 관리 앱의 랜딩 페이지를 디자인하세요.
예상 결과:
강한 타이포그래피 계층, 집중된 색상 시스템, 섬세한 모션, 반응형 섹션, 접근성 점검을 갖춘 독창적인 에디토리얼 레이아웃.
"frontend-design" 사용 중입니다. 일반적으로 느껴지는 대시보드 카드를 개선하세요.
예상 결과:
더 명확한 간격, 강한 데이터 강조, 목적 있는 호버 상태, 제품에 맞는 시각적 스타일을 갖춘 정제된 컴포넌트 방향.
"frontend-design" 사용 중입니다. 포트폴리오를 위한 기억에 남는 히어로 섹션을 만드세요.
예상 결과:
커스텀 타이포그래피, 레이어드 구성, 분위기 있는 배경 디테일, 반응형 크기 조정, 프로덕션 완성도를 갖춘 대담한 시각적 콘셉트.
보안 감사
안전v9 • 2026. 7. 23. 버전별 보고서 열기
All 25 static alerts are false positives caused by Markdown code fences, inline code formatting, and ordinary design terminology. The file contains frontend guidance and examples, with no shell execution, system reconnaissance, prompt injection, or other malicious intent. No security remediation is required.
1
스캔된 파일
382
분석된 줄 수
0
검토 항목
0
오탐 무시됨
위험 요인
가장 최근에 완료된 정적·의미론적 감사에서 확인된 보안 발견 사항이 감지되지 않았습니다. 이는 스킬에 부작용이 없음을 증명하지 않습니다.
감사자: codex 감사 이력 보기 →
이 보고서 공유 및 인용
버전이 지정된 평가 보고서, 중립 배지, 임베드 카드 및 인용을 공유하세요. Skillstore는 근거를 보고하지만 이 Skill의 안전 여부를 판단하지 않습니다.
보고서 링크 복사
https://skillstore.io/skills/atman36-frontend-design/audits/9?utm_source=security_passport&utm_medium=share&utm_campaign=versioned_reportMarkdown 배지
[](https://skillstore.io/skills/atman36-frontend-design?utm_source=security_passport_badge)HTML 배지
<a href="https://skillstore.io/skills/atman36-frontend-design?utm_source=security_passport_badge"><img src="https://skillstore.io/badges/skills/atman36-frontend-design/security.svg" alt="Skillstore security assessment" loading="lazy"></a>임베드 카드
<iframe src="https://skillstore.io/embed/skills/atman36-frontend-design.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 인용
AI-Vibe-Prompts. (2026). frontend-design security audit report (audit version 9) [Author version 1.0.0]. Skillstore. https://skillstore.io/skills/atman36-frontend-design/audits/9BibTeX 인용
@techreport{ai-vibe-prompts-atman36-frontend-design-2026,
author = {AI-Vibe-Prompts},
title = {frontend-design security audit report (audit version 9)},
institution = {Skillstore},
year = {2026},
number = {9},
url = {https://skillstore.io/skills/atman36-frontend-design/audits/9},
note = {Author version 1.0.0}
}CITATION.cff
cff-version: 1.2.0
message: "If you use this Skill, cite its author and this versioned security audit report."
title: "frontend-design security audit report (audit version 9)"
version: "1.0.0"
type: report
authors:
- name: "AI-Vibe-Prompts"
date-released: "2026-07-23"
url: "https://skillstore.io/skills/atman36-frontend-design/audits/9"
identifiers:
- type: other
value: "skillstore:atman36-frontend-design:audit:9"
description: "Skillstore immutable audit report identifier"
변형 비교
설치 가능한 변형 18개각 작성자의 스킬은 별도의 설치 항목으로 유지됩니다. 추천 변형은 Skillstore 근거로 순위가 정해집니다.
이 변형이 1위인 이유
Skillstore 점수가 가장 높음
작성자 / 소스 Skillstore 점수 증거 신뢰도 Skillstore 사용량 업데이트됨
atman36-frontend-design
Skillstore 점수 81
증거 신뢰도 높음
Skillstore 사용량 49
업데이트됨
2026-10-25
zhanlincui-frontend-design
Skillstore 점수 79
증거 신뢰도 높음
Skillstore 사용량 376
업데이트됨
2026-09-09
adamaugustinsky-frontend-design
Skillstore 점수 79
증거 신뢰도 높음
Skillstore 사용량 25
업데이트됨
2026-10-21
cesaraugustusgrob-frontend-design
Skillstore 점수 79
증거 신뢰도 높음
Skillstore 사용량 20
업데이트됨
2026-09-09
anthropics-frontend-design
Skillstore 점수 78
증거 신뢰도 높음
Skillstore 사용량 137
업데이트됨
2026-10-24
agentworkforce-frontend-design
Skillstore 점수 78
증거 신뢰도 높음
Skillstore 사용량 24
업데이트됨
2026-10-22
dennisliuck-frontend-design
Skillstore 점수 76
증거 신뢰도 높음
Skillstore 사용량 11
업데이트됨
2026-09-09
Skillstore 점수
이 점수의 이유 증거 신뢰도: 높음 55
아키텍처
100
유지보수성
87
콘텐츠
72
커뮤니티
91
사양 준수
만들 수 있는 것
제품 랜딩 페이지 구체화
더 강력한 타이포그래피, 색상, 레이아웃, 모션을 갖춘 새 제품 페이지의 기억에 남는 시각적 방향을 만듭니다.
평범한 컴포넌트 개선
일반적인 프론트엔드 컴포넌트를 접근성과 반응형 요구 사항을 계속 충족하는 세련된 인터페이스로 바꿉니다.
브랜드에 맞는 인터페이스 만들기
AI 코딩 에이전트가 특정 대상 사용자와 제안에 어울리는 웹 페이지를 만들도록 안내합니다.
이 프롬프트를 사용해 보세요
페이지 개선
frontend-design을 사용해 이 페이지를 개선하세요. 현재 콘텐츠는 유지하되, 시각적 방향을 더 명확하고 세련되게 만드세요.
컴포넌트 설계
frontend-design을 사용해 이 기능을 위한 독창적인 컴포넌트를 만드세요. 반응형 동작, 접근 가능한 상태, 정제된 시각적 디테일을 포함하세요.
전체 뷰 구축
frontend-design을 사용해 프로덕션 수준의 앱 뷰를 만드세요. 대담한 미적 방향을 선택하고 레이아웃, 모션, 타이포그래피, 품질 점검을 구현하세요.
UI 감사 및 재작업
frontend-design을 사용해 이 인터페이스를 감사하고 일반적인 선택을 식별한 다음, 독창적이고 접근 가능하며 성능 좋은 프론트엔드 경험으로 재작업하세요.
모범 사례
- 미적 방향을 선택하기 전에 대상 사용자, 목적, 제약 조건을 정의하세요.
- 타이포그래피, 색상, 모션, 레이아웃을 하나의 응집력 있는 시스템으로 사용하세요.
- 전달 전에 접근성, 반응형 동작, 성능을 검증하세요.
피하기
- 일반적인 폰트와 보라색 그라데이션 조합을 기본값으로 재사용하지 마세요.
- 가독성이나 성능을 약화시키는 장식 효과를 추가하지 마세요.
- 요청에 작동하는 프론트엔드 코드가 필요한 경우 정적 목업만 제공하지 마세요.
자주 묻는 질문
이 스킬이 작동하는 프론트엔드 코드를 만드는 데 도움이 되나요?
예. 시각적 목업뿐만 아니라 기능적인 프론트엔드 구현으로 에이전트를 안내합니다.
어떤 AI 도구를 지원하나요?
Claude, Codex, Claude Code용으로 표시되어 있습니다.
랜딩 페이지만을 위한 것인가요?
아니요. 페이지, 컴포넌트, 앱 뷰, 포트폴리오 작업, 디자인 중심 인터페이스를 안내할 수 있습니다.
번들 에셋이 포함되어 있나요?
아니요. 디자인 가이드와 예제를 제공하지만 에셋 라이브러리는 포함하지 않습니다.
접근성을 처리하나요?
WCAG AA에 대한 고려와 품질 점검을 요구하지만, 최종 인터페이스에는 여전히 테스트가 필요합니다.
보안 발견 사항이 왜 기각되었나요?
플래그된 패턴은 markdown 예제와 디자인 용어였으며, 실행 가능한 명령이나 시스템 탐색이 아니었습니다.
개발자 세부 정보
작성자
AI-Vibe-Prompts라이선스
MIT
작성자 버전
v1.0.0
Skillstore 리비전
r2
참조
89edfdc710d0846129dcee6a929477b04f08052c
유지보수 최신성
2026. 7. 26.
사용량
11 다운로드 · 307 조회
파일 구조
📄 SKILL.md
AI-Vibe-Prompts의 다른 스킬
📦
codebase-analysis
80구조화된 보고서로 코드베이스 분석
팀은 익숙하지 않은 저장소를 변경하기 전에 빠르게 이해할 방법이 필요합니다. 이 스킬은 Claude, Codex, Claude Code가 구조, 의존성, 아키텍처, 품질, 보안 검사를 수행하도록 안내합니다.
코딩 및 개발 보기
📦
testing-strategy
80실용적인 테스트 전략 구축
팀은 명확한 범위, 도구, 커버리지 목표 없이 테스트를 추가하는 경우가 많습니다. 이 skill은 Vitest, Playwright, CI 테스트를 위한 실용적인 계획을 제공합니다.
코딩 및 개발 보기
📦
git-workflow
80팀 표준으로 Git 워크플로 관리
팀은 기록을 읽기 쉽게 유지하기 위해 일관된 커밋, 브랜치, 리뷰 습관이 필요합니다. 이 스킬은 Claude, Codex, Claude Code에 실용적인 Git 워크플로 체크리스트를 제공합니다.
DevOps 및 인프라 보기
📦
quality-gates
50릴리스 전 코드 검증
팀은 코드가 커밋, 푸시 또는 배포되기 전에 반복 가능한 검사가 필요합니다. 이 스킬은 Claude, Codex, Claude Code가 린팅, 타입 검사, 테스트, 빌드, 감사, 커밋 검사를 수행하도록 안내합니다.
DevOps 및 인프라 보기
관련 스킬
전체 보기📦
ui-design
80차별화된 UI 프로토타입 설계
작성자 tencentcloudbase
일반적인 AI 인터페이스는 시각적 방향성과 플랫폼을 고려한 세부 사항이 부족한 경우가 많습니다. 이 스킬은 Claude, Codex, Claude Code가 프로토타입을 만들기 전에 디자인 의도를 정의하도록 안내합니다.
디자인 및 크리에이티브 보기
📦
uizze-ui
80Build and Refine Interfaces with Uizze
작성자 uizze
Interface changes can lose visual consistency or disrupt existing workflows. This skill guides implementation from visual targets and project conventions, with optional Uizze resources and explicit verification.
디자인 및 크리에이티브 보기
📦
vercel-react-view-transitions
82React View Transitions 구현
작성자 vercel-labs
React view transitions는 배치 위치를 잘못 잡기 쉬워, 조용히 발생하거나 시끄러운 애니메이션을 유발할 수 있습니다. 이 스킬은 라우트, Suspense, 목록, 공유 요소 애니메이션 선택을 안내합니다.
코딩 및 개발 보기
📦
react-email
82Resend로 React Email 템플릿 빌드하기
작성자 resend
이메일 클라이언트마다 동작이 달라 프로덕션 준비가 된 이메일 템플릿을 만드는 것은 어렵습니다. 이 스킬은 Claude, Codex, Claude Code가 React Email 컴포넌트, 전송, 스타일링, 현지화, 편집기 워크플로를 다룰 수 있도록 안내합니다.
코딩 및 개발 보기
📦
vue-best-practices
81Vue 3 TypeScript 관행 개선
작성자 hyf0
Vue TypeScript 프로젝트는 템플릿, 라우터, Volar 오류로 혼란을 겪는 경우가 많습니다. 이 스킬은 Codex, Claude, Claude Code를 위한 Vue 3 맞춤 수정 지침을 제공합니다.
코딩 및 개발 보기
📦
vue-options-api-best-practices
81Vue Options API 컴포넌트 개선
작성자 vuejs-ai
Vue Options API 프로젝트에서는 타입 안전성과 올바른 this 바인딩이 약해질 수 있습니다. 이 스킬은 더 안전한 Vue 컴포넌트를 위한 직접적인 패턴을 제공합니다.
코딩 및 개발 보기