designing-components

Emz1998's avatarfrom Emz1998

Use this skill when you need to design a component

⭐0stars🔀0forks📁View on GitHub🕐Updated Dec 11, 2025
[Code Generation]

When & Why to Use This Skill

This Claude skill streamlines the frontend development process by automating the design and implementation of UI components using Tailwind CSS 4.1. It ensures high-quality, maintainable code by strictly following modern CSS architectures, including the @layer components directive and custom utility definitions, while adhering to project-specific design principles and directory structures.

Use Cases

  • Rapid UI Component Scaffolding: Generate new, styled components in the src/components directory with automatically linked CSS files and Tailwind @apply directives.
  • Tailwind CSS 4.1 Implementation: Leverage the latest Tailwind features such as theme variables, custom variants, and advanced functions based on official v4.1 documentation and upgrade guides.
  • Design System Consistency: Ensure all new components align with established design principles and custom styles by referencing internal context files during the generation process.
  • Clean Code Architecture: Maintain a scalable project structure by isolating custom component logic and styles while protecting core UI library files from unintended changes.
namedesigning-components
descriptionUse 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