技能 core-components

📦

core-components

Name: core-components
Author: ChrisWiles

內容修訂 r1 安全 ⚙️ 外部命令

建置一致的核心 UI 元件

不一致的 UI 元件會拖慢產品工作並造成視覺漂移。此技能會引導 Claude、Codex 和 Claude Code 使用共用權杖、版面配置與元件模式。

支援: Claude Codex Code(CC)

🥉 79 銅級

Maintain this Skill? Claim it 🥉 79 銅級

使用我的智慧代理安裝

將此請求複製給你的智慧代理，其中包含權威 Skill 頁面和清單。

智能體請求

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

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

Agent 可讀資源

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

Markdown 詳情 GET /skills/chriswiles-core-components.md 已簽名 manifest GET /api/skills/chriswiles-core-components/manifest 已簽名 lockfile GET /api/skills/chriswiles-core-components/lockfile

測試它

正在使用「core-components」。產品畫面使用原始 View 和 Text 元素，並搭配 inline padding、color 和 font sizes。

預期結果:

建議更新：將原始版面元素替換為 Box 和 VStack，將間距對應到權杖值，並使用 Text color 和 size 權杖。保持現有內容與行為不變。

正在使用「core-components」。 Card 元件接受數字 padding 和自由格式的 variant 字串。

預期結果:

審查結果：將 padding 限制為核准的權杖值，記錄支援的 variants，並透過 Box 元件傳遞視覺差異。

正在使用「core-components」。列表項目版面配置混合使用自訂容器、硬編碼邊框和手動圖示顏色值。

預期結果:

建議模式：使用 HStack 作為列、VStack 作為文字區塊、語意化邊框權杖，並為圖示使用 tertiary color 權杖。

安全審計

安全

v8 • 2026/7/6 開啟版本化報告

All 49 static external-command findings are false positives caused by Markdown backticks in TSX examples and token tables. SKILL.md contains documentation-only design system guidance, with no shell commands, Ruby execution, network behavior, file operations, or prompt-injection language found.

已掃描檔案

265

分析行數

複核項目

已忽略的誤報

風險因素

⚙️ 外部命令 (49)

最近一次完成的靜態與語意稽核未偵測到已確認的安全發現。這並不能證明該 Skill 沒有副作用。

審計單位: codex 檢視審計紀錄 →

分享與引用此報告

分享版本化評估報告、中性徽章、嵌入卡片與引用。Skillstore 只報告證據，不判斷該 Skill 是否安全。

開啟版本化報告

複製報告連結

https://skillstore.io/skills/chriswiles-core-components/audits/8?utm_source=security_passport&utm_medium=share&utm_campaign=versioned_report

Markdown 徽章

