스킬 web-design-guidelines

📦

web-design-guidelines

Name: web-design-guidelines
Author: shreyam1008

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

Improve Web Interfaces with Practical Design Reviews

Inconsistent interfaces can hide actions, weaken accessibility, and fail on smaller screens. This skill provides focused design decisions and evidence-based review guidance.

지원: Claude Codex Code(CC)

📊 75 적절함

Maintain this Skill? Claim it 📊 75 적절함

내 에이전트로 설치

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

에이전트 요청

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

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

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

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

Markdown 상세 GET /skills/shreyam1008-web-design-guidelines.md 서명된 manifest GET /api/skills/shreyam1008-web-design-guidelines/manifest 서명된 lockfile GET /api/skills/shreyam1008-web-design-guidelines/lockfile

테스트해 보기

"web-design-guidelines" 사용 중입니다. Review a checkout form with a low-contrast secondary action and no visible focus state.

예상 결과:

Finding: Keyboard users may lose track of the active field, while the secondary action is difficult to read. Repair: add a visible focus treatment and verify text and control contrast against the actual background.

"web-design-guidelines" 사용 중입니다. Create theme guidance for a dashboard that supports light and dark modes.

예상 결과:

Define surface, text, border, accent, and status roles before mapping them to components.
Verify contrast in both themes and pair status colors with icons or text.
Use shared spacing and motion roles so related screens remain consistent.

"web-design-guidelines" 사용 중입니다. Audit a table workflow for narrow screens and long labels.

예상 결과:

Finding: Long labels can create accidental page overflow and obscure table context. Repair: preserve intentional table scrolling, test realistic content, and provide a clear way to return to the active filter state.

보안 감사

안전

v1 • 2026. 10. 2. 버전별 보고서 열기

All five static findings are false positives. The evidence shows documentation links, an inline reference, and ordinary design guidance, with no executable command, data-exfiltration intent, or prompt injection. No security remediation is required.

스캔된 파일

분석된 줄 수

검토 항목

오탐 무시됨

위험 요인

⚙️ 외부 명령어 (1)

SKILL.md:44

🌐 네트워크 접근 (2)

SKILL.md:38 SKILL.md:43

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

감사자: codex

이 보고서 공유 및 인용

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

버전별 보고서 열기

보고서 링크 복사

https://skillstore.io/skills/shreyam1008-web-design-guidelines/audits/1?utm_source=security_passport&utm_medium=share&utm_campaign=versioned_report

Markdown 배지

[![Skillstore security assessment](https://skillstore.io/badges/skills/shreyam1008-web-design-guidelines/security.svg)](https://skillstore.io/skills/shreyam1008-web-design-guidelines?utm_source=security_passport_badge)

HTML 배지

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

임베드 카드

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

shreyam1008. (2026). web-design-guidelines security audit report (audit version 1) [Author version unspecified]. Skillstore. https://skillstore.io/skills/shreyam1008-web-design-guidelines/audits/1

BibTeX 인용

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

변형 비교

설치 가능한 변형 7개

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

이 변형이 1위인 이유

Skillstore 점수가 가장 높음

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

shreyam1008 권장 현재

shreyam1008-web-design-guidelines

Skillstore 점수 75

증거 신뢰도 중간

Skillstore 사용량 7

업데이트됨

2026-10-04

vercel-labs

vercel-labs-web-design-guidelines

Skillstore 점수 73

증거 신뢰도 높음

Skillstore 사용량 64

업데이트됨

2026-09-09

ZhanlinCui

zhanlincui-web-design-guidelines

Skillstore 점수 72

증거 신뢰도 높음

Skillstore 사용량 152

업데이트됨

2026-09-09

antfu

antvu-web-design-guidelines

Skillstore 점수 72

증거 신뢰도 높음

Skillstore 사용량 26

업데이트됨

2026-10-24

antfu

antfu-web-design-guidelines

Skillstore 점수 72

증거 신뢰도 높음

Skillstore 사용량 20

업데이트됨

2026-10-24

supercent-io

supercent-io-web-design-guidelines

Skillstore 점수 71

증거 신뢰도 높음

Skillstore 사용량 65

업데이트됨

2026-09-09

sickn33

sickn33-web-design-guidelines

Skillstore 점수 69

증거 신뢰도 높음

Skillstore 사용량 13

업데이트됨

2026-09-09

Skillstore 점수

이 점수의 이유 증거 신뢰도: 중간

아키텍처

유지보수성

콘텐츠

커뮤니티

사양 준수

만들 수 있는 것

Review a product screen

Identify hierarchy, interaction, accessibility, and responsive issues in an existing screen or flow.

Shape a visual system

Create coherent roles for color, typography, spacing, borders, elevation, motion, and supported themes.

Audit a responsive workflow

Test realistic states and content across keyboard, pointer, touch, narrow-screen, and zoom scenarios.

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

Beginner screen review

Review this screen for hierarchy, action clarity, accessibility, and responsive risks. List each issue, its user impact, and one practical repair.

Improve interaction states

Analyze this flow for loading, empty, error, success, stale, focus, and recovery states. Identify missing states and propose concise interface behavior.

Define a visual system

Create a focused visual-system proposal for this product. Define semantic color, typography, spacing, radius, border, elevation, and motion roles that match its brand and content.

Conduct an evidence-based audit

Audit the affected screen and code against the product brief. Separate measured defects from preferences, cite locations, rank impact, and give verification steps for keyboard, touch, responsive, zoom, and reduced motion.

모범 사례

Start with the product brief, affected screen, existing conventions, and intended interaction.
Report concrete user impact and proposed repairs, separating measured defects from preferences.
Verify representative states with keyboard, pointer or touch, realistic content, and relevant viewport sizes.

피하기

Do not force a redesign or new component library for a focused repair.
Do not treat ARIA attributes as proof of accessible interaction.
Do not add dark mode, confirmation dialogs, or decorative tokens without a demonstrated need.

자주 묻는 질문

What does this skill review?

It reviews hierarchy, interaction states, visual systems, responsiveness, accessibility, and user impact across screens or flows.

Can it write frontend code?

No. It provides design decisions, review findings, and repair guidance. HTML, CSS, and JavaScript implementation are separate tasks.

Can it review a screenshot?

Yes. A screenshot supports visual review, while code and rendered states provide stronger evidence for behavior and accessibility.

Does it replace accessibility testing?

No. It helps identify risks, but keyboard, assistive technology, contrast, zoom, and device testing remain necessary.

When should I use the reference design system?

Use it for theme creation or repeated visual inconsistencies after checking the existing tokens and components.

What information improves the review?

Provide the product brief, affected screen or flow, relevant code, target devices, supported themes, and the behavior to verify.

개발자 세부 정보

작성자

shreyam1008

라이선스

MIT

Skillstore 리비전

버전 안내

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

리포지토리

https://github.com/shreyam1008/shre-skills/tree/ba9787f41c2fe1be1062eeb6322bc339a1026383/skills/web-design-guidelines

참조

bbec03cf10354f3aaccd6dd24eda4ac9ceeceac5

유지보수 최신성

2026. 10. 2.

사용량

0 다운로드 · 0 조회

파일 구조

📁 references/

📄 design-system.md

📄 SKILL.md