스킬 ui-styling

📦

ui-styling

Name: ui-styling
Author: nextlevelbuilder

v1.0.0 콘텐츠 리비전 r1 안전 ⚡ 스크립트 포함🔑 환경 변수🌐 네트워크 접근⚙️ 외부 명령어

Build Accessible Tailwind Interfaces

Building consistent, responsive interfaces requires many component, styling, and accessibility decisions. This skill provides shadcn/ui patterns, Tailwind guidance, and focused automation.

지원: Claude Codex Code(CC)

🥇 83 골드

Maintain this Skill? Claim it 🥇 83 골드

내 에이전트로 설치

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

에이전트 요청

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

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

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

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

Markdown 상세 GET /skills/nextlevelbuilder-ui-styling.md 서명된 manifest GET /api/skills/nextlevelbuilder-ui-styling/manifest 서명된 lockfile GET /api/skills/nextlevelbuilder-ui-styling/lockfile

테스트해 보기

"ui-styling" 사용 중입니다. Create an accessible account settings form that works on mobile and desktop.

예상 결과:

A responsive form structure using labeled shadcn/ui controls.
Inline validation, focus management, disabled states, and clear submission feedback.
A single-column mobile layout that becomes a structured desktop settings view.

"ui-styling" 사용 중입니다. Define a dark mode theme for a data-heavy analytics product.

예상 결과:

Semantic tokens for surfaces, text, borders, status colors, and chart accents.
Dark mode values with readable contrast and restrained elevation.
Guidance for tables, filters, dialogs, focus rings, and selected states.

"ui-styling" 사용 중입니다. Improve a card grid that overflows on small screens.

예상 결과:

A mobile-first grid plan with stable gaps, constrained content, responsive columns, and long-text handling.

보안 감사

안전

v1 • 2026. 8. 28. 버전별 보고서 열기

Most alerts are false matches in font licenses, Markdown, examples, tests, and structured coverage data. Two findings are confirmed because shadcn_add.py invokes npx with project-sourced version data and unvalidated component arguments. No prompt injection or data-exfiltration intent was found.

스캔된 파일

7,449

분석된 줄 수

검토 항목

오탐 무시됨

기능 검토 항목 (2)

이 스킬에 대해 예상될 수 있는 실제 로컬 기능이므로 검토가 필요하지만, 확인된 악의적 동작으로는 집계되지 않습니다.

높음

scripts/shadcn_add.py:126

Python subprocess.run

result = subprocess.run(

The installer invokes npx to execute shadcn and modify the target project. It avoids a shell, but project-sourced version data and unvalidated component arguments create package and option-injection risk.

높음

scripts/shadcn_add.py:172

Python subprocess.run

result = subprocess.run(

위험 요인

⚡ 스크립트 포함 (4)

references/shadcn-accessibility.md:467 scripts/tailwind_config_gen.py:231 scripts/tailwind_config_gen.py:208 scripts/tailwind_config_gen.py:242

🔑 환경 변수 (3)

references/shadcn-accessibility.md:466 references/shadcn-accessibility.md:466 scripts/shadcn_add.py:55

🌐 네트워크 접근 (9)

references/shadcn-components.md:411 SKILL.md:17 SKILL.md:18 SKILL.md:319 SKILL.md:320 SKILL.md:321 SKILL.md:322 SKILL.md:323 SKILL.md:324

⚙️ 외부 명령어 (48)

감사자: codex

이 보고서 공유 및 인용

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

버전별 보고서 열기

보고서 링크 복사

https://skillstore.io/skills/nextlevelbuilder-ui-styling/audits/1?utm_source=security_passport&utm_medium=share&utm_campaign=versioned_report

Markdown 배지

[![Skillstore security assessment](https://skillstore.io/badges/skills/nextlevelbuilder-ui-styling/security.svg)](https://skillstore.io/skills/nextlevelbuilder-ui-styling?utm_source=security_passport_badge)

HTML 배지

<a href="https://skillstore.io/skills/nextlevelbuilder-ui-styling?utm_source=security_passport_badge"><img src="https://skillstore.io/badges/skills/nextlevelbuilder-ui-styling/security.svg" alt="Skillstore security assessment" loading="lazy"></a>

임베드 카드

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

nextlevelbuilder. (2026). ui-styling security audit report (audit version 1) [Author version 1.0.0]. Skillstore. https://skillstore.io/skills/nextlevelbuilder-ui-styling/audits/1

BibTeX 인용

@techreport{nextlevelbuilder-nextlevelbuilder-ui-styling-2026,
  author = {nextlevelbuilder},
  title = {ui-styling security audit report (audit version 1)},
  institution = {Skillstore},
  year = {2026},
  number = {1},
  url = {https://skillstore.io/skills/nextlevelbuilder-ui-styling/audits/1},
  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: "ui-styling security audit report (audit version 1)"
version: "1.0.0"
type: report
authors:
  - name: "nextlevelbuilder"
date-released: "2026-08-28"
url: "https://skillstore.io/skills/nextlevelbuilder-ui-styling/audits/1"
identifiers:
  - type: other
    value: "skillstore:nextlevelbuilder-ui-styling:audit:1"
    description: "Skillstore immutable audit report identifier"

Skillstore 점수

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

아키텍처

100

유지보수성

콘텐츠

커뮤니티

사양 준수

만들 수 있는 것

Build a Product Dashboard

Create responsive dashboard layouts with accessible cards, tables, filters, dialogs, and clear loading states.

Standardize Interface Tokens

Define colors, spacing, typography, breakpoints, component variants, and dark mode across an application.

Translate Designs into Components

Turn interface requirements into reusable shadcn/ui compositions with responsive Tailwind styling and accessibility behavior.

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

Style One Component

Style a [component] with shadcn/ui and Tailwind. Include accessible states, responsive behavior, and a concise explanation of key choices.

Build a Responsive Layout

Create a mobile-first [page type] for [framework]. Use shadcn/ui, define breakpoint behavior, and include loading, empty, error, and success states.

Create a Theme System

Design a Tailwind theme for [brand]. Define semantic color tokens, typography, spacing, dark mode, focus styles, and component variant guidance.

Audit and Refactor an Interface

Review the provided interface for accessibility, responsive layout, theme consistency, and component composition. Prioritize issues, then propose focused shadcn/ui and Tailwind changes.

모범 사례

Start with semantic HTML and accessible component behavior before visual refinement.
Use shared tokens and responsive constraints instead of isolated values and viewport-specific fixes.
Test keyboard navigation, focus visibility, contrast, reduced motion, and content overflow at representative sizes.

피하기

Do not remove focus indicators or rely on color alone to communicate state.
Do not build class names dynamically when Tailwind cannot discover them during compilation.
Do not run the component installer without reviewing the resolved command and expected file changes.