Skills
.Work. You
Rest

designing-components

Community

Design consistent, modular UI components.

Software Engineering#React#code style#Next.js#UI development#Tailwind CSS#frontend development#component design
AuthorEmz1998
Version1.0.0
Installs0

System Documentation

What problem does it solve?

This Skill provides a structured approach for designing and styling UI components, ensuring consistency, modularity, and adherence to Tailwind CSS best practices. It guides the use of @apply and @layer components directives, and specifies component creation locations to maintain a clean codebase.

Core Features & Use Cases

  • Tailwind CSS Best Practices: Enforces modularity, separate CSS files, and use of @apply and @layer components.
  • Tailwind v4.1 Context: Directs to specific documentation for design principles, custom styles, functions, and directives.
  • Component Creation Guidelines: Specifies where to create new components (srs/components) and what not to touch (srs/components/ui).
  • Use Case: When building a new UI component for a Next.js app, use this skill to ensure all Tailwind CSS styling follows the project's conventions, including using nested classes and custom utilities.

Quick Start

Design a new card component in srs/components, creating a separate CSS file and using Tailwind CSS @layer components for styling.

Dependency Matrix

Required Modules

None required

Components

Standard package

💻 Claude Code Installation

Recommended: Let Claude install automatically. Simply copy and paste the text below to Claude Code.

Please help me install this Skill:
Name: designing-components
Download link: https://github.com/Emz1998/nexly-notes/archive/main.zip#designing-components

Please download this .zip file, extract it, and install it in the .claude/skills/ directory.
View Source Repository

Agent Skills Search Helper

Install a tiny helper to your Agent, search and equip skill from 223,000+ vetted skills library on demand.