---

name: designing-components description: Use this skill when you need to design a component

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