Skills frontend-mobile-development-component-scaffold
📦
frontend-mobile-development-component-scaffold
Content revision r2 Safe ⚙️ External commands
Scaffold Accessible React Components
Building consistent component files across web and native projects takes repeated design work. This skill structures components, types, styles, tests, stories, and exports.
Supports: Claude Codex Code(CC)
Install with my Agent
Copy this request to your Agent. It includes the canonical Skill page and manifest.
Agent request
Review the Skillstore skill "frontend-mobile-development-component-scaffold" from https://skillstore.io/skills/sickn33-frontend-mobile-development-component-scaffold.md and its manifest at https://skillstore.io/api/skills/sickn33-frontend-mobile-development-component-scaffold/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 "frontend-mobile-development-component-scaffold". Create an accessible TypeScript status badge with CSS Modules.
Expected outcome:
- A typed StatusBadge component with status and label properties.
- A CSS Module with visual variants and stable layout rules.
- Rendering and accessibility test scenarios.
- A barrel export for simple imports.
Using "frontend-mobile-development-component-scaffold". Scaffold a React Native profile card with an action.
Expected outcome:
- A typed ProfileCard using native views, text, and a suitable press control.
- StyleSheet definitions for container, content, and action states.
- Tests covering content rendering and the action callback.
Using "frontend-mobile-development-component-scaffold". Create a Storybook-ready filter panel.
Expected outcome:
A component file, prop types, styles, interaction tests, default and interactive stories, and a clean export entry.
Security Audit
Safev5 • 7/23/2026 Open versioned report
All 46 external-command matches are TypeScript template literals or Markdown code fences, with no command runner or shell invocation. The array join is ordinary source generation, and no prompt injection or malicious intent was found.
1
Files scanned
412
Lines analyzed
0
Review items
0
False positives ignored
Risk Factors
⚙️ External commands (46)
SKILL.md:35-68 SKILL.md:68-72 SKILL.md:72-98 SKILL.md:98-105 SKILL.md:105-120 SKILL.md:120-121 SKILL.md:121-124 SKILL.md:124-128 SKILL.md:128-131 SKILL.md:131-136 SKILL.md:136 SKILL.md:143-144 SKILL.md:144-145 SKILL.md:145-150 SKILL.md:150-151 SKILL.md:151-152 SKILL.md:152 SKILL.md:153-157 SKILL.md:157-159 SKILL.md:159-160 SKILL.md:160-166 SKILL.md:166-169 SKILL.md:169-170 SKILL.md:170-171 SKILL.md:171-174 SKILL.md:174-178 SKILL.md:178-181 SKILL.md:192 SKILL.md:222-236 SKILL.md:236-240 SKILL.md:240-243 SKILL.md:249 SKILL.md:262-271 SKILL.md:279-291 SKILL.md:291-295 SKILL.md:295-299 SKILL.md:318-322 SKILL.md:325-330 SKILL.md:332-337 SKILL.md:338-342 SKILL.md:347-350 SKILL.md:350-354 SKILL.md:354-357 SKILL.md:366 SKILL.md:375 SKILL.md:384-395
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.
Copy report link
https://skillstore.io/skills/sickn33-frontend-mobile-development-component-scaffold/audits/5?utm_source=security_passport&utm_medium=share&utm_campaign=versioned_reportMarkdown badge
[](https://skillstore.io/skills/sickn33-frontend-mobile-development-component-scaffold?utm_source=security_passport_badge)HTML badge
<a href="https://skillstore.io/skills/sickn33-frontend-mobile-development-component-scaffold?utm_source=security_passport_badge"><img src="https://skillstore.io/badges/skills/sickn33-frontend-mobile-development-component-scaffold/security.svg" alt="Skillstore security assessment" loading="lazy"></a>Embed card
<iframe src="https://skillstore.io/embed/skills/sickn33-frontend-mobile-development-component-scaffold.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). frontend-mobile-development-component-scaffold security audit report (audit version 5) [Author version unspecified]. Skillstore. https://skillstore.io/skills/sickn33-frontend-mobile-development-component-scaffold/audits/5BibTeX citation
@techreport{sickn33-sickn33-frontend-mobile-development-component-scaffold-2026,
author = {sickn33},
title = {frontend-mobile-development-component-scaffold security audit report (audit version 5)},
institution = {Skillstore},
year = {2026},
number = {5},
url = {https://skillstore.io/skills/sickn33-frontend-mobile-development-component-scaffold/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: "frontend-mobile-development-component-scaffold security audit report (audit version 5)"
version: "unspecified"
type: report
authors:
- name: "sickn33"
date-released: "2026-07-23"
url: "https://skillstore.io/skills/sickn33-frontend-mobile-development-component-scaffold/audits/5"
identifiers:
- type: other
value: "skillstore:sickn33-frontend-mobile-development-component-scaffold:audit:5"
description: "Skillstore immutable audit report identifier"
Skillstore Score
Why this score Evidence Confidence: High 55
Architecture
85
Maintainability
87
Content
68
Community
83
Spec Compliance
What You Can Build
Create a Design System Component
Define a typed, styled, tested component with stories and accessibility behavior.
Start a React Native Feature
Produce a consistent native component structure with props, styles, and test guidance.
Standardize Team Scaffolding
Turn component requirements into a repeatable file set for team review.
Try These Prompts
Basic Web Component
Create a TypeScript React Button with label, disabled, and onClick props. Use CSS Modules and include a basic test.
Accessible Form Control
Scaffold an accessible EmailField component with validation states, helper text, CSS Modules, Testing Library tests, and Storybook stories.
React Native Data Card
Create a React Native ProfileCard with typed data, loading and error states, press handling, StyleSheet styles, and interaction tests.
Universal Component Architecture
Design a universal SearchPanel for web and native. Separate shared logic, define platform adapters, include accessibility behavior, tests, stories, and export structure.
Best Practices
- Provide explicit props, states, platform targets, and styling requirements before generation.
- Review generated accessibility semantics against actual interactions and content.
- Run formatting, type checking, tests, and Storybook within the target project.
Avoid
- Do not accept placeholder component content as a completed implementation.
- Do not copy project aliases, hooks, or dependencies without confirming they exist.
- Do not reuse web roles and interactions on React Native without platform review.
Frequently Asked Questions
Does this skill write files automatically?
It describes component and supporting file content. Actual file creation depends on the connected coding tool and user request.
Which platforms does it cover?
It covers React for web, React Native, and planning for universal components.
Which styling options are supported?
The documented patterns cover CSS Modules, styled-components, Tailwind, and React Native StyleSheet.
Does it generate tests?
It outlines Testing Library tests for rendering, content, callbacks, and accessibility checks.
Are generated components production-ready?
They are structured starting points. Project-specific behavior, dependencies, accessibility, and tests still require validation.
Can it create Storybook stories?
Yes. It provides default and interactive story patterns with controls derived from component props.