📦
design-system
82Build Consistent Design Systems and Slides
Inconsistent tokens and components make design handoffs difficult. This skill structures tokens, validates usage, and generates brand-aligned presentation assets.
디자인 및 크리에이티브 보기
스킬 ui-styling
📦
ui-styling
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)
내 에이전트로 설치
이 요청을 에이전트에 복사하세요. 공식 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 에이전트, 크롤러, 스크립트가 전체 페이지 대신 정리된 컨텍스트만 필요할 때 이 링크를 사용하세요.
테스트해 보기
"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.
43
스캔된 파일
7,449
분석된 줄 수
2
검토 항목
0
오탐 무시됨
기능 검토 항목 (2)
이 스킬에 대해 예상될 수 있는 실제 로컬 기능이므로 검토가 필요하지만, 확인된 악의적 동작으로는 집계되지 않습니다.
높음
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.
높음
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.
위험 요인
⚡ 스크립트 포함 (4)
🔑 환경 변수 (3)
🌐 네트워크 접근 (9)
⚙️ 외부 명령어 (48)
scripts/shadcn_add.py:126 scripts/shadcn_add.py:172 scripts/tests/test_shadcn_add.py:130 scripts/tests/test_shadcn_add.py:156 scripts/tests/test_shadcn_add.py:180 scripts/tests/test_shadcn_add.py:193 scripts/tests/test_shadcn_add.py:221 scripts/tests/test_tailwind_config_gen.py:391 scripts/tests/test_tailwind_config_gen.py:343 scripts/tests/test_tailwind_config_gen.py:357 scripts/tests/test_tailwind_config_gen.py:358 scripts/tests/test_tailwind_config_gen.py:364 scripts/tests/test_tailwind_config_gen.py:376 SKILL.md:61-63 SKILL.md:63-68 SKILL.md:68-70 SKILL.md:70-73 SKILL.md:73-94 SKILL.md:94-99 SKILL.md:99-101 SKILL.md:101-103 SKILL.md:103-107 SKILL.md:107-109 SKILL.md:109-112 SKILL.md:112-118 SKILL.md:118-131 SKILL.md:131-144 SKILL.md:144-157 SKILL.md:157-171 SKILL.md:171-185 SKILL.md:185-200 SKILL.md:200-217 SKILL.md:217-219 SKILL.md:219-223 SKILL.md:223-225 SKILL.md:225-243 SKILL.md:243-244 SKILL.md:244-245 SKILL.md:245-248 SKILL.md:248-249 SKILL.md:249-250 SKILL.md:250-253 SKILL.md:253-256 SKILL.md:256-257 SKILL.md:257-262 SKILL.md:262-298 SKILL.md:298-301 SKILL.md:301-315
감사자: codex
이 보고서 공유 및 인용
버전이 지정된 평가 보고서, 중립 배지, 임베드 카드 및 인용을 공유하세요. Skillstore는 근거를 보고하지만 이 Skill의 안전 여부를 판단하지 않습니다.
보고서 링크 복사
https://skillstore.io/skills/nextlevelbuilder-ui-styling/audits/1?utm_source=security_passport&utm_medium=share&utm_campaign=versioned_reportMarkdown 배지
[](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/1BibTeX 인용
@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 점수
이 점수의 이유 증거 신뢰도: 중간 68
아키텍처
100
유지보수성
87
콘텐츠
65
커뮤니티
83
사양 준수
만들 수 있는 것
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.
자주 묻는 질문
Which frameworks are supported?
The guidance primarily supports React frameworks such as Next.js, Vite, Remix, and Astro, with Tailwind patterns useful elsewhere.
Does this skill require shadcn/ui?
No. Tailwind layout, responsive design, theming, and accessibility guidance can be used without shadcn/ui.
Can it add components automatically?
Yes. The included Python installer wraps npx shadcn, requires an initialized project, and should be reviewed before execution.
Can it generate Tailwind configuration?
Yes. The configuration tool supports framework paths, colors, fonts, spacing, breakpoints, and recommended plugins.
Does it guarantee accessibility compliance?
No. It provides implementation patterns, but compliance requires testing with browsers, keyboards, assistive technology, and relevant standards.
Does it create finished visual assets?
It provides canvas-oriented design guidance and interface patterns, but it does not include a renderer or image generation engine.
개발자 세부 정보
작성자
nextlevelbuilder라이선스
MIT
작성자 버전
v1.0.0
Skillstore 리비전
r1
참조
89613548345e4e98d3b0c991f1e1b691989513cb
유지보수 최신성
2026. 8. 28.
사용량
1 다운로드 · 0 조회
nextlevelbuilder의 다른 스킬
전체 보기📦
slides
77Create Strategic HTML Presentations
Building persuasive, responsive presentations requires coordinated structure, design, copy, and data visualization. This skill turns a topic and audience brief into a complete HTML deck.
디자인 및 크리에이티브 보기
📦
ui-ux-pro-max
76Mejorar los flujos de trabajo de diseño UI y UX
El trabajo de interfaces a menudo necesita estilo consistente, accesibilidad y orientación específica para el stack. Esta habilidad proporciona a Claude, Codex y Claude Code una referencia UI/UX consultable para planificar, crear y revisar diseños.
디자인 및 크리에이티브 보기
📦
ckm-brand
74Crear directrices de marca y flujos de trabajo de activos
El trabajo de marca a menudo se desvía entre voz, elementos visuales, activos y design tokens. Esta skill ayuda a Claude, Codex y Claude Code a crear, revisar y aplicar sistemas de marca coherentes.
디자인 및 크리에이티브 보기
📦
brand
74Build consistent brand guidelines and assets
Brand work can become inconsistent across content, assets, and interfaces. This skill provides structured guidance, validation, and token synchronization to keep brand decisions aligned.
디자인 및 크리에이티브 보기
📦
ckm-slides
69Crear presentaciones HTML estratégicas
Los equipos de presentaciones necesitan decks persuasivos que combinen narrativa, maquetación y gráficos. Esta habilidad guía a Claude, Codex y Claude Code para producir diapositivas HTML responsivas.
디자인 및 크리에이티브 보기
관련 스킬
전체 보기📦
ui-ux-designer
79Diseñar Interfaces de Producto Accesibles
작성자 sickn33
Los equipos suelen tener dificultades para convertir las necesidades de los usuarios en interfaces coherentes y accesibles. Esta skill guía la investigación, los flujos, los sistemas de diseño, los tokens y el traspaso.
디자인 및 크리에이티브 보기
📦
uiux-ops
79Mejorar las operaciones de diseño UI/UX
작성자 A-Genno
El trabajo de UI/UX a menudo se desvía cuando los equipos carecen de principios compartidos y hábitos de revisión. Esta skill proporciona a Claude, Codex y Claude Code una lista de verificación concisa para las decisiones de diseño.
디자인 및 크리에이티브 보기
📦
web-accessibility
82Auditar la accesibilidad web para el cumplimiento de WCAG
작성자 89jobrien
Las brechas de accesibilidad pueden bloquear a los usuarios y crear riesgos de cumplimiento. Esta habilidad guía auditorías WCAG, comprobaciones con lectores de pantalla, pruebas de teclado y planificación de remediación.
디자인 및 크리에이티브 보기
📦
shape
81Planificar la UX antes de construir
작성자 pbakaus
Los equipos a menudo construyen interfaces antes de aclarar los objetivos, estados y restricciones del usuario. Esta skill guía el descubrimiento y produce un brief de diseño para la implementación.
디자인 및 크리에이티브 보기
📦
ux-designer
80Mejora la UX con orientación de diseño basada en investigación
작성자 shubhamsaboo
Los equipos suelen diseñar flujos a partir de suposiciones y pasan por alto problemas de accesibilidad. Esta skill guía la investigación, la estructura, el diseño de interacción y la revisión usando mejores prácticas de UX.
디자인 및 크리에이티브 보기
📦
ui-design
80Diseñar prototipos de UI distintivos
작성자 tencentcloudbase
Las interfaces de IA genéricas a menudo carecen de dirección visual y de detalles adaptados a la plataforma. Esta habilidad guía a Claude, Codex y Claude Code para definir la intención de diseño antes de crear prototipos.
디자인 및 크리에이티브 보기