Skills core-components

📦

core-components

Name: core-components
Author: ChrisWiles

Content revision r1 Safe ⚙️ External commands

Build Consistent Core UI Components

Inconsistent UI components slow product work and create visual drift. This skill guides Claude, Codex, and Claude Code to use shared tokens, layouts, and component patterns.

Supports: Claude Codex Code(CC)

🥉 79 Bronze

Install with my Agent

Copy this request to your Agent. It includes the canonical Skill page and manifest.

Agent request

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.

Your Agent should still show its plan and request any confirmation required by the security policy.

Agent-readable resources

Use these links when an AI agent, crawler, or script needs clean context instead of reading the full page.

Markdown detail GET /skills/chriswiles-core-components.md Signed manifest GET /api/skills/chriswiles-core-components/manifest Signed lockfile GET /api/skills/chriswiles-core-components/lockfile

Test it

Using "core-components". A product screen uses raw View and Text elements with inline padding, color, and font sizes.

Expected outcome:

Recommended update: replace raw layout elements with Box and VStack, map spacing to token values, and use Text color and size tokens. Keep the existing content and behavior unchanged.

Using "core-components". A card component accepts numeric padding and free-form variant strings.

Expected outcome:

Review result: restrict padding to approved token values, document supported variants, and pass visual differences through the Box component.

Using "core-components". A list item layout mixes custom containers, hard-coded borders, and manual icon color values.

Expected outcome:

Suggested pattern: use HStack for the row, VStack for text, semantic border tokens, and a tertiary color token for the icon.

Security Audit

Safe

v8 • 7/6/2026 Open versioned report

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.

Files scanned

265

Lines analyzed

Review items

False positives ignored

Risk Factors

⚙️ External commands (49)

No confirmed security findings were detected by the latest completed static and semantic audit. This does not prove the skill has no side effects.

Audited by: codex View Audit History →

Share & cite this report

Share the versioned assessment report, neutral badge, embed card, and citations. Skillstore reports evidence without deciding whether this Skill is safe.

Open versioned report

Copy report link

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

Markdown badge

[![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 badge

<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>

Embed card

<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>

Academic citations (APA · BibTeX · CFF)

APA citation

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

BibTeX citation

@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"

Compare variants

2 installable variants

Each author remains a separate installable skill. The recommended variant is ranked by Skillstore evidence.

Why this variant is first

Higher Skillstore usage

Author / source Skillstore Score Evidence Confidence Skillstore usage Updated

sickn33 Recommended

sickn33-core-components

Skillstore Score 79

Evidence Confidence High

Skillstore usage 22

Updated

2026-09-09

ChrisWiles Current

chriswiles-core-components

Skillstore Score 79

Evidence Confidence High

Skillstore usage 7

Updated

2026-09-09

Skillstore Score

Why this score Evidence Confidence: High

Architecture

Maintainability

Content

Community

Spec Compliance

What You Can Build

Create Product Screens

Assemble screens with Screen, Box, Stack, Text, Button, Input, and Card patterns.

Review UI Consistency

Check whether components use shared tokens instead of inline styles, raw values, or platform primitives.

Document Component Usage

Turn component examples and token rules into clear guidance for a team wiki or pull request.

Try These Prompts

Use Core Components

Review this UI and replace raw platform components with documented core components where appropriate.

Apply Design Tokens

Refactor this component to use spacing, color, and typography tokens from the core component guidelines.

Design a Form Layout

Create a form layout plan using VStack, Input, Button, validation states, and loading states from the core component patterns.

Audit Component Props

Review this reusable component API for token-based props, variant handling, and anti-patterns against the core component skill.

Best Practices

Start with core layout components before adding custom containers.
Use semantic color and typography tokens for every visible text state.
Document new variants with the same token names and component props used in the skill.

Avoid

Hard-coding spacing, color, or font values when a token exists.
Importing raw platform View or Text components for standard UI.
Adding inline styles that bypass shared component props.

Frequently Asked Questions

Does this skill install a component library?

No. It provides usage guidance for a project that already has core components.

Which tools can use it?

It is documented for Claude, Codex, and Claude Code.

Does it include real source files?

No. The skill contains guidance and TSX examples in SKILL.md only.

Can it help with React Native screens?

Yes. The examples use React Native style component names and TSX patterns.

Does it define every token value?

No. It lists common spacing, color, and typography tokens that the project should already support.

Can it review existing UI code?

Yes. It can compare code against the documented token and component patterns.

Developer Details

Author

ChrisWiles

License

MIT

Skillstore revision

Version notice

The author did not declare a version.

Repository

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

Ref

dd4a3ef9f20ddf38830950b4bb713df96b431fd6

Maintenance freshness

7/20/2026

Usage

4 downloads · 236 views

File structure

📄 SKILL.md