스킬 design-taste-frontend
📦

design-taste-frontend

콘텐츠 리비전 r1 안전 ⚙️ 외부 명령어🌐 네트워크 접근

완성도 높은 프론트엔드 인터페이스 구축

AI가 생성한 인터페이스는 종종 일반적으로 보이거나 프로덕션 세부 사항을 놓칩니다. 이 스킬은 Claude, Codex, Claude Code에 엄격한 디자인 및 프론트엔드 가드레일을 제공합니다.

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

내 에이전트로 설치

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

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

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

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

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

Markdown 상세 GET /skills/leonxlnx-design-taste-frontend.md 서명된 manifest GET /api/skills/leonxlnx-design-taste-frontend/manifest 서명된 lockfile GET /api/skills/leonxlnx-design-taste-frontend/lockfile

테스트해 보기

"design-taste-frontend" 사용 중입니다. 평면적이고 일반적으로 느껴지는 SaaS 결제 페이지를 개선하세요.

예상 결과:

  • 절제된 색상과 더 선명한 타이포그래피를 갖춘 더 명확한 정보 계층 구조.
  • 일반적인 동일 카드 행을 피하는 반응형 섹션.
  • 결제 작업을 위한 로딩, 빈 상태, 오류, 활성 상태.

"design-taste-frontend" 사용 중입니다. 모션이 포함된 제품 분석 대시보드를 만드세요.

예상 결과:

  • 과도한 카드 대신 선과 간격을 사용하는 밀도 높은 대시보드 레이아웃.
  • 더 부드러운 성능을 위해 transform과 opacity를 사용하는 모션 가이드.
  • 모바일 접힘, 의존성 사용, 애니메이션 격리를 위한 검토 체크리스트.

보안 감사

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

All static findings were reviewed against SKILL.md. The backtick, URL, and reconnaissance hits are Markdown prose or frontend guidance, not executable behavior. No prompt injection, exfiltration intent, or unsafe automation evidence was found.

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

위험 요인

⚙️ 외부 명령어 (54)
SKILL.md:18 SKILL.md:19 SKILL.md:20 SKILL.md:21 SKILL.md:22 SKILL.md:24 SKILL.md:25 SKILL.md:28 SKILL.md:29 SKILL.md:30 SKILL.md:31 SKILL.md:32 SKILL.md:39 SKILL.md:40 SKILL.md:41 SKILL.md:42 SKILL.md:50 SKILL.md:53 SKILL.md:61 SKILL.md:64 SKILL.md:68 SKILL.md:69 SKILL.md:70 SKILL.md:71 SKILL.md:72 SKILL.md:75 SKILL.md:76 SKILL.md:77 SKILL.md:82 SKILL.md:83 SKILL.md:84 SKILL.md:85 SKILL.md:88 SKILL.md:89 SKILL.md:90 SKILL.md:95 SKILL.md:101 SKILL.md:102 SKILL.md:108 SKILL.md:119 SKILL.md:124 SKILL.md:125 SKILL.md:197 SKILL.md:198 SKILL.md:199 SKILL.md:201 SKILL.md:205 SKILL.md:206 SKILL.md:208 SKILL.md:212 SKILL.md:215 SKILL.md:221 SKILL.md:222 SKILL.md:223
🌐 네트워크 접근 (1)
SKILL.md:124
가장 최근에 완료된 정적·의미론적 감사에서 확인된 보안 발견 사항이 감지되지 않았습니다. 이는 스킬에 부작용이 없음을 증명하지 않습니다.
감사자: codex 감사 이력 보기 →
이 보고서 공유 및 인용

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

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

보고서 링크 복사

https://skillstore.io/skills/leonxlnx-design-taste-frontend/audits/4?utm_source=security_passport&utm_medium=share&utm_campaign=versioned_report

Markdown 배지

