web-styling
Style React Interfaces Faster
React teams often repeat styling decisions across components and layouts. This skill provides reusable Tailwind, CSS Modules, CSS-in-JS, theming, animation, and layout patterns.
Install with my Agent
Copy this request to your Agent. It includes the canonical Skill page and manifest.
Review the Skillstore skill "web-styling" from https://skillstore.io/skills/cjharmath-web-styling.md and its manifest at https://skillstore.io/api/skills/cjharmath-web-styling/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 "web-styling". Style a responsive product card with Tailwind CSS.
Expected outcome:
A mobile-first styling plan with spacing, typography, hover states, dark mode colors, and reusable class groups.
Using "web-styling". Create primary, secondary, outline, and danger button variants.
Expected outcome:
A variant matrix covering sizes, states, disabled behavior, class merging, and consistent interaction styling.
Using "web-styling". Plan a theme system for a React dashboard.
Expected outcome:
A concise token strategy for colors, spacing, CSS variables, dark mode mapping, and component file organization.
Security Audit
SafeAll static findings are false positives caused by Markdown code fences, JavaScript template literals, styled-components CSS templates, inline code formatting, and CSS Grid terminology. No evidence found of prompt injection, data exfiltration, command execution, filesystem access, network access, or system reconnaissance intent in SKILL.md.
Risk Factors
⚙️ External commands (42)
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/cjharmath-web-styling/audits/7?utm_source=security_passport&utm_medium=share&utm_campaign=versioned_reportMarkdown badge
[](https://skillstore.io/skills/cjharmath-web-styling?utm_source=security_passport_badge)HTML badge
<a href="https://skillstore.io/skills/cjharmath-web-styling?utm_source=security_passport_badge"><img src="https://skillstore.io/badges/skills/cjharmath-web-styling/security.svg" alt="Skillstore security assessment" loading="lazy"></a>Embed card
<iframe src="https://skillstore.io/embed/skills/cjharmath-web-styling.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
CJHarmath. (2026). web-styling security audit report (audit version 7) [Author version unspecified]. Skillstore. https://skillstore.io/skills/cjharmath-web-styling/audits/7BibTeX citation
@techreport{cjharmath-cjharmath-web-styling-2026,
author = {CJHarmath},
title = {web-styling security audit report (audit version 7)},
institution = {Skillstore},
year = {2026},
number = {7},
url = {https://skillstore.io/skills/cjharmath-web-styling/audits/7},
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: "web-styling security audit report (audit version 7)"
version: "unspecified"
type: report
authors:
- name: "CJHarmath"
date-released: "2026-07-06"
url: "https://skillstore.io/skills/cjharmath-web-styling/audits/7"
identifiers:
- type: other
value: "skillstore:cjharmath-web-styling:audit:7"
description: "Skillstore immutable audit report identifier"
Skillstore Score
Why this score Evidence Confidence: HighWhat You Can Build
Build reusable React components
Create buttons, cards, modals, and layout primitives with consistent variants and responsive classes.
Document a design system
Standardize spacing, color tokens, dark mode values, and component styling conventions.
Ship polished product screens
Apply proven styling patterns quickly without creating a custom styling architecture from scratch.
Try These Prompts
Create styling guidance for a React component named [component]. Use Tailwind CSS, responsive spacing, hover states, and dark mode support.
Review these React styling requirements and propose a reusable variant pattern using clsx, tailwind-merge, or cva. Explain when each option fits.
Design a React theming approach for [product]. Include color tokens, spacing tokens, CSS variables, dark mode behavior, and file organization.
Audit this React styling approach for maintainability. Identify duplicated patterns, token gaps, responsive issues, animation concerns, and migration steps.
Best Practices
- Use mobile-first responsive rules and keep layout constraints explicit.
- Centralize design tokens, variant definitions, and dark mode values.
- Use class merge helpers when components accept external class overrides.
Avoid
- Duplicating long variant class strings across multiple components.
- Mixing arbitrary colors and spacing without shared design tokens.
- Adding animations without state rules, motion limits, or fallback behavior.