penpot-rename-layers

You can automatically rename Penpot layers to semantic HTML element names or kebab-case role names by applying predefined renaming rules to your design file. The skill classifies layers and updates auto-generated names to semantic ones in small validated batches.

Semantic layer naming is needed for accessibility checks because it ensures layer names map to meaningful HTML elements or ARIA roles. This semantic structure is essential for clean code review, accurate code generation, and proper handoff processes.

Yes, you can batch rename auto-generated layer names without errors by processing them in small, validated batches. The skill builds a comprehensive layer inventory first, classifying names as auto-generated, semantic, or custom, to ensure accuracy during the renaming process.

Yes, semantic layer renaming requires access to the Penpot MCP and specific utility scripts. This connection allows the automated renaming process to interact directly with your Penpot files and apply the predefined naming conventions accurately.

The best way to prepare Penpot files for code generation and handoff is to rename all auto-generated layer names to standard semantic names. This process creates a clean layer inventory with meaningful kebab-case role names, ensuring a smooth developer handoff.

During the semantic renaming process, the skill builds a comprehensive inventory and classifies layers as auto-generated, semantic, or custom. It targets auto-generated names for renaming to semantic HTML elements, while identifying existing custom and semantic names.