技能 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.

你的智慧代理仍應顯示其計畫，並依安全政策請求必要確認。

Agent 可讀資源

當 AI Agent、爬蟲或腳本需要乾淨脈絡、而不是讀取完整頁面時，請使用這些連結。

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.