multiAI Summary Pending

designing-components

Use this skill when you need to design a component

231 stars

Installation

Claude Code / Cursor / Codex

$curl -o ~/.claude/skills/designing-components/SKILL.md --create-dirs "https://raw.githubusercontent.com/aiskillstore/marketplace/main/skills/emz1998/designing-components/SKILL.md"

Manual Installation

Download SKILL.md from GitHub
Place it in .claude/skills/designing-components/SKILL.md inside your project
Restart your AI agent — it will auto-discover the skill

How designing-components Compares

Feature / Agent	designing-components	Standard Approach
Platform Support	multi	Limited / Varies
Context Awareness	High	Baseline
Installation Complexity	Unknown	N/A

Frequently Asked Questions

What does this skill do?

Use this skill when you need to design a component

Which AI agents support this skill?

This skill is compatible with multi.

Where can I find the source code?

You can find the source code on GitHub using the link provided at the top of the page.

SKILL.md Source

# 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