Build Consistent CSS Components
CSS styles often drift across components and utility classes. This skill guides semantic class creation, Tailwind composition, dark mode coverage, tests, and refactoring.
Copy this request to your Agent. It includes the canonical Skill page and manifest.
Review the Skillstore skill "css-development" from https://skillstore.io/skills/2389-research-css-development.md and its manifest at https://skillstore.io/api/skills/2389-research-css-development/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.
Use these links when an AI agent, crawler, or script needs clean context instead of reading the full page.
Using "css-development". Create a primary button style with dark mode support.
Expected outcome:
Using "css-development". Review a CSS file before merge.
Expected outcome:
Using "css-development". Refactor repeated utility classes in several components.
Expected outcome:
Static analysis produced many hits because Markdown backticks, CSS examples, and fixed local test snippets were interpreted as executable Ruby, shell, or filesystem behavior. I found no evidence of prompt injection, data exfiltration, network reconnaissance, or dynamic command construction in the reviewed files.
Share the versioned assessment report, neutral badge, embed card, and citations. Skillstore reports evidence without deciding whether this Skill is safe.
https://skillstore.io/skills/2389-research-css-development/audits/6?utm_source=security_passport&utm_medium=share&utm_campaign=versioned_report[](https://skillstore.io/skills/2389-research-css-development?utm_source=security_passport_badge)<a href="https://skillstore.io/skills/2389-research-css-development?utm_source=security_passport_badge"><img src="https://skillstore.io/badges/skills/2389-research-css-development/security.svg" alt="Skillstore security assessment" loading="lazy"></a><iframe src="https://skillstore.io/embed/skills/2389-research-css-development.html" title="Skillstore Security Assessment" sandbox="allow-popups allow-popups-to-escape-sandbox" loading="lazy" referrerpolicy="no-referrer" width="420" height="180"></iframe>2389-research. (2026). css-development security audit report (audit version 6) [Author version unspecified]. Skillstore. https://skillstore.io/skills/2389-research-css-development/audits/6@techreport{2389-research-2389-research-css-development-2026,
author = {2389-research},
title = {css-development security audit report (audit version 6)},
institution = {Skillstore},
year = {2026},
number = {6},
url = {https://skillstore.io/skills/2389-research-css-development/audits/6},
note = {Author version unspecified}
}cff-version: 1.2.0
message: "If you use this Skill, cite its author and this versioned security audit report."
title: "css-development security audit report (audit version 6)"
version: "unspecified"
type: report
authors:
- name: "2389-research"
date-released: "2026-07-06"
url: "https://skillstore.io/skills/2389-research-css-development/audits/6"
identifiers:
- type: other
value: "skillstore:2389-research-css-development:audit:6"
description: "Skillstore immutable audit report identifier"
Add buttons, cards, badges, or form styles with semantic names, dark mode variants, and matching tests.
Review class names, Tailwind composition, documentation, and test coverage before design system changes are merged.
Convert repeated utility combinations into maintainable component classes while preserving behavior and visual output.
Create a semantic CSS component for a primary button. Include Tailwind composition, dark mode variants, usage notes, and test suggestions.
Review my components.css file for semantic naming, Tailwind @apply usage, dark mode coverage, documentation, and missing tests.
Find repeated Tailwind utility patterns in these components and propose semantic classes that preserve the current visual behavior.
Create a staged migration plan from scattered utility classes to semantic CSS components with tests, review checkpoints, and rollback guidance.
Author
2389-researchLicense
MIT
Skillstore revision
r1
Version notice
The author did not declare a version.
Ref
c1fdca50ff516318f65fed0d7f9e82797c5171dc
Maintenance freshness
7/18/2026
Usage
15 downloads · 406 views
Design Distinctive Landing Pages
Generic landing pages fail to earn trust or attention. This skill guides Claude, Codex, and Claude Code through discovery, structure, visual direction, animation, and conversion-focused polish.
Review Code Before Commit
Teams ship bugs when final changes are trusted too quickly. This skill adds a focused pre-commit review for security, logic, business rules, and performance.
Create Tested CSS Components
Teams often add CSS components without consistent naming, dark mode, or tests. This skill guides reuse, Tailwind composition, documentation, and verification.
Build iOS Apps with xtool
SwiftPM iOS projects can be hard to configure without Xcode. This skill gives xtool project setup, extension, resource, entitlement, and troubleshooting guidance.
Refactor CSS Into Semantic Components
Repeated utility classes and inline styles make frontend code harder to maintain. This skill guides Claude, Codex, and Claude Code through semantic CSS refactoring with tests.
Validate CSS Quality Against Project Patterns
CSS reviews can miss naming, dark mode, composition, and test gaps. This skill guides a systematic validation pass with structured findings and fixes.
Analyze Patterns Across Your Codebase
by C0ntr0lledCha0s
Large codebases hide repeated structures and inconsistent decisions. This skill maps design patterns, architecture, conventions, duplication, and anti-patterns with evidence and recommendations.
Search Code by AST Structure
by 0xDarkMatter
Text searches miss semantic relationships and produce noisy matches. This skill uses ast-grep patterns to locate code structures and prepare focused refactors.
Find Code Context Faster
by 89jobrien
Developers often lose time tracing why code exists and what depends on it. This skill prompts Claude, Codex, or Claude Code to gather related graph knowledge, callers, imports, and tests before changes.
Build React Email Templates
by resend
HTML email work is difficult because email clients render styles differently. This skill guides Claude, Codex, and Claude Code through React Email templates, previews, sending, and accessibility.
Implement React View Transitions
by vercel-labs
React view transitions are easy to misplace, causing silent or noisy animations. This skill guides route, Suspense, list, and shared element animation choices.
Improve Vue 3 TypeScript Practices
by hyf0
Vue TypeScript projects often hit confusing template, router, and Volar errors. This skill gives targeted Vue 3 fixes for Codex, Claude, and Claude Code.