core-components
Build Consistent Token-Based UI Components
Hard-coded styles and raw platform elements create inconsistent interfaces. This skill applies reusable design tokens, core components, and established layout patterns.
Install with my Agent
Copy this request to your Agent. It includes the canonical Skill page and manifest.
Review the Skillstore skill "core-components" from https://skillstore.io/skills/sickn33-core-components.md and its manifest at https://skillstore.io/api/skills/sickn33-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.
Test it
Using "core-components". Replace hard-coded profile card styling with core components.
Expected outcome:
- Use Card as the content container with approved padding and gap tokens.
- Place the avatar and identity details in horizontal and vertical stack components.
- Use semantic text and border tokens instead of literal colors and dimensions.
Using "core-components". Review a checkout form for design system issues.
Expected outcome:
The review identifies raw views, inline spacing, literal colors, and an untracked button style. It recommends stack, Input, and Button replacements.
Using "core-components". Define a reusable notification card.
Expected outcome:
The proposed contract limits spacing and visual variants to approved values, supports composable content, and includes explicit loading, disabled, and error states.
Security Audit
SafeAll 49 static findings are false positives caused by Markdown code fences and inline code formatting in SKILL.md. The file contains documentation and TSX examples, with no shell commands, Ruby execution, prompt injection, or other malicious intent.
Risk Factors
⚙️ External commands (49)
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.
Copy report link
https://skillstore.io/skills/sickn33-core-components/audits/5?utm_source=security_passport&utm_medium=share&utm_campaign=versioned_reportMarkdown badge
[](https://skillstore.io/skills/sickn33-core-components?utm_source=security_passport_badge)HTML badge
<a href="https://skillstore.io/skills/sickn33-core-components?utm_source=security_passport_badge"><img src="https://skillstore.io/badges/skills/sickn33-core-components/security.svg" alt="Skillstore security assessment" loading="lazy"></a>Embed card
<iframe src="https://skillstore.io/embed/skills/sickn33-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
sickn33. (2026). core-components security audit report (audit version 5) [Author version unspecified]. Skillstore. https://skillstore.io/skills/sickn33-core-components/audits/5BibTeX citation
@techreport{sickn33-sickn33-core-components-2026,
author = {sickn33},
title = {core-components security audit report (audit version 5)},
institution = {Skillstore},
year = {2026},
number = {5},
url = {https://skillstore.io/skills/sickn33-core-components/audits/5},
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 5)"
version: "unspecified"
type: report
authors:
- name: "sickn33"
date-released: "2026-07-23"
url: "https://skillstore.io/skills/sickn33-core-components/audits/5"
identifiers:
- type: other
value: "skillstore:sickn33-core-components:audit:5"
description: "Skillstore immutable audit report identifier"
Compare variants
2 installable variantsEach author remains a separate installable skill. The recommended variant is ranked by Skillstore evidence.
Why this variant is first
sickn33-core-components
2026-08-21
chriswiles-core-components
2026-08-21
Skillstore Score
Why this score Evidence Confidence: HighWhat You Can Build
Standardize Product Screens
Convert inconsistent screen layouts into shared components with approved spacing, color, and typography tokens.
Review Design System Adoption
Identify raw platform elements, inline styles, and hard-coded values that bypass the component library.
Define Reusable Component APIs
Create typed component props that accept approved tokens and controlled visual variants.
Try These Prompts
Refactor this UI to use core components and design tokens: {{ui_snippet}}. Preserve its current layout and behavior.Create a form for {{fields}} using stack layouts, token spacing, validated inputs, and a loading submit button.Review {{screen_code}} for raw components, inline styles, hard-coded values, and inconsistent variants. Recommend specific core-component replacements.Define a typed {{component_name}} API using approved tokens, controlled variants, accessibility states, and composable children. Explain each design decision.Best Practices
- Confirm available tokens and component props before applying the examples.
- Preserve loading, disabled, validation, and interaction behavior during refactoring.
- Test accessibility, responsiveness, and visual consistency in the target application.
Avoid
- Do not replace project-specific APIs with assumed component names.
- Do not hard-code spacing, color, or typography values when approved tokens exist.
- Do not use raw platform components when the core library provides an equivalent.