📦

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 ゴールド

自分のエージェントでインストール

このリクエストをエージェントにコピーしてください。正規の 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.