Agent skill · design visual · aiskillstore
designing-components
Use this skill when you need to design a component
Why this skill is useful
Codifies specific Tailwind CSS component design rules that the AI could infer but now doesn't have to guess.
What it needs
About 1k tokens when loaded. Last updated 2026-08-07. 405 stars on the source repository.
What this skill does
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
How to use it
Reference it in AdaL, Claude Code, Cursor or any coding agent — nothing to install:
@skills aiskillstore/designing-components