[![Skillstore security assessment](https://skillstore.io/badges/skills/chriswiles-core-components/security.svg)](https://skillstore.io/skills/chriswiles-core-components?utm_source=security_passport_badge)

HTML 徽章

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

嵌入卡片

<iframe src="https://skillstore.io/embed/skills/chriswiles-core-components.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 引用

ChrisWiles. (2026). core-components security audit report (audit version 8) [Author version unspecified]. Skillstore. https://skillstore.io/skills/chriswiles-core-components/audits/8

BibTeX 引用

@techreport{chriswiles-chriswiles-core-components-2026,
  author = {ChrisWiles},
  title = {core-components security audit report (audit version 8)},
  institution = {Skillstore},
  year = {2026},
  number = {8},
  url = {https://skillstore.io/skills/chriswiles-core-components/audits/8},
  note = {Author version unspecified}
}

CITATION.cff

cff-version: 1.2.0
message: "If you use this Skill, cite its author and this versioned security audit report."
title: "core-components security audit report (audit version 8)"
version: "unspecified"
type: report
authors:
  - name: "ChrisWiles"
date-released: "2026-07-06"
url: "https://skillstore.io/skills/chriswiles-core-components/audits/8"
identifiers:
  - type: other
    value: "skillstore:chriswiles-core-components:audit:8"
    description: "Skillstore immutable audit report identifier"

比較變體

2 個可安裝變體

每位作者的技能都保留為獨立的可安裝項目。推薦變體依 Skillstore 證據排序。

為何此變體排名第一

Skillstore 使用量較高

作者 / 來源 Skillstore 評分證據置信度 Skillstore 使用量已更新

sickn33 推薦

sickn33-core-components

Skillstore 評分 79

證據置信度高

Skillstore 使用量 26

已更新

2026-09-09

ChrisWiles 目前

chriswiles-core-components

Skillstore 評分 79

證據置信度高

Skillstore 使用量 11

已更新

2026-09-09

Skillstore 評分

評分依據證據置信度: 高

架構

可維護性

內容

社群

規範符合度

你可以打造什麼

建立產品畫面

使用 Screen、Box、Stack、Text、Button、Input 和 Card 模式組合畫面。

審查 UI 一致性

檢查元件是否使用共用權杖，而不是 inline styles、原始值或平台 primitives。

記錄元件用法

將元件範例和權杖規則轉換為團隊 wiki 或 pull request 的清楚指引。

試試這些提示

使用核心元件

審查此 UI，並在適當之處將原始平台元件替換為文件記載的核心元件。

套用設計權杖

重構此元件，改用核心元件指南中的間距、顏色和排版權杖。

設計表單版面配置

使用核心元件模式中的 VStack、Input、Button、驗證狀態和載入狀態，建立表單版面配置計畫。

稽核元件 Props

根據核心元件技能，審查此可重用元件 API 的權杖式 props、variant 處理方式和反模式。

最佳實務

先使用核心版面配置元件，再加入自訂容器。
為每個可見文字狀態使用語意化顏色和排版權杖。
使用技能中相同的權杖名稱和元件 props 記錄新的 variants。

避免

在已有權杖時硬編碼間距、顏色或字型值。
為標準 UI 匯入原始平台 View 或 Text 元件。
加入會繞過共用元件 props 的 inline styles。

常見問題

此技能會安裝元件庫嗎？

不會。它為已經具備核心元件的專案提供用法指引。

哪些工具可以使用它？

它記錄為可用於 Claude、Codex 和 Claude Code。

它包含實際原始檔案嗎？

不會。此技能只在 SKILL.md 中包含指引和 TSX 範例。

它能協助 React Native 畫面嗎？

可以。範例使用 React Native 樣式的元件名稱和 TSX 模式。

它會定義每個權杖值嗎？

不會。它列出專案應已支援的常見間距、顏色和排版權杖。

它可以審查現有 UI 程式碼嗎？

可以。它可以將程式碼與文件記載的權杖和元件模式進行比較。

開發者詳細資訊

作者

ChrisWiles

授權

MIT

Skillstore 修訂

版本提示

作者未聲明版本。

儲存庫

https://github.com/ChrisWiles/claude-code-showcase/tree/main/.claude/skills/core-components

引用

dd4a3ef9f20ddf38830950b4bb713df96b431fd6

維護新鮮度

2026/7/18

使用量

4 次下載 · 236 次瀏覽

檔案結構

建置 Expo DOM 元件

由 expo

Expo 團隊常常需要在原生應用程式中使用網頁函式庫，而不想重新編寫它們。這項技能會引導 Claude、Codex 和 Claude Code 採用安全的 DOM 元件模式。

程式開發查看

core-components

使用我的智慧代理安裝

Agent 可讀資源

測試它

安全審計

風險因素

複製報告連結

Markdown 徽章

HTML 徽章

嵌入卡片

APA 引用

BibTeX 引用

CITATION.cff

比較變體

Skillstore 評分

你可以打造什麼

建立產品畫面

審查 UI 一致性

記錄元件用法

試試這些提示

最佳實務

避免

常見問題

開發者詳細資訊

ChrisWiles 的更多技能

systematic-debugging

react-ui-patterns

formik-patterns

testing-patterns

graphql-schema

相關技能

tamagui-best-practices

vercel-react-native-skills

styling-with-shadcn

expo-tailwind-setup

expo-dev-client

use-dom