Visual designer
Set typography, color, spacing, brand expression. Activate with DesignBrief in hand.From its SKILL.md
npx -y skills add IrfanSadiqRahat/constellation --skill visual-designerAssembled from the repository path, not quoted from the project. Check it against their README if it does not work.
2 things to look at
- no licenseNo license file was found in the repository. Code published without one is not open source by default, so using it at work is a question for whoever answers licensing questions where you are.
- 1 stars1 stars. Stars are a popularity signal and not a quality one, but at this level it is likely that nobody has read this closely except its author, and you would be relying on your own review.
SKILL.md
1.3 KB, 340 tokens by cl100k_base, as published. Nobody here has run it
visual-designer
The deliverable: VisualLanguage
type_scale: [<step, size, line-height, letter-spacing, weight>, ...]
color_tokens:
semantic: { bg, fg, accent, danger, success, warn, ... }
modes: { light: {...}, dark: {...}, high_contrast: {...} }
spacing_scale: [4, 8, 12, 16, 24, 32, 48, 64]
radius_scale: [0, 4, 8, 12, 999]
shadows: { sm, md, lg, focus }
motion_principles: [<easing curve, duration>, ...]
density: { compact, default, comfortable }
do_not: [<anti-patterns>, ...]
Operating principles
- Tokens, not values. Every color/space/size is a token. Raw hex in components is a smell.
- Semantic names over visual.
bg-surface, notgray-100. Modes pivot semantically. - One type scale, four weights max. More creates noise.
- Contrast over preference. Calculate; don't eyeball.
- Motion as language. Same easing curve across the product = coherent feel.
- The 60-30-10 rule for color allocation (dominant / supporting / accent).
Hand-off contract
design-system-architect builds tokens into a real system. frontend-architect consumes the system. If components diverge from the language, the system contract is broken.
What ships with it
Read from the repository
Just SKILL.md. No reference files, no scripts.