[![Skillstore security assessment](https://skillstore.io/badges/skills/leonxlnx-design-taste-frontend/security.svg)](https://skillstore.io/skills/leonxlnx-design-taste-frontend?utm_source=security_passport_badge)

HTML 배지

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

임베드 카드

<iframe src="https://skillstore.io/embed/skills/leonxlnx-design-taste-frontend.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 인용

leonxlnx. (2026). design-taste-frontend security audit report (audit version 4) [Author version unspecified]. Skillstore. https://skillstore.io/skills/leonxlnx-design-taste-frontend/audits/4

BibTeX 인용

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

Skillstore 점수

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

만들 수 있는 것

React 화면 개선

러프한 React 또는 Next.js 화면을 더 명확한 계층 구조, 반응형 레이아웃, 완전한 UI 상태로 개선합니다.

시각적 가드레일 설정

에이전트가 인터페이스 코드를 작성하기 전에 타이포그래피, 색상, 간격, 모션에 대한 엄격한 규칙을 적용합니다.

더 나은 프로토타입 출시

실용적인 디자인 제약과 성능 검사를 통해 제품 아이디어를 완성도 높은 프로토타입으로 전환합니다.

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

단일 화면 개선 
Use design-taste-frontend to improve this screen. Preserve the current stack. Focus on spacing, typography, color restraint, and mobile behavior.
대시보드 UI 생성 
Create a React dashboard for [product]. Use dense data layout rules, complete loading and empty states, and no generic card grid.
안전하게 모션 추가 
Add motion to this interface. Keep animations isolated in client components. Use transform and opacity only. Include cleanup for any effects.
전체 플로우 감사 
Review this multi-page frontend flow. Identify weak visual hierarchy, missing states, risky motion, and responsive issues before editing code.

모범 사례

  • 구현을 요청하기 전에 제품 맥락, 대상 사용자, 기존 브랜드 제약을 공유하세요.
  • 타사 UI 또는 모션 라이브러리를 추가하기 전에 에이전트가 package.json을 검사하도록 요청하세요.
  • 생성된 각 프론트엔드 변경 후 모바일 레이아웃과 모션 성능을 검토하세요.

피하기

  • 승인 없이 기존 디자인 시스템을 재정의하는 데 이 스킬을 사용하지 마세요.
  • 데이터 밀도가 높거나 저전력 모바일 워크플로우에 무거운 상시 애니메이션을 요청하지 마세요.
  • 프로젝트가 지원하거나 팀이 설치를 승인하지 않는 한 새 의존성을 수락하지 마세요.

자주 묻는 질문

이 스킬은 프론트엔드 코드를 작성하나요?
AI 에이전트가 프론트엔드 코드를 작성하거나 검토하는 동안 안내합니다. 그 자체로 컴포넌트를 제공하지는 않습니다.
어떤 스택을 대상으로 하나요?
React, Next.js, Tailwind CSS 및 일반적인 모션 라이브러리를 선호합니다. 사용자는 다른 스택을 요청할 수 있습니다.
Claude, Codex, Claude Code와 함께 작동할 수 있나요?
예. 이 콘텐츠는 지침 기반이며 Claude, Codex, Claude Code 지원을 명시합니다.
네트워크 액세스가 필요한가요?
아니요. 이 스킬은 Markdown 지침 파일입니다. 예시로 placeholder 이미지 URL을 참조할 수 있습니다.
의존성을 자동으로 설치하나요?
아니요. 패키지가 누락된 경우 에이전트에게 package.json을 확인하고 설치 명령을 표시하도록 안내합니다.
프로덕션 프로젝트에 안전한가요?
가이드로는 적합하지만, 생성된 코드는 여전히 일반적인 검토, 테스트, 접근성 검사가 필요합니다.

개발자 세부 정보

작성자

leonxlnx

라이선스

MIT

Skillstore 리비전

r1

버전 안내

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

리포지토리

https://github.com/leonxlnx/taste-skill/tree/main/skills/taste-skill/

참조

b8ca75d2c0a7e7102978993058777d82b8ab2610

유지보수 최신성

2026. 7. 18.

사용량

43 다운로드 · 116 조회

파일 구조

📄 SKILL.md

leonxlnx의 다른 스킬

전체 보기

관련 스킬

전체 보기