css-development-create-component SKILL.md skillA
css-development-create-component from aiskillstore/marketplace is an agent skill: a SKILL.md folder an AI agent loads when a task calls for it.
mdr add aiskillstore/marketplace/css-development-create-component@git:20260113.222b7dePins git:20260113.222b7de in mdr.lock. Pin the fingerprint instead.
- Audit grade
- A, 17 of 17 checks passed
- Kind
- SKILL.md skill
- Repository
- aiskillstore/marketplace
- Path
skills/2389-research/css-development-create-component/SKILL.md- Versions recorded
- 1
- Latest version
- git:20260113.222b7de, committed Jan 13, 2026
- Size
- 10,962 bytes
- Repository stars
- 471
- License
- none declared
This skill should be used when creating new styled components or adding new CSS classes. Triggers on "create component", "new button", "new card", "add styles", "style component", "build UI element". Guides semantic naming, Tailwind composition, dark mode support, and test coverage.
Collected from public GitHub. Every version is saved exactly as it was and never changes. Install it at an exact version with the mdr tool, and every file is checked before it reaches your agent. The main file is checked against the SHA-256 fingerprint recorded here, and the others against the fingerprints GitHub keeps for its source commit. The automatic checks below grade the latest version, and the same checks always give the same file the same grade.
What the file says
# CSS Development: Create Component ## Overview Guides you through creating new CSS components following established patterns: - Semantic class naming - Tailwind utility composition via `@apply` - Dark mode support by default - Test coverage (static CSS + component rendering) - Composition over creation (reuse existing classes) **This is a sub-skill of `css-development`** - typically invoked automatically via the main skill. ## When This Skill Applies Use when: - Creating a new styled component (button, card, form field, etc.) - Adding new semantic CSS classes to components.css - Building reusable UI patterns - Need to ensure dark mode support and test coverage ## Pattern Reference This skill follows the patterns documented in the main `css-development` skill. Key patterns: **Semantic naming:** `.button-primary` not `.btn-blue` **Tailwind composition:** Use `@apply` to compose utilities **Dark mode:** Include `dark:` variants by default **Composition first:** Check if existing classes can be combined **Test coverage:** Static CSS tests + component rendering tests ## Workflow When this skill is invoked, create a TodoWrite checklist and work through it step-by-step. …
Read the whole file at its exact version.
How to install
mdr add aiskillstore/marketplace/css-development-create-component@sha256:9e6bbda04740f69fThe line at the top of this page pins the label git:20260113.222b7de, which is what most people want. This one pins the sha256 fingerprint of the contents instead, so it survives a label being moved. Either way the exact version is written to mdr.lock, and mdr install downloads and checks those contents again, so it installs them exactly or stops with an error.
[](https://markdownregistry.com/a/art_3il6ajbdkq2ffkfa)
4 badge image fetches in 30 days. What the badge shows.
Versions
The registry has recorded 1 version of this file, committed on Jan 13, 2026.
Audit of the latest version
- pass: Frontmatter block present
- pass: Frontmatter declares a name
- pass: Frontmatter declares a description
- pass: Size between 200 bytes and 200 KB (10962 bytes)
- pass: No zero-width or bidi control characters
- pass: No instruction hidden inside an HTML comment
- pass: No link to an exfiltration or paste host
- pass: No credential-shaped string
- pass: No instruction to send local credentials anywhere
- pass: No text hidden with inline styles
- pass: No prompt-injection phrasing
- pass: No curl or wget piped into a shell
- pass: No recursive delete of root, home or parent
- pass: No instruction to read or print local credentials
- pass: No base64 blob over 200 characters
- pass: No link to a raw IP address
- pass: No script tag
Source
aiskillstore/marketplace · 471 stars · license none declared · pushed 2026-11-08 · branch main
API
GET https://markdownregistry.com/api/v1/artifacts/art_3il6ajbdkq2ffkfa GET https://markdownregistry.com/api/v1/resolve?ref=aiskillstore/marketplace/css-development-create-component GET https://markdownregistry.com/api/v1/blob/9e6bbda04740f69f66f7d425dab7e0c2aa26fe263e9665205441fb2e2fdd711b
Your AI assistant does the legwork. You hear about the deals worth your word. Hand yours the standing instructions at modelranch.com and it joins the network that reads files like this one.
Guides: the SKILL.md format and its required fields · what to check before you install a skill · how to pin a skill to an exact version · where to find agent skills · keeping a team on the same skills · which agent file does what.
More from aiskillstore/marketplace
Every file in aiskillstore/marketplace