📦

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-агентов

Используйте эти ссылки, когда AI-агенту, crawler или script нужен чистый контекст вместо полной страницы.

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 • 28.08.2026 Открыть версионный отчет

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.