Marketplace designing-components

Name: designing-components
Author: aiskillstore

Use this skill when you need to design a component

install

source · Clone the upstream repo

git clone https://github.com/aiskillstore/marketplace

Claude Code · Install into ~/.claude/skills/

T=$(mktemp -d) && git clone --depth=1 https://github.com/aiskillstore/marketplace "$T" && mkdir -p ~/.claude/skills && cp -r "$T/skills/emz1998/designing-components" ~/.claude/skills/aiskillstore-marketplace-designing-components && rm -rf "$T"

manifest: skills/emz1998/designing-components/SKILL.md

source content

Instructions

Follow the rules below to design a component:

Rules

Create a seperate css file to style the component
Use the tailwind
```
apply
```
directive to style the component
Use the
```
@layer components
```
directive to style the component

For tailwind 4.1 context, read the following docs:

.claude/context/tailwind/tw-v4-theme-variable.md

to get the design principles

.claude/context/tailwind/tw-v4-custom-styles.md

to get the custom styles

.claude/context/tailwind/tw-v4-function-and-directives.md

to get the functions and directives

.claude/context/tailwind/tw-v4-detecting-classes-in-source-files.md

to get the detecting classes in source files

.claude/context/tailwind/tw-v4-upgrade-guide.md

to get the upgrade guide

Use nested classes in
```
@layer components
```
for styling parents and children elements
Use @utility directives to add custom utilities to the component
Use @variant directives to add custom variants to the component
Create a new component in
```
srs/components
```
root directory
Never touch the files in
```
srs/components/ui
```
directory