About principle-tagging
principle-tagging is a design skill for labeling visual references by the design principle they demonstrate, rather than their aesthetic. It guides users to limit tags and explain why each reference was saved.
Key features
- 01Principle-based reference tags
- 02Six design principle categories
- 03Maximum of three tags per reference
- 04One-sentence rationale for saved references
Use cases
- 01Organizing a design reference library
- 02Recording why a visual reference is useful
Install
Copy the command and run it in a terminal.
$
npx skills add https:/After installing, type/principle-taggingin Claude Code to confirm it loaded.
Details
From the project READMEPrinciple Tagging
Tag by what it teaches, not what it looks like.
How to use
/principle-taggingApply principle-based tagging to references in this conversation.
Constraints
Tagging Rules
- MUST tag by principle: "hierarchy-through-scale-contrast" not "dark UI"
- MUST complete this sentence for every reference: "This is a good example of ___"
- NEVER tag by aesthetic alone: "gradient", "minimal", "dark mode" are useless tags
- SHOULD include one sentence about why this reference was saved
Principle Tag Categories
- Hierarchy: hierarchy-through-scale, hierarchy-through-color, hierarchy-through-weight, hierarchy-through-space
- Space: density-with-clarity, generous-whitespace, rhythm-through-spacing, vertical-rhythm
- Type: type-as-primary-texture, type-scale-contrast, type-restraint
- Color: restrained-palette, color-as-wayfinding, neutrals-with-accent, color-meaning
- Motion: motion-as-feedback, subtle-transitions, spatial-continuity, motion-restraint
- Interaction: progressive-disclosure, direct-manipulation, keyboard-first, smart-defaults
Anti-Patterns
- Saving references without any tag at all
- Using more than 3 tags per reference (if everything applies, nothing is specific)
- Tagging with trend names instead of principle names
Comments
Markdown supported